Files
supabase/apps/studio/components/layouts/DatabaseLayout/Database.Commands.tsx
T
Joshen Lim 09a1f431bc Mass update for all lucide icon imports to use the component with Icon suffix (#51659)
## Context

This is largely just a mechanical change here:
Opting to use lucide icons with the `Icon` suffix across all icon
imports within `studio`
- so that it’s clearer which components are icons + reduces the
possibility of name collision with our own components
- e.g <User /> vs <UserIcon />

Also added a eslint rule for this:
<img width="1069" height="167" alt="image"
src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc"
/>

And updated `AGENTS.md` as such:
```
Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced).
```
2026-10-14 12:56:55 +02:00

204 lines
5.8 KiB
TypeScript

import { useParams } from 'common'
import { BlocksIcon, CodeIcon, DatabaseIcon, HistoryIcon, SearchIcon } from 'lucide-react'
import type { CommandOptions } from 'ui-patterns/CommandMenu'
import { useRegisterCommands } from 'ui-patterns/CommandMenu'
import { IRouteCommand } from 'ui-patterns/CommandMenu/internal/types'
import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
export function useDatabaseGotoCommands(options?: CommandOptions) {
let { ref } = useParams()
ref ||= '_'
const { databaseReplication, databaseRoles, integrationsWrappers } = useIsFeatureEnabled([
'database:replication',
'database:roles',
'integrations:wrappers',
])
useRegisterCommands(
COMMAND_MENU_SECTIONS.QUERY,
[
{
id: 'run-sql',
name: 'Run SQL',
route: `/project/${ref}/sql/new`,
icon: () => <CodeIcon />,
},
],
{
...options,
deps: [ref],
orderSection: orderCommandSectionsByPriority,
sectionMeta: { priority: 2 },
}
)
useRegisterCommands(
COMMAND_MENU_SECTIONS.NAVIGATE,
[
{
id: 'nav-database-tables',
name: 'Tables',
value: 'Database: Tables',
route: `/project/${ref}/database/tables`,
defaultHidden: true,
},
{
id: 'nav-database-triggers',
name: 'Triggers',
value: 'Database: Triggers',
route: `/project/${ref}/database/triggers`,
defaultHidden: true,
},
{
id: 'nav-database-functions',
name: 'Functions',
value: 'Database: Functions',
route: `/project/${ref}/database/functions`,
defaultHidden: true,
},
{
id: 'nav-database-policies',
name: 'Policies',
value: 'Database: Policies (RLS)',
route: `/project/${ref}/database/policies`,
defaultHidden: true,
},
{
id: 'nav-database-extensions',
name: 'Extensions',
value: 'Database: Extensions',
route: `/project/${ref}/database/extensions`,
defaultHidden: true,
},
...(databaseRoles
? [
{
id: 'nav-database-roles',
name: 'Roles',
value: 'Database: Roles',
route: `/project/${ref}/database/roles`,
defaultHidden: true,
} as IRouteCommand,
]
: []),
...(databaseReplication
? [
{
id: 'nav-database-replication',
name: 'Pipelines',
value: 'Database: Pipelines',
route: `/project/${ref}/database/pipelines`,
defaultHidden: true,
} as IRouteCommand,
]
: []),
{
id: 'nav-database-backups',
name: 'Backups',
value: 'Database: Backups',
route: `/project/${ref}/database/backups/scheduled`,
defaultHidden: true,
},
...(integrationsWrappers
? [
{
id: 'nav-database-wrappers',
name: 'Wrappers',
value: 'Database: Wrappers',
route: `/project/${ref}/integrations?category=wrappers`,
defaultHidden: true,
} as IRouteCommand,
]
: []),
{
id: 'nav-database-migrations',
name: 'Migrations',
value: 'Database: Migrations',
route: `/project/${ref}/database/migrations`,
defaultHidden: true,
},
],
{ ...options, deps: [ref] }
)
useRegisterCommands(
COMMAND_MENU_SECTIONS.DATABASE,
[
{
id: 'run-schema-visualizer',
name: 'View your schemas',
route: `/project/${ref}/database/schemas`,
icon: () => <SearchIcon />,
},
{
id: 'run-view-database-functions',
name: 'View and create functions',
route: `/project/${ref}/database/functions`,
icon: () => <DatabaseIcon />,
},
{
id: 'run-view-database-triggers',
name: 'View and create triggers',
route: `/project/${ref}/database/triggers`,
icon: () => <DatabaseIcon />,
},
{
id: 'run-view-database-enumerated-types',
name: 'View and create enumerated types',
route: `/project/${ref}/database/types`,
icon: () => <DatabaseIcon />,
},
{
id: 'run-view-database-extensions',
name: 'View your extensions',
route: `/project/${ref}/database/extensions`,
icon: () => <BlocksIcon />,
},
{
id: 'run-view-database-indexes',
name: 'View and create indexes',
route: `/project/${ref}/database/indexes`,
icon: () => <DatabaseIcon />,
},
{
id: 'run-view-database-policies',
name: 'View and create RLS policies',
route: `/project/${ref}/database/policies`,
icon: () => <DatabaseIcon />,
},
...(databaseRoles
? [
{
id: 'run-view-database-roles',
name: 'View your roles',
route: `/project/${ref}/database/roles`,
icon: () => <DatabaseIcon />,
} as IRouteCommand,
]
: []),
{
id: 'run-view-database-backups',
name: 'View your backups',
route: `/project/${ref}/database/backups/scheduled`,
icon: () => <DatabaseIcon />,
},
{
id: 'run-view-database-migrations',
name: 'View your migrations',
route: `/project/${ref}/database/migrations`,
icon: () => <HistoryIcon />,
},
],
{
...options,
deps: [ref],
orderSection: orderCommandSectionsByPriority,
sectionMeta: { priority: 3 },
}
)
}