Feature/first five minutes (#601)

* added helpful text if no process groups and models, do not show start button on model tile if no primary file, and do not make unnecessary calls in ListTiles when we already have the info w/ burnettk

* added some help text to process model show page if not files are there w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx

@@ -16,13 +16,17 @@ import {
 } from '../helpers';
 
 type OwnProps = {
+  defaultProcessGroups?: ProcessGroup[];
   processGroup?: ProcessGroup;
   headerElement?: ReactElement;
+  showNoItemsDisplayText?: boolean;
 };
 
 export default function ProcessGroupListTiles({
+  defaultProcessGroups,
   processGroup,
   headerElement,
+  showNoItemsDisplayText,
 }: OwnProps) {
   const [searchParams] = useSearchParams();
 
@@ -34,15 +38,20 @@ export default function ProcessGroupListTiles({
     const setProcessGroupsFromResult = (result: any) => {
       setProcessGroups(result.results);
     };
-    let queryParams = '?per_page=1000';
+
-    if (processGroup) {
+    if (defaultProcessGroups) {
-      queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
+      setProcessGroups(defaultProcessGroups);
+    } else {
+      let queryParams = '?per_page=1000';
+      if (processGroup) {
+        queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
+      }
+      HttpService.makeCallToBackend({
+        path: `/process-groups${queryParams}`,
+        successCallback: setProcessGroupsFromResult,
+      });
     }
-    HttpService.makeCallToBackend({
+  }, [searchParams, processGroup, defaultProcessGroups]);
-      path: `/process-groups${queryParams}`,
-      successCallback: setProcessGroupsFromResult,
-    });
-  }, [searchParams, processGroup]);
 
   const processGroupDirectChildrenCount = (pg: ProcessGroup) => {
     return (pg.process_models || []).length + (pg.process_groups || []).length;
@@ -76,13 +85,19 @@ export default function ProcessGroupListTiles({
         );
       });
     } else {
-      displayText = <p>No Groups To Display</p>;
+      displayText = (
+        <p className="no-results-message">
+          There are no process groups to display. You can add one by clicking
+          the &quot;Add a process group&quot; button. Process groups can contain
+          additional process groups and / or process models.
+        </p>
+      );
     }
     return displayText;
   };
 
   const processGroupArea = () => {
-    if (processGroups && (!processGroup || processGroups.length > 0)) {
+    if (processGroups && (showNoItemsDisplayText || processGroups.length > 0)) {
       return (
         <>
           {headerElement}

spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx

@@ -13,15 +13,21 @@ import {
 import ProcessInstanceRun from './ProcessInstanceRun';
 
 type OwnProps = {
+  defaultProcessModels?: ProcessModel[];
   headerElement?: ReactElement;
   processGroup?: ProcessGroup;
   checkPermissions?: boolean;
+  onLoadFunction?: Function;
+  showNoItemsDisplayText?: boolean;
 };
 
 export default function ProcessModelListTiles({
+  defaultProcessModels,
   headerElement,
   processGroup,
   checkPermissions = true,
+  onLoadFunction,
+  showNoItemsDisplayText,
 }: OwnProps) {
   const [searchParams] = useSearchParams();
   const [processModels, setProcessModels] = useState<ProcessModel[] | null>(
@@ -31,19 +37,27 @@ export default function ProcessModelListTiles({
   useEffect(() => {
     const setProcessModelsFromResult = (result: any) => {
       setProcessModels(result.results);
+      if (onLoadFunction) {
+        onLoadFunction(result);
+      }
     };
-    // only allow 10 for now until we get the backend only returning certain models for user execution
+
-    let queryParams = '?per_page=1000';
+    if (defaultProcessModels) {
-    if (processGroup) {
+      setProcessModels(defaultProcessModels);
-      queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
     } else {
-      queryParams = `${queryParams}&recursive=true&filter_runnable_by_user=true`;
+      // only allow 10 for now until we get the backend only returning certain models for user execution
+      let queryParams = '?per_page=1000';
+      if (processGroup) {
+        queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
+      } else {
+        queryParams = `${queryParams}&recursive=true&filter_runnable_by_user=true`;
+      }
+      HttpService.makeCallToBackend({
+        path: `/process-models${queryParams}`,
+        successCallback: setProcessModelsFromResult,
+      });
     }
-    HttpService.makeCallToBackend({
+  }, [searchParams, processGroup, onLoadFunction, defaultProcessModels]);
-      path: `/process-models${queryParams}`,
-      successCallback: setProcessModelsFromResult,
-    });
-  }, [searchParams, processGroup]);
 
   const processModelsDisplayArea = () => {
     let displayText = null;
@@ -69,23 +83,32 @@ export default function ProcessModelListTiles({
               <p className="tile-description">
                 {truncateString(row.description || '', 100)}
               </p>
-              <ProcessInstanceRun
+              {row.primary_file_name ? (
-                processModel={row}
+                <ProcessInstanceRun
-                className="tile-pin-bottom"
+                  processModel={row}
-                checkPermissions={checkPermissions}
+                  className="tile-pin-bottom"
-              />
+                  checkPermissions={checkPermissions}
+                />
+              ) : null}
             </div>
           </Tile>
         );
       });
     } else {
-      displayText = <p>No Models To Display</p>;
+      displayText = (
+        <p className="no-results-message">
+          There are no process models to display. You can add one by clicking
+          the &quot;Add a process model&quot; button. Process models will
+          contain the bpmn diagrams and supporting files needed to create a
+          runnable workflow.
+        </p>
+      );
     }
     return displayText;
   };
 
   const processModelArea = () => {
-    if (processModels && processModels.length > 0) {
+    if (processModels && (showNoItemsDisplayText || processModels.length > 0)) {
       return (
         <>
           {headerElement}

spiffworkflow-frontend/src/routes/ProcessGroupList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   Button,
   // @ts-ignore
@@ -15,7 +15,6 @@ import ProcessModelSearch from '../components/ProcessModelSearch';
 import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
 
 export default function ProcessGroupList() {
-  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
   const [processModelAvailableItems, setProcessModelAvailableItems] = useState(
@@ -43,9 +42,12 @@ export default function ProcessGroupList() {
       successCallback: processResultForProcessModels,
     });
     setPageTitle(['Process Groups']);
-  }, [searchParams]);
+  }, []);
 
   const processModelSearchArea = () => {
+    if (processModelAvailableItems.length < 1) {
+      return null;
+    }
     const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
       const processModel = selection.selectedItem;
       navigate(
@@ -77,7 +79,7 @@ export default function ProcessGroupList() {
         <br />
         {processModelSearchArea()}
         <br />
-        <ProcessGroupListTiles />
+        <ProcessGroupListTiles showNoItemsDisplayText />
       </>
     );
   }

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -1,10 +1,5 @@
 import { useEffect, useState } from 'react';
-import {
+import { useParams, useNavigate } from 'react-router-dom';
-  // Link,
-  useSearchParams,
-  useParams,
-  useNavigate,
-} from 'react-router-dom';
 import {
   TrashCan,
   Edit,
@@ -15,14 +10,8 @@ import { Button, Stack } from '@carbon/react';
 import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
+import { modifyProcessIdentifierForPathParam, setPageTitle } from '../helpers';
 import {
-  getPageInfoFromSearchParams,
-  modifyProcessIdentifierForPathParam,
-  unModifyProcessIdentifierForPathParam,
-  setPageTitle,
-} from '../helpers';
-import {
-  PaginationObject,
   PermissionsToCheck,
   ProcessGroup,
   // ProcessModel,
@@ -35,13 +24,9 @@ import ProcessModelListTiles from '../components/ProcessModelListTiles';
 
 export default function ProcessGroupShow() {
   const params = useParams();
-  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
   const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
-  // const [processModels, setProcessModels] = useState([]);
-  const [modelPagination, setModelPagination] =
-    useState<PaginationObject | null>(null);
 
   const { targetUris } = useUriListForPermissions();
   const permissionRequestData: PermissionsToCheck = {
@@ -52,65 +37,15 @@ export default function ProcessGroupShow() {
   const { ability } = usePermissionFetcher(permissionRequestData);
 
   useEffect(() => {
-    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
-
-    const setProcessModelFromResult = (result: any) => {
-      // setProcessModels(result.results);
-      setModelPagination(result.pagination);
-    };
     const processResult = (result: any) => {
       setProcessGroup(result);
       setPageTitle([result.display_name]);
-      const unmodifiedProcessGroupId = unModifyProcessIdentifierForPathParam(
-        (params as any).process_group_id
-      );
-      HttpService.makeCallToBackend({
-        path: `/process-models?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`,
-        successCallback: setProcessModelFromResult,
-      });
     };
     HttpService.makeCallToBackend({
       path: `/process-groups/${params.process_group_id}`,
       successCallback: processResult,
     });
-  }, [params, searchParams]);
+  }, [params.process_group_id]);
-
-  // const buildModelTable = () => {
-  //   if (processGroup === null) {
-  //     return null;
-  //   }
-  //   const rows = processModels.map((row: ProcessModel) => {
-  //     const modifiedProcessModelId: String =
-  //       modifyProcessIdentifierForPathParam((row as any).id);
-  //     return (
-  //       <tr key={row.id}>
-  //         <td>
-  //           <Link
-  //             to={`/process-models/${modifiedProcessModelId}`}
-  //             data-qa="process-model-show-link"
-  //           >
-  //             {row.id}
-  //           </Link>
-  //         </td>
-  //         <td>{row.display_name}</td>
-  //       </tr>
-  //     );
-  //   });
-  //   return (
-  //     <div>
-  //       <h2>Process Models</h2>
-  //       <Table striped bordered>
-  //         <thead>
-  //           <tr>
-  //             <th>Process Model Id</th>
-  //             <th>Display Name</th>
-  //           </tr>
-  //         </thead>
-  //         <tbody>{rows}</tbody>
-  //       </Table>
-  //     </div>
-  //   );
-  // };
 
   const navigateToProcessGroups = (_result: any) => {
     navigate(`/process-groups`);
@@ -128,11 +63,13 @@ export default function ProcessGroupShow() {
     }
   };
 
-  if (processGroup && modelPagination) {
+  if (processGroup) {
-    // const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     const modifiedProcessGroupId = modifyProcessIdentifierForPathParam(
       processGroup.id
     );
+    const showNoItemsDisplayText =
+      (processGroup.process_groups || []).length < 1 &&
+      (processGroup.process_models || []).length < 1;
     return (
       <>
         <ProcessBreadcrumb
@@ -198,21 +135,16 @@ export default function ProcessGroupShow() {
           <ProcessModelListTiles
             headerElement={<h2>Process Models</h2>}
             processGroup={processGroup}
+            defaultProcessModels={processGroup.process_models}
+            showNoItemsDisplayText={showNoItemsDisplayText}
           />
-          {/* eslint-disable-next-line sonarjs/no-gratuitous-expressions */}
-          {/* {modelPagination && modelPagination.total > 0 && (
-            <PaginationForTable
-              page={page}
-              perPage={perPage}
-              pagination={modelPagination}
-              tableToDisplay={buildModelTable()}
-            />
-          )} */}
           <br />
           <br />
           <ProcessGroupListTiles
             processGroup={processGroup}
             headerElement={<h2 className="clear-left">Process Groups</h2>}
+            defaultProcessGroups={processGroup.process_groups}
+            showNoItemsDisplayText={showNoItemsDisplayText}
           />
         </ul>
       </>

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -371,29 +371,32 @@ export default function ProcessModelShow() {
       return constructedTag;
     });
 
-    return (
+    if (tags.length > 0) {
-      <Table
+      return (
-        size="lg"
+        <Table
-        useZebraStyles={false}
+          size="lg"
-        className="process-model-file-table"
+          useZebraStyles={false}
-      >
+          className="process-model-file-table"
-        <TableHead>
+        >
-          <TableRow>
+          <TableHead>
-            <TableHeader id="Name" key="Name">
+            <TableRow>
-              Name
+              <TableHeader id="Name" key="Name">
-            </TableHeader>
+                Name
-            <TableHeader
+              </TableHeader>
-              id="Actions"
+              <TableHeader
-              key="Actions"
+                id="Actions"
-              className="table-header-right-align"
+                key="Actions"
-            >
+                className="table-header-right-align"
-              Actions
+              >
-            </TableHeader>
+                Actions
-          </TableRow>
+              </TableHeader>
-        </TableHead>
+            </TableRow>
-        <TableBody>{tags}</TableBody>
+          </TableHead>
-      </Table>
+          <TableBody>{tags}</TableBody>
-    );
+        </Table>
+      );
+    }
+    return null;
   };
 
   const [fileUploadEvent, setFileUploadEvent] = useState(null);
@@ -619,6 +622,19 @@ export default function ProcessModelShow() {
       return null;
     }
 
+    let helpText = null;
+    if (processModel.files.length === 0) {
+      helpText = (
+        <p className="no-results-message with-bottom-margin">
+          <strong>
+            **This process model does not have any files associated with it. Try
+            creating a bpmn file by selecting &quot;New BPMN File&quot; in the
+            dropdown below.**
+          </strong>
+        </p>
+      );
+    }
+
     return (
       <Tabs selectedIndex={selectedTabIndex} onChange={updateSelectedTab}>
         <TabList aria-label="List of tabs">
@@ -636,6 +652,7 @@ export default function ProcessModelShow() {
                   a={targetUris.processModelFileCreatePath}
                   ability={ability}
                 >
+                  {helpText}
                   <div className="with-bottom-margin">
                     Files
                     {processModel &&