moved group list tiles to component and use on group show page w/ burnettk

spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx

@@ -0,0 +1,96 @@
+import { ReactElement, useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  ArrowRight,
+  // @ts-ignore
+} from '@carbon/icons-react';
+import {
+  ClickableTile,
+  // @ts-ignore
+} from '@carbon/react';
+import HttpService from '../services/HttpService';
+import { ProcessGroup } from '../interfaces';
+import { modifyProcessModelPath, truncateString } from '../helpers';
+
+type OwnProps = {
+  processGroup?: ProcessGroup;
+  headerElement?: ReactElement;
+};
+
+export default function ProcessGroupListTiles({
+  processGroup,
+  headerElement,
+}: OwnProps) {
+  const [searchParams] = useSearchParams();
+
+  const [processGroups, setProcessGroups] = useState<ProcessGroup[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    const setProcessGroupsFromResult = (result: any) => {
+      setProcessGroups(result.results);
+    };
+    let queryParams = '?per_page=1000';
+    if (processGroup) {
+      queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
+    }
+    HttpService.makeCallToBackend({
+      path: `/process-groups${queryParams}`,
+      successCallback: setProcessGroupsFromResult,
+    });
+  }, [searchParams]);
+
+  const processGroupDirectChildrenCount = (pg: ProcessGroup) => {
+    return (pg.process_models || []).length + (pg.process_groups || []).length;
+  };
+
+  const processGroupsDisplayArea = () => {
+    let displayText = null;
+    if (processGroups && processGroups.length > 0) {
+      displayText = (processGroups || []).map((row: ProcessGroup) => {
+        return (
+          <ClickableTile
+            id="tile-1"
+            className="tile-process-group"
+            href={`/admin/process-groups/${modifyProcessModelPath(row.id)}`}
+          >
+            <div className="tile-process-group-content-container">
+              <ArrowRight />
+              <div className="tile-process-group-display-name">
+                {row.display_name}
+              </div>
+              <p className="tile-process-group-description">
+                {truncateString(row.description || '', 25)}
+              </p>
+              <p className="tile-process-group-children-count">
+                Total Sub Items: {processGroupDirectChildrenCount(row)}
+              </p>
+            </div>
+          </ClickableTile>
+        );
+      });
+    } else {
+      displayText = <p>No Groups To Display</p>;
+    }
+    return displayText;
+  };
+
+  const processGroupArea = () => {
+    if (processGroups) {
+      if (!processGroup || processGroups.length > 0) {
+        return (
+          <>
+            {headerElement}
+            {processGroupsDisplayArea()}
+          </>
+        );
+      }
+    }
+  };
+
+  if (processGroups) {
+    return <>{processGroupArea()}</>;
+  }
+  return null;
+}

spiffworkflow-frontend/src/index.css

@@ -5,21 +5,21 @@
   color: white;
 }
 
