renamed modifyProcessModelPath to modifyProcessIdentifierForPathParam w/ burnettk

2025-02-27 16:40:32 +00:00 · 2022-11-22 10:56:40 -05:00 · 2022-11-22 10:56:40 -05:00 · b25d620777
commit b25d620777
parent defecafc5d
22 changed files with 98 additions and 76 deletions
--- a/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 // @ts-ignore
 import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
-import { modifyProcessModelPath, slugifyString } from '../helpers';
+import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
 import { ProcessGroup } from '../interfaces';
 import ButtonWithConfirmation from './ButtonWithConfirmation';
@ -28,7 +28,9 @@ export default function ProcessGroupForm({
  const navigateToProcessGroup = (_result: any) => {
    if (newProcessGroupId) {
      navigate(
-        `/admin/process-groups/${modifyProcessModelPath(newProcessGroupId)}`
+        `/admin/process-groups/${modifyProcessIdentifierForPathParam(
+          newProcessGroupId
+        )}`
      );
    }
  };
@ -43,7 +45,9 @@ export default function ProcessGroupForm({

  const deleteProcessGroup = () => {
    HttpService.makeCallToBackend({
-      path: `/process-groups/${modifyProcessModelPath(processGroup.id)}`,
+      path: `/process-groups/${modifyProcessIdentifierForPathParam(
+        processGroup.id
+      )}`,
      successCallback: navigateToProcessGroups,
      httpMethod: 'DELETE',
    });
@ -68,7 +72,9 @@ export default function ProcessGroupForm({
    }
    let path = '/process-groups';
    if (mode === 'edit') {
-      path = `/process-groups/${modifyProcessModelPath(processGroup.id)}`;
+      path = `/process-groups/${modifyProcessIdentifierForPathParam(
+        processGroup.id
+      )}`;
    }
    let httpMethod = 'POST';
    if (mode === 'edit') {
--- a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
@ -10,7 +10,10 @@ import {
 } from '@carbon/react';
 import HttpService from '../services/HttpService';
 import { ProcessGroup } from '../interfaces';
-import { modifyProcessModelPath, truncateString } from '../helpers';
+import {
+  modifyProcessIdentifierForPathParam,
+  truncateString,
+} from '../helpers';

 type OwnProps = {
  processGroup?: ProcessGroup;
@ -53,7 +56,9 @@ export default function ProcessGroupListTiles({
          <ClickableTile
            id={`process-group-tile-${row.id}`}
            className="tile-process-group"
-            href={`/admin/process-groups/${modifyProcessModelPath(row.id)}`}
+            href={`/admin/process-groups/${modifyProcessIdentifierForPathParam(
+              row.id
+            )}`}
          >
            <div className="tile-process-group-content-container">
              <ArrowRight />
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@ -32,7 +32,7 @@ import {
  convertSecondsToFormattedTimeHoursMinutes,
  getPageInfoFromSearchParams,
  getProcessModelFullIdentifierFromSearchParams,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
 } from '../helpers';

 import PaginationForTable from './PaginationForTable';
@ -611,9 +611,8 @@ export default function ProcessInstanceListTable({
    });

    const formatProcessInstanceId = (row: any, id: any) => {
-      const modifiedProcessModelId: String = modifyProcessModelPath(
-        row.process_model_identifier
-      );
+      const modifiedProcessModelId: String =
+        modifyProcessIdentifierForPathParam(row.process_model_identifier);
      return (
        <Link
          data-qa="process-instance-show-link"
@ -626,7 +625,9 @@ export default function ProcessInstanceListTable({
    const formatProcessModelIdentifier = (_row: any, identifier: any) => {
      return (
        <Link
-          to={`/admin/process-models/${modifyProcessModelPath(identifier)}`}
+          to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+            identifier
+          )}`}
        >
          {identifier}
        </Link>
--- a/spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx
@ -7,7 +7,7 @@ import {
 import { ProcessModel } from '../interfaces';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
-import { modifyProcessModelPath } from '../helpers';
+import { modifyProcessIdentifierForPathParam } from '../helpers';

 type OwnProps = {
  processModel: ProcessModel;
@ -22,7 +22,9 @@ export default function ProcessInstanceRun({
 }: OwnProps) {
  const navigate = useNavigate();
  const setErrorMessage = (useContext as any)(ErrorContext)[1];
-  const modifiedProcessModelId = modifyProcessModelPath(processModel.id);
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
+    processModel.id
+  );

  const onProcessInstanceRun = (processInstance: any) => {
    // FIXME: ensure that the task is actually for the current user as well
--- a/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 // @ts-ignore
 import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
-import { modifyProcessModelPath, slugifyString } from '../helpers';
+import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
 import { ProcessModel } from '../interfaces';

@ -27,9 +27,8 @@ export default function ProcessModelForm({

  const navigateToProcessModel = (result: ProcessModel) => {
    if ('id' in result) {
-      const modifiedProcessModelPathFromResult = modifyProcessModelPath(
-        result.id
-      );
+      const modifiedProcessModelPathFromResult =
+        modifyProcessIdentifierForPathParam(result.id);
      navigate(`/admin/process-models/${modifiedProcessModelPathFromResult}`);
    }
  };
@ -52,7 +51,7 @@ export default function ProcessModelForm({
    if (hasErrors) {
      return;
    }
-    const path = `/process-models/${modifyProcessModelPath(
+    const path = `/process-models/${modifyProcessIdentifierForPathParam(
      processGroupId || ''
    )}`;
    let httpMethod = 'POST';
--- a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
@ -6,7 +6,10 @@ import {
 } from '@carbon/react';
 import HttpService from '../services/HttpService';
 import { ProcessModel, ProcessInstance, ProcessGroup } from '../interfaces';
-import { modifyProcessModelPath, truncateString } from '../helpers';
+import {
+  modifyProcessIdentifierForPathParam,
+  truncateString,
+} from '../helpers';
 import ProcessInstanceRun from './ProcessInstanceRun';

 type OwnProps = {
@ -47,7 +50,7 @@ export default function ProcessModelListTiles({
          <p>
            Process Instance {processInstance.id} kicked off (
            <Link
-              to={`/admin/process-models/${modifyProcessModelPath(
+              to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
                processInstance.process_model_identifier
              )}/process-instances/${processInstance.id}`}
              data-qa="process-instance-show-link"
@ -70,7 +73,9 @@ export default function ProcessModelListTiles({
          <Tile
            id={`process-model-tile-${row.id}`}
            className="tile-process-group"
-            href={`/admin/process-models/${modifyProcessModelPath(row.id)}`}
+            href={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+              row.id
+            )}`}
          >
            <div className="tile-process-group-content-container">
              <div className="tile-title-top">{row.display_name}</div>
--- a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
+++ b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
@ -6,7 +6,7 @@ import PaginationForTable from './PaginationForTable';
 import {
  convertSecondsToFormattedDateTime,
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
@ -40,9 +40,8 @@ export default function MyOpenProcesses() {
    const rows = tasks.map((row) => {
      const rowToUse = row as any;
      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
-      const modifiedProcessModelIdentifier = modifyProcessModelPath(
-        rowToUse.process_model_identifier
-      );
+      const modifiedProcessModelIdentifier =
+        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
      return (
        <tr key={rowToUse.id}>
          <td>
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
@ -6,7 +6,7 @@ import PaginationForTable from './PaginationForTable';
 import {
  convertSecondsToFormattedDateTime,
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
@ -39,9 +39,8 @@ export default function TasksWaitingForMe() {
    const rows = tasks.map((row) => {
      const rowToUse = row as any;
      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
-      const modifiedProcessModelIdentifier = modifyProcessModelPath(
-        rowToUse.process_model_identifier
-      );
+      const modifiedProcessModelIdentifier =
+        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
      return (
        <tr key={rowToUse.id}>
          <td>
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
@ -6,7 +6,7 @@ import PaginationForTable from './PaginationForTable';
 import {
  convertSecondsToFormattedDateTime,
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
@ -40,9 +40,8 @@ export default function TasksForWaitingForMyGroups() {
    const rows = tasks.map((row) => {
      const rowToUse = row as any;
      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
-      const modifiedProcessModelIdentifier = modifyProcessModelPath(
-        rowToUse.process_model_identifier
-      );
+      const modifiedProcessModelIdentifier =
+        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
      return (
        <tr key={rowToUse.id}>
          <td>
--- a/spiffworkflow-frontend/src/helpers.tsx
+++ b/spiffworkflow-frontend/src/helpers.tsx
@ -181,11 +181,11 @@ export const truncateString = (text: string, len: number) => {

 // 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) => {
+export const modifyProcessIdentifierForPathParam = (path: string) => {
  return path.replace(/\//g, ':') || '';
 };

-export const unModifyProcessModelPath = (path: string) => {
+export const unModifyProcessIdentifierForPathParam = (path: string) => {
  return path.replace(/:/g, '/') || '';
 };

--- a/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
+++ b/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Button, Select, SelectItem, TextInput } from '@carbon/react';
 import { useParams } from 'react-router-dom';
 import { FormField } from '../interfaces';
-import { modifyProcessModelPath, slugifyString } from '../helpers';
+import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';

 export default function JsonSchemaFormBuilder() {
@ -28,7 +28,7 @@ export default function JsonSchemaFormBuilder() {
  const [formFieldTitle, setFormFieldTitle] = useState<string>('');
  const [formFieldType, setFormFieldType] = useState<string>('');

-  const modifiedProcessModelId = modifyProcessModelPath(
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
    `${params.process_model_id}`
  );

--- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
@ -7,8 +7,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
  convertSecondsToFormattedDateString,
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
-  unModifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
+  unModifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';

@ -46,7 +46,7 @@ export default function MessageInstanceList() {
          <td>
            <Link
              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifyProcessModelPath(
+              to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
                rowToUse.process_model_identifier
              )}`}
            >
@ -56,7 +56,7 @@ export default function MessageInstanceList() {
          <td>
            <Link
              data-qa="process-instance-show-link"
-              to={`/admin/process-models/${modifyProcessModelPath(
+              to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
                rowToUse.process_model_identifier
              )}/process-instances/${rowToUse.process_instance_id}`}
            >
@ -104,7 +104,7 @@ export default function MessageInstanceList() {
            ['Process Groups', '/admin'],
            [
              `Process Model: ${params.process_model_id}`,
-              `process_model:${unModifyProcessModelPath(
+              `process_model:${unModifyProcessIdentifierForPathParam(
                searchParams.get('process_model_id') || ''
              )}:link`,
            ],
--- a/spiffworkflow-frontend/src/routes/MyTasks.tsx
+++ b/spiffworkflow-frontend/src/routes/MyTasks.tsx
@ -5,7 +5,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import {
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
  refreshAtInterval,
 } from '../helpers';
 import HttpService from '../services/HttpService';
@ -50,9 +50,8 @@ export default function MyTasks() {
    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
-      );
+      const modifiedProcessModelIdentifier =
+        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
      return (
        <tr key={rowToUse.id}>
          <td>
@ -110,7 +109,7 @@ export default function MyTasks() {
  const buildRecentProcessModelSection = () => {
    const rows = recentProcessModels.map((row) => {
      const rowToUse = row as any;
-      const modifiedProcessModelId = modifyProcessModelPath(
+      const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
        rowToUse.processModelIdentifier
      );
      return (
--- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
@ -7,7 +7,7 @@ import {
 import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
-import { modifyProcessModelPath } from '../helpers';
+import { modifyProcessIdentifierForPathParam } from '../helpers';
 import { CarbonComboBoxSelection, PermissionsToCheck } from '../interfaces';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@ -48,7 +48,9 @@ export default function ProcessGroupList() {
    const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
      const processModel = selection.selectedItem;
      navigate(
-        `/admin/process-models/${modifyProcessModelPath(processModel.id)}`
+        `/admin/process-models/${modifyProcessIdentifierForPathParam(
+          processModel.id
+        )}`
      );
    };
    return (
--- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
@ -8,8 +8,8 @@ import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
 import {
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
-  unModifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
+  unModifyProcessIdentifierForPathParam,
 } from '../helpers';
 import {
  PaginationObject,
@ -48,7 +48,7 @@ export default function ProcessGroupShow() {
    };
    const processResult = (result: any) => {
      setProcessGroup(result);
-      const unmodifiedProcessGroupId = unModifyProcessModelPath(
+      const unmodifiedProcessGroupId = unModifyProcessIdentifierForPathParam(
        (params as any).process_group_id
      );
      HttpService.makeCallToBackend({
@ -67,9 +67,8 @@ export default function ProcessGroupShow() {
      return null;
    }
    const rows = processModels.map((row: ProcessModel) => {
-      const modifiedProcessModelId: String = modifyProcessModelPath(
-        (row as any).id
-      );
+      const modifiedProcessModelId: String =
+        modifyProcessIdentifierForPathParam((row as any).id);
      return (
        <tr key={row.id}>
          <td>
@ -102,7 +101,9 @@ export default function ProcessGroupShow() {

  if (processGroup && modelPagination) {
    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
-    const modifiedProcessGroupId = modifyProcessModelPath(processGroup.id);
+    const modifiedProcessGroupId = modifyProcessIdentifierForPathParam(
+      processGroup.id
+    );
    return (
      <>
        <ProcessBreadcrumb
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
@ -6,8 +6,8 @@ import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
  getPageInfoFromSearchParams,
-  modifyProcessModelPath,
-  unModifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
+  unModifyProcessIdentifierForPathParam,
  convertSecondsToFormattedDateTime,
 } from '../helpers';
 import HttpService from '../services/HttpService';
@ -17,7 +17,7 @@ export default function ProcessInstanceLogList() {
  const [searchParams] = useSearchParams();
  const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
  const [pagination, setPagination] = useState(null);
-  const modifiedProcessModelId = modifyProcessModelPath(
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
    `${params.process_model_id}`
  );

@ -82,7 +82,7 @@ export default function ProcessInstanceLogList() {
            ['Process Groups', '/admin'],
            [
              `Process Model: ${params.process_model_id}`,
-              `process_model:${unModifyProcessModelPath(
+              `process_model:${unModifyProcessIdentifierForPathParam(
                params.process_model_id || ''
              )}:link`,
            ],
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@ -29,7 +29,7 @@ import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import {
  convertSecondsToFormattedDateTime,
-  unModifyProcessModelPath,
+  unModifyProcessIdentifierForPathParam,
 } from '../helpers';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import ErrorContext from '../contexts/ErrorContext';
@ -49,7 +49,7 @@ export default function ProcessInstanceShow() {

  const setErrorMessage = (useContext as any)(ErrorContext)[1];

-  const unModifiedProcessModelId = unModifyProcessModelPath(
+  const unModifiedProcessModelId = unModifyProcessIdentifierForPathParam(
    `${params.process_model_id}`
  );
  const modifiedProcessModelId = params.process_model_id;
@ -553,7 +553,7 @@ export default function ProcessInstanceShow() {
  if (processInstance && tasks) {
    const processInstanceToUse = processInstance as any;
    const taskIds = getTaskIds();
-    const processModelId = unModifyProcessModelPath(
+    const processModelId = unModifyProcessIdentifierForPathParam(
      params.process_model_id ? params.process_model_id : ''
    );

--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@ -17,7 +17,7 @@ import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
-import { makeid, modifyProcessModelPath } from '../helpers';
+import { makeid, modifyProcessIdentifierForPathParam } from '../helpers';
 import {
  CarbonComboBoxProcessSelection,
  ProcessFile,
@ -94,7 +94,7 @@ export default function ProcessModelEditDiagram() {
  const [bpmnXmlForDiagramRendering, setBpmnXmlForDiagramRendering] =
    useState(null);

-  const modifiedProcessModelId = modifyProcessModelPath(
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
    (params as any).process_model_id
  );

@ -753,7 +753,7 @@ export default function ProcessModelEditDiagram() {
      const path = generatePath(
        '/admin/process-models/:process_model_path/files/:file_name',
        {
-          process_model_path: modifyProcessModelPath(
+          process_model_path: modifyProcessIdentifierForPathParam(
            processRef.process_model_id
          ),
          file_name: processRef.file_name,
--- a/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { ProcessModel } from '../interfaces';
 import ProcessModelForm from '../components/ProcessModelForm';
-import { unModifyProcessModelPath } from '../helpers';
+import { unModifyProcessIdentifierForPathParam } from '../helpers';

 export default function ProcessModelNew() {
  const params = useParams();
@ -29,7 +29,9 @@ export default function ProcessModelNew() {
      <h1>Add Process Model</h1>
      <ProcessModelForm
        mode="new"
-        processGroupId={unModifyProcessModelPath(params.process_group_id || '')}
+        processGroupId={unModifyProcessIdentifierForPathParam(
+          params.process_group_id || ''
+        )}
        processModel={processModel}
        setProcessModel={setProcessModel}
      />
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@ -34,7 +34,7 @@ import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
 import {
  getGroupFromModifiedModelId,
-  modifyProcessModelPath,
+  modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import {
  PermissionsToCheck,
@ -120,7 +120,7 @@ export default function ProcessModelShow() {
  };
  const { ability } = usePermissionFetcher(permissionRequestData);

-  const modifiedProcessModelId = modifyProcessModelPath(
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
    `${params.process_model_id}`
  );

--- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
+++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
@ -6,7 +6,10 @@ import { Button, Modal } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
-import { modifyProcessModelPath, unModifyProcessModelPath } from '../helpers';
+import {
+  modifyProcessIdentifierForPathParam,
+  unModifyProcessIdentifierForPathParam,
+} from '../helpers';
 import { ProcessFile } from '../interfaces';

 // NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could
@ -38,7 +41,7 @@ export default function ReactFormEditor() {

  const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json';

-  const modifiedProcessModelId = modifyProcessModelPath(
+  const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
    `${params.process_model_id}`
  );

@ -157,10 +160,10 @@ export default function ReactFormEditor() {
          hotCrumbs={[
            ['Process Groups', '/admin'],
            [
-              `Process Model: ${unModifyProcessModelPath(
+              `Process Model: ${unModifyProcessIdentifierForPathParam(
                params.process_model_id || ''
              )}`,
-              `process_model:${unModifyProcessModelPath(
+              `process_model:${unModifyProcessIdentifierForPathParam(
                params.process_model_id || ''
              )}:link`,
            ],
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@ -24,7 +24,7 @@ import remarkGfm from 'remark-gfm';
 import Form from '../themes/carbon';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
-import { modifyProcessModelPath } from '../helpers';
+import { modifyProcessIdentifierForPathParam } from '../helpers';

 export default function TaskShow() {
  const [task, setTask] = useState(null);
@ -38,7 +38,7 @@ export default function TaskShow() {
    const processResult = (result: any) => {
      setTask(result);
      HttpService.makeCallToBackend({
-        path: `/process-instances/${modifyProcessModelPath(
+        path: `/process-instances/${modifyProcessIdentifierForPathParam(
          result.process_model_identifier
        )}/${params.process_instance_id}/tasks`,
        successCallback: setUserTasks,