updated process modal show page to use accordion component w/ burnettk

spiffworkflow-frontend/src/index.css

@@ -40,6 +40,10 @@ span.bjs-crumb {
   opacity: .4;
 }
 
+.accordion-item-label {
+  vertical-align: middle;
+}
+
 .diagram-editor-canvas {
   border:1px solid #000000;
   height:70vh;

spiffworkflow-frontend/src/index.scss

@@ -1,12 +1,12 @@
 // @use '@carbon/react/scss/themes';
 // @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
 
-@use '@carbon/react/scss/theme' with
+// @use '@carbon/react/scss/theme' with
-  (
+//   (
-    $theme: (
+//     $theme: (
-      cds-link-text-color: #525252
+//   cds-link-primary: #525252
-    )
+//     )
-  );
+//   );
 
 @use '@carbon/react';
 @use '@carbon/styles';
@@ -39,3 +39,42 @@
   color: #525252;
 }
 
+.cds--btn--ghost {
+  color: black;
+}
+.cds--btn--ghost:visited {
+  color: black;
+}
+.cds--btn--ghost:hover {
+  color: black;
+}
+.cds--btn--ghost:visited:hover {
+  color: black;
+}
+
+$slightly-lighter-gray: #474747;
+
+.cds--btn--primary {
+  background-color: #393939;
+}
+.cds--btn--primary:hover {
+  background-color: $slightly-lighter-gray;
+}
+// .cds--btn--ghost:visited {
+//   color: black;
+// }
+// .cds--btn--ghost:hover {
+//   color: black;
+// }
+// .cds--btn--ghost:visited:hover {
+//   color: black;
+// }
+
+
+// :root {
+//   --cds-link-primary: #525252;
+// }
+// .card {
+//   background: var(--orange);
+//   --orange: hsl(255, 72%, var(--lightness));
+// }

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -1,12 +1,25 @@
 import { useContext, useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 // @ts-ignore
-import { Grid, Column, Dropdown, Button, Stack } from '@carbon/react';
+import { Add, Upload } from '@carbon/icons-react';
+import {
+  Accordion,
+  AccordionItem,
+  Grid,
+  Column,
+  Dropdown,
+  Button,
+  Stack,
+  ButtonSet,
+  Modal,
+  FileUploader,
+  // @ts-ignore
+} from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import FileInput from '../components/FileInput';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
-import { RecentProcessModel } from '../interfaces';
+import { ProcessModel, RecentProcessModel } from '../interfaces';
 
 const storeRecentProcessModelInLocalStorage = (
   processModelForStorage: any,
@@ -66,12 +79,16 @@ export default function ProcessModelShow() {
   const params = useParams();
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
-  const [processModel, setProcessModel] = useState({});
+  const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
   const [processInstanceResult, setProcessInstanceResult] = useState(null);
-  const [reloadModel, setReloadModel] = useState(false);
+  const [reloadModel, setReloadModel] = useState<boolean>(false);
+  const [filesToUpload, setFilesToUpload] = useState<any>(null);
+  const [showFileUploadModal, setShowFileUploadModal] =
+    useState<boolean>(false);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    const processResult = (result: object) => {
+    const processResult = (result: ProcessModel) => {
       setProcessModel(result);
       setReloadModel(false);
       storeRecentProcessModelInLocalStorage(result, params);
@@ -100,8 +117,8 @@ export default function ProcessModelShow() {
     });
   };
 
-  let processInstanceResultTag = null;
+  const processInstanceResultTag = () => {
-  if (processInstanceResult) {
+    if (processModel && processInstanceResult) {
       let takeMeToMyTaskBlurb = null;
       // FIXME: ensure that the task is actually for the current user as well
       const processInstanceId = (processInstanceResult as any).id;
@@ -110,19 +127,19 @@ export default function ProcessModelShow() {
         takeMeToMyTaskBlurb = (
           <span>
             You have a task to complete. Go to{' '}
-          <Link to={`/tasks/${processInstanceId}/${nextTask.id}`}>my task</Link>
+            <Link to={`/tasks/${processInstanceId}/${nextTask.id}`}>
+              my task
+            </Link>
             .
           </span>
         );
       }
-    processInstanceResultTag = (
+      return (
         <div className="alert alert-success" role="alert">
           <p>
             Process Instance {processInstanceId} kicked off (
             <Link
-            to={`/admin/process-models/${
+              to={`/admin/process-models/${processModel.process_group_id}/${
-              (processModel as any).process_group_id
-            }/${
                 (processModel as any).id
               }/process-instances/${processInstanceId}`}
               data-qa="process-instance-show-link"
@@ -134,6 +151,8 @@ export default function ProcessModelShow() {
         </div>
       );
     }
+    return null;
+  };
 
   const onUploadedCallback = () => {
     setReloadModel(true);
@@ -209,112 +228,131 @@ export default function ProcessModelShow() {
     );
   };
 
-  const processModelButtons = () => {
+  const handleFileUploadCancel = () => {
-    // <Button
+    setShowFileUploadModal(false);
-    //   href={`/admin/process-models/${
+  };
-    //     (processModel as any).process_group_id
+
-    //   }/${(processModel as any).id}/files?file_type=dmn`}
+  const handleFileUpload = (event: any) => {
-    //   variant="success"
+    event.preventDefault();
-    // >
+    const url = `/process-models/${(processModel as any).process_group_id}/${
-    //   Add New DMN File
+      (processModel as any).id
-    // </Button>
+    }/files`;
-    // <Button
+    const formData = new FormData();
-    //   href={`/admin/process-models/${
+    formData.append('file', filesToUpload[0]);
-    //     (processModel as any).process_group_id
+    formData.append('fileName', filesToUpload[0].name);
-    //   }/${(processModel as any).id}/form?file_ext=json`}
+    HttpService.makeCallToBackend({
-    //   variant="info"
+      path: url,
-    // >
+      successCallback: onUploadedCallback,
-    //   Add New JSON File
+      httpMethod: 'POST',
-    // </Button>
+      postBody: formData,
-    // <Button
+    });
-    //   href={`/admin/process-models/${
+    setShowFileUploadModal(false);
-    //     (processModel as any).process_group_id
+  };
-    //   }/${(processModel as any).id}/form?file_ext=md`}
+
-    //   variant="info"
+  const fileUploadModal = () => {
-    // >
-    //   Add New Markdown File
-    // </Button>
-    const items = [
-      {
-        key1: (
-          <Grid>
-            <Column md={1}>
-              <Button
-                onClick={(e2: any) => console.log('e2', e2)}
-                variant="primary"
-              >
-                b1
-              </Button>
-            </Column>
-            <Column md={1}>
-              <Button
-                onClick={(e3: any) => console.log('e3', e3)}
-                variant="primary"
-              >
-                b2
-              </Button>
-            </Column>
-          </Grid>
-        ),
-      },
-    ];
     return (
-      <Stack orientation="horizontal" gap={3}>
+      <Modal
-        <Button onClick={processInstanceCreateAndRun} variant="primary">
+        open={showFileUploadModal}
-          Run
+        modalHeading="Upload File"
-        </Button>
+        primaryButtonText="Upload"
-        <Button
+        secondaryButtonText="Cancel"
-          href={`/admin/process-models/${
+        onSecondarySubmit={handleFileUploadCancel}
-            (processModel as any).process_group_id
+        onRequestClose={handleFileUploadCancel}
-          }/${(processModel as any).id}/edit`}
+        onRequestSubmit={handleFileUpload}
-          variant="secondary"
       >
-          Edit process model
+        <FileUploader
-        </Button>
+          labelTitle="Upload files"
-        <Button
+          labelDescription="Max file size is 500mb. Only .bpmn, .dmn, and .json files are supported."
-          href={`/admin/process-models/${
+          buttonLabel="Add file"
-            (processModel as any).process_group_id
+          buttonKind="primary"
-          }/${(processModel as any).id}/files?file_type=bpmn`}
+          size="md"
-          variant="warning"
+          filenameStatus="edit"
-        >
+          role="button"
-          Add New BPMN File
+          accept={['.bpmn', '.dmn', '.json']}
-        </Button>
+          disabled={false}
-        <Dropdown
+          iconDescription="Delete file"
-          id="default"
+          name=""
-          titleText="Dropdown label"
+          multiple={false}
-          helperText="This is some helper text"
+          onChange={(event: any) => setFilesToUpload(event.target.files)}
-          label="Dropdown menu options"
-          items={items}
-          itemToString={(item: any) => (item ? item.key1 : '')}
-          onChange={(e: any) => console.log('e', e)}
         />
-      </Stack>
+      </Modal>
     );
   };
 
-  if (Object.keys(processModel).length > 1) {
+  const processModelButtons = () => {
+    return (
+      <Accordion>
+        <AccordionItem
+          title={
+            <Stack orientation="horizontal">
+              <span>
+                <Button size="sm" kind="ghost">
+                  Files
+                </Button>
+              </span>
+            </Stack>
+          }
+        >
+          <ButtonSet>
+            <Button
+              renderIcon={Upload}
+              onClick={() => setShowFileUploadModal(true)}
+              size="sm"
+              kind=""
+              className="button-white-background"
+            >
+              Upload File
+            </Button>
+            <Button
+              renderIcon={Add}
+              href={`/admin/process-models/${
+                (processModel as any).process_group_id
+              }/${(processModel as any).id}/files?file_type=dmn`}
+              size="sm"
+            >
+              New DMN File
+            </Button>
+            <Button
+              renderIcon={Add}
+              href={`/admin/process-models/${
+                (processModel as any).process_group_id
+              }/${(processModel as any).id}/form?file_ext=json`}
+              size="sm"
+            >
+              New JSON File
+            </Button>
+            <Button
+              renderIcon={Add}
+              href={`/admin/process-models/${
+                (processModel as any).process_group_id
+              }/${(processModel as any).id}/form?file_ext=md`}
+              size="sm"
+            >
+              New Markdown File
+            </Button>
+          </ButtonSet>
+          <br />
+          {processModelFileList()}
+        </AccordionItem>
+      </Accordion>
+    );
+  };
+
+  if (processModel) {
     return (
       <>
         <ProcessBreadcrumb
-          processGroupId={(processModel as any).process_group_id}
+          processGroupId={processModel.process_group_id}
-          processModelId={(processModel as any).id}
+          processModelId={processModel.id}
-        />
-        {processInstanceResultTag}
-        <FileInput
-          processModelId={(processModel as any).id}
-          processGroupId={(processModel as any).process_group_id}
-          onUploadedCallback={onUploadedCallback}
         />
+        {fileUploadModal()}
+        {processInstanceResultTag()}
         <br />
         {processModelButtons()}
         <br />
         <br />
         <h3>Process Instances</h3>
         {processInstancesUl()}
-        <br />
-        <br />
-        <h3>Files</h3>
-        {processModelFileList()}
       </>
     );
   }