Refresh connection data on add/delete and improve loading spinner sta…

…tes. (#252) * Improve data refetching on connection add/delete * Standardize loading spinner across the app * Prevent double call on delete and correctly show spinner * Disable destination id field --------- Co-authored-by: Rodrigo Arze Leon <[email protected]>
openintegrations · Feb 6, 2025 · 8f87438 · 8f87438
1 parent 5011017
commit 8f87438
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 20 deletions.
diff --git a/apps/web/app/dashboard/(authenticated)/connector-configs/ConnectorConfigForm.tsx b/apps/web/app/dashboard/(authenticated)/connector-configs/ConnectorConfigForm.tsx
@@ -80,9 +80,9 @@ export function ConnectorConfigForm({
                 links: zRaw.connector_config.shape.defaultPipeOut
                   .unwrap()
                   .unwrap().shape.links,
-                destination_id: zConnId.optional().openapi({
-                  description: 'Defaults to the org-wide postgres',
-                }),
+                // destination_id: zConnId.optional().openapi({
+                //   description: 'Defaults to the org-wide postgres',
+                // }),
               })
               .openapi({title: 'Enabled'}),
           ])

diff --git a/packages/engine-frontend/components/AddConnectionTabContent.tsx b/packages/engine-frontend/components/AddConnectionTabContent.tsx
@@ -27,6 +27,8 @@ export function AddConnectionTabContent({
           } else if (event.type === 'success') {
             onSuccessCallback?.()
             refetch()
+          } else if (event.type === 'error') {
+            refetch()
           }
         }}
       />

diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import {Loader} from 'lucide-react'
+import {Loader2} from 'lucide-react'
 import {useTheme} from 'next-themes'
 import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 import {useEffect} from 'react'
