From 458aee5c449bd397accecaa729644dbcf1a660c3 Mon Sep 17 00:00:00 2001 From: Rodrigo Arze Leon Date: Fri, 18 Oct 2024 19:12:49 -0400 Subject: [PATCH] Update connection portal to use tabs for default content --- .../components/ConnectionPortal.tsx | 204 ++++++++++-------- 1 file changed, 119 insertions(+), 85 deletions(-) diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx index e946a3877..0b0b8e432 100644 --- a/packages/engine-frontend/components/ConnectionPortal.tsx +++ b/packages/engine-frontend/components/ConnectionPortal.tsx @@ -1,11 +1,10 @@ 'use client' -import {Link, Loader, Settings} from 'lucide-react' +import {Loader, Settings} from 'lucide-react' import type {Id} from '@openint/cdk' import type {UIPropsNoChildren} from '@openint/ui' import { Badge, - Card, ConnectorLogo, DropdownMenu, DropdownMenuContent, @@ -14,6 +13,7 @@ import { Separator, useToast, } from '@openint/ui' +import {Tabs, TabsContent, TabsList, TabsTrigger} from '@openint/ui/shadcn/Tabs' import {cn} from '@openint/ui/utils' import {R} from '@openint/util' import {WithConnectConfig} from '../hocs/WithConnectConfig' @@ -80,97 +80,131 @@ export function ConnectionPortal({className}: ConnectionPortalProps) { return (
{/* Listing by categories */} - 0} /> - -
- -

- Connectors -

-
- {listConnectionsRes.isLoading ? ( -
- -
- ) : ( - categoriesWithConnections.map((category) => ( -
- {category.connections.map((conn) => ( - <> + + + + My Connections ({connectionCount}) + + + Add a Connection + + + + {connectionCount === 0 ? ( +
+
+

+ No connections yet +

+

+ Add a connection to get started +

+
+ +
+ ) : ( +
+ {listConnectionsRes.isLoading ? ( +
+ +
+ ) : ( + categoriesWithConnections.map((category) => (
-
- -
-
-

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

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

Syncing...

+ key={category.name} + className="flex flex-col space-y-4"> + {category.connections.map((conn) => ( + <> +
+
+ +
+
+

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

+ + {category.name} +
- ) : ( -

Successfully synced

- )} + {conn.pipelineIds.length > 0 && ( +
+ {conn.syncInProgress ? ( +
+ +

+ Syncing... +

+
+ ) : ( +

Successfully synced

+ )} +
+ )} +
- )} -
-
- - - - - - - deleteResource.mutate({id: conn.id}) - }> - - Delete - - - - + + + + + + + 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 */} + + + ))}
- {/* 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 */} - - - ))} + )) + )}
- )) - )} - - + )} + + +
+
+

+ Setup a new Connection +

+

+ Choose a connector config to start +

+
+ +
+ +
) }} ) } - -const NewConnectionCard = ({hasExisting}: {hasExisting: boolean}) => ( -
-

- {hasExisting ? 'Connect another integration' : 'No integration connected'} -

-
-)