Selected tab is stored in the route

openintegrations · Oct 31, 2024 · c6c1fd5 · c6c1fd5
1 parent e8d9665
commit c6c1fd5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 import type {Id} from '@openint/cdk'
 import type {UIPropsNoChildren} from '@openint/ui'
 import {useToast} from '@openint/ui'
@@ -21,6 +22,10 @@ export interface ConnectionPortalProps extends UIPropsNoChildren {
 // Also it would be nice if there was an easy way to automatically prefetch on the server side
 // based on calls to useQuery so it doesn't need to be separately handled again on the client...
 export function ConnectionPortal({className}: ConnectionPortalProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
   const {toast} = useToast()
   const ctx = _trpcReact.useContext()
   const listConnectionsRes = _trpcReact.listConnections.useQuery({})
@@ -41,6 +46,14 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
     },
   })
 
+  const navigateToTab = (tab: string) => {
+    const params = new URLSearchParams(searchParams ?? {})
+    params.set('connectTab', tab)
+    router.replace(`${pathname}?${params.toString()}`, {
+      scroll: false,
+    })
+  }
+
   return (
     <WithConnectConfig>
       {({ccfgs, verticals: categories}) => {
@@ -66,7 +79,6 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
           ),
         }))
         const connectionCount = connections.length
-        console.log({connectionCount})
 
         const tabConfig = [
           {
@@ -75,10 +87,10 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
             content: (
               <ConnectionsTabContent
                 connectionCount={connectionCount}
-                refetch={listConnectionsRes.refetch}
                 isLoading={listConnectionsRes.isLoading}
                 deleteResource={deleteResource.mutate}
                 categoriesWithConnections={categoriesWithConnections}
+                onConnect={() => navigateToTab('add-connection')}
               />
             ),
           },
@@ -96,7 +108,11 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
 
         return (
           <div className={cn('gap-4 p-4 lg:p-8', className)}>
-            <Tabs tabConfig={tabConfig} defaultValue="connections" />
+            <Tabs
+              tabConfig={tabConfig}
+              value={searchParams?.get('connectTab') ?? 'connections'}
+              onValueChange={navigateToTab}
+            />
           </div>
         )
       }}

diff --git a/packages/engine-frontend/components/ConnectionsTabContent.tsx b/packages/engine-frontend/components/ConnectionsTabContent.tsx
@@ -1,6 +1,8 @@
 import {Loader, Settings} from 'lucide-react'
+import {Fragment} from 'react'
 import {
   Badge,
+  Button,
   ConnectorLogo,
   DropdownMenu,
   DropdownMenuContent,
@@ -9,7 +11,6 @@ import {
   Separator,
 } from '@openint/ui'
 import type {ConnectorConfig} from '../hocs/WithConnectConfig'
-import {ConnectDialog} from './ConnectDialog'
 
 interface ConnectionsTabContentProps {
   connectionCount: number
@@ -23,32 +24,29 @@ interface ConnectionsTabContentProps {
       syncInProgress: boolean
     }>
   }>
-  refetch: () => void
   isLoading: boolean
   deleteResource: ({id}: {id: string}) => void
+  onConnect: () => void
 }
 
 export function ConnectionsTabContent({
   connectionCount,
-  refetch,
   isLoading,
   deleteResource,
   categoriesWithConnections,
+  onConnect,
 }: ConnectionsTabContentProps) {
   return 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>
-      <ConnectDialog
-        className="self-end bg-[#8A5DF6] hover:bg-[#A082E9]"
-        connectorConfigFilters={{}}
-        onEvent={(event) => {
-          if (event.type === 'close') {
-            refetch() // Trigger refetch
-          }
-        }}></ConnectDialog>
+      <Button
+        onClick={onConnect}
+        className="inline-flex h-10 items-center justify-center self-end">
+        Connect
+      </Button>
     </div>
   ) : (
     <div className="p-4">
@@ -60,10 +58,8 @@ export function ConnectionsTabContent({
         categoriesWithConnections.map((category) => (
           <div 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">
+              <Fragment key={conn.id}>
+                <div className="flex flex-row justify-between gap-4">
                   <div className="flex flex-row gap-4">
                     <ConnectorLogo
                       connector={conn.connectorConfig.connector}
@@ -110,7 +106,7 @@ export function ConnectionsTabContent({
         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" />
-              </>
+              </Fragment>
             ))}
           </div>
         ))

diff --git a/packages/ui/components/Tabs.tsx b/packages/ui/components/Tabs.tsx
@@ -12,12 +12,22 @@ interface TabsProps {
     title: string
     content: ReactElement
   }>
-  defaultValue: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
 }
 
-export function Tabs({tabConfig, defaultValue}: TabsProps) {
+export function Tabs({
+  tabConfig,
+  defaultValue,
+  value,
+  onValueChange,
+}: TabsProps) {
   return (
-    <ShadcnTabs defaultValue="connections">
+    <ShadcnTabs
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={onValueChange}>
       <TabsList>
         {tabConfig.map((config) => (
           <TabsTrigger key={config.key} value={config.key}>