diff --git a/packages/engine-frontend/components/AddConnectionTabContent.tsx b/packages/engine-frontend/components/AddConnectionTabContent.tsx new file mode 100644 index 00000000..7267fec8 --- /dev/null +++ b/packages/engine-frontend/components/AddConnectionTabContent.tsx @@ -0,0 +1,29 @@ +import type {ConnectorConfigFilters} from '../hocs/WithConnectConfig' +import {ConnectIntegrations} from './ConnectIntegrations' + +interface AddConnectionTabContentProps { + connectorConfigFilters: ConnectorConfigFilters + refetch: () => void +} + +export function AddConnectionTabContent({ + connectorConfigFilters, + refetch, +}: AddConnectionTabContentProps) { + return ( +
+
+

Setup a new Connection

+

Choose a connector config to start

+
+ { + if (event.type === 'close') { + refetch() + } + }} + /> +
+ ) +} diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx index 7e07f9d6..f558029d 100644 --- a/packages/engine-frontend/components/ConnectionPortal.tsx +++ b/packages/engine-frontend/components/ConnectionPortal.tsx @@ -1,25 +1,15 @@ 'use client' -import {Loader, Settings} from 'lucide-react' import type {Id} from '@openint/cdk' import type {UIPropsNoChildren} from '@openint/ui' -import { - Badge, - ConnectorLogo, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Separator, - useToast, -} from '@openint/ui' +import {useToast} from '@openint/ui' import {Tabs} from '@openint/ui/components/Tabs' import {cn} from '@openint/ui/utils' import {R} from '@openint/util' import {WithConnectConfig} from '../hocs/WithConnectConfig' import {_trpcReact} from '../providers/TRPCProvider' -import {ConnectDialog} from './ConnectDialog' -import {ConnectIntegrations} from './ConnectIntegrations' +import {AddConnectionTabContent} from './AddConnectionTabContent' +import {ConnectionsTabContent} from './ConnectionsTabContent' type ConnectEventType = 'open' | 'close' | 'error' @@ -82,130 +72,30 @@ export function ConnectionPortal({className}: ConnectionPortalProps) { { key: 'connections', title: `My Connections (${connectionCount})`, - content: - connectionCount === 0 ? ( -
-
-

- No connections yet -

-

Add a connection to get started

-
- { - if (event.type === 'close') { - listConnectionsRes.refetch() // Trigger refetch - } - }}> -
- ) : ( -
- {listConnectionsRes.isLoading ? ( -
- -
- ) : ( - categoriesWithConnections.map((category) => ( -
- {category.connections.map((conn) => ( - <> -
-
- -
-
-

- {conn.connectorName - .charAt(0) - .toUpperCase() + - conn.connectorName.slice(1)} -

- - {category.name} - -
- {conn.pipelineIds.length > 0 && ( -
- {conn.syncInProgress ? ( -
- -

- Syncing... -

-
- ) : ( -

Successfully synced

- )} -
- )} -
-
- - - - - - - deleteResource.mutate({id: conn.id}) - }> - - Delete - - - - -
- {/* TODO: Improve the condition to hide the separator for the last item, right now it iterates - over all categories and all connections, would be good to have a single array of connections with the category - information included already */} - - - ))} -
- )) - )} -
- ), + content: ( + + ), }, { key: 'add-connection', title: 'Add a Connection', content: ( -
-
-

- Setup a new Connection -

-

- Choose a connector config to start -

-
- { - if (event.type === 'close') { - listConnectionsRes.refetch() // Trigger refetch - } - }} - /> -
+ ), }, ] return ( -
+
) diff --git a/packages/engine-frontend/components/ConnectionsTabContent.tsx b/packages/engine-frontend/components/ConnectionsTabContent.tsx new file mode 100644 index 00000000..fa2e274e --- /dev/null +++ b/packages/engine-frontend/components/ConnectionsTabContent.tsx @@ -0,0 +1,120 @@ +import {Loader, Settings} from 'lucide-react' +import { + Badge, + ConnectorLogo, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + Separator, +} from '@openint/ui' +import type {ConnectorConfig} from '../hocs/WithConnectConfig' +import {ConnectDialog} from './ConnectDialog' + +interface ConnectionsTabContentProps { + connectionCount: number + categoriesWithConnections: Array<{ + name: string + connections: Array<{ + id: string + connectorConfig: ConnectorConfig + connectorName: string + pipelineIds: string[] + syncInProgress: boolean + }> + }> + refetch: () => void + isLoading: boolean + deleteResource: ({id}: {id: string}) => void +} + +export function ConnectionsTabContent({ + connectionCount, + refetch, + isLoading, + deleteResource, + categoriesWithConnections, +}: ConnectionsTabContentProps) { + return connectionCount === 0 ? ( +
+
+

No connections yet

+

Add a connection to get started

+
+ { + if (event.type === 'close') { + refetch() // Trigger refetch + } + }}> +
+ ) : ( +
+ {isLoading ? ( +
+ +
+ ) : ( + categoriesWithConnections.map((category) => ( +
+ {category.connections.map((conn) => ( + <> +
+
+ +
+
+

+ {conn.connectorName.charAt(0).toUpperCase() + + conn.connectorName.slice(1)} +

+ {category.name} +
+ {conn.pipelineIds.length > 0 && ( +
+ {conn.syncInProgress ? ( +
+ +

Syncing...

+
+ ) : ( +

Successfully synced

+ )} +
+ )} +
+
+ + + + + + deleteResource({id: conn.id})}> + + Delete + + + + +
+ {/* TODO: Improve the condition to hide the separator for the last item, right now it iterates + over all categories and all connections, would be good to have a single array of connections with the category + information included already */} + + + ))} +
+ )) + )} +
+ ) +}