Merge pull request janus-idp#63 from thefrontside/pc/refactor-to-new-api

refactor to new api

plugins/parodos/src/components/ParodosPage/ParodosPage.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { PageHeader } from '../PageHeader';
 import type { PropsFromComponent } from '../types';
 import { useNavigate } from 'react-router-dom';
-import { TabLabel, TabLabelProps } from './TabLabel';
+import { tabLabelCreator } from './TabLabel';
 import { navigationMap, pluginRoutePrefix } from './navigationMap';
 import { useStore } from '../../stores/workflowStore/workflowStore';
 import { ErrorMessage } from '../errors/ErrorMessage';
@@ -40,13 +40,10 @@ export const ParodosPage: FC<ParodosPageProps> = ({ children, ...props }) => {
           id: index.toString(),
           label,
           tabProps: {
-            component: (p: TabLabelProps) => (
-              <TabLabel
-                {...p}
-                highlighted={highlighted}
-                icon={navigationMap[index].icon}
-              />
-            ),
+            component: tabLabelCreator({
+              icon: navigationMap[index].icon,
+              highlighted,
+            }),
           },
         };
       }),

plugins/parodos/src/components/ParodosPage/TabLabel.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { forwardRef, type ReactNode } from 'react';
 import { makeStyles } from '@material-ui/core';
 import StarIcon from '@material-ui/icons/Star';
 
@@ -17,19 +17,21 @@ export interface TabLabelProps {
   children: ReactNode;
 }
 
-export function TabLabel({
-  children,
+export const tabLabelCreator = ({
   icon,
   highlighted,
-  ...props
-}: TabLabelProps) {
-  const styles = useStyles();
+}: {
+  icon: ReactNode;
+  highlighted: boolean;
+}) =>
+  forwardRef<HTMLSpanElement, TabLabelProps>(({ children, ...props }, ref) => {
+    const styles = useStyles();
 
-  return (
-    <span {...props}>
-      {icon}
-      {highlighted && <StarIcon className={styles.highlightedTab} />}
-      {children}
-    </span>
-  );
-}
+    return (
+      <span {...props} ref={ref}>
+        {icon}
+        {highlighted && <StarIcon className={styles.highlightedTab} />}
+        {children}
+      </span>
+    );
+  });

plugins/parodos/src/components/errors/ErrorMessage.tsx

@@ -12,7 +12,6 @@ export function ErrorMessage({ error }: ErrorPanelProps): JSX.Element | null {
       return;
     }
 
-    // simple error message to user
     errorApi.post(new Error('An error has occurred'));
   }, [errorApi]);
 

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

