chore: fixing some missing features that got accidentally replaced

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts

@@ -32,6 +32,7 @@ export type FormValidation = {
   [name: string]: FieldValidation | FormValidation;
 };
 
+/** @alpha */
 export const createAsyncValidators = (
   rootSchema: JsonObject,
   validators: Record<

plugins/scaffolder-react/src/next/components/Stepper/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { Stepper, type StepperProps } from './Stepper';
+export { createAsyncValidators } from './createAsyncValidators';

plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -74,6 +74,7 @@ export const CustomFieldExplorer = ({
   const [selectedField, setSelectedField] = useState(fieldOptions[0]);
   const [fieldFormState, setFieldFormState] = useState({});
   const [refreshKey, setRefreshKey] = useState(Date.now());
+  const [formState, setFormState] = useState({});
   const sampleFieldTemplate = useMemo(
     () =>
       yaml.stringify({
@@ -103,8 +104,9 @@ export const CustomFieldExplorer = ({
     selection => {
       setSelectedField(selection);
       setFieldFormState({});
+      setFormState({});
     },
-    [setFieldFormState, setSelectedField],
+    [setFieldFormState, setSelectedField, setFormState],
   );
 
   const handleFieldConfigChange = useCallback(
@@ -149,7 +151,7 @@ export const CustomFieldExplorer = ({
             <Form
               showErrorList={false}
               // @ts-ignore
-              fields={{ ...fieldComponents }}
+              fields={{ ...fieldOverrides, ...fieldComponents }}
               noHtml5Validate
               formData={fieldFormState}
               formContext={{ fieldFormState }}
@@ -183,6 +185,8 @@ export const CustomFieldExplorer = ({
           </CardContent>
         </Card>
         <TemplateEditorForm
+          data={formState}
+          onUpdate={setFormState}
           key={refreshKey}
           content={sampleFieldTemplate}
           contentIsSpec

plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx

@@ -196,7 +196,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
             formData={data}
             onChange={e => onUpdate(e.formData)}
             onReset={() => onUpdate({})}
-            finishButtonLabel={onDryRun && 'Try It'}
+            finishButtonLabel={onDryRun && 'Try iIt'}
             onFinish={onDryRun && (() => onDryRun(data))}
             layouts={layouts}
           />

plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -125,6 +125,7 @@ export const TemplateFormPreviewer = ({
   const [errorText, setErrorText] = useState<string>();
   const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);
   const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+  const [formState, setFormState] = useState({});
 
   const { loading } = useAsync(
     () =>
@@ -204,6 +205,8 @@ export const TemplateFormPreviewer = ({
         </div>
         <div className={classes.preview}>
           <TemplateEditorForm
+            data={formState}
+            onUpdate={setFormState}
             content={templateYaml}
             contentIsSpec
             fieldExtensions={customFieldExtensions}

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx

@@ -16,7 +16,7 @@
 import { useApiHolder } from '@backstage/core-plugin-api';
 import { JsonObject, JsonValue } from '@backstage/types';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { Component, ReactNode, useState } from 'react';
+import React, { Component, ReactNode, useMemo, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import yaml from 'yaml';
 import {
@@ -24,7 +24,10 @@ import {
   TemplateParameterSchema,
   FieldExtensionOptions,
 } from '@backstage/plugin-scaffolder-react';
-import { Stepper } from '@backstage/plugin-scaffolder-react/alpha';
+import {
+  Stepper,
+  createAsyncValidators,
+} from '@backstage/plugin-scaffolder-react/alpha';
 import { useDryRun } from './DryRunContext';
 import { useDirectoryEditor } from './DirectoryEditorContext';
 
@@ -80,6 +83,7 @@ interface TemplateEditorFormProps {
   /** Setting this to true will cause the content to be parsed as if it is the template entity spec */
   contentIsSpec?: boolean;
   setErrorText: (errorText?: string) => void;
+
   onDryRun?: (data: JsonObject) => Promise<void>;
   fieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
@@ -104,6 +108,12 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
 
   const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();
 
+  const fields = useMemo(() => {
+    return Object.fromEntries(
+      fieldExtensions.map(({ name, component }) => [name, component]),
+    );
+  }, [fieldExtensions]);
+
   useDebounce(
     () => {
       try {
@@ -111,7 +121,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
           setSteps(undefined);
           return;
         }
-        const parsed: JsonValue = yaml.parse(content);
+        const parsed: JsonValue = yaml
+          .parseAllDocuments(content)
+          .filter(c => c)
+          .map(c => c.toJSON())[0];
 
         if (!isJsonObject(parsed)) {
           setSteps(undefined);
@@ -138,6 +151,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
           return;
         }
 
+        const fieldValidators = Object.fromEntries(
+          fieldExtensions.map(({ name, validation }) => [name, validation]),
+        );
+
         setErrorText();
         setSteps(
           parameters.flatMap(param =>
@@ -146,6 +163,9 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
                   {
                     title: String(param.title),
                     schema: param,
+                    validate: createAsyncValidators(param, fieldValidators, {
+                      apiHolder,
+                    }),
                   },
                 ]
               : [],
@@ -170,11 +190,11 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
           <Stepper
             manifest={{ steps, title: 'Template Editor' }}
             extensions={fieldExtensions}
-            onCreate={async data => {
-              await onDryRun?.(data);
+            components={fields}
+            onCreate={async options => {
+              await onDryRun?.(options);
             }}
             layouts={layouts}
-            components={{ createButtonText: onDryRun && 'Try It' }}
           />
         </ErrorBoundary>
       </div>
@@ -195,7 +215,7 @@ export function TemplateEditorFormDirectoryEditorDryRun(
   const directoryEditor = useDirectoryEditor();
   const { selectedFile } = directoryEditor;
 
-  const handleDryRun = async (values: JsonObject) => {
+  const handleDryRun = async (data: JsonObject) => {
     if (!selectedFile) {
       return;
     }
@@ -203,7 +223,7 @@ export function TemplateEditorFormDirectoryEditorDryRun(
     try {
       await dryRun.execute({
         templateContent: selectedFile.content,
-        values,
+        values: data,
         files: directoryEditor.files,
       });
       setErrorText();