feat(orchestrator): added StaticText widget to form widgets library (#786)

* feat(orchestrator): added StaticText widget to form widgets library

* fix test failure

* code review fixes

Author: batzionb

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@backstage/cli": "^0.27.0",
     "@backstage/cli-node": "^0.2.2",
+    "@backstage/types": "^1.2.1",
     "@changesets/parse": "^0.4.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@manypkg/get-packages": "^2.2.2",
@@ -32,6 +33,7 @@
     "fs-extra": "11.3.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "lodash": "^4.17.21",
     "lodash.escaperegexp": "^4.1.2",
     "node-fetch": "^2.6.7",
     "prettier": "^3.4.2"

workspaces/orchestrator/plugins/orchestrator-form-widgets/http-workflow-dev-server/exampleWorkflows/schemas/dynamic-course-select__main-schema.json

@@ -31,6 +31,28 @@
       "title": "This title will never be displayed. This 'courseDetails' property is just a placeholder to be replaced by the 'mySchemaUpdater' based on the fetched response. Will contain complex data later.",
       "ui:widget": "hidden"
     },
+    "suggestedCourses": {
+      "type": "string",
+      "title": "Suggested Additional Courses",
+      "ui:widget": "ActiveText",
+      "ui:props": {
+        "ui:variant": "h4",
+        "fetch:url": "http://localhost:7007/api/proxy/mytesthttpserver/suggested-courses?coursename=$${{current.courseName}}",
+        "fetch:method": "GET",
+        "fetch:response:suggestions": "suggestions",
+        "fetch:retrigger": ["current.studentName", "current.courseName"],
+        "ui:text": "You might also be interested in: $${{fetch:response:suggestions}}"
+      }
+    },
+    "staticMessage": {
+      "type": "string",
+      "title": "Suggested Additional Courses static",
+      "ui:widget": "ActiveText",
+      "ui:props": {
+        "ui:variant": "subtitle1",
+        "ui:text": "You might also be interested in other stuff"
+      }
+    },
     "mySchemaUpdater": {
       "type": "string",
       "title": "This title will never be displayed. The 'type' is irrelevant. There can be multiple SchemaUpdater instances, if you like. They can even be dynamically supplied by one of them.",

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

@@ -12,17 +12,6 @@
           "type": "string",
           "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",
@@ -49,6 +38,18 @@
             }
           }
         },
