Skip to content
This repository has been archived by the owner on Oct 31, 2024. It is now read-only.

Commit

Permalink
Update connection portal to use tabs for default content
Browse files Browse the repository at this point in the history
  • Loading branch information
Rodrigo Arze Leon authored and Rodrigo Arze Leon committed Oct 18, 2024
1 parent 83f122b commit 458aee5
Showing 1 changed file with 119 additions and 85 deletions.
204 changes: 119 additions & 85 deletions packages/engine-frontend/components/ConnectionPortal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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'
Expand Down Expand Up @@ -80,97 +80,131 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
return (
<div className={cn('gap-4 p-8', className)}>
{/* Listing by categories */}
<NewConnectionCard hasExisting={connectionCount > 0} />
<Card className="flex w-[500px] flex-col justify-between space-y-4 p-4">
<div className="flex flex-row items-center justify-start gap-2">
<Link className="size-6 text-[#8A5DF6]" />
<h3 className="text-xl font-semibold tracking-tight">
Connectors
</h3>
</div>
{listConnectionsRes.isLoading ? (
<div className="flex h-full items-center justify-center">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
</div>
) : (
categoriesWithConnections.map((category) => (
<div key={category.name} className="flex flex-col space-y-4">
{category.connections.map((conn) => (
<>
<Tabs defaultValue="connections" className="w-[400px]">
<TabsList>
<TabsTrigger value="connections">
My Connections ({connectionCount})
</TabsTrigger>
<TabsTrigger value="add-connection">
Add a Connection
</TabsTrigger>
</TabsList>
<TabsContent value="connections">
{connectionCount === 0 ? (
<div className="flex flex-col gap-2 p-4">
<div>
<p className="text-base font-semibold">
No connections yet
</p>
<p className="text-base">
Add a connection to get started
</p>
</div>
<ConnectButton
// className="bg-purple-400 hover:bg-purple-500"
className="w-[80px] bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}
/>
</div>
) : (
<div className="p-4">
{listConnectionsRes.isLoading ? (
<div className="flex h-full items-center justify-center">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
</div>
) : (
categoriesWithConnections.map((category) => (
<div
key={conn.id}
className="flex flex-row justify-between gap-4">
<div className="flex flex-row gap-4">
<ConnectorLogo
connector={conn.connectorConfig.connector}
className="size-[64px] rounded-lg"
/>
<div className="flex flex-col h-full justify-center">
<div className="flex flex-row gap-2 items-center">
<h4 className="font-bold">
{conn.connectorName.charAt(0).toUpperCase() +
conn.connectorName.slice(1)}
</h4>
<Badge variant="secondary">
{category.name}
</Badge>
</div>
{conn.pipelineIds.length > 0 && (
<div className="mt-2">
{conn.syncInProgress ? (
<div className="flex flex-row items-center justify-start gap-2">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
<p className="font-semibold">Syncing...</p>
key={category.name}
className="flex flex-col space-y-4">
{category.connections.map((conn) => (
<>
<div
key={conn.id}
className="flex flex-row justify-between gap-4">
<div className="flex flex-row gap-4">
<ConnectorLogo
connector={conn.connectorConfig.connector}
className="size-[64px] rounded-lg"
/>
<div className="flex h-full flex-col justify-center">
<div className="flex flex-row items-center gap-2">
<h4 className="font-bold">
{conn.connectorName
.charAt(0)
.toUpperCase() +
conn.connectorName.slice(1)}
</h4>
<Badge variant="secondary">
{category.name}
</Badge>
</div>
) : (
<p>Successfully synced</p>
)}
{conn.pipelineIds.length > 0 && (
<div className="mt-2">
{conn.syncInProgress ? (
<div className="flex flex-row items-center justify-start gap-2">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
<p className="font-semibold">
Syncing...
</p>
</div>
) : (
<p>Successfully synced</p>
)}
</div>
)}
</div>
</div>
)}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger>
<Settings className="size-5 text-[#808080]" />
</DropdownMenuTrigger>
<DropdownMenuContent className="flex w-[80px] items-center justify-center">
<DropdownMenuItem
className="flex items-center justify-center"
onSelect={() =>
deleteResource.mutate({id: conn.id})
}>
<span className="text-center font-medium text-red-500">
Delete
</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger>
<Settings className="size-5 text-[#808080]" />
</DropdownMenuTrigger>
<DropdownMenuContent className="flex w-[80px] items-center justify-center">
<DropdownMenuItem
className="flex items-center justify-center"
onSelect={() =>
deleteResource.mutate({id: conn.id})
}>
<span className="text-center font-medium text-red-500">
Delete
</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* 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 */}
<Separator className="w-full" />
</>
))}
</div>
{/* 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 */}
<Separator className="w-full" />
</>
))}
))
)}
</div>
))
)}
<ConnectButton
// className="bg-purple-400 hover:bg-purple-500"
className="self-end bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}></ConnectButton>
</Card>
)}
</TabsContent>
<TabsContent value="add-connection">
<div className="flex flex-col gap-2 p-4">
<div>
<p className="text-base font-semibold">
Setup a new Connection
</p>
<p className="text-base">
Choose a connector config to start
</p>
</div>
<ConnectButton
// className="bg-purple-400 hover:bg-purple-500"
className="w-[80px] bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}
/>
</div>
</TabsContent>
</Tabs>
</div>
)
}}
</WithConnectConfig>
)
}

const NewConnectionCard = ({hasExisting}: {hasExisting: boolean}) => (
<div className="mb-4 flex flex-col items-start justify-center space-y-3 text-center">
<h3 className="text-[24px] font-semibold">
{hasExisting ? 'Connect another integration' : 'No integration connected'}
</h3>
</div>
)

0 comments on commit 458aee5

Please sign in to comment.