useProjectSwitchCommand() — supabase Function Reference

Architecture documentation for the useProjectSwitchCommand() function in OrgProjectSwitcher.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl called by 1

Entity Profile

ContentManagement→ AccessControl→ useProjectSwitchCommand() — supabase Function Reference

Dependency Diagram

graph TD
  5992b451_4264_933c_0f67_9fe2377d5db4["useProjectSwitchCommand()"]
  7902296a_39c1_2b01_0b22_d5c1b0ad688b["StudioCommandMenu()"]
  7902296a_39c1_2b01_0b22_d5c1b0ad688b -->|calls| 5992b451_4264_933c_0f67_9fe2377d5db4
  style 5992b451_4264_933c_0f67_9fe2377d5db4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx lines 13–56

export function useProjectSwitchCommand() {
  const setPage = useSetPage()

  // [Joshen] Using paginated data here which means we won't be showing all projects
  // Ideally we somehow support searching with Cmd K if we want to make this ideal
  // e.g Cmd K input to support async searching while in "switch project" state
  const { data } = useProjectsInfiniteQuery({}, { enabled: IS_PLATFORM })
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || []

  useRegisterPage(
    PROJECT_SWITCHER_PAGE_NAME,
    {
      type: PageType.Commands,
      sections: [
        {
          id: 'switch-project',
          name: 'Switch project',
          commands: projects.map(({ name, ref }) => ({
            id: `project-${ref}`,
            name,
            value: `${name} (${ref})`,
            route: `/project/${ref}`,
            icon: () => <Forward />,
          })),
        },
      ],
    },
    { deps: [projects], enabled: !!projects && projects.length > 0 }
  )

  useRegisterCommands(
    COMMAND_MENU_SECTIONS.ACTIONS,
    [
      {
        id: 'switch-project',
        name: 'Switch project...',
        value: 'Switch project, Change project, Select project',
        action: () => setPage(PROJECT_SWITCHER_PAGE_NAME),
        icon: () => <Wrench />,
      },
    ],
    { enabled: !!projects && projects.length > 0 }
  )
}