feat(orchestrator): ActiveTextInput widget (#719)

* feat(orchestrator): add ActiveTextInput widget

Signed-off-by: Marek Libra <marek.libra@gmail.com>

* add jsonata dependency

* fix autocomplete handler

* Add validation

* changeset

* fix typos

* Introduce useRequestInit and useEvaluateTemplate

---------

Signed-off-by: Marek Libra <marek.libra@gmail.com>

Author: mareklibra

workspaces/orchestrator/.changeset/tame-cycles-crash.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': patch
+---
+
+Adding ActiveTextInput form widget

workspaces/orchestrator/plugins/orchestrator-form-widgets/README.md

@@ -75,7 +75,7 @@ Example of response:
 
 Moreover, it does extensive logging of the received HTTP requests for debugging during the widget's development.
 
-Refer [http-test-server](./http-test-server/README.md) for more details.
+Refer to [http-test-server](./http-test-server/README.md) for more details.
 
 ## How to develop widgets
 
@@ -84,7 +84,7 @@ We do not have a dedicated developer Backstage instance to host dev environment
 So far the development can be done via Orchestrator's dev instance (see `./workspaces/orchestrator/packages/backend` and `./workspaces/orchestrator/packages/frontend`).
 This instance is already configured to statically load the widget library (see `createApp()` in `./workspaces/orchestrator/packages/app/src/App.tsx`).
 
-To develop the widgets, we recommend to uncomment or farther configure the `integrations:` and `auth:` sections in the `./workspaces/orchestrator/app-config.yaml` to be able to test various SCM Auth providers within `$${{}}` templates.
+To develop the widgets, we recommend to uncomment or further configure the `integrations:` and `auth:` sections in the `./workspaces/orchestrator/app-config.yaml` to be able to test various SCM Auth providers within `$${{}}` templates.
 
 Please note, that the `proxy:` section is already pre-configured to match the `http-test-server` listening on localhost.
 
@@ -143,12 +143,12 @@ yarn start
 ### The dynamic_schema workflow
 
 There is `dynamic_schema` workflow located under `http-test-server/exampleWorkflows`.
-It's purpose is to have a playground when developing the widgets.
+Its purpose is to have a playground when developing the widgets.
 
 The URLs referenced from this workflow's data input schema rely on proxy configured in the `./workspaces/orchestrator/app-config.yaml` which assumes the `http-test-server` to be running.
 
 This dev-only workflow is similar to https://github.com/rhdhorchestrator/backstage-orchestrator-workflows/blob/main/workflows/dynamic.schema.sw.json .
-The difference is in the URLs used - the backstage-orchestrator-workflows' one references public Git Hub HTTP server, so no extra steps in running the `http-test-server` are needed.
+The difference is in the URLs used - the backstage-orchestrator-workflows' one references public GitHub HTTP server, so no extra steps in running the `http-test-server` are needed.
 
 ## Development of a workflow using orchestrator-form-widgets
 

workspaces/orchestrator/plugins/orchestrator-form-widgets/http-test-server/exampleWorkflows/schemas/dynamic_schema__main-schema.json

@@ -10,7 +10,34 @@
       "properties": {
         "fooTheFirst": {
           "type": "string",
-          "title": "First page simple input field"
+          "title": "Standard input field. Write something to see it in the autocomplete field."
+        },
+        "myActiveText": {
+          "type": "string",
+          "title": "Example of ActiveTextInput widget with autocomplete",
+          "ui:widget": "ActiveTextInput",
+          "ui:props": {
+            "fetch:url": "http://localhost:7007/api/proxy/mytesthttpserver/activeTextWhisperer?mydata=$${{current.firstStep.fooTheFirst}}",
+            "fetch:response:value": "myresult.foo.default",
+            "fetch:response:autocomplete": "bar.something.myautocompleteoptions",
+            "fetch:retrigger": ["current.firstStep.fooTheFirst"]
+          }
+        },
+        "mySimpleActiveText": {
+          "type": "string",
+          "title": "Example of simple ActiveTextInput with validation",
+          "ui:widget": "ActiveTextInput",
+          "ui:props": {
+            "fetch:url": "http://localhost:7007/api/proxy/mytesthttpserver/activeTextWhisperer",
+            "fetch:response:value": "myresult.foo.default",
+            "validate:url": "http://localhost:7007/api/proxy/mytesthttpserver/validate",
+            "validate:method": "POST",
+            "validate:body": {
+              "field": "mySimpleActiveText",
+              "value": "$${{current.firstStep.mySimpleActiveText}}",
+              "moreDataForMyValidator": "$${{current.firstStep.fooTheFirst}}"
+            }
+          }
         },
         "mySchemaUpdater": {
           "type": "string",

workspaces/orchestrator/plugins/orchestrator-form-widgets/http-test-server/index.js

@@ -27,6 +27,7 @@ const logRequest = req => {
   console.log('request: ', {
     originalUrl: req.originalUrl,
     method: req.method,
+    query: req.query,
     headers: req.headers,
     body: req.body,
   });
@@ -116,9 +117,52 @@ app.post('/chunk02', (req, res) => {
   res.send(JSON.stringify(chunk02));
 });
 
+app.get('/activeTextWhisperer', (req, res) => {
+  logRequest(req);
+
+  const mydata = req.query.mydata;
+
+  const autocomplete = ['my option one', 'my option two', 'Jack', 'Joe'];
+  if (mydata && mydata !== '___undefined___') {
+    autocomplete.push(mydata);
+  }
+
+  const result = {
+    myresult: { foo: { default: 'This is dynamically fetched default value' } },
+    bar: { something: { myautocompleteoptions: autocomplete } },
+  };
+
+  res.send(JSON.stringify(result));
+});
+
 app.listen(port, () => {
   // eslint-disable-next-line no-console
   console.info(
     `Simple HTTP server for orchestrator-form-widgets development only. Listening on ${port} port.`,
   );
 });
+
+app.post('/validate', (req, res) => {
+  logRequest(req);
+
+  const field = req.body?.field;
+  const value = req.body?.value;
+  const moreDataForMyValidator = req.body?.moreDataForMyValidator;
+
+  if (
+    field === 'mySimpleActiveText' &&
+    moreDataForMyValidator !== 'ignoreerror'
+  ) {
+    if (!value || value.length < 5) {
+      res.status(422);
+      res.send({
+        [field]: ['The field must be 5 or more characters long.'],
+      });
+
+      return;
+    }
+  }
+
+  res.status(200);
+  res.send('Valid');
+});

workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json

@@ -61,6 +61,7 @@
     "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^",
     "@rjsf/utils": "^5.21.2",
     "json-schema": "^0.4.0",
+    "jsonata": "^2.0.6",
     "lodash": "^4.17.21",
     "react-use": "^17.2.4"
   },

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/FormWidgetsApi.tsx

@@ -18,17 +18,13 @@ import React, { useCallback } from 'react';
 import {
   FormDecoratorProps,
   OrchestratorFormApi,
-  OrchestratorFormContextProps,
   useWrapperFormPropsContext,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
-import { ErrorSchema, FormValidation } from '@rjsf/utils';
-import { JsonObject, JsonValue } from '@backstage/types';
+import { FormValidation } from '@rjsf/utils';
+import { JsonObject } from '@backstage/types';
 
 import { SchemaUpdater, ActiveTextInput } from './widgets';
-
-const sleep = (ms: number) => {
-  return new Promise(resolve => setTimeout(resolve, ms));
-};
+import { useGetExtraErrors } from './utils';
 
 const customValidate = (
   _formData: JsonObject | undefined,
@@ -39,55 +35,6 @@ const customValidate = (
   return errors;
 };
 
-// Walks through the uiSchema and calls the "callback" for every field which is backed by the dynamic ui:widget.
-// The callback is provided with the uiSchema path, content of the uiSchema part and the corresponding entered formData value.
-const walkThrough: (
-  uiSchema: OrchestratorFormContextProps['uiSchema'],
-  formData: JsonObject | undefined,
-  callback: (
-    path: string,
-    uiSchemaProperty: JsonObject,
-    formDataValue: JsonValue | undefined,
-  ) => void,
-  pathPrefix: string,
-) => void = (uiSchema, formData, callback, pathPrefix) => {
-  let dottedPathPrefix = pathPrefix;
-  if (pathPrefix) {
-    dottedPathPrefix += '.';
-  }
-
-  for (const key of Object.keys(uiSchema)) {
-    // tune this condition to match just those properties which are relevant for the orchestrator-form-widget
-    if (typeof uiSchema[key] === 'object') {
-      if (uiSchema[key]?.['ui:widget']) {
-        callback(`${dottedPathPrefix}${key}`, uiSchema[key], formData?.[key]);
-      } else {
-        walkThrough(
-          uiSchema[key],
-          formData?.[key] as JsonObject,
-          callback,
-          `${dottedPathPrefix}${key}`,
-        );
-      }
-    }
-  }
-};
-
-const safeSet: (errors: JsonObject, path: string, value: JsonValue) => void = (
-  errors,
-  path,
-  value,
-) => {
-  const steps = path.split('.', 2);
-  if (steps.length === 1) {
-    errors[steps[0]] = value;
-  } else {
-    const safeObject = (errors[steps[0]] ?? {}) as JsonObject;
-    errors[steps[0]] = safeObject;
-    safeSet(safeObject, steps[1], value);
-  }
-};
-
 const widgets = {
   SchemaUpdater,
   ActiveTextInput,
@@ -97,8 +44,8 @@ export class FormWidgetsApi implements OrchestratorFormApi {
   getFormDecorator: OrchestratorFormApi['getFormDecorator'] = () => {
     return (FormComponent: React.ComponentType<FormDecoratorProps>) => {
       return () => {
-        const { formData, setFormData, uiSchema } =
-          useWrapperFormPropsContext();
+        const { formData, setFormData } = useWrapperFormPropsContext();
+        const getExtraErrors = useGetExtraErrors();
 
         const onChange = useCallback(
           (data: JsonObject | undefined) => {
@@ -109,41 +56,6 @@ export class FormWidgetsApi implements OrchestratorFormApi {
           [setFormData],
         );
 
-        const getExtraErrors: (
-          currentFormData: JsonObject,
-        ) => Promise<ErrorSchema<JsonObject>> = async (
-          currentFormData: JsonObject,
-        ) => {
-          // Asynchronous validation on wizard step transition or submit
-
-          // TODO
-          return sleep(1000 /* The sleep mimics async fetch, remove it */).then(
-            () => {
-              const errors: ErrorSchema<JsonObject> = {};
-              walkThrough(
-                uiSchema,
-                currentFormData,
-                (path, uiSchemaProperty, formDataValue) => {
-                  if (uiSchemaProperty?.['ui:widget'] === 'ActiveTextInput') {
-                    if (formDataValue) {
-                      safeSet(errors, path, {
-                        __errors: [
-                          'This is a dummy error from async validator',
-                          `Yet another issue with this field of value: ${formDataValue}`,
-                          'Remove the value if you want this silly validator to pass',
-                        ],
-                      });
-                    }
-                  }
-                },
-                '',
-              );
-
-              return errors;
-            },
-          );
-        };
-
         return (
           <FormComponent
             widgets={widgets}

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/applySelector.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import jsonata from 'jsonata';
+import { JsonObject } from '@backstage/types';
+
+export const applySelectorArray = async (
+  data: JsonObject,
+  selector: string,
+): Promise<string[]> => {
+  const expression = jsonata(selector);
+  const value = await expression.evaluate(data);
+
+  if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
+    return value;
+  }
+
+  throw new Error(
+    `Unexpected result of "${selector}" selector, expected string[] type. Value "${value}"`,
+  );
+};
+
+export const applySelectorString = async (
+  data: JsonObject,
+  selector: string,
+): Promise<string> => {
+  const expression = jsonata(selector);
+  const value = await expression.evaluate(data);
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  throw new Error(
+    `Unexpected result of "${selector}" selector, expected string type. Value "${value}"`,
+  );
+};

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/evaluateTemplate.ts

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
+import { useEffect, useState } from 'react';
 import { JsonObject, JsonValue } from '@backstage/types';
+import { useTemplateUnitEvaluator } from './useTemplateUnitEvaluator';
 
 export type evaluateTemplateProps = {
   template?: JsonValue;
@@ -45,10 +47,17 @@ export const evaluateTemplate = async (
     if (stopIndex < 0) {
       throw new Error(`Template unit is not closed by }}`);
     }
-    evaluated += await unitEvaluator(
+
+    let evaluatedUnit = await unitEvaluator(
       template.substring(startIndex + 4, stopIndex),
       formData,
     );
+    if (evaluatedUnit === undefined) {
+      evaluatedUnit = '___undefined___';
+    }
+
+    evaluated += evaluatedUnit;
+
     if (template.length > stopIndex + 2) {
       evaluated += await evaluateTemplate({
         ...props,
@@ -59,3 +68,31 @@ export const evaluateTemplate = async (
 
   return evaluated;
 };
+
+export const useEvaluateTemplate = ({
+  template,
+  key,
+  formData,
+  setError,
+}: {
+  template?: string;
+  key: string;
+  formData: JsonObject;
+  setError: (e: string) => void;
+}) => {
+  const unitEvaluator = useTemplateUnitEvaluator();
+  const [evaluated, setEvaluated] = useState<string>();
+
+  useEffect(() => {
+    evaluateTemplate({
+      template,
+      key,
+      unitEvaluator,
+      formData,
+    })
+      .then(setEvaluated)
+      .catch(reason => setError(reason.toString()));
+  }, [template, unitEvaluator, formData, key, setError]);
+
+  return evaluated;
+};

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/utils/index.ts

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './getRequestInit';
+export * from './useRequestInit';
 export * from './evaluateTemplate';
 export * from './useRetriggerEvaluate';
 export * from './useTemplateUnitEvaluator';
+export * from './safeSet';
+export * from './useGetExtraErrors';