sartography
/
spiffworkflow-frontend
mirror of https://github.com/sartography/spiffworkflow-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/waku-fault-message

This commit is contained in:
mike cullerton 2023-01-13 12:11:40 -05:00
parent bf40993452 f03553acf4
commit 2033634e1b
4 changed files with 95 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/ProcessInstanceListTabs.tsx Normal file
View File

@ -0,0 +1,63 @@
// @ts-ignore
import { Tabs, TabList, Tab } from '@carbon/react';
import { Can } from '@casl/react';
import { useNavigate } from 'react-router-dom';
import { usePermissionFetcher } from '../hooks/PermissionService';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
import { PermissionsToCheck } from '../interfaces';
type OwnProps = {
variant: string;
};
export default function ProcessInstanceListTabs({ variant }: OwnProps) {
const navigate = useNavigate();
const { targetUris } = useUriListForPermissions();
const permissionRequestData: PermissionsToCheck = {
[targetUris.processInstanceListPath]: ['GET'],
};
const { ability } = usePermissionFetcher(permissionRequestData);
let selectedTabIndex = 0;
if (variant === 'all') {
selectedTabIndex = 1;
} else if (variant === 'find-by-id') {
selectedTabIndex = 2;
}
return (
<Tabs selectedIndex={selectedTabIndex}>
<TabList aria-label="List of tabs">
<Tab
title="Only show process instances for the current user."
data-qa="process-instance-list-for-me"
onClick={() => {
navigate('/admin/process-instances/for-me');
}}
>
For Me
</Tab>
<Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
<Tab
title="Show all process instances for all users."
data-qa="process-instance-list-all"
onClick={() => {
navigate('/admin/process-instances/all');
}}
>
All
</Tab>
</Can>
<Tab
title="Search for a process instance by id."
data-qa="process-instance-list-find-by-id"
onClick={() => {
navigate('/admin/process-instances/find-by-id');
}}
>
Find By Id
</Tab>
</TabList>
</Tabs>
);
}

17
src/routes/ProcessInstanceFindById.tsx
View File

@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
import { isInteger, modifyProcessIdentifierForPathParam } from '../helpers';
import HttpService from '../services/HttpService';
import ProcessInstanceListTabs from '../components/ProcessInstanceListTabs';
import { ProcessInstance } from '../interfaces';
export default function ProcessInstanceFindById() {
@ -69,11 +70,15 @@ export default function ProcessInstanceFindById() {
};
return (
<Form onSubmit={handleFormSubmission}>
<Stack gap={5}>
{formElements()}
{formButtons()}
</Stack>
</Form>
<>
<ProcessInstanceListTabs variant="find-by-id" />
<br />
<Form onSubmit={handleFormSubmission}>
<Stack gap={5}>
{formElements()}
{formButtons()}
</Stack>
</Form>
</>
);
}

54
src/routes/ProcessInstanceList.tsx
View File

@ -1,18 +1,13 @@
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';
import 'react-datepicker/dist/react-datepicker.css';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
// @ts-ignore
import { Tabs, TabList, Tab } from '@carbon/react';
import { Can } from '@casl/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
import { getProcessModelFullIdentifierFromSearchParams } from '../helpers';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
import { PermissionsToCheck } from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService';
import ProcessInstanceListTabs from '../components/ProcessInstanceListTabs';
type OwnProps = {
variant: string;
@ -20,13 +15,6 @@ type OwnProps = {
export default function ProcessInstanceList({ variant }: OwnProps) {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const { targetUris } = useUriListForPermissions();
const permissionRequestData: PermissionsToCheck = {
[targetUris.processInstanceListPath]: ['GET'],
};
const { ability } = usePermissionFetcher(permissionRequestData);
const processInstanceBreadcrumbElement = () => {
const processModelFullIdentifier =
@ -57,45 +45,9 @@ export default function ProcessInstanceList({ variant }: OwnProps) {
return <h1>My Process Instances</h1>;
};
let selectedTabIndex = 0;
if (variant === 'all') {
selectedTabIndex = 1;
}
return (
<>
<Tabs selectedIndex={selectedTabIndex}>
<TabList aria-label="List of tabs">
<Tab
title="Only show process instances for the current user."
data-qa="process-instance-list-for-me"
onClick={() => {
navigate('/admin/process-instances/for-me');
}}
>
For Me
</Tab>
<Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
<Tab
title="Show all process instances for all users."
data-qa="process-instance-list-all"
onClick={() => {
navigate('/admin/process-instances/all');
}}
>
All
</Tab>
</Can>
<Tab
title="Search for a process instance by id."
data-qa="process-instance-list-find-by-id"
onClick={() => {
navigate('/admin/process-instances/find-by-id');
}}
>
Find By Id
</Tab>
</TabList>
</Tabs>
<ProcessInstanceListTabs variant={variant} />
<br />
{processInstanceBreadcrumbElement()}
{processInstanceTitleElement()}

28
src/routes/ProcessInstanceShow.tsx
View File

@ -200,19 +200,21 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
const getTaskIds = () => {
const taskIds = { completed: [], readyOrWaiting: [] };
if (tasks) {
const callingSubprocessId = searchParams.get('call_activity_task_id');
tasks.forEach(function getUserTasksElement(task: ProcessInstanceTask) {
const callingSubprocessId = searchParams.get('call_activity_task_id');
if (
!callingSubprocessId ||
callingSubprocessId === task.calling_subprocess_task_id
callingSubprocessId &&
callingSubprocessId !== task.calling_subprocess_task_id
) {
if (task.state === 'COMPLETED') {
(taskIds.completed as any).push(task);
}
if (task.state === 'READY' || task.state === 'WAITING') {
(taskIds.readyOrWaiting as any).push(task);
}
return null;
}
if (task.state === 'COMPLETED') {
(taskIds.completed as any).push(task);
}
if (task.state === 'READY' || task.state === 'WAITING') {
(taskIds.readyOrWaiting as any).push(task);
}
return null;
});
}
return taskIds;
@ -904,6 +906,10 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay };
const candidateEvents: any = getEvents(taskToUse);
if (taskToDisplay) {
let taskTitleText = taskToUse.id;
if (taskToUse.title) {
taskTitleText += ` (${taskToUse.title})`;
}
return (
<Modal
open={!!taskToUse}
@ -911,7 +917,9 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
onRequestClose={handleTaskDataDisplayClose}
>
<Stack orientation="horizontal" gap={2}>
{taskToUse.name} ({taskToUse.type}): {taskToUse.state}
<span title={taskTitleText}>{taskToUse.name}</span> (
{taskToUse.type}
): {taskToUse.state}
{taskDisplayButtons(taskToUse)}
</Stack>
{selectingEvent