Allow viewing/editing xml of bpmn and dmn files (#76)

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -52,6 +52,8 @@ import TouchModule from 'diagram-js/lib/navigation/touch';
 // @ts-expect-error TS(7016) FIXME
 import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
 
+import { useNavigate } from 'react-router-dom';
+
 import { Can } from '@casl/react';
 import HttpService from '../services/HttpService';
 
@@ -119,6 +121,7 @@ export default function ReactDiagramEditor({
     [targetUris.processModelFileShowPath]: ['POST', 'GET', 'PUT', 'DELETE'],
   };
   const { ability } = usePermissionFetcher(permissionRequestData);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (diagramModelerState) {
@@ -542,6 +545,8 @@ export default function ReactDiagramEditor({
       });
   };
 
+  const canViewXml = fileName !== undefined;
+
   const userActionOptions = () => {
     if (diagramType !== 'readonly') {
       return (
@@ -580,6 +585,23 @@ export default function ReactDiagramEditor({
           >
             <Button onClick={downloadXmlFile}>Download</Button>
           </Can>
+          <Can
+            I="GET"
+            a={targetUris.processModelFileShowPath}
+            ability={ability}
+          >
+            {canViewXml && (
+              <Button
+                onClick={() => {
+                  navigate(
+                    `/admin/process-models/${processModelId}/form/${fileName}`
+                  );
+                }}
+              >
+                View XML
+              </Button>
+            )}
+          </Can>
         </>
       );
     }

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -36,7 +36,20 @@ export default function ReactFormEditor() {
     return searchParams.get('file_ext') ?? 'json';
   })();
 
-  const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json';
+  const hasDiagram = fileExtension === 'bpmn' || fileExtension === 'dmn';
+
+  const editorDefaultLanguage = (() => {
+    if (fileExtension === 'json') {
+      return 'json';
+    }
+    if (hasDiagram) {
+      return 'xml';
+    }
+    if (fileExtension === 'md') {
+      return 'markdown';
+    }
+    return 'text';
+  })();
 
   const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
     `${params.process_model_id}`
@@ -193,6 +206,19 @@ export default function ReactFormEditor() {
             buttonLabel="Delete"
           />
         ) : null}
+        {hasDiagram ? (
+          <Button
+            onClick={() =>
+              navigate(
+                `/admin/process-models/${modifiedProcessModelId}/files/${params.file_name}`
+              )
+            }
+            variant="danger"
+            data-qa="view-diagram-button"
+          >
+            View Diagram
+          </Button>
+        ) : null}
         <Editor
           height={600}
           width="auto"