sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Dan Funk 2023-07-06 00:11:18 -04:00 committed by GitHub
parent 25eb8b30f1
commit dbe52af9f4
12 changed files with 191 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spiffworkflow-frontend/src/App.tsx
View File

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

1
spiffworkflow-frontend/src/components/MessageInstanceList.tsx
View File

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

18
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -1778,18 +1778,13 @@ export default function ProcessInstanceListTable({
} }
return ( return (
<> <div className="process-instance-list-table">
{reportColumnForm()} {reportColumnForm()}
{advancedOptionsModal()} {advancedOptionsModal()}
{processInstanceReportSaveTag()} {processInstanceReportSaveTag()}
<Grid fullWidth condensed> <Grid fullWidth condensed>
{tableTitleLine()} {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 <Filters
filterOptions={filterOptions} filterOptions={filterOptions}
showFilterOptions={showFilterOptions} showFilterOptions={showFilterOptions}
@ -1798,15 +1793,10 @@ export default function ProcessInstanceListTable({
filtersEnabled={filtersEnabled} filtersEnabled={filtersEnabled}
/> />
</Column> </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} {resultsTable}
</Column> </Column>
</Grid> </Grid>
</> </div>
); );
} }

6
spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
View File

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

10
spiffworkflow-frontend/src/index.css
View File

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

32
spiffworkflow-frontend/src/index.scss
View File

