Feature/never ending UI edits (#374)

* Basically shift our ui to something similar to Google's search results page - where we have a strong left padding that offsets against our logo, and a fixed width for our content, that can be breached in some circumstances (such as when tables are very large).  This breaking can happen for both our standard tables, as well as markdown tables.   This does not include the fix for locking - which is still in progress.

* modified routes so that most routes are within a "fixed-width-container" but our BPMN editor can still take up 100% of the screen.
* fixed-width-container has breakpoints at 1056 (remove all padding) and 1400 (limit width to a max of 1280)  but in all cases allow for an overflow of visible - so tables can extend beyond this limit when needed,
* Removed "Messages" as a heading from the tab view - but left on the /messages route.

* Lint fixing

spiffworkflow-frontend/src/App.tsx

@@ -16,6 +16,7 @@ import UserService from './services/UserService';
 import ErrorDisplay from './components/ErrorDisplay';
 import APIErrorProvider from './contexts/APIErrorContext';
 import ScrollToTop from './components/ScrollToTop';
+import EditorRoutes from './routes/EditorRoutes';
 
 export default function App() {
   if (!UserService.isLoggedIn()) {
@@ -41,6 +42,7 @@ export default function App() {
                   <Route path="/about" element={<About />} />
                   <Route path="/tasks/*" element={<HomePageRoutes />} />
                   <Route path="/admin/*" element={<AdminRoutes />} />
+                  <Route path="/editor/*" element={<EditorRoutes />} />
                 </Routes>
               </ErrorBoundary>
             </Content>

spiffworkflow-frontend/src/components/MessageInstanceList.tsx

@@ -179,7 +179,6 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
     return (
       <>
         {breadcrumbElement}
-        <h1>Messages</h1>
         {correlationsDisplayModal()}
         <PaginationForTable
           page={page}

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1778,18 +1778,13 @@ export default function ProcessInstanceListTable({
   }
 
   return (
-    <>
+    <div className="process-instance-list-table">
       {reportColumnForm()}
       {advancedOptionsModal()}
       {processInstanceReportSaveTag()}
       <Grid fullWidth condensed>
         {tableTitleLine()}
-        <Column
+        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}>
-          sm={{ span: 4 }}
-          md={{ span: 8 }}
-          lg={{ span: 16 }}
-          style={{ maxWidth: 'fit-content' }}
-        >
           <Filters
             filterOptions={filterOptions}
             showFilterOptions={showFilterOptions}
@@ -1798,15 +1793,10 @@ export default function ProcessInstanceListTable({
             filtersEnabled={filtersEnabled}
           />
         </Column>
-        <Column
+        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}>
-          sm={{ span: 4 }}
-          md={{ span: 8 }}
-          lg={{ span: 16 }}
-          style={{ maxWidth: 'fit-content', margin: 'auto' }}
-        >
           {resultsTable}
         </Column>
       </Grid>
-    </>
+    </div>
   );
 }

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -430,11 +430,11 @@ export default function ReactDiagramEditor({
       // a Modeler and not an Editor which is what it will be when we are
       // actively editing a decision table
       if ((modeler as any).constructor.name === 'Modeler') {
-        canvas.zoom(FitViewport);
+        canvas.zoom(FitViewport, 'auto');
       }
 
       if ((modeler as any).constructor.name === 'Viewer') {
-        canvas.zoom(FitViewport);
+        canvas.zoom(FitViewport, 'auto');
       }
 
       // highlighting a field
@@ -497,7 +497,7 @@ export default function ReactDiagramEditor({
               ref.element.set(ref.property, elem);
             });
             diagramModelerToUse.importDefinitions(result.rootElement);
-            diagramModelerToUse.get('canvas').zoom(FitViewport);
+            diagramModelerToUse.get('canvas').zoom(FitViewport, 'auto');
           });
       } else {
         diagramModelerToUse.importXML(diagramXMLToDisplay);

spiffworkflow-frontend/src/index.css

@@ -199,7 +199,7 @@ dt {
 
 .diagram-editor-canvas {
   border:1px solid #000000;
-  height:70vh;
+  height:78vh;
   width:90vw;
   margin: 0 auto;
 }
@@ -298,7 +298,6 @@ dt {
 .markdown table {
   color: #333;
   background: white;
-  border: 1px solid grey;
   font-size: 12pt;
   border-collapse: collapse;
 }
@@ -396,6 +395,13 @@ td.actions-cell {
   width: 1em;
 }
 
+.process-instance-list-table {
+  margin: 0;
+  padding: 0;
+  width: fit-content;
+}
+
+
 .process-instance-table-header {
   margin-bottom: 1em;
 }

spiffworkflow-frontend/src/index.scss

@@ -20,8 +20,25 @@
 // tweaks the markdown styles.
 
 main {
-  max-width: 1440px;
+}
-  margin: auto;
+
+.fixed-width-container {
+  padding-left: 0px;
+  overflow: visible;
+}
+
+@media (min-width: 1400px) {
+  .fixed-width-container {
+    max-width: 1280px;
+    padding-right: 0;
+  }
+}
+
+@media (min-width: 1056px) {
+  .fixed-width-container {
+    padding-left: 180px;
+    padding-right: 2rem;
+  }
 }
 
 p, li, h1, h2, h3, h4, h5, h6, blockquote {
@@ -35,6 +52,17 @@ div.show-page, div.markdown, div.markdown-collapsed, div.markdown-collapsable {
   margin: 0 auto;
   max-width: 1000px;
   padding: 15px 0 15px 0;
+  overflow: visible;
+}
+
+.cds--data-table-content {
+  width: fit-content;
+  min-width: 100%;
+  overflow-x: visible;
+}
+
+.wmde-markdown table {
+  width: fit-content;
 }
 
 .wmde-markdown ol {

spiffworkflow-frontend/src/routes/AdminRoutes.tsx

@@ -6,7 +6,6 @@ import ProcessGroupShow from './ProcessGroupShow';
 import ProcessGroupNew from './ProcessGroupNew';
 import ProcessGroupEdit from './ProcessGroupEdit';
 import ProcessModelShow from './ProcessModelShow';
-import ProcessModelEditDiagram from './ProcessModelEditDiagram';
 import ProcessInstanceList from './ProcessInstanceList';
 import ProcessModelNew from './ProcessModelNew';
 import ProcessModelEdit from './ProcessModelEdit';
@@ -30,6 +29,7 @@ export default function AdminRoutes() {
 
   if (UserService.hasRole(['admin'])) {
     return (
+      <div className="fixed-width-container">
         <Routes>
           <Route path="/" element={<ProcessGroupList />} />
           <Route path="process-groups" element={<ProcessGroupList />} />
@@ -55,14 +55,6 @@ export default function AdminRoutes() {
             path="process-models/:process_model_id"
             element={<ProcessModelShow />}
           />
-        <Route
-          path="process-models/:process_model_id/files"
-          element={<ProcessModelEditDiagram />}
-        />
-        <Route
-          path="process-models/:process_model_id/files/:file_name"
-          element={<ProcessModelEditDiagram />}
-        />
           <Route
             path="process-models/:process_model_id/edit"
             element={<ProcessModelEdit />}
@@ -134,6 +126,7 @@ export default function AdminRoutes() {
           />
           <Route path="messages" element={<MessageListPage />} />
         </Routes>
+      </div>
     );
   }
   return (

spiffworkflow-frontend/src/routes/EditorRoutes.tsx

@@ -0,0 +1,33 @@
+import { Routes, Route, useLocation } from 'react-router-dom';
+
+import React, { useEffect } from 'react';
+import ProcessModelEditDiagram from './ProcessModelEditDiagram';
+import UserService from '../services/UserService';
+
+export default function EditorRoutes() {
+  const location = useLocation();
+
+  useEffect(() => {}, [location]);
+
+  if (UserService.hasRole(['admin'])) {
+    return (
+      <div className="full-width-container">
+        <Routes>
+          <Route
+            path="process-models/:process_model_id/files"
+            element={<ProcessModelEditDiagram />}
+          />
+          <Route
+            path="process-models/:process_model_id/files/:file_name"
+            element={<ProcessModelEditDiagram />}
+          />
+        </Routes>
+      </div>
+    );
+  }
+  return (
+    <main>
+      <h1>404</h1>
+    </main>
+  );
+}

spiffworkflow-frontend/src/routes/HomePageRoutes.tsx

@@ -47,7 +47,7 @@ export default function HomePageRoutes() {
   };
 
   return (
-    <>
+    <div className="fixed-width-container">
       {renderTabs()}
       <Routes>
         <Route path="/" element={<InProgressInstances />} />
@@ -57,6 +57,6 @@ export default function HomePageRoutes() {
         <Route path="completed-instances" element={<CompletedInstances />} />
         <Route path="create-new-instance" element={<CreateNewInstance />} />
       </Routes>
-    </>
+    </div>
   );
 }

spiffworkflow-frontend/src/routes/MessageListPage.tsx

@@ -1,5 +1,10 @@
 import MessageInstanceList from '../components/MessageInstanceList';
 
 export default function MessageListPage() {
-  return <MessageInstanceList />;
+  return (
+    <>
+      <h1>Messages</h1>
+      <MessageInstanceList />
+    </>
+  );
 }

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -196,7 +196,7 @@ export default function ProcessModelEditDiagram() {
         'file_type'
       )}`;
       navigate(
-        `/admin/process-models/${modifiedProcessModelId}/files/${fileNameWithExtension}`
+        `/editor/process-models/${modifiedProcessModelId}/files/${fileNameWithExtension}`
       );
     }
   };
@@ -909,7 +909,7 @@ export default function ProcessModelEditDiagram() {
       processReference: ProcessReference
     ) => {
       const path = generatePath(
-        '/admin/process-models/:process_model_path/files/:file_name',
+        '/editor/process-models/:process_model_path/files/:file_name',
         {
           process_model_path: modifyProcessIdentifierForPathParam(
             processReference.process_model_id
@@ -962,7 +962,7 @@ export default function ProcessModelEditDiagram() {
     const file = findFileNameForReferenceId(processId, 'dmn');
     if (file) {
       const path = generatePath(
-        '/admin/process-models/:process_model_id/files/:file_name',
+        '/editor/process-models/:process_model_id/files/:file_name',
         {
           process_model_id: params.process_model_id,
           file_name: file.name,

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -193,7 +193,7 @@ export default function ProcessModelShow() {
   const profileModelFileEditUrl = (processModelFile: ProcessFile) => {
     if (processModel) {
       if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
-        return `/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`;
+        return `/editor/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`;
       }
       if (processModelFile.name.match(/\.(json|md)$/)) {
         return `/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`;
@@ -530,13 +530,13 @@ export default function ProcessModelShow() {
         onChange={(a: any) => {
           if (a.selectedItem.text === 'New BPMN File') {
             navigate(
-              `/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`
+              `/editor/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`
+              `/editor/process-models/${modifiedProcessModelId}/files?file_type=dmn`
             );
           } else if (a.selectedItem.text === 'New JSON File') {
             navigate(