Merge pull request #12952 from backstage/blam/next-scaffolder/wizard-2

scaffolder(next): Support `async` validation for `CustomFieldExtensions` and run validation for `type: object`

packages/app/src/App.tsx

@@ -91,7 +91,10 @@ import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { homePage } from './components/home/HomePage';
 import { Root } from './components/Root';
-import { LowerCaseValuePickerFieldExtension } from './components/scaffolder/customScaffolderExtensions';
+import {
+  DelayingComponentFieldExtension,
+  LowerCaseValuePickerFieldExtension,
+} from './components/scaffolder/customScaffolderExtensions';
 import { defaultPreviewTemplate } from './components/scaffolder/defaultPreviewTemplate';
 import { searchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
@@ -228,7 +231,7 @@ const routes = (
       }
     >
       <ScaffolderFieldExtensions>
-        <LowerCaseValuePickerFieldExtension />
+        <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
     </Route>
     <Route path="/explore" element={<ExplorePage />} />

packages/app/src/components/scaffolder/customScaffolderExtensions.tsx

@@ -62,3 +62,37 @@ export const LowerCaseValuePickerFieldExtension = scaffolderPlugin.provide(
     },
   }),
 );
+
+const MockDelayComponent = (
+  props: FieldExtensionComponentProps<{ test?: string }>,
+) => {
+  const { onChange, formData, rawErrors } = props;
+  return (
+    <TextField
+      label="test"
+      helperText="description"
+      value={formData?.test ?? ''}
+      onChange={({ target: { value } }) => onChange({ test: value })}
+      margin="normal"
+      error={rawErrors?.length > 0 && !formData}
+    />
+  );
+};
+
+export const DelayingComponentFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    name: 'DelayingComponent',
+    component: MockDelayComponent,
+    validation: async (
+      value: { test?: string },
+      validation: FieldValidation,
+    ) => {
+      // delay 2 seconds
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      if (value.test !== 'pass') {
+        validation.addError('value was not equal to pass');
+      }
+    },
+  }),
+);