From 4c2ac504157d36a2bbfaa25e0c8511271d709547 Mon Sep 17 00:00:00 2001 From: mike cullerton Date: Mon, 7 Nov 2022 17:22:46 -0500 Subject: [PATCH] First stab at fixing routes and urls --- .../src/components/FileInput.tsx | 4 +- .../src/components/ReactDiagramEditor.tsx | 6 +- spiffworkflow-frontend/src/helpers.tsx | 17 ++++++ .../src/routes/AdminRoutes.tsx | 16 +++--- .../src/routes/HomePage.tsx | 14 +++-- .../src/routes/ProcessGroupShow.tsx | 4 +- .../src/routes/ProcessInstanceList.tsx | 18 +++--- .../src/routes/ProcessInstanceLogList.tsx | 10 +++- .../src/routes/ProcessInstanceReportList.tsx | 10 +++- .../src/routes/ProcessInstanceShow.tsx | 32 +++++++---- .../src/routes/ProcessModelEdit.tsx | 18 +++++- .../src/routes/ProcessModelEditDiagram.tsx | 22 ++++--- .../src/routes/ProcessModelNew.tsx | 3 +- .../src/routes/ProcessModelShow.tsx | 57 +++++++------------ .../src/routes/ReactFormEditor.tsx | 17 +++--- 15 files changed, 149 insertions(+), 99 deletions(-) diff --git a/spiffworkflow-frontend/src/components/FileInput.tsx b/spiffworkflow-frontend/src/components/FileInput.tsx index e57b010b2..e6bc63523 100644 --- a/spiffworkflow-frontend/src/components/FileInput.tsx +++ b/spiffworkflow-frontend/src/components/FileInput.tsx @@ -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 { 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); diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx index 2bbf64db0..8ba2bd89e 100644 --- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx +++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx @@ -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, ]); diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index 6b27fb4ca..c53df5a5f 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/spiffworkflow-frontend/src/helpers.tsx @@ -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; +}; diff --git a/spiffworkflow-frontend/src/routes/AdminRoutes.tsx b/spiffworkflow-frontend/src/routes/AdminRoutes.tsx index 776a5f341..6291ef37a 100644 --- a/spiffworkflow-frontend/src/routes/AdminRoutes.tsx +++ b/spiffworkflow-frontend/src/routes/AdminRoutes.tsx @@ -53,15 +53,15 @@ export default function AdminRoutes() { element={} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> { const rowToUse = row as any; const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`; + const modifiedProcessModelIdentifier = modifyProcessModelPath( + rowToUse.process_model_identifier + ); return ( {rowToUse.process_model_display_name} @@ -52,7 +55,7 @@ export default function HomePage() { View {rowToUse.process_instance_id} @@ -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 ( {rowToUse.processModelDisplayName} diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx index 25e58044b..2c6be43c8 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx @@ -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 ( {(row as any).id} diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx index 42ecf674a..bec73f117 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx @@ -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 ( {row.id} - - {row.process_group_identifier} - + {groupId} - - {row.process_model_identifier} + + {modifiedProcessModelId} {formattedStartDate} diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx index 0ef269521..ad43ee5b6 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx @@ -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() { {convertSecondsToFormattedDate(rowToUse.timestamp)} @@ -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`} /> ); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx index 4422b174e..e5f03fb8e 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx @@ -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() { {rowToUse.identifier} @@ -52,7 +56,7 @@ export default function ProcessInstanceReportList() { />

Reports for Process Model: {params.process_model_id}

diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index dcaa3361a..815f57234 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -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() {
  • Logs @@ -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 ( <> @@ -450,8 +461,7 @@ export default function ProcessInstanceShow() { {getInfoTag(processInstanceToUse)} {taskDataDisplayArea()} { 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, diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index 795042e6e..179b5e07f 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx @@ -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(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 ( { 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() {

    Process Instance {processInstanceId} kicked off ( 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 = (

  • {processModelFile.name} @@ -163,9 +165,7 @@ export default function ProcessModelShow() { constructedTag = (
  • {processModelFile.name} @@ -183,13 +183,12 @@ export default function ProcessModelShow() { }; const processInstancesUl = () => { + const unmodifiedProcessModelId: String = unModifyProcessModelPath(`${params.process_model_id}`); return (
    • List @@ -197,9 +196,7 @@ export default function ProcessModelShow() {
    • Reports @@ -216,41 +213,31 @@ export default function ProcessModelShow() { Run