updates to send query params to list endpoints in api w/ burnettk

src/components/ProcessBreadcrumb.tsx

@@ -53,7 +53,7 @@ export default function ProcessBreadcrumb({
     <main style={{ padding: '1rem 0' }}>
       <Breadcrumb>
         <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
-          Home
+          Process Groups
         </Breadcrumb.Item>
         {processGroupBreadcrumb}
         {processModelBreadcrumb}

src/components/SubNavigation.tsx

@@ -31,5 +31,5 @@ export default function SubNavigation() {
       </Nav>
     );
   }
-  return <></>;
+  return null;
 }

src/index.css

@@ -50,3 +50,11 @@ span.bjs-crumb {
   width:90vw;
   margin:auto;
 }
+
+.breadcrumb {
+  font-size: 1.5em;
+}
+
+.breadcrumb-item.active {
+  color: black;
+}

src/routes/ProcessGroupShow.tsx

@@ -24,7 +24,7 @@ export default function ProcessGroupShow() {
     const processResult = (result: any) => {
       setProcessGroup(result);
       HttpService.makeCallToBackend({
-        path: `/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
+        path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`,
         successCallback: setProcessModelFromResult,
       });
     };
@@ -73,7 +73,6 @@ export default function ProcessGroupShow() {
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
-        <h2>Process Group: {(processGroup as any).id}</h2>
         <ul>
           <Stack direction="horizontal" gap={3}>
             <Button

src/routes/ProcessGroups.tsx

@@ -75,7 +75,6 @@ export default function ProcessGroups() {
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb />
-        <h2>Process Groups</h2>
         <Button href="/admin/process-groups/new">Add a process group</Button>
         <br />
         <br />

src/routes/ProcessInstanceList.tsx

@@ -6,7 +6,14 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
-import { Button, Table, Stack, Dropdown, Form } from 'react-bootstrap';
+import {
+  Button,
+  Table,
+  Stack,
+  Dropdown,
+  Form,
+  InputGroup,
+} from 'react-bootstrap';
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
 import DatePicker from 'react-datepicker';
 import { Typeahead } from 'react-bootstrap-typeahead';
@@ -45,8 +52,8 @@ export default function ProcessInstanceList() {
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
   const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
-  const [processGroupIdentifier, setProcessGroupIdentifier] = useState([]);
+  const [processModeleSelectionOptions, setProcessModelSelectionOptions] =
-  const [processModelIdentifier, setProcessModelIdentifier] = useState(null);
+    useState([]);
   const [processModelSelection, setProcessModelSelection] = useState<Option[]>(
     []
   );
@@ -62,21 +69,19 @@ export default function ProcessInstanceList() {
 
   const parametersToGetFromSearchParams = useMemo(() => {
     return {
-      process_group_identifier: setProcessGroupIdentifier,
+      process_group_identifier: null,
-      process_model_identifier: setProcessModelIdentifier,
+      process_model_identifier: null,
       process_status: setProcessStatus,
     };
-  }, [setProcessStatus, setProcessGroupIdentifier, setProcessModelIdentifier]);
+  }, [setProcessStatus]);
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   useEffect(() => {
     function setProcessInstancesFromResult(result: any) {
       const processInstancesFromApi = result.results;
       setProcessInstances(processInstancesFromApi);
       setPagination(result.pagination);
     }
-    function processResultForProcessModels(result: any) {
-      getProcessInstances();
-    }
     function getProcessInstances() {
       const { page, perPage } = getPageInfoFromSearchParams(searchParams);
       let queryParamString = `per_page=${perPage}&page=${page}`;
@@ -95,20 +100,44 @@ export default function ProcessInstanceList() {
         (paramName: string) => {
           if (searchParams.get(paramName)) {
             // @ts-expect-error TS(7053) FIXME:
-            const functionToCall = parametersToAlwaysFilterBy[paramName];
+            const functionToCall = parametersToGetFromSearchParams[paramName];
             queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
+
+            if (functionToCall !== null) {
               functionToCall(searchParams.get(paramName) || '');
             }
           }
+        }
       );
       HttpService.makeCallToBackend({
         path: `/process-instances?${queryParamString}`,
         successCallback: setProcessInstancesFromResult,
       });
     }
+    function processResultForProcessModels(result: any) {
+      let processModelFullIdentifier = '';
+      if (
+        searchParams.get('process_model_identifier') &&
+        searchParams.get('process_group_identifier')
+      ) {
+        processModelFullIdentifier = `${searchParams.get(
+          'process_group_identifier'
+        )}/${searchParams.get('process_model_identifier')}`;
+      }
+      const selectionArray = result.results.map((item: any) => {
+        const label = `${item.process_group_id}/${item.id}`;
+        Object.assign(item, { label });
+        if (label === processModelFullIdentifier) {
+          setProcessModelSelection([item]);
+        }
+        return item;
+      });
+      setProcessModelSelectionOptions(selectionArray);
+      getProcessInstances();
+    }
 
     HttpService.makeCallToBackend({
-      path: `/process-models`,
+      path: `/process-models?per_page=1000`,
       successCallback: processResultForProcessModels,
     });
   }, [
@@ -174,6 +203,10 @@ export default function ProcessInstanceList() {
     if (processStatus && processStatus !== 'all') {
       queryParamString += `&process_status=${processStatus}`;
     }
+    if (processModelSelection.length > 0) {
+      const currentProcessModel: any = processModelSelection[0];
+      queryParamString += `&process_group_identifier=${currentProcessModel.process_group_id}&process_model_identifier=${currentProcessModel.id}`;
+    }
 
     setErrorMessage('');
     navigate(`/admin/process-instances?${queryParamString}`);
@@ -215,16 +248,34 @@ export default function ProcessInstanceList() {
     Object.keys(parametersToGetFromSearchParams).forEach(
       (paramName: string) => {
         if (searchParams.get(paramName)) {
-          // @ts-expect-error TS(7053) FIXME:
-          const functionToCall = parametersToAlwaysFilterBy[paramName];
           queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
-          functionToCall(searchParams.get(paramName) || '');
         }
       }
     );
     return queryParamString;
   };
 
+  const processModelSearch = () => {
+    return (
+      <Form.Group>
+        <InputGroup>
+          <InputGroup.Text className="text-nowrap">
+            Process Model:{' '}
+          </InputGroup.Text>
+          <Typeahead
+            style={{ width: 500 }}
+            id="process-model-selection"
+            labelKey="label"
+            onChange={setProcessModelSelection}
+            options={processModeleSelectionOptions}
+            placeholder="Choose a process model..."
+            selected={processModelSelection}
+          />
+        </InputGroup>
+      </Form.Group>
+    );
+  };
+
   const filterOptions = () => {
     const processStatusesRows = PROCESS_STATUSES.map((processStatusOption) => {
       if (processStatusOption === processStatus) {
@@ -248,8 +299,11 @@ export default function ProcessInstanceList() {
       <div className="container">
         <div className="row">
           <div className="col">
-            {processModelSearch()}
             <form onSubmit={handleFilter}>
+              <Stack direction="horizontal" gap={3}>
+                {processModelSearch()}
+              </Stack>
+              <br />
               <Stack direction="horizontal" gap={3}>
                 {dateComponent(
                   'Start Range: ',
@@ -290,48 +344,6 @@ export default function ProcessInstanceList() {
     );
   };
 
-  const processModelSearch = () => {
-    const options = [
-      {
-        label: 'Alabama',
-        population: 4780127,
-        capital: 'Montgomery',
-        region: 'South',
-      },
-      {
-        label: 'Alaska',
-        population: 710249,
-        capital: 'Juneau',
-        region: 'West',
-      },
-      {
-        label: 'Arizona',
-        population: 6392307,
-        capital: 'Phoenix',
-        region: 'West',
-      },
-      {
-        label: 'Arkansas',
-        population: 2915958,
-        capital: 'Little Rock',
-        region: 'South',
-      },
-    ];
-    return (
-      <Form.Group>
-        <Form.Label>Single Selection</Form.Label>
-        <Typeahead
-          id="basic-typeahead-single"
-          labelKey="label"
-          onChange={setProcessModelSelection}
-          options={options}
-          placeholder="Choose a state..."
-          selected={processModelSelection}
-        />
-      </Form.Group>
-    );
-  };
-
   const buildTable = () => {
     const rows = processInstances.map((row: any) => {
       const formattedStartDate =
@@ -394,7 +406,7 @@ export default function ProcessInstanceList() {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <main style={{ padding: '1rem 0' }}>
-        <h2>Process Instances for {params.process_model_id}</h2>
+        <h2>Process Instances</h2>
         {filterOptions()}
         <PaginationForTable
           page={page}

src/routes/ProcessModelShow.tsx

@@ -130,9 +130,9 @@ export default function ProcessModelShow() {
       <ul>
         <li>
           <Link
-            to={`/admin/process-models/${
+            to={`/admin/process-instances?process_group_identifier=${
               (processModel as any).process_group_id
-            }/${(processModel as any).id}/process-instances`}
+            }&process_model_identifier=${(processModel as any).id}`}
             data-qa="process-instance-list-link"
           >
             List
@@ -201,10 +201,6 @@ export default function ProcessModelShow() {
           processGroupId={(processModel as any).process_group_id}
           processModelId={(processModel as any).id}
         />
-        <Stack direction="horizontal" gap={3}>
-          <h2>Process Model: {(processModel as any).display_name}</h2>
-          <span>({(processModel as any).id})</span>
-        </Stack>
         {processInstanceResultTag}
         <FileInput
           processModelId={(processModel as any).id}