feat(orchestrator): execute workflow page new UX (janus-idp#68)

plugins/orchestrator-backend/src/service/DataInputSchemaService.ts

@@ -10,7 +10,7 @@ import { Parallelstate } from '@severlessworkflow/sdk-typescript/lib/definitions
 import { Sleepstate } from '@severlessworkflow/sdk-typescript/lib/definitions/sleepstate';
 import { Transitiondatacondition } from '@severlessworkflow/sdk-typescript/lib/definitions/transitiondatacondition';
 import { Switchstate } from '@severlessworkflow/sdk-typescript/lib/definitions/types';
-import { JSONSchema4 } from 'json-schema';
+import { JSONSchema4, JSONSchema7 } from 'json-schema';
 import { OpenAPIV3 } from 'openapi-types';
 import { Logger } from 'winston';
 
@@ -1192,4 +1192,45 @@ export class DataInputSchemaService {
 
     return inputVariableSet;
   }
+
+  public parseComposition(inputSchema: JSONSchema7): JSONSchema7[] {
+    if (!inputSchema.properties) {
+      return [];
+    }
+
+    const refPaths = Object.values(inputSchema.properties)
+      .map(p => (p as JSONSchema7).$ref)
+      .filter((r): r is string => r !== undefined);
+
+    if (!refPaths.length) {
+      return [inputSchema];
+    }
+
+    return refPaths
+      .map(r => this.findReferencedSchema({ rootSchema: inputSchema, ref: r }))
+      .filter((r): r is JSONSchema7 => r !== undefined);
+  }
+
+  private findReferencedSchema(args: {
+    rootSchema: JSONSchema7;
+    ref: string;
+  }): JSONSchema7 | undefined {
+    const pathParts = args.ref
+      .split('/')
+      .filter(part => !['#', ''].includes(part));
+
+    let current: any = args.rootSchema;
+    for (const part of pathParts) {
+      current = current?.[part];
+      if (current === undefined) {
+        return undefined;
+      }
+    }
+
+    if (!current.properties) {
+      return undefined;
+    }
+
+    return current;
+  }
 }

plugins/orchestrator-backend/src/service/router.ts

@@ -91,6 +91,7 @@ export async function createBackendRouter(
     openApiService,
     jiraService,
     args.dataIndexService,
+    dataInputSchemaService,
   );
   setupExternalRoutes(router, discovery, scaffolderService);
 
