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 HttpService from '../services/HttpService';
import { modifyProcessModelPath } from '../helpers';
type Props = {
processGroupId: string;
@ -27,7 +28,8 @@ export default class FileInput extends React.Component<Props> {
handleSubmit(event: any) {
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();
formData.append('file', this.fileInput.current.files[0]);
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 = {
processModelId: string;
processGroupId: string;
diagramType: string;
readyOrWaitingBpmnTaskIds?: 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
export default function ReactDiagramEditor({
processModelId,
processGroupId,
diagramType,
readyOrWaitingBpmnTaskIds,
completedTasksBpmnIds,
@ -334,6 +332,7 @@ export default function ReactDiagramEditor({
}
function fetchDiagramFromURL(urlToUse: any) {
console.log(`urlToUse: ${urlToUse}`);
fetch(urlToUse)
.then((response) => response.text())
.then((text) => {
@ -350,7 +349,7 @@ export default function ReactDiagramEditor({
function fetchDiagramFromJsonAPI() {
HttpService.makeCallToBackend({
path: `/process-models/${processGroupId}/${processModelId}/files/${fileName}`,
path: `/process-models/${processModelId}/files/${fileName}`,
successCallback: setDiagramXMLStringFromResponseJson,
});
}
@ -396,7 +395,6 @@ export default function ReactDiagramEditor({
completedTasksBpmnIds,
fileName,
performingXmlUpdates,
processGroupId,
processModelId,
url,
]);

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

@ -113,3 +113,20 @@ export const truncateString = (text: string, len: number) => {
}
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 />}
/>
<Route
path="process-models/:process_group_id/:process_model_id"
path="process-models/:process_model_id"
element={<ProcessModelShow />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/files"
path="process-models/:process_model_id/files"
element={<ProcessModelEditDiagram />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/files/:file_name"
path="process-models/:process_model_id/files/:file_name"
element={<ProcessModelEditDiagram />}
/>
<Route
@ -69,11 +69,11 @@ export default function AdminRoutes() {
element={<ProcessInstanceList />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/edit"
path="process-models/:process_model_id/edit"
element={<ProcessModelEdit />}
/>
<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 />}
/>
<Route
@ -81,7 +81,7 @@ export default function AdminRoutes() {
element={<ProcessInstanceShow />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/process-instances/reports"
path="process-models/:process_model_id/process-instances/reports"
element={<ProcessInstanceReportList />}
/>
<Route
@ -97,11 +97,11 @@ export default function AdminRoutes() {
element={<ProcessInstanceReportEdit />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/form"
path="process-models/:process_model_id/form"
element={<ReactFormEditor />}
/>
<Route
path="process-models/:process_group_id/:process_model_id/form/:file_name"
path="process-models/:process_model_id/form/:file_name"
element={<ReactFormEditor />}
/>
<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 { Link, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable';
import { getPageInfoFromSearchParams } from '../helpers';
import {getPageInfoFromSearchParams, modifyProcessModelPath} from '../helpers';
import HttpService from '../services/HttpService';
import { PaginationObject, RecentProcessModel } from '../interfaces';
@ -39,12 +39,15 @@ export default function HomePage() {
const rows = tasks.map((row) => {
const rowToUse = row as any;
const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`;
const modifiedProcessModelIdentifier = modifyProcessModelPath(
rowToUse.process_model_identifier
);
return (
<tr key={rowToUse.id}>
<td>
<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}
</Link>
@ -52,7 +55,7 @@ export default function HomePage() {
<td>
<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}
</Link>
@ -96,6 +99,9 @@ export default function HomePage() {
const buildRecentProcessModelSection = () => {
const rows = recentProcessModels.map((row) => {
const rowToUse = row as any;
const modifiedProcessModelId = modifyProcessModelPath(
rowToUse.processModelIdentifier
);
return (
<tr
key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
@ -103,7 +109,7 @@ export default function HomePage() {
<td>
<Link
data-qa="process-model-show-link"
to={`/admin/process-models/${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
to={`/admin/process-models/${modifiedProcessModelId}`}
>
{rowToUse.processModelDisplayName}
</Link>

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

@ -24,6 +24,7 @@ export default function ProcessGroupShow() {
setPagination(result.pagination);
};
const processResult = (result: any) => {
console.log(result);
setProcessGroup(result);
HttpService.makeCallToBackend({
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;
}
const rows = processModels.map((row) => {
const modifiedProcessModelId: String = (row as any).id.replace('/', ':');
return (
<tr key={(row as any).id}>
<td>
<Link
to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
to={`/admin/process-models/${modifiedProcessModelId}`}
data-qa="process-model-show-link"
>
{(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 {
convertDateStringToSeconds,
convertSecondsToFormattedDate,
getGroupFromModifiedModelId,
getPageInfoFromSearchParams,
getProcessModelFullIdentifierFromSearchParams,
modifyProcessModelPath,
} from '../helpers';
import PaginationForTable from '../components/PaginationForTable';
@ -383,27 +385,27 @@ export default function ProcessInstanceList() {
convertSecondsToFormattedDate(row.start_in_seconds) || '-';
const formattedEndDate =
convertSecondsToFormattedDate(row.end_in_seconds) || '-';
const modifiedProcessModelId: String = modifyProcessModelPath(
(row as any).process_model_identifier
);
const groupId = getGroupFromModifiedModelId(modifiedProcessModelId);
return (
<tr key={row.id}>
<td>
<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}
</Link>
</td>
<td>
<Link to={`/admin/process-groups/${row.process_group_identifier}`}>
{row.process_group_identifier}
</Link>
<Link to={`/admin/process-groups/${groupId}`}>{groupId}</Link>
</td>
<td>
<Link
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`}
>
{row.process_model_identifier}
<Link to={`/admin/process-models/${modifiedProcessModelId}`}>
{modifiedProcessModelId}
</Link>
</td>
<td>{formattedStartDate}</td>

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

@ -7,6 +7,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import {
getPageInfoFromSearchParams,
convertSecondsToFormattedDate,
modifyProcessModelPath,
} from '../helpers';
import HttpService from '../services/HttpService';
@ -15,6 +16,9 @@ export default function ProcessInstanceLogList() {
const [searchParams] = useSearchParams();
const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
const [pagination, setPagination] = useState(null);
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
useEffect(() => {
const setProcessInstanceLogListFromResult = (result: any) => {
@ -23,7 +27,7 @@ export default function ProcessInstanceLogList() {
};
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
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,
});
}, [searchParams, params]);
@ -43,7 +47,7 @@ export default function ProcessInstanceLogList() {
<td>
<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)}
</Link>
@ -83,7 +87,7 @@ export default function ProcessInstanceLogList() {
perPage={perPage}
pagination={pagination}
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>
);

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 ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
import { modifyProcessModelPath } from '../helpers';
export default function ProcessInstanceReportList() {
const params = useParams();
const [processInstanceReports, setProcessInstanceReports] = useState([]);
const modifiedProcessModelId = modifyProcessModelPath(
params.process_model_id || ''
);
useEffect(() => {
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,
});
}, [params]);
@ -23,7 +27,7 @@ export default function ProcessInstanceReportList() {
<tr key={(row as any).id}>
<td>
<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}
</Link>
@ -52,7 +56,7 @@ export default function ProcessInstanceReportList() {
/>
<h2>Reports for Process Model: {params.process_model_id}</h2>
<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
</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 HttpService from '../services/HttpService';
import ReactDiagramEditor from '../components/ReactDiagramEditor';
import { convertSecondsToFormattedDate } from '../helpers';
import {
convertSecondsToFormattedDate,
modifyProcessModelPath,
unModifyProcessModelPath,
} from '../helpers';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import ErrorContext from '../contexts/ErrorContext';
@ -22,6 +26,10 @@ export default function ProcessInstanceShow() {
const setErrorMessage = (useContext as any)(ErrorContext)[1];
const modifiedProcessModelId = modifyProcessModelPath(
`${params.process_model_id}`
);
const navigateToProcessInstances = (_result: any) => {
navigate(
`/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(() => {
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,
});
if (typeof params.spiff_step === 'undefined')
@ -47,7 +55,7 @@ export default function ProcessInstanceShow() {
const deleteProcessInstance = () => {
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,
httpMethod: 'DELETE',
});
@ -60,7 +68,7 @@ export default function ProcessInstanceShow() {
const terminateProcessInstance = () => {
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,
httpMethod: 'POST',
});
@ -68,7 +76,7 @@ export default function ProcessInstanceShow() {
const suspendProcessInstance = () => {
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,
httpMethod: 'POST',
});
@ -76,7 +84,7 @@ export default function ProcessInstanceShow() {
const resumeProcessInstance = () => {
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,
httpMethod: 'POST',
});
@ -179,7 +187,7 @@ export default function ProcessInstanceShow() {
<li>
<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
</Link>
@ -284,7 +292,7 @@ export default function ProcessInstanceShow() {
const taskToUse: any = taskToDisplay;
const previousTask: any = getTaskById(taskToUse.parent);
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',
successCallback: processScriptUnitTestCreateResult,
postBody: {
@ -428,11 +436,14 @@ export default function ProcessInstanceShow() {
if (processInstance && tasks) {
const processInstanceToUse = processInstance as any;
const taskIds = getTaskIds();
const processModelId = unModifyProcessModelPath(
params.process_model_id ? params.process_model_id : ''
);
return (
<>
<ProcessBreadcrumb
processModelId={params.process_model_id}
processModelId={processModelId}
processGroupId={params.process_group_id}
linkProcessModel
/>
@ -450,8 +461,7 @@ export default function ProcessInstanceShow() {
{getInfoTag(processInstanceToUse)}
{taskDataDisplayArea()}
<ReactDiagramEditor
processModelId={params.process_model_id || ''}
processGroupId={params.process_group_id || ''}
processModelId={processModelId || ''}
diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}
fileName={processInstanceToUse.bpmn_xml_file_contents || ''}
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 ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import ErrorContext from '../contexts/ErrorContext';
import {getGroupFromModifiedModelId, modifyProcessModelPath} from "../helpers";
export default function ProcessModelEdit() {
const [displayName, setDisplayName] = useState('');
@ -14,13 +15,14 @@ export default function ProcessModelEdit() {
const [processModel, setProcessModel] = useState(null);
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(() => {
const processResult = (result: any) => {
setProcessModel(result);
setDisplayName(result.display_name);
};
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({
path: `/${processModelPath}`,
successCallback: processResult,
@ -28,11 +30,16 @@ export default function ProcessModelEdit() {
}, [processModelPath]);
const navigateToProcessModel = (_result: any) => {
console.log(`processModelPath: ${processModelPath}`);
navigate(`/admin/${processModelPath}`);
};
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) => {
@ -41,6 +48,7 @@ export default function ProcessModelEdit() {
const processModelToPass = Object.assign(processModelToUse, {
display_name: displayName,
});
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({
path: `/${processModelPath}`,
successCallback: navigateToProcessModel,
@ -52,7 +60,11 @@ export default function ProcessModelEdit() {
const deleteProcessModel = () => {
setErrorMessage(null);
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({
path: `${processModelShowPath}`,
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 { makeid } from '../helpers';
import { ProcessModel } from '../interfaces';
import { modifyProcessModelPath } from '../helpers';
export default function ProcessModelEditDiagram() {
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
@ -72,7 +73,11 @@ export default function ProcessModelEditDiagram() {
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(() => {
const processResult = (result: ProcessModel) => {
@ -91,6 +96,7 @@ export default function ProcessModelEditDiagram() {
};
if (params.file_name) {
console.log(`processModelPath: ${processModelPath}`);
HttpService.makeCallToBackend({
path: `/${processModelPath}/files/${params.file_name}`,
successCallback: processResult,
@ -109,7 +115,7 @@ export default function ProcessModelEditDiagram() {
'file_type'
)}`;
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);
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 fileNameWithExtension = fileName;
@ -152,12 +158,12 @@ export default function ProcessModelEditDiagram() {
};
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 navigateToProcessModelShow = (_httpResult: any) => {
navigate(
`/admin/process-models/${params.process_group_id}/${params.process_model_id}`
`/admin/process-models/${modifiedProcessModelId}`
);
};
HttpService.makeCallToBackend({
@ -168,7 +174,7 @@ export default function ProcessModelEditDiagram() {
};
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 navigateToProcessModelShow = (_httpResult: any) => {
@ -390,7 +396,7 @@ export default function ProcessModelEditDiagram() {
if (currentScriptUnitTest && scriptElement) {
resetUnitTextResult();
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',
successCallback: processScriptUnitTestRunResult,
postBody: {
@ -591,7 +597,6 @@ export default function ProcessModelEditDiagram() {
return (
<ReactDiagramEditor
processModelId={params.process_model_id || ''}
processGroupId={params.process_group_id || ''}
saveDiagram={saveDiagram}
onDeleteFile={onDeleteFile}
diagramXML={bpmnXmlForDiagramRendering}
@ -613,7 +618,6 @@ export default function ProcessModelEditDiagram() {
return (
<ReactDiagramEditor
processModelId={params.process_model_id || ''}
processGroupId={params.process_group_id || ''}
saveDiagram={saveDiagram}
onDeleteFile={onDeleteFile}
onSetPrimaryFile={onSetPrimaryFileCallback}

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

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