Process artefact export (new MS)

src/management-system-v2/components/process-export.tsx

@@ -1,52 +1,101 @@
 import React, { useState } from 'react';
 
-import { Modal, Checkbox } from 'antd';
+import { Modal, Checkbox, Radio, RadioChangeEvent } from 'antd';
 import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 
-import { exportProcesses, exportType } from '@/lib/process-export';
+import { exportProcesses } from '@/lib/process-export';
+import { ProcessExportOptions } from '@/lib/process-export/export-preparation';
 
 const exportTypeOptions = [
   { label: 'BPMN', value: 'bpmn' },
   { label: 'PDF', value: 'pdf' },
   { label: 'SVG', value: 'svg' },
 ];
 
+const exportSubOptions = {
+  bpmn: [{ label: 'Export with Artefacts', value: 'artefacts' }],
+  pdf: [],
+  svg: [],
+};
+
 type ProcessExportModalProps = {
   processes: { definitionId: string; processVersion?: number | string }[]; // the processes to export; also used to decide if the modal should be opened
   onClose: () => void;
 };
 
 const ProcessExportModal: React.FC<ProcessExportModalProps> = ({ processes = [], onClose }) => {
-  const [selectedTypes, setSelectedTypes] = useState<CheckboxValueType[]>([]);
+  const [selectedType, setSelectedType] = useState<ProcessExportOptions['type']>();
+  const [selectedOptions, setSelectedOptions] = useState<CheckboxValueType[]>([]);
+  const [finishedTypeSelection, setfinishedTypeSelection] = useState(false);
 
-  const handleTypeSelectionChange = (checkedValues: CheckboxValueType[]) => {
-    // allow selection of exactly one element
-    if (!checkedValues.length) return;
-    setSelectedTypes(checkedValues.filter((el) => !selectedTypes.includes(el)));
+  const handleTypeSelectionChange = ({ target: { value } }: RadioChangeEvent) => {
+    setSelectedType(value);
   };
 
-  const handleProcessExport = async () => {
-    await exportProcesses(processes, selectedTypes[0] as exportType);
+  const handleOptionSelectionChange = (checkedValues: CheckboxValueType[]) => {
+    setSelectedOptions(checkedValues);
+  };
 
+  const handleClose = () => {
+    setSelectedType(undefined);
+    setfinishedTypeSelection(false);
     onClose();
   };
 
+  const handleOk = async () => {
+    if (!finishedTypeSelection) {
+      const subOptions = exportSubOptions[selectedType!];
+      if (subOptions && subOptions.length) {
+        // there are suboptions that the user might want to select => switch to the other modal view
+        setfinishedTypeSelection(true);
+        return;
+      }
+    }
+
+    await exportProcesses(
+      {
+        type: selectedType!,
+        artefacts: selectedOptions.some((el) => el === 'artefacts'),
+      },
+      processes,
+    );
+
+    handleClose();
+  };
+
+  const modalTitle = finishedTypeSelection
+    ? `Select ${selectedType} export options`
+    : 'Select the file type';
+
+  const typeSelection = (
+    <Radio.Group
+      options={exportTypeOptions}
+      onChange={handleTypeSelectionChange}
+      value={selectedType}
+      style={{ flexDirection: 'column' }}
+    />
+  );
+
+  const optionSelection = (
+    <Checkbox.Group
+      options={exportSubOptions[selectedType!]}
+      onChange={handleOptionSelectionChange}
+      value={selectedOptions}
+      style={{ flexDirection: 'column' }}
+    />
+  );
+
   return (
     <>
       <Modal
-        title="Export selected process"
+        title={modalTitle}
         open={!!processes.length}
-        onOk={handleProcessExport}
-        onCancel={onClose}
+        onOk={handleOk}
+        onCancel={handleClose}
         centered
-        okButtonProps={{ disabled: !selectedTypes.length }}
+        okButtonProps={{ disabled: !selectedType }}
       >
-        <Checkbox.Group
-          options={exportTypeOptions}
-          onChange={handleTypeSelectionChange}
-          value={selectedTypes}
-          style={{ flexDirection: 'column' }}
-        />
+        {finishedTypeSelection ? optionSelection : typeSelection}
       </Modal>
     </>
   );