status-im
/
spiff-arena
mirror of https://github.com/status-im/spiff-arena.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

a little cleanup to forms w/ burnettk

This commit is contained in:
jasquat 2022-11-17 11:52:57 -05:00
parent 70f839116e
commit 0a7052e5d2
4 changed files with 81 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
spiffworkflow-frontend/package-lock.json generated
View File

@ -24,7 +24,6 @@
"@rjsf/mui": "^5.0.0-beta.13", "@rjsf/mui": "^5.0.0-beta.13",
"@rjsf/utils": "^5.0.0-beta.13", "@rjsf/utils": "^5.0.0-beta.13",
"@rjsf/validator-ajv6": "^5.0.0-beta.13", "@rjsf/validator-ajv6": "^5.0.0-beta.13",
"@rjsf/validator-ajv8": "^5.0.0-beta.13",
"@tanstack/react-table": "^8.2.2", "@tanstack/react-table": "^8.2.2",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@testing-library/react": "^13.3.0",
@ -4950,23 +4949,6 @@
"@rjsf/utils": "^5.0.0-beta.1" "@rjsf/utils": "^5.0.0-beta.1"
} }
}, },
"node_modules/@rjsf/validator-ajv8": {
"version": "5.0.0-beta.13",
"resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.13.tgz",
"integrity": "sha512-/hrYbiwgCvEqw1Z7YZTWvd+ZAiX5vSN0WAI2hJTJTqKuCTcIH0fqNDCaOg3FBR38BL7seZrUmibIUcPU66iJ1w==",
"dependencies": {
"ajv-formats": "^2.1.1",
"ajv8": "npm:ajv@^8.11.0",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@rjsf/utils": "^5.0.0-beta.12"
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -6840,27 +6822,6 @@
"ajv": "^6.9.1" "ajv": "^6.9.1"
} }
}, },
"node_modules/ajv8": {
"name": "ajv",
"version": "8.11.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
"integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
"dependencies": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
"require-from-string": "^2.0.2",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/ajv8/node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
},
"node_modules/ansi-align": { "node_modules/ansi-align": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@ -34883,17 +34844,6 @@
"lodash-es": "^4.17.15" "lodash-es": "^4.17.15"
} }
}, },
"@rjsf/validator-ajv8": {
"version": "5.0.0-beta.13",
"resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.13.tgz",
"integrity": "sha512-/hrYbiwgCvEqw1Z7YZTWvd+ZAiX5vSN0WAI2hJTJTqKuCTcIH0fqNDCaOg3FBR38BL7seZrUmibIUcPU66iJ1w==",
"requires": {
"ajv-formats": "^2.1.1",
"ajv8": "npm:ajv@^8.11.0",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15"
}
},
"@rollup/plugin-babel": { "@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -36367,24 +36317,6 @@
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {} "requires": {}
}, },
"ajv8": {
"version": "npm:ajv@8.11.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
"integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
"requires": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
"require-from-string": "^2.0.2",
"uri-js": "^4.2.2"
},
"dependencies": {
"json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
}
}
},
"ansi-align": { "ansi-align": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",

43
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -20,12 +20,16 @@ import {
TableHeader, TableHeader,
TableHead, TableHead,
TableRow, TableRow,
TimePicker,
TimePickerSelect,
SelectItem,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config'; import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
import { import {
convertDateStringToSeconds, convertDateStringToSeconds,
convertSecondsToFormattedDate, convertSecondsToFormattedDate,
convertSecondsToFormattedDateTime,
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
getProcessModelFullIdentifierFromSearchParams, getProcessModelFullIdentifierFromSearchParams,
modifyProcessModelPath, modifyProcessModelPath,
@ -345,21 +349,32 @@ export default function ProcessInstanceListTable({
onChangeFunction: any onChangeFunction: any
) => { ) => {
return ( return (
<DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single"> <>
<DatePickerInput <DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single">
id={`date-picker-${name}`} <DatePickerInput
placeholder={DATE_FORMAT} id={`date-picker-${name}`}
labelText={labelString} placeholder={DATE_FORMAT}
type="text" labelText={labelString}
size="md" type="text"
autocomplete="off" size="md"
allowInput={false} autocomplete="off"
onChange={(dateChangeEvent: any) => { allowInput={false}
onChangeFunction(dateChangeEvent.srcElement.value); onChange={(dateChangeEvent: any) => {
onChangeFunction(dateChangeEvent.srcElement.value);
}}
value={initialDate}
/>
</DatePicker>
<TimePicker
invalid
id="time-picker"
labelText="Select a time"
pattern="^([01]\d|2[0-3]):?([0-5]\d)$"
onChange={(event: any) => {
console.log('event', event);
}} }}
value={initialDate}
/> />
</DatePicker> </>
); );
}; };
@ -493,7 +508,7 @@ export default function ProcessInstanceListTable({
); );
}; };
const formatSecondsForDisplay = (_row: any, seconds: any) => { const formatSecondsForDisplay = (_row: any, seconds: any) => {
return convertSecondsToFormattedDate(seconds) || '-'; return convertSecondsToFormattedDateTime(seconds) || '-';
}; };
const defaultFormatter = (_row: any, value: any) => { const defaultFormatter = (_row: any, value: any) => {
return value; return value;

75
spiffworkflow-frontend/src/routes/TaskShow.tsx
View File

@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
// FIXME: npm install @rjsf/validator-ajv8 and use it as soon as // FIXME: npm install @rjsf/validator-ajv8 and use it as soon as
// rawErrors is fixed. // rawErrors is fixed.
@ -9,8 +9,14 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
// https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors // https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors
import validator from '@rjsf/validator-ajv6'; import validator from '@rjsf/validator-ajv6';
// @ts-ignore import {
import { Button, Stack } from '@carbon/react'; TabList,
Tab,
Tabs,
Grid,
Column,
// @ts-ignore
} from '@carbon/react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
@ -73,39 +79,52 @@ export default function TaskShow() {
const buildTaskNavigation = () => { const buildTaskNavigation = () => {
let userTasksElement; let userTasksElement;
let selectedTabIndex = 0;
if (userTasks) { if (userTasks) {
userTasksElement = (userTasks as any).map(function getUserTasksElement( userTasksElement = (userTasks as any).map(function getUserTasksElement(
userTask: any userTask: any,
index: number
) { ) {
const taskUrl = `/tasks/${params.process_instance_id}/${userTask.id}`; const taskUrl = `/tasks/${params.process_instance_id}/${userTask.id}`;
if (userTask.id === params.task_id) { if (userTask.id === params.task_id) {
return <span>{userTask.name}</span>; selectedTabIndex = index;
return <Tab selected>{userTask.title}</Tab>;
} }
if (userTask.state === 'COMPLETED') { if (userTask.state === 'COMPLETED') {
return ( return (
<Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}> <Tab
{userTask.name} onClick={() => navigate(taskUrl)}
</Link> data-qa={`form-nav-${userTask.name}`}
>
{userTask.title}
</Tab>
); );
} }
if (userTask.state === 'FUTURE') { if (userTask.state === 'FUTURE') {
return <span style={{ color: 'red' }}>{userTask.name}</span>; return <Tab disabled>{userTask.title}</Tab>;
} }
if (userTask.state === 'READY') { if (userTask.state === 'READY') {
return ( return (
<Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}> <Tab
{userTask.name} - Current onClick={() => navigate(taskUrl)}
</Link> data-qa={`form-nav-${userTask.name}`}
>
{userTask.title}
</Tab>
); );
} }
return null; return null;
}); });
} }
return ( return (
<Stack orientation="horizontal" gap={3}> <Tabs
<Button href="/tasks">Go Back To List</Button> title="Steps in this process instance involving people"
{userTasksElement} selectedIndex={selectedTabIndex}
</Stack> >
<TabList aria-label="List of tabs" contained>
{userTasksElement}
</TabList>
</Tabs>
); );
}; };
@ -149,15 +168,19 @@ export default function TaskShow() {
} }
return ( return (
<Form <Grid fullWidth condensed>
formData={taskData} <Column md={5} lg={8} sm={4}>
onSubmit={handleFormSubmit} <Form
schema={jsonSchema} formData={taskData}
uiSchema={formUiSchema} onSubmit={handleFormSubmit}
validator={validator} schema={jsonSchema}
> uiSchema={formUiSchema}
{reactFragmentToHideSubmitButton} validator={validator}
</Form> >
{reactFragmentToHideSubmitButton}
</Form>
</Column>
</Grid>
); );
}; };
@ -175,7 +198,7 @@ export default function TaskShow() {
); );
}; };
if (task) { if (task && userTasks) {
const taskToUse = task as any; const taskToUse = task as any;
let statusString = ''; let statusString = '';
if (taskToUse.state !== 'READY') { if (taskToUse.state !== 'READY') {

3
spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
View File

@ -82,6 +82,9 @@ export default function BaseInputTemplate<
} else if (schema && schema.title) { } else if (schema && schema.title) {
labelToUse = schema.title; labelToUse = schema.title;
} }
if (required) {
labelToUse = `${labelToUse}*`;
}
let invalid = false; let invalid = false;
let errorMessageForField = null; let errorMessageForField = null;