use a modal for metadata instead w/ burnettk

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -44,6 +44,7 @@ import {
   PermissionsToCheck,
   ProcessData,
   ProcessInstance,
+  ProcessInstanceMetadata,
   ProcessInstanceTask,
 } from '../interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -74,6 +75,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
   const [eventTextEditorEnabled, setEventTextEditorEnabled] =
     useState<boolean>(false);
   const [displayDetails, setDisplayDetails] = useState<boolean>(false);
+  const [showProcessInstanceMetadata, setShowProcessInstanceMetadata] =
+    useState<boolean>(false);
 
   const setErrorObject = (useContext as any)(ErrorContext)[1];
 
@@ -446,6 +449,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
                   Messages
                 </Button>
               </Can>
+              {processInstance.process_metadata &&
+              processInstance.process_metadata.length > 0 ? (
+                <Button
+                  size="sm"
+                  className="button-white-background"
+                  data-qa="process-instance-show-metadata"
+                  onClick={() => {
+                    setShowProcessInstanceMetadata(true);
+                  }}
+                >
+                  Metadata
+                </Button>
+              ) : null}
             </ButtonSet>
           </Column>
         </Grid>
@@ -903,6 +919,41 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     );
   };
 
+  const processInstanceMetadataArea = () => {
+    if (
+      !processInstance ||
+      (processInstance.process_metadata &&
+        processInstance.process_metadata.length < 1)
+    ) {
+      return null;
+    }
+    const metadataComponents: any[] = [];
+    (processInstance.process_metadata || []).forEach(
+      (processInstanceMetadata: ProcessInstanceMetadata) => {
+        metadataComponents.push(
+          <Grid condensed fullWidth>
+            <Column sm={1} md={1} lg={2} className="grid-list-title">
+              {processInstanceMetadata.key}
+            </Column>
+            <Column sm={3} md={3} lg={3} className="grid-date">
+              {processInstanceMetadata.value}
+            </Column>
+          </Grid>
+        );
+      }
+    );
+    return (
+      <Modal
+        open={showProcessInstanceMetadata}
+        modalHeading="Metadata"
+        passiveModal
+        onRequestClose={() => setShowProcessInstanceMetadata(false)}
+      >
+        {metadataComponents}
+      </Modal>
+    );
+  };
+
   const taskUpdateDisplayArea = () => {
     const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay };
     const candidateEvents: any = getEvents(taskToUse);
@@ -1034,6 +1085,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
         <br />
         {taskUpdateDisplayArea()}
         {processDataDisplayArea()}
+        {processInstanceMetadataArea()}
         {stepsElement()}
         <br />
         <ReactDiagramEditor