feat: create new table command (#28647)

apps/studio/components/interfaces/App/CommandMenu/CommandMenu.tsx

@@ -2,6 +2,7 @@ import { IS_PLATFORM } from 'common'
 import { useBranchCommands } from 'components/interfaces/BranchManagement/Branch.Commands'
 import { useSnippetCommands } from 'components/layouts/SQLEditorLayout/SqlEditor.Commands'
 import { useGenerateSqlCommand } from 'components/interfaces/SqlGenerator/SqlGenerator.Commands'
+import { useProjectLevelTableEditorCommands } from 'components/layouts/TableEditorLayout/TableEditor.Commands'
 import { useLayoutNavCommands } from 'components/layouts/useLayoutNavCommands'
 import { CommandHeader, CommandInput, CommandList, CommandMenu } from 'ui-patterns/CommandMenu'
 import { useChangelogCommand } from 'ui-patterns/CommandMenu/prepackaged/Changelog'
@@ -18,6 +19,7 @@ export default function StudioCommandMenu() {
   useGenerateSqlCommand()
   useApiKeysCommands()
   useApiUrlCommand()
+  useProjectLevelTableEditorCommands()
   useProjectSwitchCommand()
   useBranchCommands()
   useSnippetCommands()

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx

@@ -18,6 +18,7 @@ import {
 } from 'data/database/foreign-key-constraints-query'
 import { useEnumeratedTypesQuery } from 'data/enumerated-types/enumerated-types-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
+import { useUrlState } from 'hooks/ui/useUrlState'
 import { EXCLUDED_SCHEMAS_WITHOUT_EXTENSIONS } from 'lib/constants/schemas'
 import { ExternalLink } from 'lucide-react'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
@@ -80,6 +81,14 @@ const TableEditor = ({
   const isNewRecord = isUndefined(table)
   const realtimeEnabled = useIsFeatureEnabled('realtime:all')
 
+  const [params, setParams] = useUrlState()
+  useEffect(() => {
+    if (params.create === 'table' && snap.ui.open === 'none') {
+      snap.onAddTable()
+      setParams({ ...params, create: undefined })
+    }
+  }, [snap, params, setParams])
+
   const { data: types } = useEnumeratedTypesQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,

apps/studio/components/layouts/AuthLayout/Auth.Commands.tsx

@@ -24,6 +24,7 @@ export function useAuthGotoCommands(options?: CommandOptions) {
     {
       ...options,
       deps: [ref],
+      enabled: (options?.enabled ?? true) && ref !== '_',
       orderSection: orderCommandSectionsByPriority,
       sectionMeta: { priority: 3 },
     }

apps/studio/components/layouts/TableEditorLayout/TableEditor.Commands.tsx

@@ -1,11 +1,36 @@
-import { Table } from 'lucide-react'
+import { Table2 } from 'lucide-react'
 
 import { useParams } from 'common'
 import { COMMAND_MENU_SECTIONS } from 'components/interfaces/App/CommandMenu/CommandMenu.utils'
 import { orderCommandSectionsByPriority } from 'components/interfaces/App/CommandMenu/ordering'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import type { CommandOptions } from 'ui-patterns/CommandMenu'
 import { useRegisterCommands } from 'ui-patterns/CommandMenu'
 
+export function useProjectLevelTableEditorCommands(options?: CommandOptions) {
+  let project = useSelectedProject()
+  const ref = project?.ref || '_'
+
+  useRegisterCommands(
+    COMMAND_MENU_SECTIONS.ACTIONS,
+    [
+      {
+        id: 'create-table',
+        name: 'Create new table',
+        route: `/project/${ref}/editor?create=table`,
+        icon: () => <Table2 />,
+      },
+    ],
+    {
+      ...options,
+      deps: [ref],
+      enabled: (options?.enabled ?? true) && !!project,
+      orderSection: orderCommandSectionsByPriority,
+      sectionMeta: { priority: 3 },
+    }
+  )
+}
+
 export function useTableEditorGotoCommands(options?: CommandOptions) {
   let { ref } = useParams()
   ref ||= '_'
@@ -14,10 +39,10 @@ export function useTableEditorGotoCommands(options?: CommandOptions) {
     COMMAND_MENU_SECTIONS.ACTIONS,
     [
       {
-        id: 'view-data',
-        name: 'View your data',
+        id: 'view-tables',
+        name: 'View your tables',
         route: `/project/${ref}/editor`,
-        icon: () => <Table />,
+        icon: () => <Table2 />,
       },
     ],
     {

apps/studio/hooks/ui/useUrlState.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'
+import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react'
 
 export type UrlStateParams = {
   [k: string]: string | string[] | undefined