-h1{
+h1 {
-  height: 36px;
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
   font-weight: 400;
   font-size: 28px;
   line-height: 36px;
   color: #161616;
-  flex: none;
-  order: 0;
-  align-self: stretch;
-  flex-grow: 0;
   margin-bottom: 1em
 }
 
+h2 {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  color: #161616;
+}
+
 .span-tag {
   color: black;
 }

spiffworkflow-frontend/src/routes/ProcessGroupList.tsx

@@ -1,36 +1,23 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import {
-  ArrowRight,
-  // @ts-ignore
-} from '@carbon/icons-react';
 import {
   Button,
-  ClickableTile,
   // @ts-ignore
 } from '@carbon/react';
 import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import { modifyProcessModelPath, truncateString } from '../helpers';
-import {
+import { CarbonComboBoxSelection, PermissionsToCheck } from '../interfaces';
-  CarbonComboBoxSelection,
-  PermissionsToCheck,
-  ProcessGroup,
-} from '../interfaces';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import ProcessModelSearch from '../components/ProcessModelSearch';
+import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
 
-// Example process group json
-// {'process_group_id': 'sure', 'display_name': 'Test Workflows', 'id': 'test_process_group'}
 export default function ProcessGroupList() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const [processGroups, setProcessGroups] = useState<ProcessGroup[] | null>(
-    null
-  );
   const [processModelAvailableItems, setProcessModelAvailableItems] = useState(
     []
   );
@@ -42,9 +29,6 @@ export default function ProcessGroupList() {
   const { ability } = usePermissionFetcher(permissionRequestData);
 
   useEffect(() => {
-    const setProcessGroupsFromResult = (result: any) => {
-      setProcessGroups(result.results);
-    };
     const processResultForProcessModels = (result: any) => {
       const selectionArray = result.results.map((item: any) => {
         const label = `${item.id}`;
@@ -53,12 +37,6 @@ export default function ProcessGroupList() {
       });
       setProcessModelAvailableItems(selectionArray);
     };
-
-    // for browsing
-    HttpService.makeCallToBackend({
-      path: `/process-groups?per_page=1000`,
-      successCallback: setProcessGroupsFromResult,
-    });
     // for search box
     HttpService.makeCallToBackend({
       path: `/process-models?per_page=1000`,
@@ -66,44 +44,6 @@ export default function ProcessGroupList() {
     });
   }, [searchParams]);
 
-  const processGroupDirectChildrenCount = (processGroup: ProcessGroup) => {
-    return (
-      (processGroup.process_models || []).length +
-      (processGroup.process_groups || []).length
-    );
-  };
-
-  const processGroupsDisplayArea = () => {
-    let displayText = null;
-    if (processGroups && processGroups.length > 0) {
-      displayText = (processGroups || []).map((row: ProcessGroup) => {
-        return (
-          <ClickableTile
-            id="tile-1"
-            className="tile-process-group"
-            href={`/admin/process-groups/${row.id}`}
-          >
-            <div className="tile-process-group-content-container">
-              <ArrowRight />
-              <div className="tile-process-group-display-name">
-                {row.display_name}
-              </div>
-              <p className="tile-process-group-description">
-                {truncateString(row.description || '', 25)}
-              </p>
-              <p className="tile-process-group-children-count">
-                Total Sub Items: {processGroupDirectChildrenCount(row)}
-              </p>
-            </div>
-          </ClickableTile>
-        );
-      });
-    } else {
-      displayText = <p>No Groups To Display</p>;
-    }
-    return displayText;
-  };
-
   const processModelSearchArea = () => {
     const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
       const processModel = selection.selectedItem;
@@ -120,7 +60,7 @@ export default function ProcessGroupList() {
     );
   };
 
-  if (processGroups) {
+  if (processModelAvailableItems) {
     return (
       <>
         <ProcessBreadcrumb hotCrumbs={[['Process Groups']]} />
@@ -134,7 +74,7 @@ export default function ProcessGroupList() {
         <br />
         {processModelSearchArea()}
         <br />
-        {processGroupsDisplayArea()}
+        <ProcessGroupListTiles />
       </>
     );
   }

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -19,6 +19,7 @@ import {
 } from '../interfaces';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
+import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -95,7 +96,7 @@ export default function ProcessGroupShow() {
     });
     return (
       <div>
-        <h3>Process Models</h3>
+        <h2>Process Models</h2>
         <Table striped bordered>
           <thead>
             <tr>
@@ -198,15 +199,10 @@ export default function ProcessGroupShow() {
           )}
           <br />
           <br />
-          {/* eslint-disable-next-line sonarjs/no-gratuitous-expressions */}
+          <ProcessGroupListTiles
-          {groupPagination && groupPagination.total > 0 && (
+            processGroup={processGroup}
-            <PaginationForTable
+            headerElement={<h2>Process Groups</h2>}
-              page={page}
+          />
-              perPage={perPage}
-              pagination={groupPagination}
-              tableToDisplay={buildGroupTable()}
-            />
-          )}
         </ul>
       </>
     );