Update default layout for connect screen

apps/web/app/global.css

@@ -39,6 +39,9 @@
     --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
+
+    --button: #8a5df6;
+    --button-foreground: #ffffff;
   }
 
   .dark {

apps/web/components/ColorConfig.tsx

@@ -5,6 +5,8 @@ import {useState} from 'react'
 interface ThemeColors {
   background: string
   border: string
+  button: string
+  buttonForeground: string
   foreground: string
   primary: string
   primaryForeground: string
@@ -14,7 +16,7 @@ interface ThemeColors {
   cardForeground: string
 }
 
-const defaultThemeColors: ThemeColors = {
+const defaultThemeColors: Partial<ThemeColors> = {
   background: '0 0% 100%',
   border: '214.3 31.8% 91.4%',
   card: '0 0% 100%',

apps/web/tailwind.config.ts

@@ -1,6 +1,5 @@
 import type {Config} from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
-
 import {VeniceTheme} from './themes'
 
 export default {
@@ -83,6 +82,10 @@ export default {
       colors: {
         // --- Begin shadcn tailwind config
         border: 'hsl(var(--border))',
+        button: {
+          DEFAULT: 'var(--button)',
+          foreground: 'var(--button-foreground)',
+        },
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',

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 (
           <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>
-)

packages/ui/shadcn/Tabs.tsx

@@ -0,0 +1,55 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import React from 'react'
+import {cn} from '../utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({className, ...props}, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'bg-button-foreground inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({className, ...props}, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-[40px] py-1.5 text-base font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:border-button data-[state=active]:bg-button-foreground data-[state=active]:text-button data-[state=active]:border-b-2',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'data-[state=active]:focus-visible:ring-0 data-[state=active]:focus-visible:ring-offset-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({className, ...props}, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export {Tabs, TabsList, TabsTrigger, TabsContent}