@@ -23,9 +23,6 @@ const useStyles = makeStyles(theme => ({
       boxShadow: 'none',
     },
   },
-  item2: {
-    border: '10px solid red',
-  },
   title: {
     fontSize: '1rem',
     fontWeight: theme.typography

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

@@ -34,7 +34,6 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   form: {
-    marginTop: theme.spacing(2),
     '& .field-boolean > div > label': {
       display: 'inline-block',
       marginBottom: theme.spacing(2),

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

@@ -73,19 +73,23 @@ export function Onboarding({ isNew }: OnboardingProps): JSX.Element {
       const payload = {
         projectId,
         workFlowName: workflow.name,
-        workFlowTasks: workflow.works.map(work => {
+        arguments: Object.entries(workflow.parameters ?? {}).map(([key]) => {
+          const value = lodashGet(formData, `${workflow.name}.${key}`, null);
+
           return {
-            name: work.name,
-            arguments: work.parameters?.map(param => {
-              const value = lodashGet(
-                formData,
-                `${work.name}.${param.key}`,
-                null,
-              );
+            key,
+            value,
+          };
+        }),
+        works: workflow.works.map(work => {
+          return {
+            workName: work.name,
+            arguments: Object.entries(work.parameters ?? {}).map(([key]) => {
+              const value = lodashGet(formData, `${work.name}.${key}`, null);
 
               return {
-                key: param.key,
-                value: value,
+                key,
+                value,
               };
             }),
           };

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

@@ -14,9 +14,8 @@ interface Props {
 }
 
 const newProjectChoice: WorkFlowTaskParameter = {
-  key: 'newProject',
-  type: 'BOOLEAN',
-  optional: true,
+  type: 'boolean',
+  required: true,
   default: true,
 };
 
@@ -30,34 +29,42 @@ export function useGetProjectAssessmentSchema({
 
   const cloned = JSON.parse(JSON.stringify(definition)) as WorkflowDefinition;
 
+  cloned.works[0].parameters = cloned.works[0].parameters ?? {};
+
   if (newProject) {
-    cloned.works[0].parameters?.unshift({
-      key: 'Name',
-      description: 'New Project',
-      optional: false,
-      type: 'TEXT',
-    });
+    cloned.works[0].parameters.newProject = { ...newProjectChoice };
 
-    cloned.works[0].parameters?.unshift(newProjectChoice);
+    cloned.works[0].parameters.Name = {
+      description: 'New Project',
+      required: true,
+      format: 'text',
+      type: 'string',
+    };
   } else {
-    cloned.works[0].parameters = [];
-
-    cloned.works[0].parameters?.unshift({
-      key: 'project',
-      optional: false,
-      type: 'TEXT',
-      field: 'ProjectPicker',
-      disabled: !hasProjects,
-    });
+    cloned.works[0].parameters = {};
 
-    cloned.works[0].parameters?.unshift({
+    cloned.works[0].parameters.newProject = {
       ...newProjectChoice,
       description: 'Search for an existing project to execute a new workflow:',
-    });
+    };
+
+    cloned.works[0].parameters.project = {
+      required: true,
+      type: 'string',
+      format: 'text',
+      field: 'ProjectPicker',
+      disabled: !hasProjects,
+    };
   }
 
   const formSchema = jsonSchemaFromWorkflowDefinition(cloned);
 
+  set(formSchema, `steps[0].uiSchema.onboardingAssessmentTask.['ui:order']`, [
+    'newProject',
+    'Name',
+    '*',
+  ]);
+
   // TODO: should be able to do this with ui:title
   set(
     formSchema,

plugins/parodos/src/components/workflow/workflowDetail/WorkFlowLogViewer.tsx

@@ -8,8 +8,6 @@ const ParodosLogViewer = withStyles(theme => ({
   },
   log: {
     background: theme.palette.background.paper,
-    // fontSize: theme.typography.body2.fontSize,
-    // fontFamily: theme.typography.fontFamily,
   },
 }))(LogViewer);
 

plugins/parodos/src/hooks/useWorkflowDefinitionToJsonSchema/jsonSchemaFromWorkflowDefinition.test.ts

@@ -1,13 +1,16 @@
 import { mockRecursiveWorksWorkflowDefinition } from '../../mocks/workflowDefinitions/recursiveWorks';
 import { jsonSchemaFromWorkflowDefinition } from './jsonSchemaFromWorkflowDefinition';
 import get from 'lodash.get';
-import { WorkType } from '../../models/workflowDefinitionSchema';
+import {
+  WorkflowDefinition,
+  WorkType,
+} from '../../models/workflowDefinitionSchema';
 import { mockDeepRecursiveWorks } from '../../mocks/workflowDefinitions/deepRecursiveWorks';
 
 describe('jsonSchemaFromWorkflowDefinition', () => {
   it('transforms a workflow definition with recursive works', () => {
     const result = jsonSchemaFromWorkflowDefinition(
-      mockRecursiveWorksWorkflowDefinition,
+      mockRecursiveWorksWorkflowDefinition as unknown as WorkflowDefinition,
     );
 
     expect(result.steps.length).toBeGreaterThan(0);
@@ -30,18 +33,17 @@ describe('jsonSchemaFromWorkflowDefinition', () => {
   it('transforms deeply nested recursive structure', () => {
     const result = jsonSchemaFromWorkflowDefinition(mockDeepRecursiveWorks);
 
-    const comment = get(
-      result.steps[1]?.schema,
-      'properties.subWorkFlowThree.properties.works.items[1].properties.subWorkFlowTwo.properties.works.items[0].properties.subWorkFlowOne.properties.comment.title',
+    const domainName = get(
+      result.steps[0]?.schema,
+      'properties.sslCertificationWorkFlowTask.properties.domainName.title',
     );
 
-    expect(comment).toBe('comment');
-
-    const singleSignOn = get(
-      result.steps[2]?.schema,
-      'properties.subWorkFlowFour.properties.works.items[1].title',
+    expect(domainName).toBe('domainName');
+    const clusterName = get(
+      result.steps[1]?.schema,
+      'properties.subWorkFlowTwo.properties.works.items[0].properties.subWorkFlowOne.properties.works.items[1].properties.splunkMonitoringWorkFlowTask.properties.clusterName.title',
     );
 
-    expect(singleSignOn).toBe('Single Sign On Work Flow Task');
+    expect(clusterName).toBe('clusterName');
   });
 });