Nested group UI stuff

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 { slugifyString } from '../helpers';
+import {modifyProcessModelPath, slugifyString} from '../helpers';
 import HttpService from '../services/HttpService';
 import { ProcessGroup } from '../interfaces';
 import ButtonWithConfirmation from './ButtonWithConfirmation';
@@ -23,10 +23,13 @@ export default function ProcessGroupForm({
     useState<boolean>(false);
   const [displayNameInvalid, setDisplayNameInvalid] = useState<boolean>(false);
   const navigate = useNavigate();
+  let newProcessGroupId = processGroup.id;
 
   const navigateToProcessGroup = (_result: any) => {
-    if (processGroup) {
-      navigate(`/admin/process-groups/${processGroup.id}`);
+    if (newProcessGroupId) {
+      navigate(
+        `/admin/process-groups/${modifyProcessModelPath(newProcessGroupId)}`
+      );
     }
   };
 
@@ -40,13 +43,16 @@ export default function ProcessGroupForm({
 
   const deleteProcessGroup = () => {
     HttpService.makeCallToBackend({
-      path: `/process-groups/${processGroup.id}`,
+      path: `/process-groups/${modifyProcessModelPath(processGroup.id)}`,
       successCallback: navigateToProcessGroups,
       httpMethod: 'DELETE',
     });
   };
 
   const handleFormSubmission = (event: any) => {
+    const searchParams = new URLSearchParams(document.location.search);
+    const parentGroupId = searchParams.get('parentGroupId');
+
     event.preventDefault();
     let hasErrors = false;
     if (!hasValidIdentifier(processGroup.id)) {
@@ -73,7 +79,17 @@ export default function ProcessGroupForm({
       description: processGroup.description,
     };
     if (mode === 'new') {
-      Object.assign(postBody, { id: processGroup.id });
+      console.log(`parentGroupId: ${parentGroupId}`);
+      console.log(`processGroup.id: ${processGroup.id}`);
+      if (parentGroupId) {
+        newProcessGroupId = `${parentGroupId}/${processGroup.id}`;
+      }
+      console.log(`newProcessGroupId: ${newProcessGroupId}`);
+      Object.assign(postBody, {
+        id: parentGroupId
+          ? `${parentGroupId}/${processGroup.id}`
+          : `${processGroup.id}`,
+      });
     }
 
     HttpService.makeCallToBackend({

spiffworkflow-frontend/src/components/ProcessModelForm.tsx

@@ -88,7 +88,7 @@ export default function ProcessModelForm({
     };
     if (mode === 'new') {
       Object.assign(postBody, {
-        id: `${process_group_id}/${processModel.id}`,
+        id: `${process_group_id}:${processModel.id}`,
       });
     }
 

spiffworkflow-frontend/src/helpers.tsx

@@ -117,11 +117,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) => {
-  return path.replace('/', ':') || '';
+  return path.replace(/\//g, ':') || '';
 };
 
 export const unModifyProcessModelPath = (path: String) => {
-  return path.replace(':', '/') || '';
+  return path.replace(/:/g, '/') || '';
 };
 
 export const getGroupFromModifiedModelId = (modifiedId: String) => {

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -5,7 +5,7 @@ import { Button, Table, Stack } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
-import { getPageInfoFromSearchParams } from '../helpers';
+import {getPageInfoFromSearchParams, modifyProcessModelPath, unModifyProcessModelPath} from '../helpers';
 import { ProcessGroup } from '../interfaces';
 
 export default function ProcessGroupShow() {
@@ -14,6 +14,7 @@ export default function ProcessGroupShow() {
 
   const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
   const [processModels, setProcessModels] = useState([]);
+  const [processGroups, setProcessGroups] = useState([]);
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
@@ -24,12 +25,15 @@ export default function ProcessGroupShow() {
       setPagination(result.pagination);
     };
     const processResult = (result: any) => {
-      console.log(result);
       setProcessGroup(result);
+      const unmodifiedProcessGroupId = unModifyProcessModelPath(
+        (params as any).process_group_id
+      );
       HttpService.makeCallToBackend({
-        path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`,
+        path: `/process-models?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`,
         successCallback: setProcessModelFromResult,
       });
+      setProcessGroups(result.process_groups);
     };
     HttpService.makeCallToBackend({
       path: `/process-groups/${params.process_group_id}`,
@@ -37,7 +41,7 @@ export default function ProcessGroupShow() {
     });
   }, [params, searchParams]);
 
-  const buildTable = () => {
+  const buildModelTable = () => {
     if (processGroup === null) {
       return null;
     }
@@ -73,8 +77,45 @@ export default function ProcessGroupShow() {
     );
   };
 
+  const buildGroupTable = () => {
+    if (processGroup === null) {
+      return null;
+    }
+    const rows = processGroups.map((row) => {
+      const modifiedProcessGroupId: String = modifyProcessModelPath((row as any).id);
+      return (
+        <tr key={(row as any).id}>
+          <td>
+            <Link
+              to={`/admin/process-groups/${modifiedProcessGroupId}`}
+              data-qa="process-model-show-link"
+            >
+              {(row as any).id}
+            </Link>
+          </td>
+          <td>{(row as any).display_name}</td>
+        </tr>
+      );
+    });
+    return (
+      <div>
+        <h3>Process Groups</h3>
+        <Table striped bordered>
+          <thead>
+            <tr>
+              <th>Process Group Id</th>
+              <th>Display Name</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </div>
+    );
+  };
+
   if (processGroup && pagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    const modifiedProcessGroupId = modifyProcessModelPath((processGroup as any).id);
     return (
       <>
         <ProcessBreadcrumb
@@ -86,12 +127,18 @@ export default function ProcessGroupShow() {
         <ul>
           <Stack orientation="horizontal" gap={3}>
             <Button
-              href={`/admin/process-models/${(processGroup as any).id}/new`}
+              kind="secondary"
+              href={`/admin/process-groups/new?parentGroupId=${processGroup.id}`}
+            >
+              Add a process group
+            </Button>
+            <Button
+              href={`/admin/process-models/${modifiedProcessGroupId}/new`}
             >
               Add a process model
             </Button>
             <Button
-              href={`/admin/process-groups/${(processGroup as any).id}/edit`}
+              href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
               variant="secondary"
             >
               Edit process group
@@ -103,7 +150,16 @@ export default function ProcessGroupShow() {
             page={page}
             perPage={perPage}
             pagination={pagination}
-            tableToDisplay={buildTable()}
+            tableToDisplay={buildModelTable()}
+            path={`/admin/process-groups/${(processGroup as any).id}`}
+          />
+          <br />
+          <br />
+          <PaginationForTable
+            page={page}
+            perPage={perPage}
+            pagination={pagination}
+            tableToDisplay={buildGroupTable()}
             path={`/admin/process-groups/${(processGroup as any).id}`}
           />
         </ul>