fix: keep flow connections intact when importing multiple flows (activepieces#10820)

hazemadelkhalel · web-flow · commit 7898f7630ed3 · 2026-01-13T11:45:20.000+02:00
diff --git a/packages/react-ui/src/app/components/sidebar/builder/flows-navigation.tsx b/packages/react-ui/src/app/components/sidebar/builder/flows-navigation.tsx
@@ -23,6 +23,7 @@ import {
   SidebarSkeleton,
 } from '@/components/ui/sidebar-shadcn';
 import { flowHooks } from '@/features/flows/lib/flow-hooks';
+import { ImportFlowButton } from '@/features/flows/lib/Import-flow-button';
 import { NewFlowButton } from '@/features/flows/lib/new-flow-button';
 import { CreateFolderDialog } from '@/features/folders/component/create-folder-dialog';
 import { FolderActions } from '@/features/folders/component/folder-actions';
@@ -236,6 +237,12 @@ function DefaultFolder({
             <Shapes className="size-3.5!" />
             <span>{t('Uncategorized')}</span>
             <div className="ml-auto relative">
+              <ImportFlowButton
+                folderId={UncategorizedFolderId}
+                variant="small"
+                className="opacity-0 group-hover/item:opacity-100"
+                onRefresh={refetch}
+              />
               <NewFlowButton
                 folderId={UncategorizedFolderId}
                 variant="small"
@@ -292,6 +299,12 @@ function RegularFolder({
             <FolderOpen className="size-3.5! hidden group-data-[state=open]/collapsible:block" />
             <span className="truncate">{folder.displayName}</span>
             <div className="flex items-center justify-center ml-auto">
+              <ImportFlowButton
+                folderId={folder.id}
+                variant="small"
+                className="group-hover/item:opacity-100 opacity-0"
+                onRefresh={refetch}
+              />
               <NewFlowButton
                 folderId={folder.id}
                 variant="small"
diff --git a/packages/react-ui/src/app/routes/templates/id/use-template-dialog.tsx b/packages/react-ui/src/app/routes/templates/id/use-template-dialog.tsx
@@ -22,13 +22,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { flowsApi } from '@/features/flows/lib/flows-api';
+import { flowHooks } from '@/features/flows/lib/flow-hooks';
 import { foldersApi } from '@/features/folders/lib/folders-api';
 import { foldersHooks } from '@/features/folders/lib/folders-hooks';
 import { projectCollectionUtils } from '@/hooks/project-collection';
 import { authenticationSession } from '@/lib/authentication-session';
 import {
-  FlowOperationType,
   PopulatedFlow,
   Template,
   UncategorizedFolderId,
@@ -87,24 +86,11 @@ export const UseTemplateDialog = ({
         folderName = folder.displayName;
       }
 
-      return Promise.all(
-        flows.map(async (flowTemplate) => {
-          const newFlow = await flowsApi.create({
-            displayName: flowTemplate.displayName,
-            projectId: projectId,
-            folderName: folderName,
-          });
-
-          return flowsApi.update(newFlow.id, {
-            type: FlowOperationType.IMPORT_FLOW,
-            request: {
-              displayName: flowTemplate.displayName,
-              trigger: flowTemplate.trigger,
-              schemaVersion: flowTemplate.schemaVersion,
-            },
-          });
-        }),
-      );
+      return await flowHooks.importFlowsFromTemplates({
+        templates: [template],
+        projectId,
+        folderName,
+      });
     },
     onSuccess: (flows) => {
       onOpenChange(false);
diff --git a/packages/react-ui/src/features/flows/components/import-flow-dialog.tsx b/packages/react-ui/src/features/flows/components/import-flow-dialog.tsx
@@ -36,7 +36,6 @@ import { templatesApi } from '@/features/templates/lib/templates-api';
 import { api } from '@/lib/api';
 import { authenticationSession } from '@/lib/authentication-session';
 import {
-  FlowOperationType,
   isNil,
   PopulatedFlow,
   TelemetryEventName,
@@ -45,7 +44,7 @@ import {
 } from '@activepieces/shared';
 
 import { FormError } from '../../../components/ui/form';
-import { flowsApi } from '../lib/flows-api';
+import { flowHooks } from '../lib/flow-hooks';
 import { templateUtils } from '../lib/template-parser';
 
 export type ImportFlowDialogProps =
@@ -97,40 +96,27 @@ const ImportFlowDialog = (
     Template[]
   >({
     mutationFn: async (templates: Template[]) => {
-      const importPromises = templates.flatMap(async (template) => {
-        const flowImportPromises = (template.flows || []).map(
-          async (templateFlow) => {
-            let flow: PopulatedFlow | null = null;
-            if (props.insideBuilder) {
-              flow = await flowsApi.get(props.flowId);
-            } else {
-              const folder =
-                !isNil(selectedFolderId) &&
-                selectedFolderId !== UncategorizedFolderId
-                  ? await foldersApi.get(selectedFolderId)
-                  : undefined;
-              flow = await flowsApi.create({
-                displayName: templateFlow.displayName,
-                projectId: authenticationSession.getProjectId()!,
-                folderName: folder?.displayName,
-              });
-            }
-            return await flowsApi.update(flow.id, {
-              type: FlowOperationType.IMPORT_FLOW,
-              request: {
-                displayName: templateFlow.displayName,
-                trigger: templateFlow.trigger,
-                schemaVersion: templateFlow.schemaVersion,
-              },
-            });
-          },
-        );
+      if (props.insideBuilder) {
+        if (templates.length === 0) {
+          throw new Error('No template selected');
+        }
+        const flow = await flowHooks.importFlowIntoExisting({
+          template: templates[0],
+          existingFlowId: props.flowId,
+        });
+        return [flow];
+      }
 
-        return Promise.all(flowImportPromises);
-      });
+      const folder =
+        !isNil(selectedFolderId) && selectedFolderId !== UncategorizedFolderId
+          ? await foldersApi.get(selectedFolderId)
+          : undefined;
 
-      const results = await Promise.all(importPromises);
-      return results.flat();
+      return flowHooks.importFlowsFromTemplates({
+        templates,
+        projectId: authenticationSession.getProjectId()!,
+        folderName: folder?.displayName,
+      });
     },
 
     onSuccess: (flows: PopulatedFlow[]) => {
diff --git a/packages/react-ui/src/features/flows/components/share-template-dialog.tsx b/packages/react-ui/src/features/flows/components/share-template-dialog.tsx
@@ -61,7 +61,7 @@ const ShareTemplateDialog: React.FC<{
         summary: template.summary,
         tags: template.tags,
         blogUrl: template.blogUrl ?? undefined,
-        metadata: null,
+        metadata: template.metadata,
         author,
         categories: template.categories,
         type: template.type,
diff --git a/packages/react-ui/src/features/flows/lib/Import-flow-button.tsx b/packages/react-ui/src/features/flows/lib/Import-flow-button.tsx
@@ -0,0 +1,77 @@
+import { t } from 'i18next';
+import { Upload } from 'lucide-react';
+
+import { PermissionNeededTooltip } from '@/components/custom/permission-needed-tooltip';
+import { useEmbedding } from '@/components/embed-provider';
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useAuthorization } from '@/hooks/authorization-hooks';
+import { cn } from '@/lib/utils';
+import { Permission } from '@activepieces/shared';
+
+import { ImportFlowDialog } from '../components/import-flow-dialog';
+
+type ImportFlowButtonProps = {
+  variant?: 'default' | 'small';
+  className?: string;
+  folderId: string;
+  onRefresh?: () => void;
+};
+
+export const ImportFlowButton = ({
+  variant = 'default',
+  className,
+  folderId,
+  onRefresh,
+}: ImportFlowButtonProps) => {
+  const { checkAccess } = useAuthorization();
+  const { embedState } = useEmbedding();
+  const doesUserHavePermissionToWriteFlow = checkAccess(Permission.WRITE_FLOW);
+
+  if (embedState.hideExportAndImportFlow) {
+    return null;
+  }
+
+  return (
+    <PermissionNeededTooltip hasPermission={doesUserHavePermissionToWriteFlow}>
+      <Tooltip delayDuration={100}>
+        <ImportFlowDialog
+          insideBuilder={false}
+          onRefresh={() => {
+            if (onRefresh) onRefresh();
+          }}
+          folderId={folderId}
+        >
+          <TooltipTrigger asChild>
+            <Button
+              disabled={!doesUserHavePermissionToWriteFlow}
+              variant={variant === 'small' ? 'ghost' : 'outline'}
+              size={variant === 'small' ? 'icon' : 'default'}
+              className={cn(
+                variant === 'small' ? '!bg-transparent' : '',
+                className,
+              )}
+              data-testid="import-flow-button"
+            >
+              {variant === 'small' ? (
+                <Upload className="h-4 w-4" />
+              ) : (
+                <>
+                  <Upload className="h-4 w-4 mr-2" />
+                  <span>{t('Import')}</span>
+                </>
+              )}
+            </Button>
+          </TooltipTrigger>
+        </ImportFlowDialog>
+        <TooltipContent side={variant === 'small' ? 'right' : 'bottom'}>
+          {t('Import flow')}
+        </TooltipContent>
+      </Tooltip>
+    </PermissionNeededTooltip>
+  );
+};
diff --git a/packages/react-ui/src/features/flows/lib/flow-hooks.tsx b/packages/react-ui/src/features/flows/lib/flow-hooks.tsx
@@ -21,6 +21,7 @@ import {
   FlowStatus,
   FlowVersion,
   FlowVersionMetadata,
+  FlowVersionTemplate,
   ListFlowsRequest,
   PopulatedFlow,
   FlowTrigger,
@@ -30,6 +31,7 @@ import {
   isNil,
   ErrorCode,
   SeekPage,
+  Template,
   UncategorizedFolderId,
 } from '@activepieces/shared';
 
@@ -333,6 +335,112 @@ export const flowHooks = {
       },
     });
   },
+  importFlowIntoExisting: async ({
+    template,
+    existingFlowId,
+  }: {
+    template: Template;
+    existingFlowId: string;
+  }): Promise<PopulatedFlow> => {
+    const flows = template.flows || [];
+    if (flows.length === 0) {
+      throw new Error('Template has no flows');
+    }
+
+    const templateFlow = flows[0];
+    const flow = await flowsApi.get(existingFlowId);
+
+    const oldExternalId = !isNil(template.metadata?.externalId)
+      ? (template.metadata['externalId'] as string)
+      : flow.externalId;
+
+    const triggerString = JSON.stringify(templateFlow.trigger).replaceAll(
+      oldExternalId,
+      flow.externalId,
+    );
+    const updatedTrigger = JSON.parse(triggerString);
+
+    return await flowsApi.update(flow.id, {
+      type: FlowOperationType.IMPORT_FLOW,
+      request: {
+        displayName: templateFlow.displayName,
+        trigger: updatedTrigger,
+        schemaVersion: templateFlow.schemaVersion,
+      },
+    });
+  },
+  importFlowsFromTemplates: async ({
+    templates,
+    projectId,
+    folderName,
+  }: {
+    templates: Template[];
+    projectId: string;
+    folderName?: string;
+  }): Promise<PopulatedFlow[]> => {
+    if (templates.length === 0) {
+      return [];
+    }
+
+    const allFlowsToImport: Array<{
+      flow: PopulatedFlow;
+      templateFlow: FlowVersionTemplate;
+      oldExternalId: string;
+    }> = [];
+
+    for (const template of templates) {
+      const flows = template.flows || [];
+      if (flows.length === 0) {
+        continue;
+      }
+
+      for (const templateFlow of flows) {
+        const flow = await flowsApi.create({
+          displayName: templateFlow.displayName,
+          projectId,
+          folderName,
+        });
+
+        const oldExternalId = !isNil(template.metadata?.externalId)
+          ? (template.metadata['externalId'] as string)
+          : flow.externalId;
+
+        allFlowsToImport.push({
+          flow,
+          templateFlow,
+          oldExternalId,
+        });
+      }
+    }
+
+    const externalIdMap = new Map<string, string>();
+    for (const { oldExternalId, flow } of allFlowsToImport) {
+      externalIdMap.set(oldExternalId, flow.externalId);
+    }
+
+    const importPromises = allFlowsToImport.map(
+      async ({ flow, templateFlow }) => {
+        let triggerString = JSON.stringify(templateFlow.trigger);
+
+        for (const [oldId, newId] of externalIdMap.entries()) {
+          triggerString = triggerString.replaceAll(oldId, newId);
+        }
+
+        const updatedTrigger = JSON.parse(triggerString);
+
+        return await flowsApi.update(flow.id, {
+          type: FlowOperationType.IMPORT_FLOW,
+          request: {
+            displayName: templateFlow.displayName,
+            trigger: updatedTrigger,
+            schemaVersion: templateFlow.schemaVersion,
+          },
+        });
+      },
+    );
+
+    return await Promise.all(importPromises);
+  },
 };
 
 type UseChangeFlowStatusParams = {
diff --git a/packages/react-ui/src/features/flows/lib/use-flows-bulk-actions.tsx b/packages/react-ui/src/features/flows/lib/use-flows-bulk-actions.tsx
@@ -25,6 +25,7 @@ import { MoveFlowDialog } from '../components/move-flow-dialog';
 
 import { flowHooks } from './flow-hooks';
 import { flowsApi } from './flows-api';
+import { ImportFlowButton } from './Import-flow-button';
 import { NewFlowButton } from './new-flow-button';
 
 export const useFlowsBulkActions = ({
@@ -177,6 +178,7 @@ export const useFlowsBulkActions = ({
                   </ConfirmationDeleteDialog>
                 </PermissionNeededTooltip>
               )}
+              <ImportFlowButton folderId={folderId} onRefresh={refetch} />
               <NewFlowButton folderId={folderId} />
             </div>
           );
diff --git a/packages/react-ui/src/features/templates/components/share-template.tsx b/packages/react-ui/src/features/templates/components/share-template.tsx
diff --git a/packages/server/api/src/app/flows/flow/flow.service.ts b/packages/server/api/src/app/flows/flow/flow.service.ts
