From dbe52af9f4713aa7146ac08779d9569d3fa1b5c7 Mon Sep 17 00:00:00 2001 From: Dan Funk Date: Thu, 6 Jul 2023 00:11:18 -0400 Subject: [PATCH] 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 | 2 + .../src/components/MessageInstanceList.tsx | 1 - .../components/ProcessInstanceListTable.tsx | 18 +- .../src/components/ReactDiagramEditor.tsx | 6 +- spiffworkflow-frontend/src/index.css | 10 +- spiffworkflow-frontend/src/index.scss | 32 ++- .../src/routes/AdminRoutes.tsx | 201 +++++++++--------- .../src/routes/EditorRoutes.tsx | 33 +++ .../src/routes/HomePageRoutes.tsx | 4 +- .../src/routes/MessageListPage.tsx | 7 +- .../src/routes/ProcessModelEditDiagram.tsx | 6 +- .../src/routes/ProcessModelShow.tsx | 6 +- 12 files changed, 191 insertions(+), 135 deletions(-) create mode 100644 spiffworkflow-frontend/src/routes/EditorRoutes.tsx diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx index 97d14fcc8..65a90176e 100644 --- a/spiffworkflow-frontend/src/App.tsx +++ b/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() { } /> } /> } /> + } /> diff --git a/spiffworkflow-frontend/src/components/MessageInstanceList.tsx b/spiffworkflow-frontend/src/components/MessageInstanceList.tsx index a9cc186a7..90da5ed98 100644 --- a/spiffworkflow-frontend/src/components/MessageInstanceList.tsx +++ b/spiffworkflow-frontend/src/components/MessageInstanceList.tsx @@ -179,7 +179,6 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) { return ( <> {breadcrumbElement} -

Messages

{correlationsDisplayModal()} +
{reportColumnForm()} {advancedOptionsModal()} {processInstanceReportSaveTag()} {tableTitleLine()} - + - + {resultsTable} - +
); } diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx index 264bb1dc0..8d4eb8afa 100644 --- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx +++ b/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); diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 20074fc7c..f6a0b3eb2 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/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; } diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss index 8d340745e..d7b055352 100644 --- a/spiffworkflow-frontend/src/index.scss +++ b/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 { diff --git a/spiffworkflow-frontend/src/routes/AdminRoutes.tsx b/spiffworkflow-frontend/src/routes/AdminRoutes.tsx index f067ef594..f42a7de6e 100644 --- a/spiffworkflow-frontend/src/routes/AdminRoutes.tsx +++ b/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,110 +29,104 @@ export default function AdminRoutes() { if (UserService.hasRole(['admin'])) { return ( - - } /> - } /> - } - /> - } /> - } - /> +
+ + } /> + } /> + } + /> + } /> + } + /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } /> - } - /> - } - /> - } /> - + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } /> + } + /> + } + /> + } /> + +
); } return ( diff --git a/spiffworkflow-frontend/src/routes/EditorRoutes.tsx b/spiffworkflow-frontend/src/routes/EditorRoutes.tsx new file mode 100644 index 000000000..8fc2cac67 --- /dev/null +++ b/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 ( +
+ + } + /> + } + /> + +
+ ); + } + return ( +
+

404

+
+ ); +} diff --git a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx index bba58de87..71438647c 100644 --- a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx +++ b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx @@ -47,7 +47,7 @@ export default function HomePageRoutes() { }; return ( - <> +
{renderTabs()} } /> @@ -57,6 +57,6 @@ export default function HomePageRoutes() { } /> } /> - +
); } diff --git a/spiffworkflow-frontend/src/routes/MessageListPage.tsx b/spiffworkflow-frontend/src/routes/MessageListPage.tsx index 043ff4f8f..fca969503 100644 --- a/spiffworkflow-frontend/src/routes/MessageListPage.tsx +++ b/spiffworkflow-frontend/src/routes/MessageListPage.tsx @@ -1,5 +1,10 @@ import MessageInstanceList from '../components/MessageInstanceList'; export default function MessageListPage() { - return ; + return ( + <> +

Messages

+ + + ); } diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index e13741f9d..51e33f73b 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/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, diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx index 605d58d4e..80129b361 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx +++ b/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(