konnosDashboard
OrgProjectSwitcher.tsx98 lines · main
1import { IS_PLATFORM } from 'common'
2import { Building, Forward, Wrench } from 'lucide-react'
3import { useMemo } from 'react'
4import { PageType, useRegisterCommands, useRegisterPage, useSetPage } from 'ui-patterns/CommandMenu'
5
6import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
7import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
8import { useProjectsInfiniteQuery } from '@/data/projects/projects-infinite-query'
9
10const PROJECT_SWITCHER_PAGE_NAME = 'Switch project'
11const ORGANIZATION_SWITCHER_PAGE_NAME = 'Configure organization'
12
13export function useProjectSwitchCommand() {
14 const setPage = useSetPage()
15
16 // [Joshen] Using paginated data here which means we won't be showing all projects
17 // Ideally we somehow support searching with Cmd K if we want to make this ideal
18 // e.g Cmd K input to support async searching while in "switch project" state
19 const { data } = useProjectsInfiniteQuery({}, { enabled: IS_PLATFORM })
20 const projects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || []
21
22 useRegisterPage(
23 PROJECT_SWITCHER_PAGE_NAME,
24 {
25 type: PageType.Commands,
26 sections: [
27 {
28 id: 'switch-project',
29 name: 'Switch project',
30 commands: projects.map(({ name, ref }) => ({
31 id: `project-${ref}`,
32 name,
33 value: `${name} (${ref})`,
34 route: `/project/${ref}`,
35 icon: () => <Forward />,
36 })),
37 },
38 ],
39 },
40 { deps: [projects], enabled: !!projects && projects.length > 0 }
41 )
42
43 useRegisterCommands(
44 COMMAND_MENU_SECTIONS.ACTIONS,
45 [
46 {
47 id: 'switch-project',
48 name: 'Switch project...',
49 value: 'Switch project, Change project, Select project',
50 action: () => setPage(PROJECT_SWITCHER_PAGE_NAME),
51 icon: () => <Wrench />,
52 },
53 ],
54 { enabled: !!projects && projects.length > 0 }
55 )
56}
57
58export function useConfigureOrganizationCommand() {
59 const setPage = useSetPage()
60
61 const { data: organizations } = useOrganizationsQuery({ enabled: IS_PLATFORM })
62
63 useRegisterPage(
64 ORGANIZATION_SWITCHER_PAGE_NAME,
65 {
66 type: PageType.Commands,
67 sections: [
68 {
69 id: 'configure-organization',
70 name: 'Configure organization',
71 commands:
72 organizations?.map(({ name, slug }) => ({
73 id: `organization-${slug}`,
74 name,
75 value: `${name} (${slug})`,
76 route: `/org/${slug}/general`,
77 icon: () => <Building />,
78 })) ?? [],
79 },
80 ],
81 },
82 { deps: [organizations], enabled: !!organizations && organizations.length > 0 }
83 )
84
85 useRegisterCommands(
86 COMMAND_MENU_SECTIONS.ACTIONS,
87 [
88 {
89 id: 'configure-organization',
90 name: 'Configure organization...',
91 value: 'Configure organization, Change organization, Select organization',
92 action: () => setPage(ORGANIZATION_SWITCHER_PAGE_NAME),
93 icon: () => <Building />,
94 },
95 ],
96 { enabled: !!organizations && organizations.length > 0 }
97 )
98}