+        "myActiveText": {
+          "type": "string",
+          "title": "Example of ActiveText with fetch",
+          "ui:widget": "ActiveText",
+          "ui:props": {
+            "ui:text": "Example demonstration text. fooTheFirst: $${{current.firstStep.fooTheFirst}}. response:example: $${{fetch:response:example}}",
+            "ui:variant": "p1",
+            "fetch:url": "http://localhost:7007/api/proxy/mytesthttpserver/activeTexts",
+            "fetch:response:example": "example.text0",
+            "fetch:retrigger": ["current.firstStep.fooTheFirst"]
+          }
+        },
         "placeholderOne": {
           "type": "string",
           "title": "This field and its title are visible until replaced by any SchemaUpdater."

workspaces/orchestrator/plugins/orchestrator-form-widgets/http-workflow-dev-server/httpServer.dynamic.course.select.js

@@ -5,7 +5,7 @@
  * 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
+ * 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,
@@ -184,6 +184,30 @@ app.get('/coursedetailsschema', (req, res) => {
   res.send(JSON.stringify(response));
 });
 
+app.get('/suggested-courses', (req, res) => {
+  logRequest(req);
+
+  const courseName = req.query?.coursename;
+
+  let suggestions = [];
+  if (courseName === 'one course') {
+    suggestions = ['Related Course A', 'Another Related Course'];
+  } else if (courseName === 'another course') {
+    suggestions = ['One More Course', 'And Another One'];
+  } else if (courseName === 'complexCourse') {
+    suggestions = ['Advanced Topics', 'Master Class'];
+  } else {
+    suggestions = ['Consider these too!', 'Explore other options'];
+  }
+
+  const response = {
+    suggestions: suggestions.join(', '),
+  };
+
+  // HTTP 200
+  res.send(JSON.stringify(response));
+});
+
 app.listen(port, () => {
   // eslint-disable-next-line no-console
   console.info(

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

@@ -135,6 +135,18 @@ app.get('/activeTextWhisperer', (req, res) => {
   res.send(JSON.stringify(result));
 });
 
+app.get('/activeTexts', (req, res) => {
+  logRequest(req);
+  res.send(
+    JSON.stringify({
+      example: {
+        text0: 'Text 0',
+        text1: 'Text 1',
+      },
+    }),
+  );
+});
+
 app.listen(port, () => {
   // eslint-disable-next-line no-console
   console.info(

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

@@ -23,7 +23,7 @@ import {
 import { FormValidation } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
 
-import { SchemaUpdater, ActiveTextInput } from './widgets';
+import { SchemaUpdater, ActiveTextInput, ActiveText } from './widgets';
 import { useGetExtraErrors } from './utils';
 
 const customValidate = (
@@ -38,6 +38,7 @@ const customValidate = (
 const widgets = {
   SchemaUpdater,
   ActiveTextInput,
+  ActiveText,
 };
 
 export class FormWidgetsApi implements OrchestratorFormApi {

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/uiPropTypes.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { JsonValue } from '@backstage/types/index';
+import { Variant } from '@material-ui/core/styles/createTypography';
+
+export type UiProps = {
+  'ui:variant'?: Variant;
+  'ui:text'?: string;
+  'fetch:url'?: string;
+  'fetch:method'?: 'GET' | 'POST';
+  'fetch:headers'?: Record<string, string>;
+  'fetch:body'?: Record<string, JsonValue>;
+  'fetch:retrigger'?: string[];
+  [key: `fetch:response:${string}`]: string;
+};
+
+export const isFetchResponseKey = (
+  key: string,
+): key is `fetch:response:${string}` => {
+  return key.startsWith('fetch:response:');
+};

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

@@ -0,0 +1,10 @@
+export const getErrorMessage = (prefix: string, error: unknown): string => {
+  if (!error) {
+    return prefix;
+  }
+  if (error instanceof Error && error.message) {
+    return `${prefix}: ${error.message}`;
+  }
+  const errorString = String(error);
+  return errorString ? `${prefix}: ${errorString}` : prefix;
+};

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

@@ -33,7 +33,6 @@ describe('evaluate template', () => {
 
   it('fails on incorrect input', async () => {
     const cases = [
-      { input: '', throws: 'Template can be a string only, key: myKey' },
       { input: undefined, throws: 'Template can be a string only, key: myKey' },
       { input: '$${{}}', throws: 'Template unit can not be empty' },
       { input: '$${{foo', throws: 'Template unit is not closed by }}' },

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

@@ -17,23 +17,29 @@
 import { useEffect, useState } from 'react';
 import { JsonObject, JsonValue } from '@backstage/types';
 import { useTemplateUnitEvaluator } from './useTemplateUnitEvaluator';
+import { UiProps } from '../uiPropTypes';
 
 export type evaluateTemplateProps = {
   template?: JsonValue;
   key: string;
   unitEvaluator: (
     unit: string,
     formData: JsonObject,
+    responseData?: JsonObject,
+    uiProps?: UiProps,
   ) => Promise<JsonValue | undefined>;
   formData: JsonObject;
+  responseData?: JsonObject;
+  uiProps?: UiProps;
 };
 
 export const evaluateTemplate = async (
   props: evaluateTemplateProps,
 ): Promise<string> => {
-  const { template, key, unitEvaluator, formData } = props;
+  const { template, key, unitEvaluator, formData, responseData, uiProps } =
+    props;
 
-  if (!template || typeof template !== 'string') {
+  if (template === undefined || typeof template !== 'string') {
     throw new Error(`Template can be a string only, key: ${key}`);
   }
 
@@ -51,6 +57,8 @@ export const evaluateTemplate = async (
     let evaluatedUnit = await unitEvaluator(
       template.substring(startIndex + 4, stopIndex),
       formData,
+      responseData,
+      uiProps,
     );
     if (evaluatedUnit === undefined) {
       evaluatedUnit = '___undefined___';
@@ -84,12 +92,7 @@ export const useEvaluateTemplate = ({
   const [evaluated, setEvaluated] = useState<string>();
 
   useEffect(() => {
-    evaluateTemplate({
-      template,
-      key,
-      unitEvaluator,
-      formData,
-    })
+    evaluateTemplate({ template, key, unitEvaluator, formData })
       .then(setEvaluated)
       .catch(reason => setError(reason.toString()));
   }, [template, unitEvaluator, formData, key, setError]);