From 997146e18fafd175423d7b3cedb6440c39b226d7 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 11 Nov 2022 11:24:41 -0500 Subject: [PATCH] Squashed 'spiffworkflow-frontend/' changes from ab6cf2817..c096ca3f9 c096ca3f9 Report URL fixes (#29) ca49db4d7 get pagination for groups 2bff2d4b2 Merge branch 'main' into feature/nested-groups-2 8a443ebe2 use error as a status instead of faulted w/ burnettk 2e32ed4d4 favor h1 tags over h2 w/ burnettk 0a4ac2d53 fixed up the process instance show page and moved contents of scss to css file and load that last w/ burnettk 670cbabb0 fix lint d21a94467 Assure we are using the latest bpmn-js-spiffworkflow library. a5339a3cb Use the modify method 3983a6eda Minor fixes for the launch buttons. c63161699 moved usage of ProcessBreadcrumb to use hotCrumbs except for report pages d06a3b6b7 cleaned up breadcrumbs some more and cleaned up console.log statements 614080e39 support process-groups in breadcrumb component fe8f79017 add breadcrumb to instances page sometimes 2206972c5 fix recent process models, at least after they visit process model show page ff0721362 make Files half-width and add link to file f08538225 lint git-subtree-dir: spiffworkflow-frontend git-subtree-split: c096ca3f9c99df2812191b2a02702c1916c239bd --- package-lock.json | 9 +- src/components/NavigationBar.tsx | 10 + src/components/ProcessBreadcrumb.test.tsx | 33 --- src/components/ProcessBreadcrumb.tsx | 12 +- src/components/ProcessGroupForm.tsx | 5 +- src/components/ReactDiagramEditor.tsx | 7 +- src/components/SubNavigation.tsx | 7 + src/config.tsx | 3 +- src/helpers.tsx | 10 +- src/index.css | 110 ++++++++-- src/index.scss | 82 ------- src/index.tsx | 2 +- src/interfaces.ts | 2 +- src/routes/AdminRoutes.tsx | 8 +- src/routes/HomePage.tsx | 13 +- src/routes/MessageInstanceList.tsx | 40 ++-- src/routes/ProcessGroupEdit.tsx | 12 +- src/routes/ProcessGroupNew.tsx | 13 +- src/routes/ProcessGroupShow.tsx | 56 +++-- src/routes/ProcessInstanceList.tsx | 31 +-- src/routes/ProcessInstanceLogList.tsx | 23 +- src/routes/ProcessInstanceReportEdit.tsx | 12 +- src/routes/ProcessInstanceReportList.tsx | 18 +- src/routes/ProcessInstanceReportNew.tsx | 9 +- src/routes/ProcessInstanceReportShow.tsx | 4 +- src/routes/ProcessInstanceShow.tsx | 252 +++++++++++++++------- src/routes/ProcessModelEdit.tsx | 15 +- src/routes/ProcessModelEditDiagram.tsx | 70 +++--- src/routes/ProcessModelNew.tsx | 12 +- src/routes/ProcessModelShow.tsx | 189 ++++++++-------- src/routes/ReactFormEditor.tsx | 7 +- src/routes/SecretList.tsx | 2 +- src/routes/SecretNew.tsx | 2 +- src/routes/SecretShow.tsx | 2 +- 34 files changed, 610 insertions(+), 472 deletions(-) diff --git a/package-lock.json b/package-lock.json index 42c0fad8a..258b3e586 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7485,7 +7485,7 @@ }, "node_modules/bpmn-js-spiffworkflow": { "version": "0.0.8", - "resolved": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#24c2cc36067adf8fed75990c6bf4a1a67bc9122b", + "resolved": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#09fa713bb0bb1b9d4f97684afc46bc3711e11770", "license": "MIT", "dependencies": { "inherits": "^2.0.4", @@ -35755,7 +35755,7 @@ } }, "bpmn-js-spiffworkflow": { - "version": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#24c2cc36067adf8fed75990c6bf4a1a67bc9122b", + "version": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#09fa713bb0bb1b9d4f97684afc46bc3711e11770", "from": "bpmn-js-spiffworkflow@sartography/bpmn-js-spiffworkflow#main", "requires": { "inherits": "^2.0.4", @@ -46545,7 +46545,7 @@ "@csstools/postcss-text-decoration-shorthand": "^1.0.0", "@csstools/postcss-trigonometric-functions": "^1.0.2", "@csstools/postcss-unset-value": "^1.0.2", - "autoprefixer": "10.4.5", + "autoprefixer": "10.4.8", "browserslist": "^4.21.3", "css-blank-pseudo": "^3.0.3", "css-has-pseudo": "^3.0.4", @@ -46583,8 +46583,7 @@ }, "dependencies": { "autoprefixer": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz", + "version": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz", "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==", "requires": { "browserslist": "^4.20.2", diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index 7ecd7c475..25ff3582f 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -38,6 +38,10 @@ export default function NavigationBar() { let newActiveKey = '/admin/process-groups'; if (location.pathname.match(/^\/admin\/messages\b/)) { newActiveKey = '/admin/messages'; + } else if ( + location.pathname.match(/^\/admin\/process-instances\/reports\b/) + ) { + newActiveKey = '/admin/process-instances/reports'; } else if (location.pathname.match(/^\/admin\/process-instances\b/)) { newActiveKey = '/admin/process-instances'; } else if (location.pathname.match(/^\/admin\/secrets\b/)) { @@ -119,6 +123,12 @@ export default function NavigationBar() { > Authentications + + Reports + ); }; diff --git a/src/components/ProcessBreadcrumb.test.tsx b/src/components/ProcessBreadcrumb.test.tsx index c581f30db..49400e8e3 100644 --- a/src/components/ProcessBreadcrumb.test.tsx +++ b/src/components/ProcessBreadcrumb.test.tsx @@ -25,36 +25,3 @@ test('renders hotCrumbs', () => { const nextElement = screen.getByText(/Process Group: hey/); expect(nextElement).toBeInTheDocument(); }); - -// FIXME: update to use hotcrumbs -// test('renders process group when given processGroupId', async () => { -// render( -// -// -// -// ); -// const processGroupElement = screen.getByText(/group-a/); -// expect(processGroupElement).toBeInTheDocument(); -// const processGroupBreadcrumbs = await screen.findAllByText( -// /Process Group: group-a/ -// ); -// expect(processGroupBreadcrumbs[0]).toHaveClass('breadcrumb-item active'); -// }); -// -// test('renders process model when given processModelId', async () => { -// render( -// -// -// -// ); -// const processGroupElement = screen.getByText(/group-b/); -// expect(processGroupElement).toBeInTheDocument(); -// const processModelBreadcrumbs = await screen.findAllByText( -// /Process Model: model-c/ -// ); -// expect(processModelBreadcrumbs[0]).toHaveClass('breadcrumb-item active'); -// const processGroupBreadcrumbs = await screen.findAllByText( -// /Process Group: group-b/ -// ); -// expect(processGroupBreadcrumbs[0]).toBeInTheDocument(); -// }); diff --git a/src/components/ProcessBreadcrumb.tsx b/src/components/ProcessBreadcrumb.tsx index 3b2a9af98..23d2558ea 100644 --- a/src/components/ProcessBreadcrumb.tsx +++ b/src/components/ProcessBreadcrumb.tsx @@ -13,7 +13,7 @@ type OwnProps = { const explodeCrumb = (crumb: HotCrumbItem) => { const url: string = crumb[1] || ''; // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [_unused, processModelId, link] = url.split(':'); + const [endingUrlType, processModelId, link] = url.split(':'); const processModelIdSegments = splitProcessModelId(processModelId); const paths: string[] = []; const lastPathItem = processModelIdSegments.pop(); @@ -29,7 +29,13 @@ const explodeCrumb = (crumb: HotCrumbItem) => { } ); if (link === 'link') { - const lastUrl = `/admin/process-models/${paths.join(':')}:${lastPathItem}`; + if (lastPathItem !== undefined) { + paths.push(lastPathItem); + } + // process_model to process-models + const lastUrl = `/admin/${endingUrlType + .replace('_', '-') + .replace(/s*$/, 's')}/${paths.join(':')}`; breadcrumbItems.push( {lastPathItem} @@ -64,7 +70,7 @@ export default function ProcessBreadcrumb({ ); } - if (url && url.startsWith('process_model:')) { + if (url && url.match(/^process[_-](model|group)s?:/)) { return explodeCrumb(crumb); } return ( diff --git a/src/components/ProcessGroupForm.tsx b/src/components/ProcessGroupForm.tsx index 09f2ceccd..3d51adeb9 100644 --- a/src/components/ProcessGroupForm.tsx +++ b/src/components/ProcessGroupForm.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; // @ts-ignore import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react'; -import {modifyProcessModelPath, slugifyString} from '../helpers'; +import { modifyProcessModelPath, slugifyString } from '../helpers'; import HttpService from '../services/HttpService'; import { ProcessGroup } from '../interfaces'; import ButtonWithConfirmation from './ButtonWithConfirmation'; @@ -79,12 +79,9 @@ export default function ProcessGroupForm({ description: processGroup.description, }; if (mode === 'new') { - console.log(`parentGroupId: ${parentGroupId}`); - console.log(`processGroup.id: ${processGroup.id}`); if (parentGroupId) { newProcessGroupId = `${parentGroupId}/${processGroup.id}`; } - console.log(`newProcessGroupId: ${newProcessGroupId}`); Object.assign(postBody, { id: parentGroupId ? `${parentGroupId}/${processGroup.id}` diff --git a/src/components/ReactDiagramEditor.tsx b/src/components/ReactDiagramEditor.tsx index e9ddb4452..37a947e43 100644 --- a/src/components/ReactDiagramEditor.tsx +++ b/src/components/ReactDiagramEditor.tsx @@ -229,7 +229,7 @@ export default function ReactDiagramEditor({ diagramModeler.on('spiff.script.edit', (event: any) => { const { error, element, scriptType, script, eventBus } = event; if (error) { - console.log(error); + console.error(error); } handleLaunchScriptEditor(element, script, scriptType, eventBus); }); @@ -237,7 +237,7 @@ export default function ReactDiagramEditor({ diagramModeler.on('spiff.markdown.edit', (event: any) => { const { error, element, value, eventBus } = event; if (error) { - console.log(error); + console.error(error); } handleLaunchMarkdownEditor(element, value, eventBus); }); @@ -318,7 +318,7 @@ export default function ReactDiagramEditor({ } function handleError(err: any) { - console.log('ERROR:', err); + console.error('ERROR:', err); } function checkTaskCanBeHighlighted(taskBpmnId: string) { @@ -406,7 +406,6 @@ export default function ReactDiagramEditor({ } function fetchDiagramFromURL(urlToUse: any) { - console.log(`urlToUse: ${urlToUse}`); fetch(urlToUse) .then((response) => response.text()) .then((text) => { diff --git a/src/components/SubNavigation.tsx b/src/components/SubNavigation.tsx index 6c5369aa7..be3097f72 100644 --- a/src/components/SubNavigation.tsx +++ b/src/components/SubNavigation.tsx @@ -10,6 +10,10 @@ export default function SubNavigation() { let newActiveKey = '/admin/process-groups'; if (location.pathname.match(/^\/admin\/messages\b/)) { newActiveKey = '/admin/messages'; + } else if ( + location.pathname.match(/^\/admin\/process-instances\/reports\b/) + ) { + newActiveKey = '/admin/process-instances/reports'; } else if (location.pathname.match(/^\/admin\/process-instances\b/)) { newActiveKey = '/admin/process-instances'; } else if (location.pathname.match(/^\/admin\/secrets\b/)) { @@ -45,6 +49,9 @@ export default function SubNavigation() { Authentications + + Reports + ); } diff --git a/src/config.tsx b/src/config.tsx index c9e94eb06..47ff5025a 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -12,10 +12,11 @@ export const PROCESS_STATUSES = [ 'user_input_required', 'waiting', 'complete', - 'faulted', + 'error', 'suspended', ]; // with time: yyyy-MM-dd HH:mm:ss +export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'; export const DATE_FORMAT = 'yyyy-MM-dd'; export const DATE_FORMAT_CARBON = 'Y-m-d'; diff --git a/src/helpers.tsx b/src/helpers.tsx index 564c99f1b..383c3e0a5 100644 --- a/src/helpers.tsx +++ b/src/helpers.tsx @@ -1,5 +1,5 @@ import { format } from 'date-fns'; -import { DATE_FORMAT } from './config'; +import { DATE_TIME_FORMAT, DATE_FORMAT } from './config'; import { DEFAULT_PER_PAGE, DEFAULT_PAGE, @@ -51,6 +51,14 @@ export const convertStringToDate = (dateString: string) => { return null; }; +export const convertSecondsToFormattedDateTime = (seconds: number) => { + if (seconds) { + const dateObject = new Date(seconds * 1000); + return format(dateObject, DATE_TIME_FORMAT); + } + return null; +}; + export const convertSecondsToFormattedDate = (seconds: number) => { if (seconds) { const dateObject = new Date(seconds * 1000); diff --git a/src/index.css b/src/index.css index b1eedf700..c2e2e8028 100644 --- a/src/index.css +++ b/src/index.css @@ -1,24 +1,79 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +/* site is mainly using white theme. */ +/* header is mainly using g100 */ +/* mockup wanted white, not grey, text */ +.cds--header, a.cds--header__menu-item { + color: white; } +h1{ + height: 36px; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 36px; + color: #161616; + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + margin-bottom: 1em +} + +.span-tag { + color: black; +} + +.cds--btn.button-white-background { + color: #393939; + background: #FFFFFF; + background-blend-mode: multiply; + border: 1px solid #393939; +} +.cds--btn.button-white-background:hover { + background: #525252; +} + +.cds--breadcrumb-item a.cds--link:hover { + color: #525252; +} +.cds--breadcrumb-item a.cds--link:visited { + color: #525252; +} +.cds--breadcrumb-item a.cds--link:visited:hover { + color: #525252; +} +.cds--breadcrumb-item a.cds--link { + color: #525252; +} + +.cds--btn--ghost { + color: black; +} +.cds--btn--ghost:visited { + color: black; +} +.cds--btn--ghost:hover { + color: black; +} +.cds--btn--ghost:visited:hover { + color: black; +} + +.cds--header__global .cds--btn--primary { + background-color: #161616 +} +.cds--btn--primary { + background-color: #393939; +} +.cds--btn--primary:hover { + background-color: #474747; +} code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } -span.bjs-crumb { - color: #0000ff; -} -.bjs-breadcrumbs li:last-of-type span.bjs-crumb a { - color: black; -} - .app-logo { height: 85%; width: 85%; @@ -52,6 +107,26 @@ span.bjs-crumb { margin-bottom: 2em; } +h1.with-icons { + margin-top: 5px; +} + +.grid-list-title { + font-weight: 600; + font-size: 14px; + line-height: 18px; + color: #161616; +} +.grid-date { + font-size: 14px; + line-height: 18px; + letter-spacing: 0.16px; + color: #525252; +} +.smaller-text { + font-size: 14px; +} + .diagram-editor-canvas { border:1px solid #000000; height:70vh; @@ -59,13 +134,6 @@ span.bjs-crumb { margin:auto; } -.cds--btn.button-white-background { - color: #393939; - background: #FFFFFF; - background-blend-mode: multiply; - border: 1px solid #393939; -} - .with-bottom-margin { margin-bottom: 1em; } diff --git a/src/index.scss b/src/index.scss index 37766c21f..86b769987 100644 --- a/src/index.scss +++ b/src/index.scss @@ -15,85 +15,3 @@ @use '@carbon/colors'; // @use '@carbon/react/scss/colors'; @use '@carbon/react/scss/themes'; - -// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe)) - -// site is mainly using white theme. -// header is mainly using g100 -// mockup wanted white, not grey, text -.cds--header, a.cds--header__menu-item { - // background-color: colors.$gray-100; - color: white; -} -h1{ - height: 36px; - font-family: 'IBM Plex Sans'; - font-style: normal; - font-weight: 400; - font-size: 28px; - line-height: 36px; - color: #161616; - flex: none; - order: 0; - align-self: stretch; - flex-grow: 0; - margin-bottom: 1em -} - - -.cds--breadcrumb-item a.cds--link:hover { - color: #525252; -} -.cds--breadcrumb-item a.cds--link:visited { - color: #525252; -} -.cds--breadcrumb-item a.cds--link:visited:hover { - color: #525252; -} -.cds--breadcrumb-item a.cds--link { - color: #525252; -} - -.cds--btn--ghost { - color: black; -} -.cds--btn--ghost:visited { - color: black; -} -.cds--btn--ghost:hover { - color: black; -} -.cds--btn--ghost:visited:hover { - color: black; -} - -$slightly-lighter-gray: #474747; -$spiff-header-background-color: #161616; - -.cds--header__global .cds--btn--primary { - background-color: $spiff-header-background-color; -} -.cds--btn--primary { - background-color: #393939; -} -.cds--btn--primary:hover { - background-color: $slightly-lighter-gray; -} -// .cds--btn--ghost:visited { -// color: black; -// } -// .cds--btn--ghost:hover { -// color: black; -// } -// .cds--btn--ghost:visited:hover { -// color: black; -// } - - -// :root { -// --cds-link-primary: #525252; -// } -// .card { -// background: var(--orange); -// --orange: hsl(255, 72%, var(--lightness)); -// } diff --git a/src/index.tsx b/src/index.tsx index a2fab5c0b..7a602be60 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,8 +3,8 @@ import * as ReactDOMClient from 'react-dom/client'; import App from './App'; import 'bootstrap/dist/css/bootstrap.css'; -import './index.css'; import './index.scss'; +import './index.css'; import reportWebVitals from './reportWebVitals'; import UserService from './services/UserService'; diff --git a/src/interfaces.ts b/src/interfaces.ts index 1417a3a90..7c9cb0365 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -6,7 +6,7 @@ export interface Secret { } export interface RecentProcessModel { - processGroupIdentifier: string; + processGroupIdentifier?: string; processModelIdentifier: string; processModelDisplayName: string; } diff --git a/src/routes/AdminRoutes.tsx b/src/routes/AdminRoutes.tsx index 96293ee71..84609d663 100644 --- a/src/routes/AdminRoutes.tsx +++ b/src/routes/AdminRoutes.tsx @@ -81,19 +81,19 @@ export default function AdminRoutes() { element={} /> } /> } /> } /> } /> -

Processes I can start

+

Processes I can start

@@ -145,7 +145,7 @@ export default function HomePage() { ); return ( <> -

Tasks waiting for me

+

Tasks waiting for me

0 && buildRecentProcessModelSection(); + (recentProcessModels.length > 0 && buildRecentProcessModelSection()) || + null; if (pagination) { + if (tasksWaitingForMe === null && relevantProcessModelSection === null) { + return

No tasks are waiting for you.

; + } return ( <> - {tasksWaitingForMeComponent()} + {tasksWaitingForMe} {relevantProcessModelSection} ); diff --git a/src/routes/MessageInstanceList.tsx b/src/routes/MessageInstanceList.tsx index 6bc0a57d4..89bd6ac97 100644 --- a/src/routes/MessageInstanceList.tsx +++ b/src/routes/MessageInstanceList.tsx @@ -7,6 +7,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import { convertSecondsToFormattedDate, getPageInfoFromSearchParams, + modifyProcessModelPath, + unModifyProcessModelPath, } from '../helpers'; import HttpService from '../services/HttpService'; @@ -44,15 +46,9 @@ export default function MessageInstanceList() { - - @@ -107,16 +104,29 @@ export default function MessageInstanceList() { )}&process_instance_id=${searchParams.get('process_instance_id')}`; breadcrumbElement = ( ); } return ( <> {breadcrumbElement} -

Messages

+

Messages

- -

Edit Process Group: {(processGroup as any).id}

+ +

Edit Process Group: {(processGroup as any).id}

({ id: '', display_name: '', description: '', }); + const hotCrumbs: HotCrumbItem[] = [['Process Groups', '/admin']]; + if (parentGroupId) { + hotCrumbs.push(['', `process_group:${parentGroupId}:link`]); + } + return ( <> - -

Add Process Group

+ +

Add Process Group

(null); const [processModels, setProcessModels] = useState([]); const [processGroups, setProcessGroups] = useState([]); - const [pagination, setPagination] = useState(null); + const [modelPagination, setModelPagination] = useState(null); + const [groupPagination, setGroupPagination] = useState(null); useEffect(() => { const { page, perPage } = getPageInfoFromSearchParams(searchParams); const setProcessModelFromResult = (result: any) => { setProcessModels(result.results); - setPagination(result.pagination); + setModelPagination(result.pagination); + }; + const setProcessGroupFromResult = (result: any) => { + setProcessGroups(result.results); + setGroupPagination(result.pagination); }; const processResult = (result: any) => { setProcessGroup(result); @@ -33,7 +42,10 @@ export default function ProcessGroupShow() { path: `/process-models?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`, successCallback: setProcessModelFromResult, }); - setProcessGroups(result.process_groups); + HttpService.makeCallToBackend({ + path: `/process-groups?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`, + successCallback: setProcessGroupFromResult, + }); }; HttpService.makeCallToBackend({ path: `/process-groups/${params.process_group_id}`, @@ -45,19 +57,19 @@ export default function ProcessGroupShow() { if (processGroup === null) { return null; } - const rows = processModels.map((row) => { - const modifiedProcessModelId: String = (row as any).id.replace('/', ':'); + const rows = processModels.map((row: ProcessModel) => { + const modifiedProcessModelId: String = modifyProcessModelPath((row as any).id); return ( - + - + ); }); @@ -81,19 +93,19 @@ export default function ProcessGroupShow() { if (processGroup === null) { return null; } - const rows = processGroups.map((row) => { - const modifiedProcessGroupId: String = modifyProcessModelPath((row as any).id); + const rows = processGroups.map((row: ProcessGroup) => { + const modifiedProcessGroupId: String = modifyProcessModelPath(row.id); return ( - + - + ); }); @@ -113,15 +125,15 @@ export default function ProcessGroupShow() { ); }; - if (processGroup && pagination) { + if (processGroup && groupPagination && modelPagination) { const { page, perPage } = getPageInfoFromSearchParams(searchParams); - const modifiedProcessGroupId = modifyProcessModelPath((processGroup as any).id); + const modifiedProcessGroupId = modifyProcessModelPath(processGroup.id); return ( <>
    @@ -149,18 +161,18 @@ export default function ProcessGroupShow() {

diff --git a/src/routes/ProcessInstanceList.tsx b/src/routes/ProcessInstanceList.tsx index 04fcfd875..b7c057344 100644 --- a/src/routes/ProcessInstanceList.tsx +++ b/src/routes/ProcessInstanceList.tsx @@ -41,6 +41,7 @@ import 'react-bootstrap-typeahead/css/Typeahead.css'; import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; import { PaginationObject, ProcessModel } from '../interfaces'; import ProcessModelSearch from '../components/ProcessModelSearch'; +import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; export default function ProcessInstanceList() { const params = useParams(); @@ -471,26 +472,31 @@ export default function ProcessInstanceList() { ); }; - const processInstanceTitleElement = () => { + const processInstanceBreadcrumbElement = () => { const processModelFullIdentifier = getProcessModelFullIdentifierFromSearchParams(searchParams); if (processModelFullIdentifier === null) { - return

Process Instances

; + return null; } + return ( -

- Process Instances for:{' '} - - {processModelFullIdentifier} - -

+ ); }; + const processInstanceTitleElement = () => { + return

Process Instances

; + }; + const toggleShowFilterOptions = () => { setShowFilterOptions(!showFilterOptions); }; @@ -499,6 +505,7 @@ export default function ProcessInstanceList() { const { page, perPage } = getPageInfoFromSearchParams(searchParams); return ( <> + {processInstanceBreadcrumbElement()} {processInstanceTitleElement()} { - // return null; const rows = processInstanceLogs.map((row) => { const rowToUse = row as any; - console.log(`rowToUse: ${rowToUse}`); return ( @@ -57,7 +56,7 @@ export default function ProcessInstanceLogList() { ); }); return ( -
- {rowToUse.process_group_identifier} - - - {rowToUse.process_model_identifier} @@ -60,7 +56,9 @@ export default function MessageInstanceList() { {rowToUse.process_instance_id} @@ -80,7 +78,6 @@ export default function MessageInstanceList() {
Instance IdProcess Group Process Model Process Instance Message Model
- {(row as any).id} + {row.id} {(row as any).display_name}{row.display_name}
- {(row as any).id} + {row.id} {(row as any).display_name}{row.display_name}
{rowToUse.bpmn_process_identifier}
+
@@ -75,13 +74,25 @@ export default function ProcessInstanceLogList() { }; if (pagination) { + console.log('params.process_model_id', params.process_model_id); const { page, perPage } = getPageInfoFromSearchParams(searchParams); return (
{ - navigate( - `/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}` - ); + navigate(`/admin/process-instances/reports/${params.report_identifier}`); }; const navigateToProcessInstanceReports = (_result: any) => { - navigate( - `/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports` - ); + navigate(`/admin/process-instances/reports`); }; useEffect(() => { @@ -111,8 +106,7 @@ export default function ProcessInstanceReportEdit() { return ( <> - -

Edit Process Instance Report: {params.report_identifier}

+

Edit Process Instance Report: {params.report_identifier}

{ HttpService.makeCallToBackend({ @@ -27,7 +22,7 @@ export default function ProcessInstanceReportList() {
Bpmn Process Identifier
{rowToUse.identifier} @@ -49,15 +44,8 @@ export default function ProcessInstanceReportList() { const headerStuff = ( <> - -

Reports for Process Model: {params.process_model_id}

- diff --git a/src/routes/ProcessInstanceReportNew.tsx b/src/routes/ProcessInstanceReportNew.tsx index 16d575fd6..124be4daf 100644 --- a/src/routes/ProcessInstanceReportNew.tsx +++ b/src/routes/ProcessInstanceReportNew.tsx @@ -1,10 +1,9 @@ import { useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; export default function ProcessInstanceReportNew() { - const params = useParams(); const navigate = useNavigate(); const [identifier, setIdentifier] = useState(''); @@ -13,9 +12,7 @@ export default function ProcessInstanceReportNew() { const [filterBy, setFilterBy] = useState(''); const navigateToNewProcessInstance = (_result: any) => { - navigate( - `/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${identifier}` - ); + navigate(`/admin/process-instances/reports/${identifier}`); }; const addProcessInstanceReport = (event: any) => { @@ -59,7 +56,7 @@ export default function ProcessInstanceReportNew() { return ( <> -

Add Process Model

+

Add Process Model