Merge pull request #48 from thefrontside/pc/refactor-to-new-api

refactor to API and display recursive workflows

plugins/parodos/package.json

@@ -44,6 +44,7 @@
     "@rjsf/mui": "^5.2.0",
     "@rjsf/validator-ajv8": "^5.2.0",
     "assert-ts": "^0.3.4",
+    "classnames": "^2.3.2",
     "lodash.set": "^4.3.2",
     "lodash.get": "^4.4.2",
     "mobx": "^5.15.4",

plugins/parodos/src/components/Form/Form.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mockAndromedaWorkflowDefinition } from '../../mocks/workflowDefinitions/andromeda';
 import { FormSchema } from '../types';
-import { jsonSchemaFromWorkflowDefinition } from '../../hooks/useWorkflowDefinitionToJsonSchema';
+import { jsonSchemaFromWorkflowDefinition } from '../../hooks/useWorkflowDefinitionToJsonSchema/jsonSchemaFromWorkflowDefinition';
 import { act, fireEvent, render } from '@testing-library/react';
 import { Form } from './Form';
 
@@ -10,7 +10,7 @@ describe('<Form />', () => {
   describe('no stepper', () => {
     const mockWorkflow = {
       ...mockAndromedaWorkflowDefinition,
-      tasks: [mockAndromedaWorkflowDefinition.tasks[0]],
+      works: [mockAndromedaWorkflowDefinition.works[0]],
     };
     const formSchema: FormSchema =
       jsonSchemaFromWorkflowDefinition(mockWorkflow);

plugins/parodos/src/components/Form/Form.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.text.primary,
     marginRight: theme.spacing(1),
     textTransform: 'uppercase',
+    '&:disabled': {
+      border: `1px solid ${theme.palette.text.disabled}`,
+    },
   },
   next: {
     paddingRight: theme.spacing(4),
@@ -142,9 +145,7 @@ export function Form({
         {formSchema.steps.map((step, index) => (
           <Step key={index}>
             {hideTitle === false && (
-              <StepLabel className={styles.stepLabel}>
-                {step.schema.title}
-              </StepLabel>
+              <StepLabel className={styles.stepLabel}>{step.title}</StepLabel>
             )}
             <StepContent key={index}>{TheForm}</StepContent>
           </Step>

plugins/parodos/src/components/layouts/FluidObjectFieldTemplate.tsx

@@ -15,9 +15,13 @@ import { CSSProperties } from '@material-ui/core/styles/withStyles';
 const useStyles = makeStyles(theme => ({
   container: {
     marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(3),
   },
   item: {
     marginBottom: theme.spacing(2),
+    '& .field-array  .MuiPaper-root': {
+      boxShadow: 'none',
+    },
   },
   title: {
     fontSize: '1rem',
@@ -75,9 +79,22 @@ export function FluidObjectFieldTemplate<
       {isContainer ? (
         properties[0].content
       ) : (
-        <Grid container spacing={2} className={styles.item}>
-          {properties.map((element, index) =>
-            element.hidden ? (
+        <Grid container spacing={2} className={styles.container}>
+          {properties.map((element, index) => {
+            const container =
+              element.content.props.uiSchema['ui:hidden'] === true;
+
+            if (container) {
+              return (
+                <Grid container className={styles.container}>
+                  <Grid item xs={12} className={styles.item}>
+                    {element.content}
+                  </Grid>
+                </Grid>
+              );
+            }
+
+            return element.hidden ? (
               element.content
             ) : (
               <Grid
@@ -86,12 +103,12 @@ export function FluidObjectFieldTemplate<
                 md={6}
                 lg={4}
                 key={index}
-                style={{ marginBottom: '10px' }}
+                className={styles.item}
               >
                 {element.content}
               </Grid>
-            ),
-          )}
+            );
+          })}
           {canExpand(schema, uiSchema, formData) && (
             <Grid container justifyContent="flex-end">
               <Grid item>

plugins/parodos/src/components/types.ts

@@ -86,9 +86,14 @@ export type PropsFromComponent<C> = C extends (props: infer P) => JSX.Element
   ? P
   : never;
 
+export interface Step {
+  uiSchema: UiSchema;
+  mergedSchema: JsonObject;
+  schema: JsonObject;
+  title: string;
+  description?: string;
+}
+
 export interface FormSchema {
-  steps: {
-    schema: JsonObject;
-    uiSchema: UiSchema;
-  }[];
+  steps: Step[];
 }

plugins/parodos/src/components/workflow/Workflow.tsx

@@ -81,7 +81,7 @@ export function Workflow(): JSX.Element {
         body: JSON.stringify({
           projectId: newProject.id,
           workFlowName: ASSESSMENT_WORKFLOW,
-          workFlowTasks: [],
+          works: [],
         }),
       });
 

plugins/parodos/src/components/workflow/constants.ts

@@ -1 +1 @@
-export const ASSESSMENT_WORKFLOW = 'onboardingAssessment_ASSESSMENT_WORKFLOW';
+export const ASSESSMENT_WORKFLOW = 'subWorkFlowTwo'; // 'onboardingAssessment_ASSESSMENT_WORKFLOW';

plugins/parodos/src/components/workflow/onboarding/Onboarding.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-router-dom';
 import { ParodosPage } from '../../ParodosPage';
 import { Button, Chip, makeStyles, Typography } from '@material-ui/core';
-import { useWorkflowDefinitionToJsonSchema } from '../../../hooks/useWorkflowDefinitionToJsonSchema';
+import { useWorkflowDefinitionToJsonSchema } from '../../../hooks/useWorkflowDefinitionToJsonSchema/useWorkflowDefinitionToJsonSchema';
 import { assert } from 'assert-ts';
 import { Form } from '../../Form/Form';
 import { useGetWorkflowDefinition } from '../../../hooks/useGetWorkflowDefinitions';
@@ -75,13 +75,13 @@ export function Onboarding({ isNew }: OnboardingProps): JSX.Element {
       const payload = {
         projectId,
         workFlowName: workflow.name,
-        workFlowTasks: workflow.tasks.map(task => {
+        workFlowTasks: workflow.works.map(work => {
           return {
-            name: task.name,
-            arguments: task.parameters.map(param => {
+            name: work.name,
+            arguments: work.parameters.map(param => {
               const value = lodashGet(
                 formData,
-                `${task.name}.${param.key}`,
+                `${work.name}.${param.key}`,
                 null,
               );
 

plugins/parodos/src/components/workflow/useGetProjectAssessmentSchema.ts

@@ -1,8 +1,9 @@
 import { type AsyncState } from 'react-use/lib/useAsync';
 import { useGetWorkflowDefinition } from '../../hooks/useGetWorkflowDefinitions';
 import { FormSchema } from '../types';
-import { jsonSchemaFromWorkflowDefinition } from '../../hooks/useWorkflowDefinitionToJsonSchema';
+import { jsonSchemaFromWorkflowDefinition } from '../../hooks/useWorkflowDefinitionToJsonSchema/jsonSchemaFromWorkflowDefinition';
 import { ASSESSMENT_WORKFLOW } from './constants';
+import { WorkflowDefinition } from '../../models/workflowDefinitionSchema';
 
 export function useGetProjectAssessmentSchema(): AsyncState<FormSchema> {
   const result = useGetWorkflowDefinition(ASSESSMENT_WORKFLOW, 'byName');
@@ -11,10 +12,10 @@ export function useGetProjectAssessmentSchema(): AsyncState<FormSchema> {
     return { ...result, value: undefined };
   }
 
-  const cloned = JSON.parse(JSON.stringify(result.value));
+  const cloned = JSON.parse(JSON.stringify(result.value)) as WorkflowDefinition;
 
   // TODO: this should be coming from the API
-  cloned.tasks[0].parameters.unshift({
+  cloned.works[0].parameters.unshift({
     key: 'Name',
     description: 'New Project',
     optional: false,