ux fixes/improvements for integrations (#132)

* better integration handling

* ux fixes

* focus on add

Author: ctate

app/workflows/[workflowId]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -10,6 +10,12 @@ import { Button } from "@/components/ui/button";
 import { NodeConfigPanel } from "@/components/workflow/node-config-panel";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { api } from "@/lib/api-client";
+import {
+  integrationsAtom,
+  integrationsLoadedAtom,
+  integrationsVersionAtom,
+} from "@/lib/integrations-store";
+import type { IntegrationType } from "@/lib/types/integration";
 import {
   currentWorkflowIdAtom,
   currentWorkflowNameAtom,
@@ -25,18 +31,77 @@ import {
   nodesAtom,
   rightPanelWidthAtom,
   selectedExecutionIdAtom,
-  selectedNodeAtom,
   triggerExecuteAtom,
   updateNodeDataAtom,
   type WorkflowNode,
   type WorkflowVisibility,
   workflowNotFoundAtom,
 } from "@/lib/workflow-store";
+import { findActionById } from "@/plugins";
 
 type WorkflowPageProps = {
   params: Promise<{ workflowId: string }>;
 };
 
+// System actions that need integrations (not in plugin registry)
+const SYSTEM_ACTION_INTEGRATIONS: Record<string, IntegrationType> = {
+  "Database Query": "database",
+};
+
+// Helper to get required integration type for an action
+function getRequiredIntegrationType(
+  actionType: string
+): IntegrationType | undefined {
+  const action = findActionById(actionType);
+  return (
+    (action?.integration as IntegrationType | undefined) ||
+    SYSTEM_ACTION_INTEGRATIONS[actionType]
+  );
+}
+
+// Helper to check and fix a single node's integration
+type IntegrationFixResult = {
+  nodeId: string;
+  newIntegrationId: string | undefined;
+};
+
+function checkNodeIntegration(
+  node: WorkflowNode,
+  allIntegrations: { id: string; type: string }[],
+  validIntegrationIds: Set<string>
+): IntegrationFixResult | null {
+  const actionType = node.data.config?.actionType as string | undefined;
+  if (!actionType) {
+    return null;
+  }
+
+  const integrationType = getRequiredIntegrationType(actionType);
+  if (!integrationType) {
+    return null;
+  }
+
+  const currentIntegrationId = node.data.config?.integrationId as
+    | string
+    | undefined;
+  const hasValidIntegration =
+    currentIntegrationId && validIntegrationIds.has(currentIntegrationId);
+
+  if (hasValidIntegration) {
+    return null;
+  }
+
+  // Find available integrations of this type
+  const available = allIntegrations.filter((i) => i.type === integrationType);
+
+  if (available.length === 1) {
+    return { nodeId: node.id, newIntegrationId: available[0].id };
+  }
+  if (available.length === 0 && currentIntegrationId) {
+    return { nodeId: node.id, newIntegrationId: undefined };
+  }
+  return null;
+}
+
 const WorkflowEditor = ({ params }: WorkflowPageProps) => {
   const { workflowId } = use(params);
   const searchParams = useSearchParams();
@@ -52,7 +117,6 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
   const setCurrentWorkflowId = useSetAtom(currentWorkflowIdAtom);
   const setCurrentWorkflowName = useSetAtom(currentWorkflowNameAtom);
   const updateNodeData = useSetAtom(updateNodeDataAtom);
-  const setSelectedNodeId = useSetAtom(selectedNodeAtom);
   const setHasUnsavedChanges = useSetAtom(hasUnsavedChangesAtom);
   const [workflowNotFound, setWorkflowNotFound] = useAtom(workflowNotFoundAtom);
   const setTriggerExecute = useSetAtom(triggerExecuteAtom);
@@ -66,6 +130,9 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
     currentWorkflowVisibilityAtom
   );
   const setIsWorkflowOwner = useSetAtom(isWorkflowOwnerAtom);
+  const setGlobalIntegrations = useSetAtom(integrationsAtom);
+  const setIntegrationsLoaded = useSetAtom(integrationsLoadedAtom);
+  const integrationsVersion = useAtomValue(integrationsVersionAtom);
 
   // Panel width state for resizing
   const [panelWidth, setPanelWidth] = useState(30); // default percentage
@@ -236,17 +303,14 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
       try {
         const workflowData = await api.ai.generate(prompt);
 
-        setNodes(workflowData.nodes || []);
+        // Clear selection on all nodes
+        const nodesWithoutSelection = (workflowData.nodes || []).map(
+          (node: WorkflowNode) => ({ ...node, selected: false })
+        );
+        setNodes(nodesWithoutSelection);
         setEdges(workflowData.edges || []);
         setCurrentWorkflowName(workflowData.name || "AI Generated Workflow");
 
-        const selectedNode = workflowData.nodes?.find(
-          (n: { selected?: boolean }) => n.selected
-        );
-        if (selectedNode) {
-          setSelectedNodeId(selectedNode.id);
-        }
-
         await api.workflow.update(workflowId, {
           name: workflowData.name,
           description: workflowData.description,
@@ -267,7 +331,6 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
       setCurrentWorkflowName,
       setNodes,
       setEdges,
-      setSelectedNodeId,
     ]
   );
 
@@ -281,9 +344,10 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
         return;
       }
 
-      // Reset all node statuses to idle when loading from database
+      // Reset node statuses to idle and clear selection when loading from database
       const nodesWithIdleStatus = workflow.nodes.map((node: WorkflowNode) => ({
         ...node,
+        selected: false,
         data: {
           ...node.data,
           status: "idle" as const,
@@ -300,11 +364,6 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
       setIsWorkflowOwner(workflow.isOwner !== false); // Default to true if not set
       setHasUnsavedChanges(false);
       setWorkflowNotFound(false);
-
-      const selectedNode = workflow.nodes.find((n: WorkflowNode) => n.selected);
-      if (selectedNode) {
-        setSelectedNodeId(selectedNode.id);
-      }
     } catch (error) {
       console.error("Failed to load workflow:", error);
       toast.error("Failed to load workflow");
@@ -319,9 +378,13 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
     setIsWorkflowOwner,
     setHasUnsavedChanges,
     setWorkflowNotFound,
-    setSelectedNodeId,
   ]);
 
+  // Track if we've already auto-fixed integrations for this workflow+version
+  const lastAutoFixRef = useRef<{ workflowId: string; version: number } | null>(
+    null
+  );
+
   useEffect(() => {
     const loadWorkflowData = async () => {
       const isGeneratingParam = searchParams?.get("generating") === "true";
@@ -357,6 +420,72 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
     loadExistingWorkflow,
   ]);
 
+  // Auto-fix invalid/missing integrations on workflow load or when integrations change
+  useEffect(() => {
+    // Skip if no nodes or no workflow
+    if (nodes.length === 0 || !currentWorkflowId) {
+      return;
+    }
+
+    // Skip if already checked for this workflow+version combination
+    const lastFix = lastAutoFixRef.current;
+    if (
+      lastFix &&
+      lastFix.workflowId === currentWorkflowId &&
+      lastFix.version === integrationsVersion
+    ) {
+      return;
+    }
+
+    const autoFixIntegrations = async () => {
+      try {
+        const allIntegrations = await api.integration.getAll();
+        setGlobalIntegrations(allIntegrations);
+        setIntegrationsLoaded(true);
+
+        const validIds = new Set(allIntegrations.map((i) => i.id));
+        const fixes = nodes
+          .map((node) => checkNodeIntegration(node, allIntegrations, validIds))
+          .filter((fix): fix is IntegrationFixResult => fix !== null);
+
+        for (const fix of fixes) {
+          const node = nodes.find((n) => n.id === fix.nodeId);
+          if (node) {
+            updateNodeData({
+              id: fix.nodeId,
+              data: {
+                config: {
+                  ...node.data.config,
+                  integrationId: fix.newIntegrationId,
+                },
+              },
+            });
+          }
+        }
+
+        lastAutoFixRef.current = {
+          workflowId: currentWorkflowId,
+          version: integrationsVersion,
+        };
+        if (fixes.length > 0) {
+          setHasUnsavedChanges(true);
+        }
+      } catch (error) {
+        console.error("Failed to auto-fix integrations:", error);
+      }
+    };
+
+    autoFixIntegrations();
+  }, [
+    nodes,
+    currentWorkflowId,
+    integrationsVersion,
+    updateNodeData,
+    setGlobalIntegrations,
+    setIntegrationsLoaded,
+    setHasUnsavedChanges,
+  ]);
+
   // Keyboard shortcuts
   const handleSave = useCallback(async () => {
     if (!currentWorkflowId || isGenerating) {