diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx
index 84b99483..186ac513 100644
--- a/spiffworkflow-frontend/src/App.tsx
+++ b/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() {
);
}
- //
return (
diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index cb3b5271..a51ee779 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx
@@ -1,11 +1,9 @@
import {
Header,
Theme,
- Button,
HeaderName,
HeaderNavigation,
HeaderMenuItem,
- HeaderMenu,
HeaderGlobalAction,
HeaderGlobalBar,
// @ts-ignore
diff --git a/spiffworkflow-frontend/src/components/PaginationForTable.tsx b/spiffworkflow-frontend/src/components/PaginationForTable.tsx
index 44edff63..d9d94b84 100644
--- a/spiffworkflow-frontend/src/components/PaginationForTable.tsx
+++ b/spiffworkflow-frontend/src/components/PaginationForTable.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { 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;
diff --git a/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx b/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx
new file mode 100644
index 00000000..679831a5
--- /dev/null
+++ b/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 (
+ {
+ 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}
+ />
+ );
+}
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 763200df..c51398c4 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -20,8 +20,8 @@ span.bjs-crumb {
}
.app-logo {
- height: 90%;
- width: 90%;
+ height: 85%;
+ width: 85%;
margin-top: 1em;
margin-bottom: 1em;
}
diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts
index 16e1491b..08c8e4fa 100644
--- a/spiffworkflow-frontend/src/interfaces.ts
+++ b/spiffworkflow-frontend/src/interfaces.ts
@@ -47,3 +47,7 @@ export interface PaginationObject {
total: number;
pages: number;
}
+
+export interface CarbonComboBoxSelection {
+ selectedItem: ProcessModel;
+}
diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
index 29dc3882..f9881def 100644
--- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
+++ b/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] =
- useState([]);
+ const [processModelAvailableItems, setProcessModelAvailableItems] = 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 processModel = selected[0] as ProcessModel;
+ const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
+ const processModel = selection.selectedItem;
navigate(
`/admin/process-models/${processModel.process_group_id}/${processModel.id}`
);
};
return (
-
-
-
- Process Model:{' '}
-
-
-
-
-
+
);
};
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
index 5be2c3c7..10ac2c0b 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
+++ b/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 (
-
- 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 (
- {processModelSearch()}
+
+
+ setProcessModelSelection(selection.selectedItem)
+ }
+ processModels={processModelAvailableItems}
+ selectedItem={processModelSelection}
+ />
+
{processStatusSearch()}