diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/StartProcess/ProcessModelTreePage.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/StartProcess/ProcessModelTreePage.tsx
index 7f1daac9f..2c9e10ac4 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/views/StartProcess/ProcessModelTreePage.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/views/StartProcess/ProcessModelTreePage.tsx
@@ -9,6 +9,8 @@ import {
Typography,
Breadcrumbs,
Link,
+ Card,
+ CardContent,
} from '@mui/material';
import { useEffect, useRef, useState } from 'react';
import { Can } from '@casl/react';
@@ -330,10 +332,10 @@ export default function ProcessModelTreePage({
// If no favorites, proceed with the normal process groups.
if (processGroups) {
/**
- * Do this now and put it in state.
- * You do not want to do this on every change to the search filter.
- * The flattened map makes searching globally simple.
- */
+ * Do this now and put it in state.
+ * You do not want to do this on every change to the search filter.
+ * The flattened map makes searching globally simple.
+ */
const flattened = flattenAllItems(processGroups || [], []);
setFlatItems(flattened);
@@ -378,7 +380,7 @@ export default function ProcessModelTreePage({
ref={treeRef}
processGroups={processGroups}
stream={clickStream}
- // callback={() => handleFavorites({ text: SHOW_FAVORITES })}
+ // callback={() => handleFavorites({ text: SHOW_FAVORITES })}
/>,
);
}
@@ -423,6 +425,38 @@ export default function ProcessModelTreePage({
: '';
};
+ const breadcrumbLinks = (
+
+ {
+ e.preventDefault();
+ handleCrumbClick({ id: SPIFF_ID, displayName: 'Home' });
+ }}
+ >
+
+ Root
+
+ {crumbs.map((crumb) => (
+ {
+ e.preventDefault();
+ handleCrumbClick(crumb);
+ }}
+ >
+ {crumb.displayName}
+
+ ))}
+
+ );
+
return (
@@ -430,35 +464,7 @@ export default function ProcessModelTreePage({
? 'Start new process'
: 'Process Groups'}
-
- {
- e.preventDefault();
- handleCrumbClick({ id: SPIFF_ID, displayName: 'Home' });
- }}
- >
-
- Root
-
- {crumbs.map((crumb) => (
- {
- e.preventDefault();
- handleCrumbClick(crumb);
- }}
- >
- {crumb.displayName}
-
- ))}
-
+ {breadcrumbLinks}
*/}
- {currentProcessGroup ? (
-
-
- Process Group: {currentProcessGroup.display_name}
-
-
-
-
-
-
- }
- iconDescription="Delete Process Group"
- hasIconOnly
- description={`Delete process group: ${currentProcessGroup.display_name}`}
- onConfirmation={deleteProcessGroup}
- confirmButtonLabel="Delete"
- />
-
-
-
- ) : null}
- {currentProcessGroup ? (
-
- {currentProcessGroup.description}
-
- ) : null}
- setModelsExpanded((prev) => !prev)}
- >
- }
- aria-controls="Process Models Accordion"
- >
+
+
- Process Models ({models.length})
- e.stopPropagation()}
- data-qa="add-process-model-button"
- href={`/newui/process-models/${modifyProcessIdentifierForPathParam(currentProcessGroup ? currentProcessGroup.id : '')}/new`}
- >
-
-
+ {currentProcessGroup ? (
+ <>
+ {breadcrumbLinks}
+
+
+
+
+
+
+
+ }
+ iconDescription="Delete Process Group"
+ hasIconOnly
+ description={`Delete process group: ${currentProcessGroup.display_name}`}
+ onConfirmation={deleteProcessGroup}
+ confirmButtonLabel="Delete"
+ />
+
+
+
+ ) : (
+
+ {processModelAction === ProcessModelAction.StartProcess
+ ? 'Start new process'
+ : 'Process Groups'}
+
+ )}
-
-
-
- {models.map((model: Record) => (
- {
- if (setNavElementCallback) {
- // remove the TreePanel from the SideNav when starting a process
- setNavElementCallback(null);
- }
- }}
- onViewProcess={() => {
- if (setNavElementCallback) {
- setNavElementCallback(null);
- }
- }}
- />
- ))}
-
-
-
- setGroupsExpanded((prev) => !prev)}
- >
- }
- aria-controls="Process Groups Accordion"
- >
-
- Process Groups ({groups?.length})
- e.stopPropagation()}
- data-qa="add-process-group-button"
- href={`/newui/process-groups/new${currentParentGroupIdSearchParam()}`}
- >
-
-
-
-
-
-
- {groups?.map((group: Record) => (
-
- ))}
-
-
-
- {processModelAction === ProcessModelAction.Open ? (
- setDataStoreExpanded((prev) => !prev)}
- >
- }
- aria-controls="Data Store Accordion"
- >
-
-
- Data Stores ({dataStoresForProcessGroup?.length})
-
- e.stopPropagation()}
- data-qa="add-process-group-button"
- href={`/newui/data-stores/new${currentParentGroupIdSearchParam()}`}
+ {currentProcessGroup.description}
+
+ )}
+ setModelsExpanded((prev) => !prev)}
+ >
+ }
+ aria-controls="Process Models Accordion"
+ >
+
-
-
-
-
-
-
- {dataStoresForProcessGroup?.map((dataStore: DataStore) => (
-
- ))}
-
-
-
- ) : null}
+
+ Process Models ({models.length})
+
+ e.stopPropagation()}
+ data-qa="add-process-model-button"
+ href={`/newui/process-models/${modifyProcessIdentifierForPathParam(currentProcessGroup ? currentProcessGroup.id : '')}/new`}
+ >
+
+
+
+
+
+
+ {models.map((model: Record) => (
+ {
+ if (setNavElementCallback) {
+ // remove the TreePanel from the SideNav when starting a process
+ setNavElementCallback(null);
+ }
+ }}
+ onViewProcess={() => {
+ if (setNavElementCallback) {
+ setNavElementCallback(null);
+ }
+ }}
+ />
+ ))}
+
+
+
+ setGroupsExpanded((prev) => !prev)}
+ >
+ }
+ aria-controls="Process Groups Accordion"
+ >
+
+
+ Process Groups ({groups?.length})
+
+ e.stopPropagation()}
+ data-qa="add-process-group-button"
+ href={`/newui/process-groups/new${currentParentGroupIdSearchParam()}`}
+ >
+
+
+
+
+
+
+ {groups?.map((group: Record) => (
+
+ ))}
+
+
+
+ {processModelAction === ProcessModelAction.Open ? (
+ setDataStoreExpanded((prev) => !prev)}
+ >
+ }
+ aria-controls="Data Store Accordion"
+ >
+
+
+ Data Stores ({dataStoresForProcessGroup?.length})
+
+ e.stopPropagation()}
+ data-qa="add-process-group-button"
+ href={`/newui/data-stores/new${currentParentGroupIdSearchParam()}`}
+ >
+
+
+
+
+
+
+ {dataStoresForProcessGroup?.map(
+ (dataStore: DataStore) => (
+
+ ),
+ )}
+
+
+
+ ) : null}
+
+