feat(orchestrator): add support for template arrays (#1003)

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

Author: mareklibra

workspaces/orchestrator/.changeset/proud-dogs-decide.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': patch
+---
+
+Adding suuport for template arrays for the Orchestrator widgets.

workspaces/orchestrator/docs/orchestratorFormWidgets.md

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { JsonValue } from '@backstage/types/index';
 import { evaluateTemplate, evaluateTemplateProps } from './evaluateTemplate';
 
 const unitEvaluator: evaluateTemplateProps['unitEvaluator'] = async (
@@ -33,15 +34,52 @@ describe('evaluate template', () => {
 
   it('fails on incorrect input', async () => {
     const cases = [
-      { input: undefined, throws: 'Template can be a string only, key: myKey' },
+      {
+        input: undefined,
+        throws: 'Template can be either a string or an array, key: myKey',
+      },
       { input: '$${{}}', throws: 'Template unit can not be empty' },
       { input: '$${{foo', throws: 'Template unit is not closed by }}' },
+      {
+        input: ['constant', []],
+        throws:
+          'Items of array templates can be strings only, template: "["constant",[]]"',
+      },
+      {
+        input: [[]],
+        throws:
+          'Items of array templates can be strings only, template: "[[]]"',
+      },
+      {
+        input: [{}],
+        throws:
+          'Items of array templates can be strings only, template: "[{}]"',
+      },
+      {
+        input: ['constant', {}],
+        throws:
+          'Items of array templates can be strings only, template: "["constant",{}]"',
+      },
+      {
+        input: [undefined],
+        throws:
+          'Items of array templates can be strings only, template: "[null]"',
+      },
+      {
+        input: ['constant', undefined],
+        throws:
+          'Items of array templates can be strings only, template: "["constant",null]"',
+      },
     ];
 
     await Promise.all(
       cases.map(c =>
         expect(
-          evaluateTemplate({ ...props, template: c.input }),
+          evaluateTemplate({
+            ...props,
+            template:
+              c.input as JsonValue /* retype since we are testing malformed inputs */,
+          }),
         ).rejects.toThrow(c.throws),
       ),
     );
@@ -74,4 +112,29 @@ describe('evaluate template', () => {
       evaluateTemplate({ ...props, template: 'a$${{foo}}$${{$${{xx}}}}b' }),
     ).resolves.toBe('afoo$${{xx}}b');
   });
+
+  it('can parse array templates', async () => {
+    const cases = [
+      { input: [], expected: [] },
+      { input: [''], expected: [''] },
+      {
+        input: ['constantA', 'constantB'],
+        expected: ['constantA', 'constantB'],
+      },
+      { input: ['$${{foo}}'], expected: ['foo'] },
+      {
+        input: ['$${{foo}}', 'constant', '$${{bar}}'],
+        expected: ['foo', 'constant', 'bar'],
+      },
+      { input: ['$${{foo}}$${{bar}}'], expected: ['foobar'] },
+    ];
+
+    await Promise.all(
+      cases.map(c =>
+        expect(
+          evaluateTemplate({ ...props, template: c.input }),
+        ).resolves.toStrictEqual(c.expected),
+      ),
+    );
+  });
 });

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

@@ -33,7 +33,7 @@ export type evaluateTemplateProps = {
   uiProps?: UiProps;
 };
 
-export const evaluateTemplate = async (
+export const evaluateTemplateString = async (
   props: evaluateTemplateProps,
 ): Promise<string> => {
   const { template, key, unitEvaluator, formData, responseData, uiProps } =
@@ -72,7 +72,7 @@ export const evaluateTemplate = async (
     }
 
     if (template.length > stopIndex + 2) {
-      evaluated += await evaluateTemplate({
+      evaluated += await evaluateTemplateString({
         ...props,
         template: template.substring(stopIndex + 2),
       });
@@ -82,6 +82,31 @@ export const evaluateTemplate = async (
   return evaluated;
 };
 
+export const evaluateTemplate = async (
+  props: evaluateTemplateProps,
+): Promise<string | string[]> => {
+  const { template, ...restProps } = props;
+  const { key } = restProps;
+
+  if (Array.isArray(template)) {
+    if (!template.every(item => typeof item === 'string')) {
+      throw new Error(
+        `Items of array templates can be strings only, template: "${JSON.stringify(template)}"`,
+      );
+    }
+
+    return await Promise.all(
+      template.map(item =>
+        evaluateTemplateString({ template: item, ...restProps }),
+      ),
+    );
+  } else if (typeof template === 'string') {
+    return evaluateTemplateString(props);
+  }
+
+  throw new Error(`Template can be either a string or an array, key: ${key}`);
+};
+
 export const useEvaluateTemplate = ({
   template,
   key,
@@ -92,12 +117,12 @@ export const useEvaluateTemplate = ({
   key: string;
   formData: JsonObject;
   setError: (e: string) => void;
-}) => {
+}): string | undefined => {
   const unitEvaluator = useTemplateUnitEvaluator();
   const [evaluated, setEvaluated] = useState<string>();
 
   useEffect(() => {
-    evaluateTemplate({ template, key, unitEvaluator, formData })
+    evaluateTemplateString({ template, key, unitEvaluator, formData })
       .then(setEvaluated)
       .catch(reason => setError(reason.toString()));
   }, [template, unitEvaluator, formData, key, setError]);

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

@@ -18,7 +18,7 @@ import { JsonObject } from '@backstage/types/index';
 import React, { useState } from 'react';
 import { UiProps } from '../uiPropTypes';
 import { getErrorMessage } from './errorUtils';
-import { evaluateTemplate } from './evaluateTemplate';
+import { evaluateTemplateString } from './evaluateTemplate';
 import { useFetch } from './useFetch';
 import { useRetriggerEvaluate } from './useRetriggerEvaluate';
 import { useTemplateUnitEvaluator } from './useTemplateUnitEvaluator';
@@ -54,7 +54,7 @@ export const useFetchAndEvaluate = (
         try {
           setLoading(true);
           setError(undefined);
-          const evaluatedText = await evaluateTemplate({
+          const evaluatedText = await evaluateTemplateString({
             template,
             key: fieldId,
             unitEvaluator,
@@ -91,6 +91,6 @@ export const useFetchAndEvaluate = (
   return {
     text: resultText,
     loading: loading || fetchLoading,
-    error: error || fetchError,
+    error: error ?? fetchError,
   };
 };

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

@@ -23,7 +23,7 @@ import {
 import { JsonObject } from '@backstage/types';
 import { ERRORS_KEY, ErrorSchema } from '@rjsf/utils';
 import { useTemplateUnitEvaluator } from './useTemplateUnitEvaluator';
-import { evaluateTemplate } from './evaluateTemplate';
+import { evaluateTemplateString } from './evaluateTemplate';
 import { getRequestInit } from './useRequestInit';
 import { safeSet } from './safeSet';
 
@@ -86,7 +86,7 @@ export const useGetExtraErrors = () => {
       ) {
         const value = get(formData, path);
         if (value !== undefined) {
-          const evaluatedValidateUrl = await evaluateTemplate({
+          const evaluatedValidateUrl = await evaluateTemplateString({
             template: validateUrl,
             key: 'validate:url',
             unitEvaluator: templateUnitEvaluator,

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

@@ -16,7 +16,11 @@
 import { useEffect, useState } from 'react';
 import { isEqual } from 'lodash';
 import { JsonObject } from '@backstage/types';
-import { evaluateTemplate, evaluateTemplateProps } from './evaluateTemplate';
+import {
+  evaluateTemplate,
+  evaluateTemplateProps,
+  evaluateTemplateString,
+} from './evaluateTemplate';
 import { useTemplateUnitEvaluator } from './useTemplateUnitEvaluator';
 
 const ALLOWED_METHODS = ['GET', 'POST'];
@@ -83,7 +87,7 @@ export const getRequestInit = async (
       const keys = Object.keys(headers);
       const values = await Promise.all(
         keys.map(key =>
-          evaluateTemplate({
+          evaluateTemplateString({
             unitEvaluator,
             key,
             formData,