@@ -113,6 +114,7 @@ function setupInternalRoutes(
   openApiService: OpenApiService,
   jiraService: JiraService,
   dataIndexService: DataIndexService,
+  dataInputSchemaService: DataInputSchemaService,
 ) {
   router.get('/workflows/definitions', async (_, response) => {
     const swfs = await dataIndexService.getWorkflowDefinitions();
@@ -274,7 +276,7 @@ function setupInternalRoutes(
     res.status(200).json(jobs);
   });
 
-  router.get('/workflows/:workflowId/schema', async (req, res) => {
+  router.get('/workflows/:workflowId/inputSchema', async (req, res) => {
     const {
       params: { workflowId },
     } = req;
@@ -304,7 +306,7 @@ function setupInternalRoutes(
 
     const workflowItem: WorkflowItem = { uri, definition };
 
-    let schema: JSONSchema7 | undefined = undefined;
+    let schemas: JSONSchema7[] = [];
 
     if (definition.dataInputSchema) {
       const workflowInfo = await sonataFlowService.fetchWorkflowInfo(
@@ -317,12 +319,21 @@ function setupInternalRoutes(
         return;
       }
 
-      schema = workflowInfo.inputSchema;
+      if (!workflowInfo.inputSchema) {
+        res
+          .status(500)
+          .send(`Couldn't fetch workflow input schema ${workflowId}`);
+        return;
+      }
+
+      schemas = dataInputSchemaService.parseComposition(
+        workflowInfo.inputSchema,
+      );
     }
 
     const response: WorkflowDataInputSchemaResponse = {
-      workflowItem: workflowItem,
-      schema,
+      workflowItem,
+      schemas,
     };
 
     res.status(200).json(response);

plugins/orchestrator-common/src/types.ts

@@ -52,10 +52,9 @@ export interface WorkflowSpecFile {
   path: string;
   content: OpenAPIV3.Document;
 }
-
 export interface WorkflowDataInputSchemaResponse {
   workflowItem: WorkflowItem;
-  schema: JSONSchema7 | undefined;
+  schemas: JSONSchema7[];
 }
 
 export interface WorkflowExecutionResponse {

plugins/orchestrator/package.json

@@ -64,13 +64,14 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.45",
-    "@rjsf/core": "^3.2.1",
+    "@monaco-editor/react": "^4.6.0",
     "@rjsf/core-v5": "npm:@rjsf/[email protected]",
     "@rjsf/material-ui-v5": "npm:@rjsf/[email protected]",
     "@rjsf/utils": "5.7.3",
     "@rjsf/validator-ajv8": "5.7.3",
     "json-schema": "^0.4.0",
     "moment": "^2.29.4",
+    "monaco-editor": "^0.39.0",
     "react-hook-form": "^7.45.1",
     "react-json-view": "^1.21.3",
     "react-moment": "^1.1.3",
@@ -90,7 +91,6 @@
     "css-loader": "^6.5.1",
     "file-loader": "^5.0.2",
     "filemanager-webpack-plugin": "^6.1.4",
-    "monaco-editor": "^0.39.0",
     "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-yaml": "^4.0.4",
     "sass": "^1.54.5",

plugins/orchestrator/src/__fixtures__/fakeWorkflowDataInputSchemaResponse.tsx

@@ -0,0 +1,94 @@
+import { WorkflowDataInputSchemaResponse } from '@janus-idp/backstage-plugin-orchestrator-common';
+
+export const fakeDataInputSchemaReponse: WorkflowDataInputSchemaResponse = {
+  workflowItem: {
+    uri: 'yamlgreet.sw.yaml',
+    definition: {
+      id: 'yamlgreet',
+      version: '1.0',
+      specVersion: '0.8',
+      name: 'Greeting workflow',
+      description: 'YAML based greeting workflow',
+      dataInputSchema: 'schemas/yamlgreet__main_schema.json',
+      start: 'ChooseOnLanguage',
+      functions: [
+        {
+          name: 'greetFunction',
+          type: 'custom',
+          operation: 'sysout',
+        },
+      ],
+      states: [
+        {
+          name: 'ChooseOnLanguage',
+          type: 'switch',
+          dataConditions: [
+            {
+              condition: '${ .language == "English" }',
+              transition: 'GreetInEnglish',
+            },
+            {
+              condition: '${ .language == "Spanish" }',
+              transition: 'GreetInSpanish',
+            },
+          ],
+          defaultCondition: {
+            transition: 'GreetInEnglish',
+          },
+        },
+        {
+          name: 'GreetInEnglish',
+          type: 'inject',
+          data: {
+            greeting: 'Hello from YAML Workflow, ',
+          },
+          transition: 'GreetPerson',
+        },
+        {
+          name: 'GreetInSpanish',
+          type: 'inject',
+          data: {
+            greeting: 'Saludos desde YAML Workflow, ',
+          },
+          transition: 'GreetPerson',
+        },
+        {
+          name: 'GreetPerson',
+          type: 'operation',
+          actions: [
+            {
+              name: 'greetAction',
+              functionRef: {
+                refName: 'greetFunction',
+                arguments: {
+                  message: '.greeting+.name',
+                },
+              },
+            },
+          ],
+          end: {
+            terminate: true,
+          },
+        },
+      ],
+    },
+  },
+  schemas: [
+    {
+      $id: 'classpath:/schemas/yamlgreet__sub_schema__Additional_input_data.json',
+      title: 'yamlgreet: Additional input data',
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      type: 'object',
+      required: ['language'],
+      properties: {
+        language: {
+          title: 'language',
+          type: 'string',
+          pattern: 'Spanish|English',
+          description: 'Extracted from the Workflow definition',
+          default: 'English',
+        },
+      },
+    },
+  ],
+};