added recursive option to process model list to recurse or not and fix some ui components

src/components/ProcessGroupListTiles.tsx

@@ -51,7 +51,7 @@ export default function ProcessGroupListTiles({
       displayText = (processGroups || []).map((row: ProcessGroup) => {
         return (
           <ClickableTile
-            id="tile-1"
+            id={`process-group-tile-${row.id}`}
             className="tile-process-group"
             href={`/admin/process-groups/${modifyProcessModelPath(row.id)}`}
           >
@@ -61,7 +61,7 @@ export default function ProcessGroupListTiles({
                 {row.display_name}
               </div>
               <p className="tile-description">
-                {truncateString(row.description || '', 25)}
+                {truncateString(row.description || '', 100)}
               </p>
               <p className="tile-process-group-children-count tile-pin-bottom">
                 Total Sub Items: {processGroupDirectChildrenCount(row)}

src/components/ProcessInstanceListTable.tsx

@@ -234,7 +234,7 @@ export default function ProcessInstanceListTable({
     if (filtersEnabled) {
       // populate process model selection
       HttpService.makeCallToBackend({
-        path: `/process-models?per_page=1000`,
+        path: `/process-models?per_page=1000&recursive=true`,
         successCallback: processResultForProcessModels,
       });
     } else {

src/components/ProcessModelListTiles.tsx

@@ -5,15 +5,19 @@ import {
   // @ts-ignore
 } from '@carbon/react';
 import HttpService from '../services/HttpService';
-import { ProcessModel, ProcessInstance } from '../interfaces';
+import { ProcessModel, ProcessInstance, ProcessGroup } from '../interfaces';
 import { modifyProcessModelPath, truncateString } from '../helpers';
 import ProcessInstanceRun from './ProcessInstanceRun';
 
 type OwnProps = {
   headerElement?: ReactElement;
+  processGroup?: ProcessGroup;
 };
 
-export default function ProcessModelListTiles({ headerElement }: OwnProps) {
+export default function ProcessModelListTiles({
+  headerElement,
+  processGroup,
+}: OwnProps) {
   const [searchParams] = useSearchParams();
   const [processModels, setProcessModels] = useState<ProcessModel[] | null>(
     null
@@ -25,13 +29,16 @@ export default function ProcessModelListTiles({ headerElement }: OwnProps) {
     const setProcessModelsFromResult = (result: any) => {
       setProcessModels(result.results);
     };
-    // only allow 10 for now until we get the backend only returnin certain models for user execution
-    const queryParams = '?per_page=10';
+    // only allow 10 for now until we get the backend only returning certain models for user execution
+    let queryParams = '?per_page=100';
+    if (processGroup) {
+      queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
+    }
     HttpService.makeCallToBackend({
       path: `/process-models${queryParams}`,
       successCallback: setProcessModelsFromResult,
     });
-  }, [searchParams]);
+  }, [searchParams, processGroup]);
 
   const processInstanceRunResultTag = () => {
     if (processInstance) {
@@ -61,14 +68,14 @@ export default function ProcessModelListTiles({ headerElement }: OwnProps) {
       displayText = (processModels || []).map((row: ProcessModel) => {
         return (
           <Tile
-            id="tile-1"
+            id={`process-model-tile-${row.id}`}
             className="tile-process-group"
             href={`/admin/process-models/${modifyProcessModelPath(row.id)}`}
           >
             <div className="tile-process-group-content-container">
               <div className="tile-title-top">{row.display_name}</div>
               <p className="tile-description">
-                {truncateString(row.description || '', 25)}
+                {truncateString(row.description || '', 100)}
               </p>
               <ProcessInstanceRun
                 processModel={row}

src/components/ProcessModelSearch.tsx

@@ -35,7 +35,7 @@ export default function ProcessModelSearch({
         if (processModel) {
           return `${processModel.id} (${truncateString(
             processModel.display_name,
-            20
+            75
           )})`;
         }
         return null;

src/components/ProcessSearch.tsx

@@ -41,7 +41,7 @@ export default function ProcessSearch({
           if (process) {
             return `${process.display_name} (${truncateString(
               process.identifier,
-              20
+              75
             )})`;
           }
           return null;

src/helpers.tsx

@@ -174,7 +174,7 @@ export const getProcessModelFullIdentifierFromSearchParams = (
 // https://stackoverflow.com/a/71352046/6090676
 export const truncateString = (text: string, len: number) => {
   if (text.length > len && text.length > 0) {
-    return `${text.split(' ').slice(0, len).join(' ')} ...`;
+    return `${text.split('').slice(0, len).join('')} ...`;
   }
   return text;
 };

src/routes/ProcessGroupList.tsx

@@ -39,7 +39,7 @@ export default function ProcessGroupList() {
     };
     // for search box
     HttpService.makeCallToBackend({
-      path: `/process-models?per_page=1000`,
+      path: `/process-models?per_page=1000&recursive=true`,
       successCallback: processResultForProcessModels,
     });
   }, [searchParams]);

src/routes/ProcessGroupShow.tsx

@@ -20,6 +20,7 @@ import {
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
+// import ProcessModelListTiles from '../components/ProcessModelListTiles';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -142,6 +143,10 @@ export default function ProcessGroupShow() {
           </Stack>
           <br />
           <br />
+          {/* <ProcessModelListTiles
+            headerElement={<h2>Process Models</h2>}
+            processGroup={processGroup}
+          /> */}
           {/* eslint-disable-next-line sonarjs/no-gratuitous-expressions */}
           {modelPagination && modelPagination.total > 0 && (
             <PaginationForTable