make Files half-width and add link to file

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -13,6 +13,8 @@ import {
   Accordion,
   AccordionItem,
   Button,
+  Grid,
+  Column,
   Stack,
   ButtonSet,
   Modal,
@@ -233,17 +235,22 @@ export default function ProcessModelShow() {
     });
   };
 
-  const navigateToFileEdit = (processModelFile: ProcessFile) => {
+  const profileModelFileEditUrl = (processModelFile: ProcessFile) => {
     if (processModel) {
       if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
-        navigate(
-          `/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`
-        );
-      } else if (processModelFile.name.match(/\.(json|md)$/)) {
-        navigate(
-          `/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`
-        );
+        return `/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`;
       }
+      if (processModelFile.name.match(/\.(json|md)$/)) {
+        return `/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`;
+      }
+    }
+    return null;
+  };
+
+  const navigateToFileEdit = (processModelFile: ProcessFile) => {
+    const url = profileModelFileEditUrl(processModelFile);
+    if (url) {
+      navigate(url);
     }
   };
 
@@ -324,10 +331,15 @@ export default function ProcessModelShow() {
       if (isPrimaryBpmnFile) {
         primarySuffix = '- Primary File';
       }
+      let fileLink = null;
+      const fileUrl = profileModelFileEditUrl(processModelFile);
+      if (fileUrl) {
+        fileLink = <Link to={fileUrl}>{processModelFile.name}</Link>;
+      }
       constructedTag = (
         <TableRow key={processModelFile.name}>
           <TableCell key={`${processModelFile.name}-cell`}>
-            {processModelFile.name}
+            {fileLink}
             {primarySuffix}
           </TableCell>
           {actionsTableCell}
@@ -440,7 +452,9 @@ export default function ProcessModelShow() {
       return null;
     }
     return (
-      <Accordion>
+      <Grid fullWidth>
+        <Column md={4} lg={8}>
+          <Accordion align="end">
             <AccordionItem
               data-qa="files-accordion"
               title={
@@ -497,6 +511,8 @@ export default function ProcessModelShow() {
               {processModelFileList()}
             </AccordionItem>
           </Accordion>
+        </Column>
+      </Grid>
     );
   };