Merge pull request #721 from PROCEED-Labs/fix-import-bpmn-preview

canptura · web-flow · commit 22e2b5fc766a · 2026-04-02T15:19:01.000+02:00
Export/Import Improvements
diff --git a/src/management-system-v2/components/bpmn-canvas.tsx b/src/management-system-v2/components/bpmn-canvas.tsx
@@ -399,7 +399,7 @@ const BPMNCanvas = forwardRef<BPMNCanvasRef, BPMNCanvasProps>(
       return () => resizeObserver.disconnect();
     }, [resizeWithContainer]);
 
-    return <div className={className} style={{ height: '100%' }} ref={canvas}></div>;
+    return <div className={className} style={{ height: '100%', width: '100%' }} ref={canvas}></div>;
   },
 );
 
diff --git a/src/management-system-v2/components/bpmn-viewer.tsx b/src/management-system-v2/components/bpmn-viewer.tsx
@@ -60,6 +60,7 @@ const BPMNViewer: FC<BPMNViewerProps> = ({
 };
 
 type LazyLoadingBPMNViewerProps = BPMNViewerProps & {
+  visible?: boolean;
   fallback?: React.ReactNode;
 };
 
@@ -68,15 +69,21 @@ export const LazyBPMNViewer: FC<LazyLoadingBPMNViewerProps> = ({
   ...props
 }) => {
   const ViewerContainerRef = useRef(null);
-  const visible = useLazyRendering(ViewerContainerRef);
+  const internalVisible = useLazyRendering(ViewerContainerRef);
+
+  const _visible = props.visible !== undefined ? props.visible : internalVisible;
+  const _props = { ...props, visible: undefined };
 
   return (
     <>
-      <div ref={ViewerContainerRef} style={{ height: '100%', width: '100%' }}>
-        {visible /* This ensures, that only elements, that are visible or close to beeing visible are rendered -> reduces requests for bpmn/xml */ ? (
+      <div
+        ref={ViewerContainerRef}
+        style={{ height: '100%', width: '100%', display: 'flex', justifyContent: 'center' }}
+      >
+        {_visible /* This ensures, that only elements, that are visible or close to beeing visible are rendered -> reduces requests for bpmn/xml */ ? (
           <Suspense fallback={fallback}>
             {/* Prevent sequential rendering/ get from showing the Icon-list */}
-            <BPMNViewer {...props} />
+            <BPMNViewer {..._props} />
           </Suspense>
         ) : (
           fallback
diff --git a/src/management-system-v2/components/process-modal.tsx b/src/management-system-v2/components/process-modal.tsx
@@ -18,6 +18,7 @@ import {
   Skeleton,
   Breadcrumb,
 } from 'antd';
+import { FolderOutlined } from '@ant-design/icons';
 import { MdArrowBackIos, MdArrowForwardIos } from 'react-icons/md';
 import { UserError } from '@/lib/user-error';
 import { useAddControlCallback } from '@/lib/controls-store';
@@ -31,14 +32,15 @@ import dynamic from 'next/dynamic';
 
 import '@toast-ui/editor/dist/toastui-editor.css';
 import type { Editor as EditorClass } from '@toast-ui/react-editor';
+import { isDummyFolderProcess } from '@/lib/process-export/export-preparation';
 const TextEditor = dynamic(() => import('@/components/text-editor'), {
   ssr: false,
   loading: () => <Skeleton.Input size="large" />,
 });
 
 export type ProcessModalMode = 'create' | 'edit' | 'copy' | 'import';
 
-type ProcessModalProps<T extends { name: string; description: string }> = {
+type ProcessModalProps<T extends { id?: string; name: string; description: string }> = {
   open: boolean;
   title: string;
   okText?: string;
@@ -52,6 +54,7 @@ type ProcessModalProps<T extends { name: string; description: string }> = {
 
 const ProcessModal = <
   T extends {
+    id?: string;
     name: string;
     description: string;
     userDefinedId?: string;
@@ -214,6 +217,8 @@ const ProcessModal = <
     { level: 2, blocking: open, dependencies: [open] },
   );
 
+  const [fullyOpen, setFullyOpen] = useState(false);
+
   const renderFormContent = () => {
     if (!initialData) {
       return <ProcessInputs index={0} readonly={readonly} />;
@@ -255,13 +260,38 @@ const ProcessModal = <
         >
           {initialData.map((process, index) => (
             <Card key={index}>
-              {process.bpmn && (
-                <>
-                  <LazyBPMNViewer previewBpmn={process.bpmn} reduceLogo={true} fitOnResize />
-                  <Divider style={{ width: '100%', marginLeft: '-20%' }} />
-                </>
-              )}
-              <ProcessInputsImport key={index} index={index} readonly={readonly} />
+              <>
+                {process.bpmn && (
+                  <>
+                    {isDummyFolderProcess(process) ? (
+                      <div
+                        style={{
+                          height: '150px',
+                          width: '100%',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <FolderOutlined style={{ fontSize: '100px' }} />
+                      </div>
+                    ) : (
+                      <LazyBPMNViewer
+                        previewBpmn={process.bpmn}
+                        reduceLogo={true}
+                        fitOnResize
+                        visible={fullyOpen}
+                      />
+                    )}
+                    <Divider style={{ width: '100%', marginLeft: '-20%' }} />
+                  </>
+                )}
+              </>
+              <ProcessInputsImport
+                key={index}
+                index={index}
+                readonly={readonly}
+                isFolder={isDummyFolderProcess(process)}
+              />
             </Card>
           ))}
         </Carousel>
@@ -309,6 +339,7 @@ const ProcessModal = <
             flexDirection: 'column',
           },
         }}
+        afterOpenChange={(open) => setFullyOpen(open)}
       >
         <div style={{ overflowY: 'auto', flex: 1 }} className="Hide-Scroll-Bar">
           {nameCollisions.length > 0 && showCollisions && (
@@ -395,6 +426,7 @@ type ProcessInputsProps = {
   index: number;
   initialName?: string;
   readonly?: boolean;
+  isFolder?: boolean;
 };
 
 const ProcessInputs = ({ index, initialName, readonly = false }: ProcessInputsProps) => {
@@ -486,7 +518,7 @@ const ProcessInputs = ({ index, initialName, readonly = false }: ProcessInputsPr
   );
 };
 
-const ProcessInputsImport = ({ index, readonly = false }: ProcessInputsProps) => {
+const ProcessInputsImport = ({ index, readonly = false, isFolder }: ProcessInputsProps) => {
   const instance = Form.useFormInstance();
   const data = instance.getFieldsValue()[index];
 
@@ -497,6 +529,13 @@ const ProcessInputsImport = ({ index, readonly = false }: ProcessInputsProps) =>
       <Form.Item hidden name={[index, 'folderPath']}>
         <Input disabled />
       </Form.Item>
+      {isFolder && (
+        <Alert
+          style={{ marginBottom: '10px' }}
+          type="warning"
+          title="This imports an empty folder without any processes."
+        />
+      )}
       {!!data?.folderPath && (
         <Form.Item label="Import Path">
           <Card size="small">
@@ -509,24 +548,32 @@ const ProcessInputsImport = ({ index, readonly = false }: ProcessInputsProps) =>
           </Card>
         </Form.Item>
       )}
-      <ProcessInputs index={index} readonly={readonly} />
-      <Form.Item name={[index, 'creator']} label="Original Creator" rules={[{ required: false }]}>
-        <Input disabled />
-      </Form.Item>
-      <Form.Item
-        name={[index, 'creatorUsername']}
-        label="Original Creator Username"
-        rules={[{ required: false }]}
-      >
-        <Input disabled />
-      </Form.Item>
-      <Form.Item
-        name={[index, 'createdOn']}
-        label="Original Creation Date"
-        rules={[{ required: false }]}
-      >
-        <Input disabled />
-      </Form.Item>
+      {!isFolder && (
+        <>
+          <ProcessInputs index={index} readonly={readonly} />
+          <Form.Item
+            name={[index, 'creator']}
+            label="Original Creator"
+            rules={[{ required: false }]}
+          >
+            <Input disabled />
+          </Form.Item>
+          <Form.Item
+            name={[index, 'creatorUsername']}
+            label="Original Creator Username"
+            rules={[{ required: false }]}
+          >
+            <Input disabled />
+          </Form.Item>
+          <Form.Item
+            name={[index, 'createdOn']}
+            label="Original Creation Date"
+            rules={[{ required: false }]}
+          >
+            <Input disabled />
+          </Form.Item>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/management-system-v2/lib/data/processes.tsx b/src/management-system-v2/lib/data/processes.tsx
@@ -8,6 +8,7 @@ import {
   generateScriptTaskFileName,
   generateStartFormFileName,
   generateUserTaskFileName,
+  getDefinitionsId,
   getDefinitionsVersionInformation,
   getElementsByTagName,
   setDefinitionsName,
@@ -66,6 +67,7 @@ import { getFolderById, getRootFolder } from './db/folders';
 import { truthyFilter } from '../typescript-utils';
 import { createFolder, getFolder, getFolderContents } from './folders';
 import Ability from '../ability/abilityHelper';
+import { isDummyFolderProcess } from '../process-export/export-preparation';
 
 // Import necessary functions from processModule
 
@@ -275,6 +277,12 @@ export const addProcesses = async (
       value.folderId = folder.id;
     }
 
+    if (isDummyFolderProcess(value)) {
+      // if the process represents a placeholder for importing empty folders then skip adding the
+      // process after the folder structure was created
+      continue;
+    }
+
     // bpmn prop gets deleted in addProcess()
     const process = await _addProcess({ ...newProcess, folderId: value.folderId });
 
@@ -395,6 +403,9 @@ export const importProcesses = async (processData: ProcessData[], spaceId: strin
     return importedProcesses;
   }
 
+  // filter out dummy processes that were included in the import to generate empty folders
+  processData = processData.filter((p) => !isDummyFolderProcess(p));
+
   for (let idx = 0; idx < importedProcesses.length; idx++) {
     const process = importedProcesses[idx];
     const artefacts = processData[idx].artefacts;
diff --git a/src/management-system-v2/lib/process-export/export-preparation.ts b/src/management-system-v2/lib/process-export/export-preparation.ts
@@ -21,6 +21,9 @@ import {
   toBpmnXml,
   getAllElements,
   getStartFormFileNameMapping,
+  initXml,
+  setDefinitionsId,
+  setDefinitionsName,
 } from '@proceed/bpmn-helper';
 
 import { asyncMap, asyncFilter } from '../helpers/javascriptHelpers';
@@ -250,6 +253,30 @@ async function ensureProcessInfo(
   isImport = false,
   ability?: Ability,
 ) {
+  if (definitionId.startsWith(dummyProcessId)) {
+    let bpmn = initXml();
+    bpmn = (await setDefinitionsId(bpmn, definitionId)) as string;
+    bpmn = (await setDefinitionsName(bpmn, 'Placeholder Process To Keep The Folder')) as string;
+    exportData[definitionId] = {
+      definitionName: 'Placeholder Process To Keep The Folder',
+      folderPath,
+      isImport,
+      versions: {
+        latest: {
+          bpmn,
+          isImport,
+          layers: [],
+          imports: [],
+        },
+      },
+      scriptTasks: [],
+      userTasks: [],
+      images: [],
+    };
+
+    return;
+  }
+
   if (!exportData[definitionId]) {
     const process = await getProcess(definitionId, spaceId, undefined, ability);
 
@@ -295,6 +322,12 @@ async function ensureProcessInfo(
   }
 }
 
+export const dummyProcessId = '___empty_dummy_process___';
+
+export function isDummyFolderProcess(input: { id?: string }) {
+  return 'id' in input && input.id?.startsWith(dummyProcessId);
+}
+
 /**
  * Gets the data that is needed to export all the requested processes with the given options
  *
@@ -321,6 +354,16 @@ export async function prepareExport(
     if (isUserErrorResponse(folder)) throw folder.error.message;
     if (isUserErrorResponse(content)) throw content.error.message;
 
+    // make sure empty folders are exported by placing a dummy process into the folder
+    if (!content.length) {
+      return [
+        {
+          definitionId: `${dummyProcessId}_${path.split('/').join('_')}_${folder.name}`,
+          folderPath: path + '/' + folder.name,
+        },
+      ];
+    }
+
     return (
       await asyncMap(content, async (entry) => {
         if (entry.type !== 'folder') {