@@ -33,7 +33,7 @@ const getBaseView = (
 export function LoadingSpinner() {
   return (
     <div className="flex h-full min-h-[600px] flex-1 items-center justify-center">
-      <Loader className="size-7 animate-spin text-button" />
+      <Loader2 className="size-7 animate-spin text-button" />
     </div>
   )
 }
@@ -125,10 +125,7 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
         const connectionCount = connections.length
 
         const isLoading =
-          listConnectionsRes.isLoading ||
-          listConnectionsRes.isFetching ||
-          listConnectionsRes.isRefetching ||
-          deleteConnection.isLoading
+          listConnectionsRes.isLoading || listConnectionsRes.isFetching
 
         const baseView = getBaseView(searchParams?.get('view'))
 
@@ -142,6 +139,7 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
               <ConnectionsTabContent
                 connectionCount={connectionCount}
                 deleteConnection={deleteConnection.mutate}
+                isDeleting={deleteConnection.isLoading}
                 connections={connections}
                 onConnect={() => navigateToTab('add')}
                 refetch={() => ctx.listConnections.invalidate()}
@@ -158,8 +156,9 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
               <AddConnectionTabContent
                 connectorConfigFilters={{}}
                 refetch={listConnectionsRes.refetch}
-                onSuccessCallback={() => {
+                onSuccessCallback={async () => {
                   navigateToTab('manage')
+                  await listConnectionsRes.refetch()
                 }}
               />
             ),

diff --git a/packages/engine-frontend/components/ConnectionsTabContent.tsx b/packages/engine-frontend/components/ConnectionsTabContent.tsx
@@ -22,6 +22,7 @@ interface Connection {
 interface ConnectionsTabContentProps {
   connectionCount: number
   deleteConnection: ({id}: {id: string}) => void
+  isDeleting: boolean
   onConnect: () => void
   refetch: () => void
   connections: Connection[]
@@ -31,6 +32,7 @@ export function ConnectionsTabContent({
   connectionCount,
   deleteConnection,
   connections,
+  isDeleting,
   onConnect,
   refetch,
 }: ConnectionsTabContentProps) {
@@ -78,6 +80,7 @@ export function ConnectionsTabContent({
           connection={selectedConnection}
           deleteConnection={deleteConnection}
           onClose={() => setSelectedConnection(null)}
+          isDeleting={isDeleting}
         />
       ) : (
         <div className="flex flex-row flex-wrap gap-4 p-4 lg:w-[70%]">

diff --git a/packages/engine-frontend/components/IntegrationSearch.tsx b/packages/engine-frontend/components/IntegrationSearch.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import {Loader, Search} from 'lucide-react'
+import {Loader2, Search} from 'lucide-react'
 import {useSearchParams} from 'next/navigation'
 import {useCallback, useEffect, useState} from 'react'
 import type {Id} from '@openint/cdk'
@@ -168,7 +168,7 @@ export function IntegrationSearch({
       <div className="relative flex-1 overflow-y-auto">
         {listIntegrationsRes.isLoading ? (
           <div className="flex h-full min-h-[500px] items-center justify-center">
-            <Loader className="size-7 animate-spin text-button" />
+            <Loader2 className="size-7 animate-spin text-button" />
           </div>
         ) : (
           <div className="space-y-6 p-4">

diff --git a/packages/ui/domain-components/ConnectionCard.tsx b/packages/ui/domain-components/ConnectionCard.tsx
@@ -1,4 +1,4 @@
-import {Loader} from 'lucide-react'
+import {Loader2} from 'lucide-react'
 import * as React from 'react'
 import type {ConnectorConfig} from '../../engine-frontend/hocs/WithConnectConfig'
 import {Ellipsis} from '../components'
@@ -59,7 +59,7 @@ export function ConnectionCard({
       {/* Overlay spinner */}
       {isProcessing && (
         <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-card-loading">
-          <Loader className="size-8 animate-spin text-button" />
+          <Loader2 className="size-8 animate-spin text-button" />
         </div>
       )}
 
@@ -118,7 +118,7 @@ export function ConnectionCard({
               </p>
             ) : conn.syncInProgress ? (
               <div className="flex flex-row items-center justify-start gap-2">
-                <Loader className="size-5 animate-spin text-button" />
+                <Loader2 className="size-5 animate-spin text-button" />
                 <p className="text-center text-sm text-button">Syncing...</p>
               </div>
             ) : (

diff --git a/packages/ui/domain-components/ConnectionDetails.tsx b/packages/ui/domain-components/ConnectionDetails.tsx
@@ -1,4 +1,4 @@
-import {ArrowLeft} from 'lucide-react'
+import {ArrowLeft, Loader2} from 'lucide-react'
 import type {ConnectorConfig} from '../../engine-frontend/hocs/WithConnectConfig'
 import {Button} from '../shadcn'
 import {IntegrationLogo} from './ConnectionRawCard'
@@ -19,16 +19,23 @@ interface ConnectionDetailsProps {
     type?: string
   }
   deleteConnection: ({id}: {id: string}) => void
+  isDeleting: boolean
   onClose: () => void
 }
 
 export function ConnectionDetails({
   connection,
   deleteConnection,
+  isDeleting,
   onClose,
 }: ConnectionDetailsProps) {
   return (
-    <div className="flex flex-col gap-4 p-4 pt-2">
+    <div className="relative flex flex-col gap-4 p-4 pt-2">
+      {isDeleting && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-card-loading">
+          <Loader2 className="size-8 animate-spin text-button" />
+        </div>
+      )}
       <div className="grid grid-cols-1 gap-4 rounded-lg bg-muted p-6">
         <div className="flex items-center gap-2">
           <ArrowLeft
@@ -84,8 +91,9 @@ export function ConnectionDetails({
           <Button
             variant="destructive"
             onClick={() => deleteConnection({id: connection.id})}
+            disabled={isDeleting}
             className="h-9">
-            Delete Connection
+            {isDeleting ? 'Deleting...' : 'Delete Connection'}
           </Button>
         </div>
       </div>

diff --git a/packages/ui/domain-components/IntegrationCard.tsx b/packages/ui/domain-components/IntegrationCard.tsx
@@ -1,4 +1,4 @@
-import {Loader, Plus} from 'lucide-react'
+import {Loader2, Plus} from 'lucide-react'
 import {useEffect, useRef, useState} from 'react'
 import {Card, CardContent} from '../shadcn'
 import {
@@ -72,7 +72,7 @@ export function IntegrationCard({
             </CardContent>
             {isLoading && (
               <div className="absolute inset-0 z-10 flex items-center justify-center">
-                <Loader className="size-7 animate-spin text-button" />
+                <Loader2 className="size-7 animate-spin text-button" />
               </div>
             )}
           </Card>