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

First stab at fixing routes and urls

This commit is contained in:
mike cullerton 2022-11-07 17:22:46 -05:00
parent 19bbc0da92
commit 7902979cf0
15 changed files with 149 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spiffworkflow-frontend/src/components/FileInput.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import { modifyProcessModelPath } from '../helpers';
type Props = { type Props = {
processGroupId: string; processGroupId: string;
@ -27,7 +28,8 @@ export default class FileInput extends React.Component<Props> {
handleSubmit(event: any) { handleSubmit(event: any) {
event.preventDefault(); event.preventDefault();
const url = `/process-models/${this.processGroupId}/${this.processModelId}/files`; const modifiedProcessModelId = modifyProcessModelPath(`${this.processGroupId}/${this.processModelId}`);
const url = `/process-models/${modifiedProcessModelId}/files`;
const formData = new FormData(); const formData = new FormData();
formData.append('file', this.fileInput.current.files[0]); formData.append('file', this.fileInput.current.files[0]);
formData.append('fileName', this.fileInput.current.files[0].name); formData.append('fileName', this.fileInput.current.files[0].name);

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

@ -59,7 +59,6 @@ import { makeid } from '../helpers';
type OwnProps = { type OwnProps = {
processModelId: string; processModelId: string;
processGroupId: string;
diagramType: string; diagramType: string;
readyOrWaitingBpmnTaskIds?: string[] | null; readyOrWaitingBpmnTaskIds?: string[] | null;
completedTasksBpmnIds?: string[] | null; completedTasksBpmnIds?: string[] | null;
@ -77,7 +76,6 @@ type OwnProps = {
// https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js was a handy reference // https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js was a handy reference
export default function ReactDiagramEditor({ export default function ReactDiagramEditor({
processModelId, processModelId,
processGroupId,
diagramType, diagramType,
readyOrWaitingBpmnTaskIds, readyOrWaitingBpmnTaskIds,
completedTasksBpmnIds, completedTasksBpmnIds,
@ -334,6 +332,7 @@ export default function ReactDiagramEditor({
} }
function fetchDiagramFromURL(urlToUse: any) { function fetchDiagramFromURL(urlToUse: any) {
console.log(`urlToUse: ${urlToUse}`);
fetch(urlToUse) fetch(urlToUse)
.then((response) => response.text()) .then((response) => response.text())
.then((text) => { .then((text) => {
@ -350,7 +349,7 @@ export default function ReactDiagramEditor({
function fetchDiagramFromJsonAPI() { function fetchDiagramFromJsonAPI() {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${processGroupId}/${processModelId}/files/${fileName}`, path: `/process-models/${processModelId}/files/${fileName}`,
successCallback: setDiagramXMLStringFromResponseJson, successCallback: setDiagramXMLStringFromResponseJson,
}); });
} }
@ -396,7 +395,6 @@ export default function ReactDiagramEditor({
completedTasksBpmnIds, completedTasksBpmnIds,
fileName, fileName,
performingXmlUpdates, performingXmlUpdates,
processGroupId,
processModelId, processModelId,
url, url,
]); ]);

17
spiffworkflow-frontend/src/helpers.tsx
View File

@ -113,3 +113,20 @@ export const truncateString = (text: string, len: number) => {
} }
return text; return text;
}; };
// Because of limitations in the way openapi defines parameters, we have to modify process models ids
// which are basically paths to the models
export const modifyProcessModelPath = (path: String) => {
return path.replace('/', ':') || '';
};
export const unModifyProcessModelPath = (path: String) => {
return path.replace(':', '/') || '';
};
export const getGroupFromModifiedModelId = (modifiedId: String) => {
const finalSplitIndex = modifiedId.lastIndexOf(':');
const groupId = modifiedId.slice(0, finalSplitIndex);
console.log(`groupId: ${groupId}`);
return groupId;
};

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

@ -53,15 +53,15 @@ export default function AdminRoutes() {
element={<ProcessModelNew />} element={<ProcessModelNew />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id" path="process-models/:process_model_id"
element={<ProcessModelShow />} element={<ProcessModelShow />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/files" path="process-models/:process_model_id/files"
element={<ProcessModelEditDiagram />} element={<ProcessModelEditDiagram />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/files/:file_name" path="process-models/:process_model_id/files/:file_name"
element={<ProcessModelEditDiagram />} element={<ProcessModelEditDiagram />}
/> />
<Route <Route
@ -69,11 +69,11 @@ export default function AdminRoutes() {
element={<ProcessInstanceList />} element={<ProcessInstanceList />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/edit" path="process-models/:process_model_id/edit"
element={<ProcessModelEdit />} element={<ProcessModelEdit />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id" path="process-models/:process_model_id/process-instances/:process_instance_id"
element={<ProcessInstanceShow />} element={<ProcessInstanceShow />}
/> />
<Route <Route
@ -81,7 +81,7 @@ export default function AdminRoutes() {
element={<ProcessInstanceShow />} element={<ProcessInstanceShow />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/process-instances/reports" path="process-models/:process_model_id/process-instances/reports"
element={<ProcessInstanceReportList />} element={<ProcessInstanceReportList />}
/> />
<Route <Route
@ -97,11 +97,11 @@ export default function AdminRoutes() {
element={<ProcessInstanceReportEdit />} element={<ProcessInstanceReportEdit />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/form" path="process-models/:process_model_id/form"
element={<ReactFormEditor />} element={<ReactFormEditor />}
/> />
<Route <Route
path="process-models/:process_group_id/:process_model_id/form/:file_name" path="process-models/:process_model_id/form/:file_name"
element={<ReactFormEditor />} element={<ReactFormEditor />}
/> />
<Route <Route

14
spiffworkflow-frontend/src/routes/HomePage.tsx
View File

@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import { Button, Table } from '@carbon/react'; import { Button, Table } from '@carbon/react';
import { Link, useSearchParams } from 'react-router-dom'; import { Link, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import { getPageInfoFromSearchParams } from '../helpers'; import {getPageInfoFromSearchParams, modifyProcessModelPath} from '../helpers';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import { PaginationObject, RecentProcessModel } from '../interfaces'; import { PaginationObject, RecentProcessModel } from '../interfaces';
@ -39,12 +39,15 @@ export default function HomePage() {
const rows = tasks.map((row) => { const rows = tasks.map((row) => {
const rowToUse = row as any; const rowToUse = row as any;
const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`; const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`;
const modifiedProcessModelIdentifier = modifyProcessModelPath(
rowToUse.process_model_identifier
);
return ( return (
<tr key={rowToUse.id}> <tr key={rowToUse.id}>
<td> <td>
<Link <Link
data-qa="process-model-show-link" data-qa="process-model-show-link"
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}`} to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
> >
{rowToUse.process_model_display_name} {rowToUse.process_model_display_name}
</Link> </Link>
@ -52,7 +55,7 @@ export default function HomePage() {
<td> <td>
<Link <Link
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`} to={`/admin/process-models/${modifiedProcessModelIdentifier}/process-instances/${rowToUse.process_instance_id}`}
> >
View {rowToUse.process_instance_id} View {rowToUse.process_instance_id}
</Link> </Link>
@ -96,6 +99,9 @@ export default function HomePage() {
const buildRecentProcessModelSection = () => { const buildRecentProcessModelSection = () => {
const rows = recentProcessModels.map((row) => { const rows = recentProcessModels.map((row) => {
const rowToUse = row as any; const rowToUse = row as any;
const modifiedProcessModelId = modifyProcessModelPath(
rowToUse.processModelIdentifier
);
return ( return (
<tr <tr
key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`} key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
@ -103,7 +109,7 @@ export default function HomePage() {
<td> <td>
<Link <Link
data-qa="process-model-show-link" data-qa="process-model-show-link"
to={`/admin/process-models/${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`} to={`/admin/process-models/${modifiedProcessModelId}`}
> >
{rowToUse.processModelDisplayName} {rowToUse.processModelDisplayName}
</Link> </Link>

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

@ -24,6 +24,7 @@ export default function ProcessGroupShow() {
setPagination(result.pagination); setPagination(result.pagination);
}; };
const processResult = (result: any) => { const processResult = (result: any) => {
console.log(result);
setProcessGroup(result); setProcessGroup(result);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`, path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`,
@ -41,11 +42,12 @@ export default function ProcessGroupShow() {
return null; return null;
} }
const rows = processModels.map((row) => { const rows = processModels.map((row) => {
const modifiedProcessModelId: String = (row as any).id.replace('/', ':');
return ( return (
<tr key={(row as any).id}> <tr key={(row as any).id}>
<td> <td>
<Link <Link
to={`/admin/process-models/${processGroup.id}/${(row as any).id}`} to={`/admin/process-models/${modifiedProcessModelId}`}
data-qa="process-model-show-link" data-qa="process-model-show-link"
> >
{(row as any).id} {(row as any).id}

18
spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
View File

@ -28,8 +28,10 @@ import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
import { import {
convertDateStringToSeconds, convertDateStringToSeconds,
convertSecondsToFormattedDate, convertSecondsToFormattedDate,
getGroupFromModifiedModelId,
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
getProcessModelFullIdentifierFromSearchParams, getProcessModelFullIdentifierFromSearchParams,
modifyProcessModelPath,
} from '../helpers'; } from '../helpers';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
@ -383,27 +385,27 @@ export default function ProcessInstanceList() {
convertSecondsToFormattedDate(row.start_in_seconds) || '-'; convertSecondsToFormattedDate(row.start_in_seconds) || '-';
const formattedEndDate = const formattedEndDate =
convertSecondsToFormattedDate(row.end_in_seconds) || '-'; convertSecondsToFormattedDate(row.end_in_seconds) || '-';
const modifiedProcessModelId: String = modifyProcessModelPath(
(row as any).process_model_identifier
);
const groupId = getGroupFromModifiedModelId(modifiedProcessModelId);
return ( return (
<tr key={row.id}> <tr key={row.id}>
<td> <td>
<Link <Link
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`} to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${row.id}`}
> >
{row.id} {row.id}
</Link> </Link>
</td> </td>
<td> <td>
<Link to={`/admin/process-groups/${row.process_group_identifier}`}> <Link to={`/admin/process-groups/${groupId}`}>{groupId}</Link>
{row.process_group_identifier}
</Link>
</td> </td>
<td> <td>
<Link <Link to={`/admin/process-models/${modifiedProcessModelId}`}>
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`} {modifiedProcessModelId}
>
{row.process_model_identifier}
</Link> </Link>
</td> </td>
<td>{formattedStartDate}</td> <td>{formattedStartDate}</td>

10
spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
View File

@ -7,6 +7,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import { import {
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
convertSecondsToFormattedDate, convertSecondsToFormattedDate,
modifyProcessModelPath,
} from '../helpers'; } from '../helpers';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
@ -15,6 +16,9 @@ export default function ProcessInstanceLogList() {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [processInstanceLogs, setProcessInstanceLogs] = useState([]); const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
const [pagination, setPagination] = useState(null); const [pagination, setPagination] = useState(null);
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
useEffect(() => { useEffect(() => {
const setProcessInstanceLogListFromResult = (result: any) => { const setProcessInstanceLogListFromResult = (result: any) => {
@ -23,7 +27,7 @@ export default function ProcessInstanceLogList() {
}; };
const { page, perPage } = getPageInfoFromSearchParams(searchParams); const { page, perPage } = getPageInfoFromSearchParams(searchParams);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs?per_page=${perPage}&page=${page}`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/logs?per_page=${perPage}&page=${page}`,
successCallback: setProcessInstanceLogListFromResult, successCallback: setProcessInstanceLogListFromResult,
}); });
}, [searchParams, params]); }, [searchParams, params]);
@ -43,7 +47,7 @@ export default function ProcessInstanceLogList() {
<td> <td>
<Link <Link
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${rowToUse.process_instance_id}/${rowToUse.spiff_step}`} to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${rowToUse.process_instance_id}/${rowToUse.spiff_step}`}
> >
{convertSecondsToFormattedDate(rowToUse.timestamp)} {convertSecondsToFormattedDate(rowToUse.timestamp)}
</Link> </Link>
@ -83,7 +87,7 @@ export default function ProcessInstanceLogList() {
perPage={perPage} perPage={perPage}
pagination={pagination} pagination={pagination}
tableToDisplay={buildTable()} tableToDisplay={buildTable()}
path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs`} path={`/admin/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/logs`}
/> />
</main> </main>
); );

10
spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx
View File

@ -4,14 +4,18 @@ import { Button, Table } from '@carbon/react';
import { useParams, Link } from 'react-router-dom'; import { useParams, Link } from 'react-router-dom';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import { modifyProcessModelPath } from '../helpers';
export default function ProcessInstanceReportList() { export default function ProcessInstanceReportList() {
const params = useParams(); const params = useParams();
const [processInstanceReports, setProcessInstanceReports] = useState([]); const [processInstanceReports, setProcessInstanceReports] = useState([]);
const modifiedProcessModelId = modifyProcessModelPath(
params.process_model_id || ''
);
useEffect(() => { useEffect(() => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`, path: `/process-models/${modifiedProcessModelId}/process-instances/reports`,
successCallback: setProcessInstanceReports, successCallback: setProcessInstanceReports,
}); });
}, [params]); }, [params]);
@ -23,7 +27,7 @@ export default function ProcessInstanceReportList() {
<tr key={(row as any).id}> <tr key={(row as any).id}>
<td> <td>
<Link <Link
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${rowToUse.identifier}`} to={`/admin/process-models/${modifiedProcessModelId}/process-instances/reports/${rowToUse.identifier}`}
> >
{rowToUse.identifier} {rowToUse.identifier}
</Link> </Link>
@ -52,7 +56,7 @@ export default function ProcessInstanceReportList() {
/> />
<h2>Reports for Process Model: {params.process_model_id}</h2> <h2>Reports for Process Model: {params.process_model_id}</h2>
<Button <Button
href={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/new`} href={`/admin/process-models/${modifiedProcessModelId}/process-instances/reports/new`}
> >
Add a process instance report Add a process instance report
</Button> </Button>

32
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -6,7 +6,11 @@ import { Button, Modal, Stack } from '@carbon/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ReactDiagramEditor from '../components/ReactDiagramEditor'; import ReactDiagramEditor from '../components/ReactDiagramEditor';
import { convertSecondsToFormattedDate } from '../helpers'; import {
convertSecondsToFormattedDate,
modifyProcessModelPath,
unModifyProcessModelPath,
} from '../helpers';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import ErrorContext from '../contexts/ErrorContext'; import ErrorContext from '../contexts/ErrorContext';
@ -22,6 +26,10 @@ export default function ProcessInstanceShow() {
const setErrorMessage = (useContext as any)(ErrorContext)[1]; const setErrorMessage = (useContext as any)(ErrorContext)[1];
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
const navigateToProcessInstances = (_result: any) => { const navigateToProcessInstances = (_result: any) => {
navigate( navigate(
`/admin/process-instances?process_group_identifier=${params.process_group_id}&process_model_identifier=${params.process_model_id}` `/admin/process-instances?process_group_identifier=${params.process_group_id}&process_model_identifier=${params.process_model_id}`
@ -30,7 +38,7 @@ export default function ProcessInstanceShow() {
useEffect(() => { useEffect(() => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}`,
successCallback: setProcessInstance, successCallback: setProcessInstance,
}); });
if (typeof params.spiff_step === 'undefined') if (typeof params.spiff_step === 'undefined')
@ -47,7 +55,7 @@ export default function ProcessInstanceShow() {
const deleteProcessInstance = () => { const deleteProcessInstance = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}`,
successCallback: navigateToProcessInstances, successCallback: navigateToProcessInstances,
httpMethod: 'DELETE', httpMethod: 'DELETE',
}); });
@ -60,7 +68,7 @@ export default function ProcessInstanceShow() {
const terminateProcessInstance = () => { const terminateProcessInstance = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/terminate`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/terminate`,
successCallback: refreshPage, successCallback: refreshPage,
httpMethod: 'POST', httpMethod: 'POST',
}); });
@ -68,7 +76,7 @@ export default function ProcessInstanceShow() {
const suspendProcessInstance = () => { const suspendProcessInstance = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/suspend`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/suspend`,
successCallback: refreshPage, successCallback: refreshPage,
httpMethod: 'POST', httpMethod: 'POST',
}); });
@ -76,7 +84,7 @@ export default function ProcessInstanceShow() {
const resumeProcessInstance = () => { const resumeProcessInstance = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/resume`, path: `/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/resume`,
successCallback: refreshPage, successCallback: refreshPage,
httpMethod: 'POST', httpMethod: 'POST',
}); });
@ -179,7 +187,7 @@ export default function ProcessInstanceShow() {
<li> <li>
<Link <Link
data-qa="process-instance-log-list-link" data-qa="process-instance-log-list-link"
to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/logs`} to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/logs`}
> >
Logs Logs
</Link> </Link>
@ -284,7 +292,7 @@ export default function ProcessInstanceShow() {
const taskToUse: any = taskToDisplay; const taskToUse: any = taskToDisplay;
const previousTask: any = getTaskById(taskToUse.parent); const previousTask: any = getTaskById(taskToUse.parent);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/script-unit-tests`, path: `/process-models/${modifiedProcessModelId}/script-unit-tests`,
httpMethod: 'POST', httpMethod: 'POST',
successCallback: processScriptUnitTestCreateResult, successCallback: processScriptUnitTestCreateResult,
postBody: { postBody: {
@ -428,11 +436,14 @@ export default function ProcessInstanceShow() {
if (processInstance && tasks) { if (processInstance && tasks) {
const processInstanceToUse = processInstance as any; const processInstanceToUse = processInstance as any;
const taskIds = getTaskIds(); const taskIds = getTaskIds();
const processModelId = unModifyProcessModelPath(
params.process_model_id ? params.process_model_id : ''
);
return ( return (
<> <>
<ProcessBreadcrumb <ProcessBreadcrumb
processModelId={params.process_model_id} processModelId={processModelId}
processGroupId={params.process_group_id} processGroupId={params.process_group_id}
linkProcessModel linkProcessModel
/> />
@ -450,8 +461,7 @@ export default function ProcessInstanceShow() {
{getInfoTag(processInstanceToUse)} {getInfoTag(processInstanceToUse)}
{taskDataDisplayArea()} {taskDataDisplayArea()}
<ReactDiagramEditor <ReactDiagramEditor
processModelId={params.process_model_id || ''} processModelId={processModelId || ''}
processGroupId={params.process_group_id || ''}
diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''} diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}
fileName={processInstanceToUse.bpmn_xml_file_contents || ''} fileName={processInstanceToUse.bpmn_xml_file_contents || ''}
readyOrWaitingBpmnTaskIds={taskIds.readyOrWaiting} readyOrWaitingBpmnTaskIds={taskIds.readyOrWaiting}

18
spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
View File

@ -6,6 +6,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import ErrorContext from '../contexts/ErrorContext'; import ErrorContext from '../contexts/ErrorContext';
import {getGroupFromModifiedModelId, modifyProcessModelPath} from "../helpers";
export default function ProcessModelEdit() { export default function ProcessModelEdit() {
const [displayName, setDisplayName] = useState(''); const [displayName, setDisplayName] = useState('');
@ -14,13 +15,14 @@ export default function ProcessModelEdit() {
const [processModel, setProcessModel] = useState(null); const [processModel, setProcessModel] = useState(null);
const setErrorMessage = (useContext as any)(ErrorContext)[1]; const setErrorMessage = (useContext as any)(ErrorContext)[1];
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`; const processModelPath = `process-models/${params.process_model_id}`;
useEffect(() => { useEffect(() => {
const processResult = (result: any) => { const processResult = (result: any) => {
setProcessModel(result); setProcessModel(result);
setDisplayName(result.display_name); setDisplayName(result.display_name);
}; };
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/${processModelPath}`, path: `/${processModelPath}`,
successCallback: processResult, successCallback: processResult,
@ -28,11 +30,16 @@ export default function ProcessModelEdit() {
}, [processModelPath]); }, [processModelPath]);
const navigateToProcessModel = (_result: any) => { const navigateToProcessModel = (_result: any) => {
console.log(`processModelPath: ${processModelPath}`);
navigate(`/admin/${processModelPath}`); navigate(`/admin/${processModelPath}`);
}; };
const navigateToProcessModels = (_result: any) => { const navigateToProcessModels = (_result: any) => {
navigate(`/admin/process-groups/${params.process_group_id}`); const processGroupId = getGroupFromModifiedModelId(
(params as any).process_model_id
);
const modifiedProcessGroupId = modifyProcessModelPath(processGroupId);
navigate(`/admin/process-groups/${modifiedProcessGroupId}`);
}; };
const updateProcessModel = (event: any) => { const updateProcessModel = (event: any) => {
@ -41,6 +48,7 @@ export default function ProcessModelEdit() {
const processModelToPass = Object.assign(processModelToUse, { const processModelToPass = Object.assign(processModelToUse, {
display_name: displayName, display_name: displayName,
}); });
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/${processModelPath}`, path: `/${processModelPath}`,
successCallback: navigateToProcessModel, successCallback: navigateToProcessModel,
@ -52,7 +60,11 @@ export default function ProcessModelEdit() {
const deleteProcessModel = () => { const deleteProcessModel = () => {
setErrorMessage(null); setErrorMessage(null);
const processModelToUse = processModel as any; const processModelToUse = processModel as any;
const processModelShowPath = `/process-models/${processModelToUse.process_group_id}/${processModelToUse.id}`; const modifiedProcessModelId: String = modifyProcessModelPath(
(processModelToUse as any).id
);
const processModelShowPath = `/process-models/${modifiedProcessModelId}`;
console.log(`processModelShowPath: ${processModelShowPath}`);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `${processModelShowPath}`, path: `${processModelShowPath}`,
successCallback: navigateToProcessModels, successCallback: navigateToProcessModels,

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

@ -14,6 +14,7 @@ import HttpService from '../services/HttpService';
import ErrorContext from '../contexts/ErrorContext'; import ErrorContext from '../contexts/ErrorContext';
import { makeid } from '../helpers'; import { makeid } from '../helpers';
import { ProcessModel } from '../interfaces'; import { ProcessModel } from '../interfaces';
import { modifyProcessModelPath } from '../helpers';
export default function ProcessModelEditDiagram() { export default function ProcessModelEditDiagram() {
const [showFileNameEditor, setShowFileNameEditor] = useState(false); const [showFileNameEditor, setShowFileNameEditor] = useState(false);
@ -72,7 +73,11 @@ export default function ProcessModelEditDiagram() {
const [processModel, setProcessModel] = useState<ProcessModel | null>(null); const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`; const modifiedProcessModelId = modifyProcessModelPath(
(params as any).process_model_id
);
const processModelPath = `process-models/${modifiedProcessModelId}`;
useEffect(() => { useEffect(() => {
const processResult = (result: ProcessModel) => { const processResult = (result: ProcessModel) => {
@ -91,6 +96,7 @@ export default function ProcessModelEditDiagram() {
}; };
if (params.file_name) { if (params.file_name) {
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/${processModelPath}/files/${params.file_name}`, path: `/${processModelPath}/files/${params.file_name}`,
successCallback: processResult, successCallback: processResult,
@ -109,7 +115,7 @@ export default function ProcessModelEditDiagram() {
'file_type' 'file_type'
)}`; )}`;
navigate( navigate(
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/files/${fileNameWithExtension}` `/admin/process-models/${modifiedProcessModelId}/files/${fileNameWithExtension}`
); );
} }
}; };
@ -118,7 +124,7 @@ export default function ProcessModelEditDiagram() {
setErrorMessage(null); setErrorMessage(null);
setBpmnXmlForDiagramRendering(bpmnXML); setBpmnXmlForDiagramRendering(bpmnXML);
let url = `/process-models/${params.process_group_id}/${params.process_model_id}/files`; let url = `/process-models/${modifiedProcessModelId}/files`;
let httpMethod = 'PUT'; let httpMethod = 'PUT';
let fileNameWithExtension = fileName; let fileNameWithExtension = fileName;
@ -152,12 +158,12 @@ export default function ProcessModelEditDiagram() {
}; };
const onDeleteFile = (fileName = params.file_name) => { const onDeleteFile = (fileName = params.file_name) => {
const url = `/process-models/${params.process_group_id}/${params.process_model_id}/files/${fileName}`; const url = `/process-models/${modifiedProcessModelId}/files/${fileName}`;
const httpMethod = 'DELETE'; const httpMethod = 'DELETE';
const navigateToProcessModelShow = (_httpResult: any) => { const navigateToProcessModelShow = (_httpResult: any) => {
navigate( navigate(
`/admin/process-models/${params.process_group_id}/${params.process_model_id}` `/admin/process-models/${modifiedProcessModelId}`
); );
}; };
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
@ -168,7 +174,7 @@ export default function ProcessModelEditDiagram() {
}; };
const onSetPrimaryFile = (fileName = params.file_name) => { const onSetPrimaryFile = (fileName = params.file_name) => {
const url = `/process-models/${params.process_group_id}/${params.process_model_id}`; const url = `/process-models/${modifiedProcessModelId}`;
const httpMethod = 'PUT'; const httpMethod = 'PUT';
const navigateToProcessModelShow = (_httpResult: any) => { const navigateToProcessModelShow = (_httpResult: any) => {
@ -390,7 +396,7 @@ export default function ProcessModelEditDiagram() {
if (currentScriptUnitTest && scriptElement) { if (currentScriptUnitTest && scriptElement) {
resetUnitTextResult(); resetUnitTextResult();
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/script-unit-tests/run`, path: `/process-models/${modifiedProcessModelId}/script-unit-tests/run`,
httpMethod: 'POST', httpMethod: 'POST',
successCallback: processScriptUnitTestRunResult, successCallback: processScriptUnitTestRunResult,
postBody: { postBody: {
@ -591,7 +597,6 @@ export default function ProcessModelEditDiagram() {
return ( return (
<ReactDiagramEditor <ReactDiagramEditor
processModelId={params.process_model_id || ''} processModelId={params.process_model_id || ''}
processGroupId={params.process_group_id || ''}
saveDiagram={saveDiagram} saveDiagram={saveDiagram}
onDeleteFile={onDeleteFile} onDeleteFile={onDeleteFile}
diagramXML={bpmnXmlForDiagramRendering} diagramXML={bpmnXmlForDiagramRendering}
@ -613,7 +618,6 @@ export default function ProcessModelEditDiagram() {
return ( return (
<ReactDiagramEditor <ReactDiagramEditor
processModelId={params.process_model_id || ''} processModelId={params.process_model_id || ''}
processGroupId={params.process_group_id || ''}
saveDiagram={saveDiagram} saveDiagram={saveDiagram}
onDeleteFile={onDeleteFile} onDeleteFile={onDeleteFile}
onSetPrimaryFile={onSetPrimaryFileCallback} onSetPrimaryFile={onSetPrimaryFileCallback}

3
spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
View File

@ -25,10 +25,9 @@ export default function ProcessModelNew() {
successCallback: navigateToNewProcessModel, successCallback: navigateToNewProcessModel,
httpMethod: 'POST', httpMethod: 'POST',
postBody: { postBody: {
id: identifier, id: `${params.process_group_id}/${identifier}`,
display_name: displayName, display_name: displayName,
description: displayName, description: displayName,
process_group_id: params.process_group_id,
}, },
}); });
}; };

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

@ -7,6 +7,7 @@ import FileInput from '../components/FileInput';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ErrorContext from '../contexts/ErrorContext'; import ErrorContext from '../contexts/ErrorContext';
import { RecentProcessModel } from '../interfaces'; import { RecentProcessModel } from '../interfaces';
import {modifyProcessModelPath, unModifyProcessModelPath} from '../helpers';
const storeRecentProcessModelInLocalStorage = ( const storeRecentProcessModelInLocalStorage = (
processModelForStorage: any, processModelForStorage: any,
@ -70,6 +71,10 @@ export default function ProcessModelShow() {
const [processInstanceResult, setProcessInstanceResult] = useState(null); const [processInstanceResult, setProcessInstanceResult] = useState(null);
const [reloadModel, setReloadModel] = useState(false); const [reloadModel, setReloadModel] = useState(false);
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
useEffect(() => { useEffect(() => {
const processResult = (result: object) => { const processResult = (result: object) => {
setProcessModel(result); setProcessModel(result);
@ -77,7 +82,7 @@ export default function ProcessModelShow() {
storeRecentProcessModelInLocalStorage(result, params); storeRecentProcessModelInLocalStorage(result, params);
}; };
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}`, path: `/process-models/${modifiedProcessModelId}`,
successCallback: processResult, successCallback: processResult,
}); });
}, [params, reloadModel]); }, [params, reloadModel]);
@ -85,7 +90,7 @@ export default function ProcessModelShow() {
const processModelRun = (processInstance: any) => { const processModelRun = (processInstance: any) => {
setErrorMessage(null); setErrorMessage(null);
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${processInstance.id}/run`, path: `/process-instances/${processInstance.id}/run`,
successCallback: setProcessInstanceResult, successCallback: setProcessInstanceResult,
failureCallback: setErrorMessage, failureCallback: setErrorMessage,
httpMethod: 'POST', httpMethod: 'POST',
@ -94,7 +99,7 @@ export default function ProcessModelShow() {
const processInstanceCreateAndRun = () => { const processInstanceCreateAndRun = () => {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`, path: `/process-models/${modifiedProcessModelId}/process-instances`,
successCallback: processModelRun, successCallback: processModelRun,
httpMethod: 'POST', httpMethod: 'POST',
}); });
@ -120,11 +125,7 @@ export default function ProcessModelShow() {
<p> <p>
Process Instance {processInstanceId} kicked off ( Process Instance {processInstanceId} kicked off (
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${processInstanceId}`}
(processModel as any).process_group_id
}/${
(processModel as any).id
}/process-instances/${processInstanceId}`}
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
> >
view view
@ -147,12 +148,13 @@ export default function ProcessModelShow() {
if (processModelFile.name === (processModel as any).primary_file_name) { if (processModelFile.name === (processModel as any).primary_file_name) {
primarySuffix = '- Primary File'; primarySuffix = '- Primary File';
} }
// const modifiedProcessModelId = modifyProcessModelPath(
// (processModel as any).id
// );
constructedTag = ( constructedTag = (
<li key={processModelFile.name}> <li key={processModelFile.name}>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`}
(processModel as any).process_group_id
}/${(processModel as any).id}/files/${processModelFile.name}`}
> >
{processModelFile.name} {processModelFile.name}
</Link> </Link>
@ -163,9 +165,7 @@ export default function ProcessModelShow() {
constructedTag = ( constructedTag = (
<li key={processModelFile.name}> <li key={processModelFile.name}>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form/${processModelFile.name}`}
> >
{processModelFile.name} {processModelFile.name}
</Link> </Link>
@ -183,13 +183,12 @@ export default function ProcessModelShow() {
}; };
const processInstancesUl = () => { const processInstancesUl = () => {
const unmodifiedProcessModelId: String = unModifyProcessModelPath(`${params.process_model_id}`);
return ( return (
<ul> <ul>
<li> <li>
<Link <Link
to={`/admin/process-instances?process_group_identifier=${ to={`/admin/process-instances?process_model_identifier=${unmodifiedProcessModelId}`}
(processModel as any).process_group_id
}&process_model_identifier=${(processModel as any).id}`}
data-qa="process-instance-list-link" data-qa="process-instance-list-link"
> >
List List
@ -197,9 +196,7 @@ export default function ProcessModelShow() {
</li> </li>
<li> <li>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${modifiedProcessModelId}/process-instances/reports`}
(processModel as any).process_group_id
}/${(processModel as any).id}/process-instances/reports`}
data-qa="process-instance-reports-link" data-qa="process-instance-reports-link"
> >
Reports Reports
@ -216,41 +213,31 @@ export default function ProcessModelShow() {
Run Run
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${modifiedProcessModelId}/edit`}
(processModel as any).process_group_id
}/${(processModel as any).id}/edit`}
variant="secondary" variant="secondary"
> >
Edit process model Edit process model
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`}
(processModel as any).process_group_id
}/${(processModel as any).id}/files?file_type=bpmn`}
variant="warning" variant="warning"
> >
Add New BPMN File Add New BPMN File
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`}
(processModel as any).process_group_id
}/${(processModel as any).id}/files?file_type=dmn`}
variant="success" variant="success"
> >
Add New DMN File Add New DMN File
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form?file_ext=json`}
variant="info" variant="info"
> >
Add New JSON File Add New JSON File
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form?file_ext=md`}
variant="info" variant="info"
> >
Add New Markdown File Add New Markdown File

17
spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
View File

@ -6,6 +6,7 @@ import { Button, Modal } from '@carbon/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import { modifyProcessModelPath } from '../helpers';
// NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could // NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could
// possibly be merged into it. I'm leaving as a separate file now in case it does // possibly be merged into it. I'm leaving as a separate file now in case it does
@ -34,6 +35,10 @@ export default function ReactFormEditor() {
const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json'; const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json';
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
useEffect(() => { useEffect(() => {
const processResult = (result: any) => { const processResult = (result: any) => {
setProcessModelFile(result); setProcessModelFile(result);
@ -42,7 +47,7 @@ export default function ReactFormEditor() {
if (params.file_name) { if (params.file_name) {
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({
path: `/process-models/${params.process_group_id}/${params.process_model_id}/files/${params.file_name}`, path: `/process-models/${modifiedProcessModelId}/files/${params.file_name}`,
successCallback: processResult, successCallback: processResult,
}); });
} }
@ -52,13 +57,13 @@ export default function ReactFormEditor() {
if (!params.file_name) { if (!params.file_name) {
const fileNameWithExtension = `${newFileName}.${fileExtension}`; const fileNameWithExtension = `${newFileName}.${fileExtension}`;
navigate( navigate(
`/admin/process-models/${params.process_group_id}/${params.process_model_id}/form/${fileNameWithExtension}` `/admin/process-models/${modifiedProcessModelId}/form/${fileNameWithExtension}`
); );
} }
}; };
const saveFile = () => { const saveFile = () => {
let url = `/process-models/${params.process_group_id}/${params.process_model_id}/files`; let url = `/process-models/${modifiedProcessModelId}/files`;
let httpMethod = 'PUT'; let httpMethod = 'PUT';
let fileNameWithExtension = params.file_name; let fileNameWithExtension = params.file_name;
@ -90,13 +95,11 @@ export default function ReactFormEditor() {
}; };
const deleteFile = () => { const deleteFile = () => {
const url = `/process-models/${params.process_group_id}/${params.process_model_id}/files/${params.file_name}`; const url = `/process-models/${modifiedProcessModelId}/files/${params.file_name}`;
const httpMethod = 'DELETE'; const httpMethod = 'DELETE';
const navigateToProcessModelShow = (_httpResult: any) => { const navigateToProcessModelShow = (_httpResult: any) => {
navigate( navigate(`/admin/process-models/${modifiedProcessModelId}`);
`/admin/process-models/${params.process_group_id}/${params.process_model_id}`
);
}; };
HttpService.makeCallToBackend({ HttpService.makeCallToBackend({