Merge pull request #287 from sartography/feature/new-ux-options-for-adding-files

allow markdown uploads and add some different ux options for adding files

spiffworkflow-frontend/src/components/ProcessModelTestRun.tsx

@@ -1,4 +1,4 @@
-import { PlayOutline, Checkmark, Close } from '@carbon/icons-react';
+import { Rule, Checkmark, Close } from '@carbon/icons-react';
 import { Button, Modal } from '@carbon/react';
 import { useState } from 'react';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
@@ -11,12 +11,12 @@ import {
 
 type OwnProps = {
   processModelFile?: ProcessFile;
-  buttonType?: string;
+  titleText: string;
 };
 
 export default function ProcessModelTestRun({
   processModelFile,
-  buttonType = 'icon',
+  titleText,
 }: OwnProps) {
   const [testCaseResults, setTestCaseResults] =
     useState<TestCaseResults | null>(null);
@@ -153,29 +153,16 @@ export default function ProcessModelTestRun({
   };
 
   const buttonElement = () => {
-    if (buttonType === 'icon') {
+    return (
-      return (
+      <Button
-        <Button
+        kind="ghost"
-          kind="ghost"
+        renderIcon={Rule}
-          renderIcon={PlayOutline}
+        iconDescription={titleText}
-          iconDescription="Run BPMN unit tests defined in this file"
+        hasIconOnly
-          hasIconOnly
+        size="lg"
-          size="lg"
+        onClick={() => onProcessModelTestRun()}
-          onClick={() => onProcessModelTestRun()}
+      />
-        />
+    );
-      );
-    }
-    if (buttonType === 'text') {
-      return (
-        <Button
-          onClick={() => onProcessModelTestRun()}
-          title="Run all BPMN unit tests for this process model"
-        >
-          Run Unit Tests
-        </Button>
-      );
-    }
-    return null;
   };
 
   return (

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
-  Add,
   Download,
   Edit,
   Favorite,
@@ -14,8 +13,8 @@ import {
   Accordion,
   AccordionItem,
   Button,
-  ButtonSet,
   Column,
+  Dropdown,
   FileUploader,
   Grid,
   Modal,
@@ -325,7 +324,10 @@ export default function ProcessModelShow() {
     if (isTestCaseFile(processModelFile)) {
       elements.push(
         <Can I="POST" a={targetUris.processModelTestsPath} ability={ability}>
-          <ProcessModelTestRun processModelFile={processModelFile} />
+          <ProcessModelTestRun
+            processModelFile={processModelFile}
+            titleText="Run BPMN unit tests defined in this file"
+          />
         </Can>
       );
     }
@@ -483,13 +485,13 @@ export default function ProcessModelShow() {
       >
         <FileUploader
           labelTitle="Upload files"
-          labelDescription="Max file size is 500mb. Only .bpmn, .dmn, and .json files are supported."
+          labelDescription="Max file size is 500mb. Only .bpmn, .dmn, .json, and .md files are supported."
           buttonLabel="Add file"
           buttonKind="primary"
           size="md"
           filenameStatus="edit"
           role="button"
-          accept={['.bpmn', '.dmn', '.json']}
+          accept={['.bpmn', '.dmn', '.json', '.md']}
           disabled={false}
           iconDescription="Delete file"
           name=""
@@ -501,6 +503,53 @@ export default function ProcessModelShow() {
     );
   };
 
+  const items = [
+    'Upload File',
+    'New BPMN File',
+    'New DMN File',
+    'New JSON File',
+    'New Markdown File',
+  ].map((item) => ({
+    text: item,
+  }));
+
+  const addFileComponent = () => {
+    return (
+      <Dropdown
+        id="inline"
+        titleText=""
+        size="lg"
+        label="Add File"
+        type="inline"
+        onChange={(a: any) => {
+          if (a.selectedItem.text === 'New BPMN File') {
+            navigate(
+              `/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`
+            );
+          } else if (a.selectedItem.text === 'Upload File') {
+            setShowFileUploadModal(true);
+          } else if (a.selectedItem.text === 'New DMN File') {
+            navigate(
+              `/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`
+            );
+          } else if (a.selectedItem.text === 'New JSON File') {
+            navigate(
+              `/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`
+            );
+          } else if (a.selectedItem.text === 'New Markdown File') {
+            navigate(
+              `/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`
+            );
+          } else {
+            console.log('a.selectedItem.text', a.selectedItem.text);
+          }
+        }}
+        items={items}
+        itemToString={(item: any) => (item ? item.text : '')}
+      />
+    );
+  };
+
   const processModelFilesSection = () => {
     return (
       <Grid
@@ -531,46 +580,7 @@ export default function ProcessModelShow() {
                 a={targetUris.processModelFileCreatePath}
                 ability={ability}
               >
-                <ButtonSet>
+                {addFileComponent()}
-                  <Button
-                    renderIcon={Upload}
-                    data-qa="upload-file-button"
-                    onClick={() => setShowFileUploadModal(true)}
-                    size="sm"
-                    kind=""
-                    className="button-white-background"
-                  >
-                    Upload File
-                  </Button>
-                  <Button
-                    renderIcon={Add}
-                    href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`}
-                    size="sm"
-                  >
-                    New BPMN File
-                  </Button>
-                  <Button
-                    renderIcon={Add}
-                    href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`}
-                    size="sm"
-                  >
-                    New DMN File
-                  </Button>
-                  <Button
-                    renderIcon={Add}
-                    href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`}
-                    size="sm"
-                  >
-                    New JSON File
-                  </Button>
-                  <Button
-                    renderIcon={Add}
-                    href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`}
-                    size="sm"
-                  >
-                    New Markdown File
-                  </Button>
-                </ButtonSet>
                 <br />
               </Can>
               {processModelFileList()}
@@ -642,6 +652,26 @@ export default function ProcessModelShow() {
               confirmButtonLabel="Delete"
             />
           </Can>
+          <Can
+            I="POST"
+            a={targetUris.processModelPublishPath}
+            ability={ability}
+          >
+            <Button
+              kind="ghost"
+              data-qa="publish-process-model-button"
+              renderIcon={Upload}
+              iconDescription="Publish Changes"
+              hasIconOnly
+              onClick={publishProcessModel}
+              disabled={publishDisabled}
+            />
+          </Can>
+          <Can I="POST" a={targetUris.processModelTestsPath} ability={ability}>
+            {hasTestCaseFiles ? (
+              <ProcessModelTestRun titleText="Run all BPMN unit tests for this process model" />
+            ) : null}
+          </Can>
         </Stack>
         <p className="process-description">{processModel.description}</p>
         <Stack orientation="horizontal" gap={3}>
@@ -659,20 +689,6 @@ export default function ProcessModelShow() {
               <br />
             </>
           </Can>
-          <Can
-            I="POST"
-            a={targetUris.processModelPublishPath}
-            ability={ability}
-          >
-            <Button disabled={publishDisabled} onClick={publishProcessModel}>
-              Publish Changes
-            </Button>
-          </Can>
-          <Can I="POST" a={targetUris.processModelTestsPath} ability={ability}>
-            {hasTestCaseFiles ? (
-              <ProcessModelTestRun buttonType="text" />
-            ) : null}
-          </Can>
         </Stack>
         {processModelFilesSection()}
         <Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>