added search bar on process groups page w/ burnettk

spiffworkflow-frontend/src/App.tsx

@@ -10,7 +10,6 @@ import HomePage from './routes/HomePage';
 import TaskShow from './routes/TaskShow';
 import ErrorBoundary from './components/ErrorBoundary';
 import AdminRoutes from './routes/AdminRoutes';
-import SubNavigation from './components/SubNavigation';
 import { ErrorForDisplay } from './interfaces';
 
 export default function App() {
@@ -46,7 +45,6 @@ export default function App() {
     );
   }
 
-  // <SubNavigation />
   return (
     <ErrorContext.Provider value={errorContextValueArray}>
       <BrowserRouter>

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,11 +1,9 @@
 import {
   Header,
   Theme,
-  Button,
   HeaderName,
   HeaderNavigation,
   HeaderMenuItem,
-  HeaderMenu,
   HeaderGlobalAction,
   HeaderGlobalBar,
   // @ts-ignore

spiffworkflow-frontend/src/components/PaginationForTable.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import { useNavigate } from 'react-router-dom';
-import { Link, useNavigate } from 'react-router-dom';
 
 // @ts-ignore
-import { Dropdown, Stack, Pagination } from '@carbon/react';
+import { Pagination } from '@carbon/react';
 import { PaginationObject } from '../interfaces';
 
 export const DEFAULT_PER_PAGE = 50;

spiffworkflow-frontend/src/components/ProcessModelSearch.tsx

@@ -0,0 +1,45 @@
+import {
+  ComboBox,
+  // @ts-ignore
+} from '@carbon/react';
+import { truncateString } from '../helpers';
+import { ProcessModel } from '../interfaces';
+
+type OwnProps = {
+  onChange: (..._args: any[]) => any;
+  processModels: ProcessModel[];
+  selectedItem?: ProcessModel | null;
+};
+
+export default function ProcessModelSearch({
+  processModels,
+  selectedItem,
+  onChange,
+}: OwnProps) {
+  const shouldFilterProcessModel = (options: any) => {
+    const processModel: ProcessModel = options.item;
+    const { inputValue } = options;
+    return `${processModel.process_group_id}/${processModel.id} (${processModel.display_name})`.includes(
+      inputValue
+    );
+  };
+  return (
+    <ComboBox
+      onChange={onChange}
+      id="process-model-select"
+      items={processModels}
+      itemToString={(processModel: ProcessModel) => {
+        if (processModel) {
+          return `${processModel.process_group_id}/${
+            processModel.id
+          } (${truncateString(processModel.display_name, 20)})`;
+        }
+        return null;
+      }}
+      shouldFilterItem={shouldFilterProcessModel}
+      placeholder="Choose a process model"
+      titleText="Process model"
+      selectedItem={selectedItem}
+    />
+  );
+}

spiffworkflow-frontend/src/index.css

@@ -20,8 +20,8 @@ span.bjs-crumb {
 }
 
 .app-logo {
-  height: 90%;
+  height: 85%;
-  width: 90%;
+  width: 85%;
   margin-top: 1em;
   margin-bottom: 1em;
 }

spiffworkflow-frontend/src/interfaces.ts

@@ -47,3 +47,7 @@ export interface PaginationObject {
   total: number;
   pages: number;
 }
+
+export interface CarbonComboBoxSelection {
+  selectedItem: ProcessModel;
+}

spiffworkflow-frontend/src/routes/ProcessGroupList.tsx

@@ -9,7 +9,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
 import { getPageInfoFromSearchParams } from '../helpers';
-import { ProcessModel } from '../interfaces';
+import { CarbonComboBoxSelection, ProcessModel } from '../interfaces';
+import ProcessModelSearch from '../components/ProcessModelSearch';
 
 // Example process group json
 // {'process_group_id': 'sure', 'display_name': 'Test Workflows', 'id': 'test_process_group'}
@@ -19,8 +20,9 @@ export default function ProcessGroupList() {
 
   const [processGroups, setProcessGroups] = useState([]);
   const [pagination, setPagination] = useState(null);
-  const [processModeleSelectionOptions, setProcessModelSelectionOptions] =
+  const [processModelAvailableItems, setProcessModelAvailableItems] = useState(
-    useState([]);
+    []
+  );
 
   useEffect(() => {
     const setProcessGroupsFromResult = (result: any) => {
@@ -33,7 +35,7 @@ export default function ProcessGroupList() {
         Object.assign(item, { label });
         return item;
       });
-      setProcessModelSelectionOptions(selectionArray);
+      setProcessModelAvailableItems(selectionArray);
     };
 
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
@@ -99,35 +101,17 @@ export default function ProcessGroupList() {
   };
 
   const processModelSearchArea = () => {
-    const processModelSearchOnChange = (selected: Option[]) => {
+    const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
-      const processModel = selected[0] as ProcessModel;
+      const processModel = selection.selectedItem;
       navigate(
         `/admin/process-models/${processModel.process_group_id}/${processModel.id}`
       );
     };
     return (
-      <form onSubmit={function hey() {}}>
+      <ProcessModelSearch
-        <h3>Search</h3>
+        onChange={processModelSearchOnChange}
-        <Form.Group>
+        processModels={processModelAvailableItems}
-          <InputGroup>
+      />
-            <InputGroup.Text className="text-nowrap">
-              Process Model:{' '}
-            </InputGroup.Text>
-            <Typeahead
-              style={{ width: 500 }}
-              id="process-model-selection"
-              labelKey="label"
-              onChange={processModelSearchOnChange}
-              // for cypress tests since data-qa does not work
-              inputProps={{
-                name: 'process-model-selection',
-              }}
-              options={processModeleSelectionOptions}
-              placeholder="Choose a process model..."
-            />
-          </InputGroup>
-        </Form.Group>
-      </form>
     );
   };
 

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -14,25 +14,17 @@ import {
   DatePicker,
   DatePickerInput,
   Table,
-  Stack,
-  Form,
-  ComboBox,
   Grid,
   Column,
-  FlexGrid,
-  Row,
   MultiSelect,
   // @ts-ignore
 } from '@carbon/react';
-import { InputGroup } from 'react-bootstrap';
-import { Typeahead } from 'react-bootstrap-typeahead';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
   convertDateStringToSeconds,
   convertSecondsToFormattedDate,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
-  truncateString,
 } from '../helpers';
 
 import PaginationForTable from '../components/PaginationForTable';
@@ -44,6 +36,7 @@ import HttpService from '../services/HttpService';
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 import { PaginationObject, ProcessModel } from '../interfaces';
+import ProcessModelSearch from '../components/ProcessModelSearch';
 
 export default function ProcessInstanceList() {
   const params = useParams();
@@ -294,38 +287,6 @@ export default function ProcessInstanceList() {
     return queryParamString;
   };
 
-  const shouldFilterProcessModel = (options: any) => {
-    const processModel: ProcessModel = options.item;
-    const { inputValue } = options;
-    return `${processModel.process_group_id}/${processModel.id} (${processModel.display_name})`.includes(
-      inputValue
-    );
-  };
-
-  const processModelSearch = () => {
-    return (
-      <ComboBox
-        onChange={(selection: any) =>
-          setProcessModelSelection(selection.selectedItem)
-        }
-        id="process-model-select"
-        items={processModelAvailableItems}
-        itemToString={(processModel: ProcessModel) => {
-          if (processModel) {
-            return `${processModel.process_group_id}/${
-              processModel.id
-            } (${truncateString(processModel.display_name, 20)})`;
-          }
-          return null;
-        }}
-        shouldFilterItem={shouldFilterProcessModel}
-        placeholder="Choose a process model"
-        titleText="Process model"
-        selectedItem={processModelSelection}
-      />
-    );
-  };
-
   const processStatusSearch = () => {
     return (
       <MultiSelect
@@ -361,7 +322,15 @@ export default function ProcessInstanceList() {
     return (
       <>
         <Grid fullWidth className="with-bottom-margin">
-          <Column md={8}>{processModelSearch()}</Column>
+          <Column md={8}>
+            <ProcessModelSearch
+              onChange={(selection: any) =>
+                setProcessModelSelection(selection.selectedItem)
+              }
+              processModels={processModelAvailableItems}
+              selectedItem={processModelSelection}
+            />
+          </Column>
           <Column md={8}>{processStatusSearch()}</Column>
         </Grid>
         <Grid fullWidth className="with-bottom-margin">