@ -20,8 +20,25 @@
// tweaks the markdown styles. // tweaks the markdown styles.
main { 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 { 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; margin: 0 auto;
max-width: 1000px; max-width: 1000px;
padding: 15px 0 15px 0; 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 { .wmde-markdown ol {

201
spiffworkflow-frontend/src/routes/AdminRoutes.tsx
View File

@ -6,7 +6,6 @@ import ProcessGroupShow from './ProcessGroupShow';
import ProcessGroupNew from './ProcessGroupNew'; import ProcessGroupNew from './ProcessGroupNew';
import ProcessGroupEdit from './ProcessGroupEdit'; import ProcessGroupEdit from './ProcessGroupEdit';
import ProcessModelShow from './ProcessModelShow'; import ProcessModelShow from './ProcessModelShow';
import ProcessModelEditDiagram from './ProcessModelEditDiagram';
import ProcessInstanceList from './ProcessInstanceList'; import ProcessInstanceList from './ProcessInstanceList';
import ProcessModelNew from './ProcessModelNew'; import ProcessModelNew from './ProcessModelNew';
import ProcessModelEdit from './ProcessModelEdit'; import ProcessModelEdit from './ProcessModelEdit';
@ -30,110 +29,104 @@ export default function AdminRoutes() {
if (UserService.hasRole(['admin'])) { if (UserService.hasRole(['admin'])) {
return ( return (
<Routes> <div className="fixed-width-container">
<Route path="/" element={<ProcessGroupList />} /> <Routes>
<Route path="process-groups" element={<ProcessGroupList />} /> <Route path="/" element={<ProcessGroupList />} />
<Route <Route path="process-groups" element={<ProcessGroupList />} />
path="process-groups/:process_group_id" <Route
element={<ProcessGroupShow />} path="process-groups/:process_group_id"
/> element={<ProcessGroupShow />}
<Route path="process-groups/new" element={<ProcessGroupNew />} /> />
<Route <Route path="process-groups/new" element={<ProcessGroupNew />} />
path="process-groups/:process_group_id/edit" <Route
element={<ProcessGroupEdit />} path="process-groups/:process_group_id/edit"
/> element={<ProcessGroupEdit />}
/>
<Route <Route
path="process-models/:process_group_id/new" path="process-models/:process_group_id/new"
element={<ProcessModelNew />} element={<ProcessModelNew />}
/> />
<Route <Route
path="process-models/:process_group_id/new-e" path="process-models/:process_group_id/new-e"
element={<ProcessModelNewExperimental />} element={<ProcessModelNewExperimental />}
/> />
<Route <Route
path="process-models/:process_model_id" path="process-models/:process_model_id"
element={<ProcessModelShow />} element={<ProcessModelShow />}
/> />
<Route <Route
path="process-models/:process_model_id/files" path="process-models/:process_model_id/edit"
element={<ProcessModelEditDiagram />} element={<ProcessModelEdit />}
/> />
<Route <Route
path="process-models/:process_model_id/files/:file_name" path="process-instances/for-me/:process_model_id/:process_instance_id"
element={<ProcessModelEditDiagram />} element={<ProcessInstanceShow variant="for-me" />}
/> />
<Route <Route
path="process-models/:process_model_id/edit" path="process-instances/for-me/:process_model_id/:process_instance_id/:to_task_guid"
element={<ProcessModelEdit />} element={<ProcessInstanceShow variant="for-me" />}
/> />
<Route <Route
path="process-instances/for-me/:process_model_id/:process_instance_id" path="process-instances/for-me/:process_model_id/:process_instance_id/interstitial"
element={<ProcessInstanceShow variant="for-me" />} element={<ProcessInterstitialPage variant="for-me" />}
/> />
<Route <Route
path="process-instances/for-me/:process_model_id/:process_instance_id/:to_task_guid" path="process-instances/:process_model_id/:process_instance_id/interstitial"
element={<ProcessInstanceShow variant="for-me" />} element={<ProcessInterstitialPage variant="all" />}
/> />
<Route <Route
path="process-instances/for-me/:process_model_id/:process_instance_id/interstitial" path="process-instances/:process_model_id/:process_instance_id"
element={<ProcessInterstitialPage variant="for-me" />} element={<ProcessInstanceShow variant="all" />}
/> />
<Route <Route
path="process-instances/:process_model_id/:process_instance_id/interstitial" path="process-instances/:process_model_id/:process_instance_id/:to_task_guid"
element={<ProcessInterstitialPage variant="all" />} element={<ProcessInstanceShow variant="all" />}
/> />
<Route <Route
path="process-instances/:process_model_id/:process_instance_id" path="process-instances/reports"
element={<ProcessInstanceShow variant="all" />} element={<ProcessInstanceReportList />}
/> />
<Route <Route
path="process-instances/:process_model_id/:process_instance_id/:to_task_guid" path="process-instances/reports/new"
element={<ProcessInstanceShow variant="all" />} element={<ProcessInstanceReportNew />}
/> />
<Route <Route
path="process-instances/reports" path="process-instances/reports/:report_identifier/edit"
element={<ProcessInstanceReportList />} element={<ProcessInstanceReportEdit />}
/> />
<Route <Route
path="process-instances/reports/new" path="process-models/:process_model_id/form"
element={<ProcessInstanceReportNew />} element={<ReactFormEditor />}
/> />
<Route <Route
path="process-instances/reports/:report_identifier/edit" path="process-models/:process_model_id/form/:file_name"
element={<ProcessInstanceReportEdit />} element={<ReactFormEditor />}
/> />
<Route <Route
path="process-models/:process_model_id/form" path="process-instances"
element={<ReactFormEditor />} element={<ProcessInstanceList variant="for-me" />}
/> />
<Route <Route
path="process-models/:process_model_id/form/:file_name" path="process-instances/for-me"
element={<ReactFormEditor />} element={<ProcessInstanceList variant="for-me" />}
/> />
<Route <Route
path="process-instances" path="process-instances/all"
element={<ProcessInstanceList variant="for-me" />} element={<ProcessInstanceList variant="all" />}
/> />
<Route <Route path="configuration/*" element={<Configuration />} />
path="process-instances/for-me" <Route
element={<ProcessInstanceList variant="for-me" />} path="process-models/:process_model_id/form-builder"
/> element={<JsonSchemaFormBuilder />}
<Route />
path="process-instances/all" <Route
element={<ProcessInstanceList variant="all" />} path="process-instances/find-by-id"
/> element={<ProcessInstanceFindById />}
<Route path="configuration/*" element={<Configuration />} /> />
<Route <Route path="messages" element={<MessageListPage />} />
path="process-models/:process_model_id/form-builder" </Routes>
element={<JsonSchemaFormBuilder />} </div>
/>
<Route
path="process-instances/find-by-id"
element={<ProcessInstanceFindById />}
/>
<Route path="messages" element={<MessageListPage />} />
</Routes>
); );
} }
return ( return (

33
spiffworkflow-frontend/src/routes/EditorRoutes.tsx Normal file
View File

@ -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>
);
}

4
spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
View File

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

7
spiffworkflow-frontend/src/routes/MessageListPage.tsx
View File

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

6
spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
View File

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

6
spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
View File

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