Selected tab is stored in the route

packages/engine-frontend/components/AGConnectionPortal.tsx

@@ -8,12 +8,11 @@ import {Card, ResourceCard} from '@openint/ui'
 import {cn} from '@openint/ui/utils'
 import {R} from '@openint/util'
 import {WithConnectConfig} from '../hocs/WithConnectConfig'
+import {ConnectEventType} from '../hocs/WithConnectorConnect'
 import {_trpcReact} from '../providers/TRPCProvider'
 import {AgResourceRowActions} from './AgResourceRowActions'
 import {ConnectDialog} from './ConnectDialog'
 
-type ConnectEventType = 'open' | 'close' | 'error'
-
 export interface AGConnectionPortalProps extends UIPropsNoChildren {
   onEvent?: (event: {type: ConnectEventType; ccfgId: Id['ccfg']}) => void
 }

packages/engine-frontend/components/AddConnectionTabContent.tsx

@@ -4,11 +4,13 @@ import {ConnectIntegrations} from './ConnectIntegrations'
 interface AddConnectionTabContentProps {
   connectorConfigFilters: ConnectorConfigFilters
   refetch: () => void
+  onSuccessCallback?: () => void
 }
 
 export function AddConnectionTabContent({
   connectorConfigFilters,
   refetch,
+  onSuccessCallback,
 }: AddConnectionTabContentProps) {
   return (
     <div className="flex flex-col gap-2 p-4">
@@ -21,6 +23,9 @@ export function AddConnectionTabContent({
         onEvent={(event) => {
           if (event.type === 'close') {
             refetch()
+          } else if (event.type === 'success') {
+            onSuccessCallback?.()
+            refetch()
           }
         }}
       />

packages/engine-frontend/components/AgResourceRowActions.tsx

@@ -1,15 +1,16 @@
 'use client'
 
-import { RefreshCw} from 'lucide-react'
+import {RefreshCw} from 'lucide-react'
 import type {RouterOutput} from '@openint/engine-backend'
 import {useToast, type UIProps} from '@openint/ui'
 import type {ConnectorConfig} from '../hocs/WithConnectConfig'
-import {WithConnectorConnect} from '../hocs/WithConnectorConnect'
+import {
+  WithConnectorConnect,
+  type ConnectEventType,
+} from '../hocs/WithConnectorConnect'
 import {useOptionalOpenIntConnectContext} from '../providers/OpenIntConnectProvider'
 import {_trpcReact} from '../providers/TRPCProvider'
 
-type ConnectEventType = 'open' | 'close' | 'error'
-
 type Resource = RouterOutput['listConnections'][number]
 
 /**
@@ -91,19 +92,21 @@ export function AgResourceRowActions(
                 syncResourceMutate()
                 e.preventDefault()
               }}
-              className="inline-flex items-center justify-center gap-1 whitespace-nowrap group border bg-white border-stroke enabled:active:bg-background-mid enabled:active:border-1 focus:border-1 hover:border-[#8192FF] enabled:hover:bg-background-mid disabled:bg-background-mid disabled:border-stroke disabled:cursor-not-allowed disabled:text-black-light disabled:opacity-50 h-9 py-2 px-3 rounded-lg"
-            >
-              <RefreshCw className="text-black-light w-5 h-5" />
-              <p className="antialiased text-sm tracking-[-0.01em] text-[#8192FF]">Update</p>
+              className="border-stroke enabled:active:bg-background-mid enabled:active:border-1 focus:border-1 enabled:hover:bg-background-mid disabled:bg-background-mid disabled:border-stroke disabled:text-black-light group inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-lg border bg-white px-3 py-2 hover:border-[#8192FF] disabled:cursor-not-allowed disabled:opacity-50">
+              <RefreshCw className="text-black-light h-5 w-5" />
+              <p className="text-sm tracking-[-0.01em] text-[#8192FF] antialiased">
+                Update
+              </p>
             </button>
           )}
           <button
             type="button"
             onClick={() => deleteResource.mutate({id: props.resource.id})}
-            className="inline-flex items-center justify-center gap-1 whitespace-nowrap group border bg-white border-stroke enabled:active:bg-background-mid enabled:active:border-1 focus:border-1 hover:border-[#8192FF] enabled:hover:bg-background-mid disabled:bg-background-mid disabled:border-stroke disabled:cursor-not-allowed disabled:text-black-light disabled:opacity-50 h-9 py-2 px-3 rounded-lg"
-          >
-            <RefreshCw className="text-black-light w-5 h-5" />
-            <p className="antialiased text-sm tracking-[-0.01em] text-[#8192FF]">Disconnect</p>
+            className="border-stroke enabled:active:bg-background-mid enabled:active:border-1 focus:border-1 enabled:hover:bg-background-mid disabled:bg-background-mid disabled:border-stroke disabled:text-black-light group inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-lg border bg-white px-3 py-2 hover:border-[#8192FF] disabled:cursor-not-allowed disabled:opacity-50">
+            <RefreshCw className="text-black-light h-5 w-5" />
+            <p className="text-sm tracking-[-0.01em] text-[#8192FF] antialiased">
+              Disconnect
+            </p>
           </button>
         </div>
       )}

packages/engine-frontend/components/ConnectionPortal.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import {Loader} from 'lucide-react'
+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 +23,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 +47,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}) => {
@@ -74,10 +88,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')}
               />
             ),
           },
@@ -88,14 +102,33 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
               <AddConnectionTabContent
                 connectorConfigFilters={{}}
                 refetch={listConnectionsRes.refetch}
+                onSuccessCallback={() => {
+                  navigateToTab('connections')
+                }}
               />
             ),
           },
         ]
 
         return (
-          <div className={cn('gap-4 p-4 lg:p-8', className)}>
-            <Tabs tabConfig={tabConfig} defaultValue="connections" />
+          <div
+            className={cn(
+              'flex size-full flex-col gap-4 p-4 lg:p-8',
+              className,
+            )}>
+            {listConnectionsRes.isLoading ||
+            listConnectionsRes.isFetching ||
+            listConnectionsRes.isRefetching ? (
+              <div className="flex h-full min-h-[500px] flex-1 items-center justify-center">
+                <Loader className="size-8 animate-spin text-button" />
+              </div>
+            ) : (
+              <Tabs
+                tabConfig={tabConfig}
+                value={searchParams?.get('connectTab') ?? 'connections'}
+                onValueChange={navigateToTab}
+              />
+            )}
           </div>
         )
       }}

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,33 +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
-          }
-        }}
-      />
+      <Button
+        onClick={onConnect}
+        className="inline-flex h-10 items-center justify-center self-end">
+        Connect
+      </Button>
     </div>
   ) : (
     <div className="p-4">
@@ -61,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}
@@ -113,7 +108,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>
         ))

packages/engine-frontend/hocs/WithConnectorConnect.tsx

@@ -26,7 +26,7 @@ import {
 } from '../providers/OpenIntConnectProvider'
 import {_trpcReact} from '../providers/TRPCProvider'
 
-export type ConnectEventType = 'open' | 'close' | 'error'
+export type ConnectEventType = 'open' | 'close' | 'error' | 'success'
 
 type Resource = RouterOutput['listConnections'][number]
 
@@ -153,7 +153,7 @@ export const WithConnectorConnect = ({
           })
         }
         setOpen(false)
-        onEvent?.({type: 'close'})
+        onEvent?.({type: 'success'})
       },
       onError: (err) => {
         if (err === CANCELLATION_TOKEN) {

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}>