Details shown in dialog, improve double dialog displays and add backd…

…rop when add a connection happens (#258) * Move details to a separate dialog and handle both popover states * Add hover state similar to integration card instead of icon * Add backdrop blur when we are adding a new connection either dialog or third party * Update mobile breakpoint * Add safety handle for nested properties in isOauth flag * Remove sync label * Add reconnect label back * Simplify breakpoint with a tailwind default * omiting theme --------- Co-authored-by: Rodrigo Arze Leon <[email protected]> Co-authored-by: Amadeo Pellicce <[email protected]>
openintegrations · Feb 13, 2025 · 3e6fe17 · 3e6fe17
1 parent 7f7bf92
commit 3e6fe17
Show file tree

Hide file tree

Showing 7 changed files with 349 additions and 344 deletions.
diff --git a/apps/web/app/dashboard/(authenticated)/magic-link/page.tsx b/apps/web/app/dashboard/(authenticated)/magic-link/page.tsx
@@ -145,7 +145,11 @@ export default function MagicLinkPage() {
       </p>
       <div className="max-w-xl">
         <SchemaForm
-          schema={customerRouterSchema.createMagicLink.input}
+          // Omit theme from schema since there's a bug where the tailwind theme setting
+          // is shared between connect and console
+          schema={customerRouterSchema.createMagicLink.input.omit({
+            theme: true,
+          })}
           uiSchema={uiSchema}
           loading={createMagicLink.isLoading}
           onSubmit={({formData: values}) => {

diff --git a/packages/engine-frontend/components/ConnectionsTabContent.tsx b/packages/engine-frontend/components/ConnectionsTabContent.tsx
@@ -40,7 +40,10 @@ export function ConnectionsTabContent({
   const [resetKey, setResetKey] = useState(0)
   const [selectedConnection, setSelectedConnection] =
     useState<Connection | null>(null)
+  const [reconnect, setReconnect] = useState<() => void>(() => {})
   const [showConfirmation, setShowConfirmation] = useState(false)
+  // Is processing state is used for card loader on reconnect.
+  const [reconnectId, setReconnectId] = useState<string | null>(null)
   // this is so that the timer in the connection card is reset
   const reset = () => setResetKey((prev) => prev + 1)
   const searchParams = useSearchParams()
@@ -59,6 +62,13 @@ export function ConnectionsTabContent({
     }
   }, [connections, isDeeplinkView, connectionId])
 
+  const isOAuthConnector =
+    selectedConnection?.status !== 'healthy' &&
+    ((
+      selectedConnection?.connectorConfig?.connector?.schemas
+        ?.connectorConfig as any
+    )?.required?.includes('oauth') as boolean)
+
   return (
     <>
       <DeleteConfirmation
@@ -72,6 +82,24 @@ export function ConnectionsTabContent({
         confirmText="Delete"
         isDeleting={isDeleting}
       />
+      {selectedConnection && (
+        <ConnectionDetails
+          connection={selectedConnection}
+          deleteConnection={openConfirmation}
+          onClose={() => {
+            if (!showConfirmation) {
+              setSelectedConnection(null)
+            }
+          }}
+          isDeleting={isDeleting}
+          open={!!selectedConnection}
+          isOAuthConnector={isOAuthConnector}
+          onReconnect={() => {
+            setReconnectId(selectedConnection.id)
+            reconnect()
+          }}
+        />
+      )}
       {connectionCount === 0 ? (
         <div className="flex flex-col p-4 pt-0">
           <div>
@@ -94,45 +122,38 @@ export function ConnectionsTabContent({
           </Button>
         </div>
       ) : (
-        <>
-          {selectedConnection ? (
-            <ConnectionDetails
-              connection={selectedConnection}
-              deleteConnection={openConfirmation}
-              onClose={() => setSelectedConnection(null)}
-              isDeleting={isDeleting}
-            />
-          ) : (
-            <div className="flex flex-row flex-wrap gap-4 p-4 lg:w-[70%]">
-              {connections.map((conn: any) => (
-                <WithConnectorConnect
-                  key={conn.id + ''}
-                  connectorConfig={{
-                    id: conn.connectorConfig.id,
-                    connector: conn.connectorConfig.connector,
+        <div className="flex flex-row flex-wrap gap-4 p-4 lg:w-[70%]">
+          {connections.map((conn: any) => (
+            <WithConnectorConnect
+              key={conn.id + ''}
+              connectorConfig={{
+                id: conn.connectorConfig.id,
+                connector: conn.connectorConfig.connector,
+              }}
+              integration={conn.integration}
+              connection={conn}
+              onEvent={(event) => {
+                if (event.type === 'success' || event.type === 'error') {
+                  refetch()
+                  reset()
+                }
+              }}>
+              {({openConnect}) => (
+                <ConnectionCard
+                  key={`${conn.id}-${resetKey}`}
+                  conn={conn}
+                  onSelect={() => {
+                    setSelectedConnection(conn)
+                    setReconnect(() => openConnect)
                   }}
-                  integration={conn.integration}
-                  connection={conn}
-                  onEvent={(event) => {
-                    if (event.type === 'success' || event.type === 'error') {
-                      refetch()
-                      reset()
-                    }
-                  }}>
-                  {({openConnect}) => (
-                    <ConnectionCard
-                      key={`${conn.id}-${resetKey}`}
-                      conn={conn}
-                      onDelete={openConfirmation}
-                      onReconnect={openConnect}
-                      onSelect={() => setSelectedConnection(conn)}
-                    />
-                  )}
-                </WithConnectorConnect>
-              ))}
-            </div>
-          )}
-        </>
+                  reconnectId={
+                    conn.id === reconnectId ? (conn.id as string) : null
+                  }
+                />
+              )}
+            </WithConnectorConnect>
+          ))}
+        </div>
       )}
     </>
   )

diff --git a/packages/engine-frontend/components/IntegrationSearch.tsx b/packages/engine-frontend/components/IntegrationSearch.tsx
@@ -180,7 +180,7 @@ export function IntegrationSearch({
                     <h3 className="mb-2 text-lg font-semibold text-foreground">
                       {parseCategory(category)}
                     </h3>
-                    <div className="hidden w-full flex-row flex-wrap gap-4 lg:flex lg:w-[60%]">
+                    <div className="hidden w-full flex-row flex-wrap gap-4 md:flex md:w-[60%]">
                       {categoryInts.map((int) => (
                         <WithConnectorConnect
                           key={int.id}
@@ -212,7 +212,7 @@ export function IntegrationSearch({
                         </WithConnectorConnect>
                       ))}
                     </div>
-                    <div className="flex w-full flex-col gap-2 lg:hidden">
+                    <div className="flex w-full flex-col gap-2 md:hidden">
                       {categoryInts.map((int, index) => (
                         <WithConnectorConnect
                           key={int.id}