konnosDashboard
Integrations.Commands.tsx71 lines · main
1import { useParams } from 'common'
2import type { CommandOptions } from 'ui-patterns/CommandMenu'
3import { useRegisterCommands } from 'ui-patterns/CommandMenu'
4
5import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
6import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
7import {
8 IntegrationDefinition,
9 INTEGRATIONS,
10} from '@/components/interfaces/Integrations/Landing/Integrations.constants'
11import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
12
13export function useIntegrationsGotoCommands(options?: CommandOptions) {
14 let { ref } = useParams()
15 ref ||= '_'
16
17 const { integrationsWrappers } = useIsFeatureEnabled(['integrations:wrappers'])
18
19 const allIntegrations = integrationsWrappers
20 ? INTEGRATIONS
21 : INTEGRATIONS.filter((x) => !x.id.endsWith('_wrapper'))
22
23 const getName = (integration: IntegrationDefinition) => {
24 switch (integration.id) {
25 case 'cron':
26 return 'View and manage your Cron Jobs'
27 case 'graphiql':
28 return 'Query database using GraphQL'
29 case 'vault':
30 return 'View and manage your keys and secrets via Vault'
31 default:
32 return `View and manage your ${integration.name}${integration.type === 'wrapper' ? 's' : ''}`
33 }
34 }
35
36 useRegisterCommands(
37 COMMAND_MENU_SECTIONS.NAVIGATE,
38 allIntegrations.map((x) => {
39 return {
40 id: `nav-integrations-${x.id}`,
41 name: x.name,
42 value: `Integrations: ${x.name}`,
43 route: `/project/${ref}/integrations/${x.id}/overview`,
44 defaultHidden: true,
45 }
46 }),
47 { ...options, deps: [ref] }
48 )
49
50 useRegisterCommands(
51 COMMAND_MENU_SECTIONS.INTEGRATIONS,
52 allIntegrations.map((x) => {
53 return {
54 id: `manage-${x.id}`,
55 name: getName(x),
56 route: `/project/${ref}/integrations/${x.id}/overview`,
57 icon: () => (
58 <div className="w-6 h-6 relative bg-white border rounded-md flex items-center justify-center [&>img]:p-1! [&>svg]:p-1!">
59 {x.icon()}
60 </div>
61 ),
62 }
63 }),
64 {
65 ...options,
66 deps: [ref],
67 orderSection: orderCommandSectionsByPriority,
68 sectionMeta: { priority: 3 },
69 }
70 )
71}