(null);
useEffect(() => {
const { page, perPage } = getPageInfoFromSearchParams(
@@ -53,7 +54,7 @@ export default function HomePage() {
data-qa="process-instance-show-link"
to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`}
>
- View
+ View {rowToUse.process_instance_id}
0 && buildRecentProcessModelSection();
-
- if (pagination) {
+ const tasksWaitingForMeComponent = () => {
+ if (pagination && pagination.total < 1) {
+ return null;
+ }
const { page, perPage } = getPageInfoFromSearchParams(
searchParams,
PER_PAGE_FOR_TASKS_ON_HOME_PAGE
@@ -144,6 +145,17 @@ export default function HomePage() {
tableToDisplay={buildTable()}
path="/tasks"
/>
+
+ );
+ };
+
+ const relevantProcessModelSection =
+ recentProcessModels.length > 0 && buildRecentProcessModelSection();
+
+ if (pagination) {
+ return (
+ <>
+ {tasksWaitingForMeComponent()}
{relevantProcessModelSection}
);
diff --git a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
index 90c74c29..6bc0a57d 100644
--- a/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/MessageInstanceList.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
-import { Table } from 'react-bootstrap';
+// @ts-ignore
+import { Table } from '@carbon/react';
import { Link, useParams, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx
index 83379999..d624309c 100644
--- a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx
@@ -1,20 +1,18 @@
import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Button, Stack } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+// @ts-ignore
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
-import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
+import ProcessGroupForm from '../components/ProcessGroupForm';
+import { ProcessGroup } from '../interfaces';
export default function ProcessGroupEdit() {
- const [displayName, setDisplayName] = useState('');
const params = useParams();
- const navigate = useNavigate();
- const [processGroup, setProcessGroup] = useState(null);
+ const [processGroup, setProcessGroup] = useState(null);
useEffect(() => {
const setProcessGroupsFromResult = (result: any) => {
setProcessGroup(result);
- setDisplayName(result.display_name);
};
HttpService.makeCallToBackend({
@@ -23,69 +21,16 @@ export default function ProcessGroupEdit() {
});
}, [params]);
- const navigateToProcessGroup = (_result: any) => {
- navigate(`/admin/process-groups/${(processGroup as any).id}`);
- };
-
- const navigateToProcessGroups = (_result: any) => {
- navigate(`/admin/process-groups`);
- };
-
- const updateProcessGroup = (event: any) => {
- event.preventDefault();
- HttpService.makeCallToBackend({
- path: `/process-groups/${(processGroup as any).id}`,
- successCallback: navigateToProcessGroup,
- httpMethod: 'PUT',
- postBody: {
- display_name: displayName,
- id: (processGroup as any).id,
- },
- });
- };
-
- const deleteProcessGroup = () => {
- HttpService.makeCallToBackend({
- path: `/process-groups/${(processGroup as any).id}`,
- successCallback: navigateToProcessGroups,
- httpMethod: 'DELETE',
- });
- };
-
- const onDisplayNameChanged = (newDisplayName: any) => {
- setDisplayName(newDisplayName);
- };
-
if (processGroup) {
return (
<>
Edit Process Group: {(processGroup as any).id}
-
+
);
}
diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
index 3c1be15c..13f3d455 100644
--- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
@@ -1,13 +1,21 @@
import { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import { Button, Form, InputGroup, Table } from 'react-bootstrap';
-import { Typeahead } from 'react-bootstrap-typeahead';
-import { Option } from 'react-bootstrap-typeahead/types/types';
+import {
+ Button,
+ Table,
+ // ExpandableTile,
+ // TileAboveTheFoldContent,
+ // TileBelowTheFoldContent,
+ // TextInput,
+ // ClickableTile,
+ // @ts-ignore
+} from '@carbon/react';
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, ProcessGroup } from '../interfaces';
+import ProcessModelSearch from '../components/ProcessModelSearch';
// Example process group json
// {'process_group_id': 'sure', 'display_name': 'Test Workflows', 'id': 'test_process_group'}
@@ -17,8 +25,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) => {
@@ -31,7 +40,7 @@ export default function ProcessGroupList() {
Object.assign(item, { label });
return item;
});
- setProcessModelSelectionOptions(selectionArray);
+ setProcessModelAvailableItems(selectionArray);
};
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
@@ -48,7 +57,7 @@ export default function ProcessGroupList() {
}, [searchParams]);
const buildTable = () => {
- const rows = processGroups.map((row) => {
+ const rows = processGroups.map((row: ProcessGroup) => {
return (
|
@@ -72,6 +81,17 @@ export default function ProcessGroupList() {
| {rows}
);
+ // const rows = processGroups.map((row: ProcessGroup) => {
+ // return (
+ //
+ //
+ // {row.display_name}
+ //
+ //
+ // );
+ // });
+ //
+ // return {rows} ;
};
const processGroupsDisplayArea = () => {
@@ -97,35 +117,18 @@ 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 (
-
+
);
};
@@ -133,7 +136,9 @@ export default function ProcessGroupList() {
return (
<>
-
+
{processModelSearchArea()}
diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx
index 2f3f3a35..d4d8b038 100644
--- a/spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx
@@ -1,71 +1,24 @@
import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import { slugifyString } from '../helpers';
-import HttpService from '../services/HttpService';
+import ProcessGroupForm from '../components/ProcessGroupForm';
+import { ProcessGroup } from '../interfaces';
export default function ProcessGroupNew() {
- const [identifier, setIdentifier] = useState('');
- const [idHasBeenUpdatedByUser, setIdHasBeenUpdatedByUser] = useState(false);
- const [displayName, setDisplayName] = useState('');
- const navigate = useNavigate();
-
- const navigateToProcessGroup = (_result: any) => {
- navigate(`/admin/process-groups/${identifier}`);
- };
-
- const addProcessGroup = (event: any) => {
- event.preventDefault();
- HttpService.makeCallToBackend({
- path: `/process-groups`,
- successCallback: navigateToProcessGroup,
- httpMethod: 'POST',
- postBody: {
- id: identifier,
- display_name: displayName,
- },
- });
- };
-
- const onDisplayNameChanged = (newDisplayName: any) => {
- setDisplayName(newDisplayName);
- if (!idHasBeenUpdatedByUser) {
- setIdentifier(slugifyString(newDisplayName));
- }
- };
+ const [processGroup, setProcessGroup] = useState({
+ id: '',
+ display_name: '',
+ description: '',
+ });
return (
<>
Add Process Group
-
+
);
}
diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
index 522058c3..25e58044 100644
--- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { Link, useSearchParams, useParams } from 'react-router-dom';
-import { Button, Table, Stack } from 'react-bootstrap';
+// @ts-ignore
+import { Button, Table, Stack } from '@carbon/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import PaginationForTable from '../components/PaginationForTable';
import HttpService from '../services/HttpService';
@@ -81,7 +82,7 @@ export default function ProcessGroupShow() {
]}
/>
-
+
|