Squashed 'spiffworkflow-frontend/' changes from 3ab257b81..ab6cf2817

ab6cf2817 Merge commit '7a36189cbf9db07b735903625b23ea23b9fa8de7'
55bf14202 pass in perm file for acceptance tests w/ burnettk
6ba87954c Merge branch 'main' into feature/nested-groups-2
86fd7a388 Merge branch 'main' into feature/nested-groups-2
53a56abfa Nested group UI stuff

git-subtree-dir: spiffworkflow-frontend
git-subtree-split: ab6cf281724b3a63f901506d25baf2f4009d30d0

cypress/e2e/process_instances.cy.js

@@ -165,7 +165,7 @@ describe('process-instances', () => {
     cy.basicPaginationTest();
   });
 
-  it.only('can filter', () => {
+  it('can filter', () => {
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 

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) {
+    if (newProcessGroupId) {
-      navigate(`/admin/process-groups/${processGroup.id}`);
+      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({

src/components/ProcessModelForm.tsx

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

src/helpers.tsx

@@ -116,11 +116,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) => {

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>