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

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
-  Add,
   Download,
   Edit,
   Favorite,
   TrashCan,
-  Upload,
+  NextOutline,
   View,
   // @ts-ignore
 } from '@carbon/icons-react';
@@ -14,8 +13,8 @@ import {
   Accordion,
   AccordionItem,
   Button,
-  ButtonSet,
   Column,
+  Dropdown,
   FileUploader,
   Grid,
   Modal,
@@ -106,6 +105,12 @@ export default function ProcessModelShow() {
     });
   }, [reloadModel, modifiedProcessModelId]);
 
+  // these options are just here as a sort of A/B test to see which UX is better.
+  // they will be removed once we learn which UX to go with.
+  const newUx1 = true;
+  const newUx2 = false;
+  const newUx2PublishAsIcon = false;
+
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
@@ -483,13 +488,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 +506,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 +583,7 @@ export default function ProcessModelShow() {
                 a={targetUris.processModelFileCreatePath}
                 ability={ability}
               >
-                <ButtonSet>
+                {newUx1 && 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 +655,22 @@ export default function ProcessModelShow() {
               confirmButtonLabel="Delete"
             />
           </Can>
+          {newUx2PublishAsIcon && (
+            <Can
+              I="POST"
+              a={targetUris.processModelPublishPath}
+              ability={ability}
+            >
+              <Button
+                kind="ghost"
+                data-qa="publish-process-model-button"
+                renderIcon={NextOutline}
+                iconDescription="Publish Changes"
+                hasIconOnly
+                onClick={publishProcessModel}
+              />
+            </Can>
+          )}
         </Stack>
         <p className="process-description">{processModel.description}</p>
         <Stack orientation="horizontal" gap={3}>
@@ -664,9 +693,27 @@ export default function ProcessModelShow() {
             a={targetUris.processModelPublishPath}
             ability={ability}
           >
-            <Button disabled={publishDisabled} onClick={publishProcessModel}>
+            {!newUx2PublishAsIcon ? (
-              Publish Changes
+              <Can
-            </Button>
+                I="POST"
+                a={targetUris.processModelPublishPath}
+                ability={ability}
+              >
+                <Button
+                  disabled={publishDisabled}
+                  onClick={publishProcessModel}
+                >
+                  Publish Changes
+                </Button>
+              </Can>
+            ) : null}
+            <Can
+              I="POST"
+              a={targetUris.processModelFileCreatePath}
+              ability={ability}
+            >
+              {newUx2 ? addFileComponent() : null}
+            </Can>
           </Can>
           <Can I="POST" a={targetUris.processModelTestsPath} ability={ability}>
             {hasTestCaseFiles ? (