@backstage/plugin-scaffolder-react 1.19.6-next.0 → 1.19.6

package/CHANGELOG.md

@@ -1,30 +1,15 @@
 # @backstage/plugin-scaffolder-react
 
-## 1.19.6-next.0
+## 1.19.6
 
 ### Patch Changes
 
-- 2eeca03: Scaffolder form fields in the new frontend system now use a Utility API pattern instead of multiple attachment points. The `FormFieldBlueprint` now uses this new approach, and while form fields created with older versions still work, they will produce a deprecation warning and will stop working in a future release.
-
-  As part of this change, the following alpha exports were removed:
-
-  - `formFieldsApi`
-  - `formFieldsApiRef`
-  - `ScaffolderFormFieldsApi`
-
-- 69d880e: Bump to latest zod to ensure it has the latest features
+- 5683c85: Bump to latest zod to ensure it has the latest features
 - Updated dependencies
-  - @backstage/plugin-catalog-react@1.21.6-next.0
-  - @backstage/core-components@0.18.6-next.0
-  - @backstage/frontend-plugin-api@0.14.0-next.0
-  - @backstage/core-plugin-api@1.12.2-next.0
-  - @backstage/catalog-client@1.12.1
-  - @backstage/catalog-model@1.7.6
-  - @backstage/theme@0.7.1
-  - @backstage/types@1.2.2
-  - @backstage/version-bridge@1.0.11
-  - @backstage/plugin-permission-react@0.4.40-next.0
-  - @backstage/plugin-scaffolder-common@1.7.6-next.0
+  - @backstage/frontend-plugin-api@0.13.4
+  - @backstage/core-components@0.18.6
+  - @backstage/core-plugin-api@1.12.2
+  - @backstage/plugin-catalog-react@1.21.6
 
 ## 1.19.5
 

package/dist/alpha.d.ts

@@ -1,21 +1,140 @@
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import { z } from 'zod';
+import { FieldExtensionComponentProps, CustomFieldValidator, FieldSchema, TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, CustomFieldValidator, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep, FieldExtensionComponentProps, FieldSchema } from '@backstage/plugin-scaffolder-react';
 import { JsonObject, JsonValue } from '@backstage/types';
 import * as react from 'react';
 import { ComponentType, ReactNode, PropsWithChildren, ReactElement } from 'react';
 import { TemplatePresentationV1beta3, TemplateEntityV1beta3, TaskStep } from '@backstage/plugin-scaffolder-common';
 import { UiSchema, FieldValidation, WidgetProps } from '@rjsf/utils';
-import { ApiHolder, IconComponent, AnyApiRef } from '@backstage/core-plugin-api';
+import { AnyApiRef, ApiHolder, IconComponent } from '@backstage/core-plugin-api';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
-import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
-import { z } from 'zod';
 
+/** @alpha */
+type ScaffolderFormDecoratorContext<TInput extends JsonObject = JsonObject> = {
+    input: TInput;
+    formState: Record<string, JsonValue>;
+    setFormState: (fn: (currentState: Record<string, JsonValue>) => Record<string, JsonValue>) => void;
+    setSecrets: (fn: (currentState: Record<string, string>) => Record<string, string>) => void;
+};
+/** @alpha */
+type ScaffolderFormDecorator<TInput extends JsonObject = JsonObject> = {
+    readonly $$type: '@backstage/scaffolder/FormDecorator';
+    readonly id: string;
+    readonly TInput: TInput;
+};
+/**
+ * Method for creating decorators which can be used to collect
+ * secrets from the user before submitting to the backend.
+ * @alpha
+ */
+declare function createScaffolderFormDecorator<TInputSchema extends {
+    [key in string]: (zImpl: typeof z) => z.ZodType;
+} = {
+    [key in string]: (zImpl: typeof z) => z.ZodType;
+}, TDeps extends {
+    [key in string]: AnyApiRef;
+} = {
+    [key in string]: AnyApiRef;
+}, TInput extends JsonObject = {
+    [key in keyof TInputSchema]: z.infer<ReturnType<TInputSchema[key]>>;
+}>(options: {
+    id: string;
+    schema?: {
+        input?: TInputSchema;
+    };
+    deps?: TDeps;
+    decorator: (ctx: ScaffolderFormDecoratorContext<TInput>, deps: TDeps extends {
+        [key in string]: AnyApiRef;
+    } ? {
+        [key in keyof TDeps]: TDeps[key]['T'];
+    } : never) => Promise<void>;
+}): ScaffolderFormDecorator<TInput>;
+
+/**
+ * @alpha
+ * Creates extensions that are Field Extensions for the Scaffolder
+ * */
+declare const FormDecoratorBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
+    kind: "scaffolder-form-decorator";
+    params: {
+        decorator: ScaffolderFormDecorator;
+    };
+    output: _backstage_frontend_plugin_api.ExtensionDataRef<ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>;
+    inputs: {};
+    config: {};
+    configInput: {};
+    dataRefs: {
+        formDecoratorLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>;
+    };
+}>;
+
+/** @alpha */
+type FormFieldExtensionData<TReturnValue extends z.ZodType = z.ZodType, TUiOptions extends z.ZodType = z.ZodType> = {
+    name: string;
+    component: (props: FieldExtensionComponentProps<z.output<TReturnValue>, z.output<TUiOptions>>) => JSX.Element | null;
+    validation?: CustomFieldValidator<z.output<TReturnValue>, z.output<TUiOptions>>;
+    schema?: FieldSchema<z.output<TReturnValue>, z.output<TUiOptions>>;
+};
+
+/**
+ * @alpha
+ * Creates extensions that are Field Extensions for the Scaffolder
+ * */
+declare const FormFieldBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
+    kind: "scaffolder-form-field";
+    params: {
+        field: () => Promise<FormField>;
+    };
+    output: _backstage_frontend_plugin_api.ExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
+    inputs: {};
+    config: {};
+    configInput: {};
+    dataRefs: {
+        formFieldLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
+    };
+}>;
+/**
+ * @alpha
+ * Used to create a form field binding with typechecking for compliance
+ */
+declare function createFormField<TReturnValue extends z.ZodType, TUiOptions extends z.ZodType>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField;
+
+/**
+ * @alpha
+ * @deprecated This API is no longer necessary and will be removed
+ */
+interface ScaffolderFormFieldsApi {
+    getFormFields(): Promise<FormFieldExtensionData[]>;
+}
 /** @alpha */
 interface FormField {
     readonly $$type: '@backstage/scaffolder/FormField';
 }
 
+/** @alpha */
+declare const formFieldsApi: _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+    config: {};
+    configInput: {};
+    output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+    inputs: {
+        formFields: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>, {
+            singleton: false;
+            optional: false;
+        }>;
+    };
+    kind: "api";
+    name: "form-fields";
+    params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
+}>;
+
+/**
+ * @alpha
+ * @deprecated This API is no longer necessary and will be removed
+ */
+declare const formFieldsApiRef: _backstage_frontend_plugin_api.ApiRef<ScaffolderFormFieldsApi>;
+
 /**
  * This is the parsed template schema that is returned from the {@link useTemplateSchema} hook.
  * @alpha
@@ -325,104 +444,9 @@ declare module '@backstage/theme' {
     }
 }
 
-/** @alpha */
-type ScaffolderFormDecoratorContext<TInput extends JsonObject = JsonObject> = {
-    input: TInput;
-    formState: Record<string, JsonValue>;
-    setFormState: (fn: (currentState: Record<string, JsonValue>) => Record<string, JsonValue>) => void;
-    setSecrets: (fn: (currentState: Record<string, string>) => Record<string, string>) => void;
-};
-/** @alpha */
-type ScaffolderFormDecorator<TInput extends JsonObject = JsonObject> = {
-    readonly $$type: '@backstage/scaffolder/FormDecorator';
-    readonly id: string;
-    readonly TInput: TInput;
-};
-/**
- * Method for creating decorators which can be used to collect
- * secrets from the user before submitting to the backend.
- * @alpha
- */
-declare function createScaffolderFormDecorator<TInputSchema extends {
-    [key in string]: (zImpl: typeof z) => z.ZodType;
-} = {
-    [key in string]: (zImpl: typeof z) => z.ZodType;
-}, TDeps extends {
-    [key in string]: AnyApiRef;
-} = {
-    [key in string]: AnyApiRef;
-}, TInput extends JsonObject = {
-    [key in keyof TInputSchema]: z.infer<ReturnType<TInputSchema[key]>>;
-}>(options: {
-    id: string;
-    schema?: {
-        input?: TInputSchema;
-    };
-    deps?: TDeps;
-    decorator: (ctx: ScaffolderFormDecoratorContext<TInput>, deps: TDeps extends {
-        [key in string]: AnyApiRef;
-    } ? {
-        [key in keyof TDeps]: TDeps[key]['T'];
-    } : never) => Promise<void>;
-}): ScaffolderFormDecorator<TInput>;
-
-/**
- * @alpha
- * Creates extensions that are Field Extensions for the Scaffolder
- * */
-declare const FormDecoratorBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
-    kind: "scaffolder-form-decorator";
-    params: {
-        decorator: ScaffolderFormDecorator;
-    };
-    output: _backstage_frontend_plugin_api.ExtensionDataRef<ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>;
-    inputs: {};
-    config: {};
-    configInput: {};
-    dataRefs: {
-        formDecoratorLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<ScaffolderFormDecorator, "scaffolder.form-decorator-loader", {}>;
-    };
-}>;
-
-/** @alpha */
-type FormFieldExtensionData<TReturnValue extends z.ZodType = z.ZodType, TUiOptions extends z.ZodType = z.ZodType> = {
-    name: string;
-    component: (props: FieldExtensionComponentProps<z.output<TReturnValue>, z.output<TUiOptions>>) => JSX.Element | null;
-    validation?: CustomFieldValidator<z.output<TReturnValue>, z.output<TUiOptions>>;
-    schema?: FieldSchema<z.output<TReturnValue>, z.output<TUiOptions>>;
-};
-
-/**
- * @alpha
- * Creates extensions that are Field Extensions for the Scaffolder
- * */
-declare const FormFieldBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
-    kind: "scaffolder-form-field";
-    params: {
-        field: () => Promise<FormField>;
-    };
-    output: _backstage_frontend_plugin_api.ExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
-    inputs: {};
-    config: {};
-    configInput: {};
-    dataRefs: {
-        formFieldLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
-    };
-}>;
-/**
- * @alpha
- * Used to create a form field binding with typechecking for compliance
- */
-declare function createFormField<TReturnValue extends z.ZodType, TUiOptions extends z.ZodType>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField;
-
 /** @alpha */
 declare const scaffolderReactTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"scaffolder-react", {
     readonly "workflow.noDescription": "No description";
-    readonly "stepper.backButtonText": "Back";
-    readonly "stepper.createButtonText": "Create";
-    readonly "stepper.reviewButtonText": "Review";
-    readonly "stepper.nextButtonText": "Next";
-    readonly "stepper.stepIndexLabel": "Step {{index, number}}";
     readonly "passwordWidget.content": "This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of `ui:widget: password`";
     readonly "scaffolderPageContextMenu.createLabel": "Create";
     readonly "scaffolderPageContextMenu.moreLabel": "more";
@@ -430,6 +454,11 @@ declare const scaffolderReactTranslationRef: _backstage_frontend_plugin_api.Tran
     readonly "scaffolderPageContextMenu.actionsLabel": "Installed Actions";
     readonly "scaffolderPageContextMenu.tasksLabel": "Task List";
     readonly "scaffolderPageContextMenu.templatingExtensionsLabel": "Templating Extensions";
+    readonly "stepper.backButtonText": "Back";
+    readonly "stepper.createButtonText": "Create";
+    readonly "stepper.reviewButtonText": "Review";
+    readonly "stepper.nextButtonText": "Next";
+    readonly "stepper.stepIndexLabel": "Step {{index, number}}";
     readonly "templateCategoryPicker.title": "Categories";
     readonly "templateCard.noDescription": "No description";
     readonly "templateCard.chooseButtonText": "Choose";
@@ -437,5 +466,5 @@ declare const scaffolderReactTranslationRef: _backstage_frontend_plugin_api.Tran
     readonly "templateOutputs.title": "Text Output";
 }>;
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, ReviewState, ScaffolderField, ScaffolderPageContextMenu, SecretWidget, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, scaffolderReactTranslationRef, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
-export type { BackstageOverrides, BackstageTemplateStepperClassKey, FormField, FormFieldExtensionData, FormValidation, ParsedTemplateSchema, ReviewStateProps, ScaffolderFieldProps, ScaffolderFormDecorator, ScaffolderFormDecoratorContext, ScaffolderPageContextMenuProps, ScaffolderReactComponentsNameToClassKey, ScaffolderReactTemplateCategoryPickerClassKey, StepperProps, TaskStepsProps, TemplateCardProps, TemplateGroupProps, TemplateGroupsProps, WorkflowProps };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, ReviewState, ScaffolderField, ScaffolderPageContextMenu, SecretWidget, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, formFieldsApi, formFieldsApiRef, scaffolderReactTranslationRef, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export type { BackstageOverrides, BackstageTemplateStepperClassKey, FormField, FormFieldExtensionData, FormValidation, ParsedTemplateSchema, ReviewStateProps, ScaffolderFieldProps, ScaffolderFormDecorator, ScaffolderFormDecoratorContext, ScaffolderFormFieldsApi, ScaffolderPageContextMenuProps, ScaffolderReactComponentsNameToClassKey, ScaffolderReactTemplateCategoryPickerClassKey, StepperProps, TaskStepsProps, TemplateCardProps, TemplateGroupProps, TemplateGroupsProps, WorkflowProps };

package/dist/alpha.esm.js

@@ -1,3 +1,5 @@
+export { formFieldsApi } from './next/api/FormFieldsApi.esm.js';
+export { formFieldsApiRef } from './next/api/ref.esm.js';
 export { Stepper } from './next/components/Stepper/Stepper.esm.js';
 export { createAsyncValidators } from './next/components/Stepper/createAsyncValidators.esm.js';
 export { TemplateCard } from './next/components/TemplateCard/TemplateCard.esm.js';

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alpha.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/useCustomFieldExtensions.esm.js

@@ -1,7 +1,59 @@
-import { useElementFilter } from '@backstage/core-plugin-api';
+import { useAsync, useMountEffect } from '@react-hookz/web';
+import { useApi, useElementFilter } from '@backstage/core-plugin-api';
+import '../next/api/FormFieldsApi.esm.js';
+import { formFieldsApiRef } from '../next/api/ref.esm.js';
+import '../next/components/Stepper/Stepper.esm.js';
+import 'json-schema-library';
+import 'flatted';
+import '../next/components/TemplateCard/TemplateCard.esm.js';
+import 'react/jsx-runtime';
+import '@backstage/core-components';
+import 'lodash';
+import '@backstage/catalog-model';
+import '@backstage/plugin-catalog-react';
+import '@backstage/plugin-scaffolder-common';
+import '@material-ui/core/Typography';
+import 'react';
+import '../next/components/Workflow/Workflow.esm.js';
+import '@backstage/frontend-plugin-api';
+import '@material-ui/core/Box';
+import '@material-ui/core/Paper';
+import '../translation.esm.js';
+import '../next/components/TemplateOutputs/LinkOutputs.esm.js';
+import '@material-ui/core/Button';
+import '@material-ui/icons/Description';
+import '../next/components/Form/Form.esm.js';
+import '@material-ui/core/Stepper';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepButton';
+import '@material-ui/core/StepLabel';
+import '../next/components/TaskSteps/StepIcon.esm.js';
+import 'react-use/esm/useInterval';
+import 'luxon';
+import 'humanize-duration';
+import '../next/components/TaskSteps/TaskBorder.esm.js';
+import '../next/components/TaskLogStream/TaskLogStream.esm.js';
+import '../next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js';
+import '../next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.esm.js';
+import '../next/components/ScaffolderField/ScaffolderField.esm.js';
+import '@backstage/plugin-scaffolder-react';
+import '@material-ui/core/TextField';
+import 'lodash/debounce';
+import 'qs';
+import 'react-use/esm/useAsync';
+import '../api/ref.esm.js';
+import 'lodash/cloneDeep';
+import '../next/blueprints/FormDecoratorBlueprint.esm.js';
+import '../next/blueprints/FormFieldBlueprint.esm.js';
 import { FIELD_EXTENSION_WRAPPER_KEY, FIELD_EXTENSION_KEY } from '../extensions/keys.esm.js';
 
 const useCustomFieldExtensions = (outlet) => {
+  const formFieldsApi = useApi(formFieldsApiRef);
+  const [{ result: blueprintFields }, { execute }] = useAsync(
+    () => formFieldsApi.getFormFields(),
+    []
+  );
+  useMountEffect(execute);
   const outletFields = useElementFilter(
     outlet,
     (elements) => elements.selectByComponentData({
@@ -10,7 +62,15 @@ const useCustomFieldExtensions = (outlet) => {
       key: FIELD_EXTENSION_KEY
     })
   );
-  return outletFields;
+  const blueprintsToLegacy = blueprintFields?.map(
+    (field) => ({
+      component: field.component,
+      name: field.name,
+      validation: field.validation,
+      schema: field.schema?.schema
+    })
+  );
+  return [...blueprintsToLegacy, ...outletFields];
 };
 
 export { useCustomFieldExtensions };

package/dist/hooks/useCustomFieldExtensions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomFieldExtensions.esm.js","sources":["../../src/hooks/useCustomFieldExtensions.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useElementFilter } from '@backstage/core-plugin-api';\nimport { FieldExtensionOptions } from '../extensions';\nimport {\n  FIELD_EXTENSION_KEY,\n  FIELD_EXTENSION_WRAPPER_KEY,\n} from '../extensions/keys';\n\n/**\n * Hook that returns all custom field extensions from the current outlet.\n * @public\n */\nexport const useCustomFieldExtensions = <\n  // todo(blam): this shouldn't be here, should remove this, but this is a breaking change to remove the generic.\n  TComponentDataType = FieldExtensionOptions,\n>(\n  outlet: React.ReactNode,\n) => {\n  // Get custom fields created with ScaffolderFieldExtensions\n  const outletFields = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: FIELD_EXTENSION_WRAPPER_KEY,\n      })\n      .findComponentData<TComponentDataType>({\n        key: FIELD_EXTENSION_KEY,\n      }),\n  );\n\n  return outletFields as TComponentDataType[];\n};\n"],"names":[],"mappings":";;;AA0BO,MAAM,wBAAA,GAA2B,CAItC,MAAA,KACG;AAEH,EAAA,MAAM,YAAA,GAAe,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KAC5C,SACG,qBAAA,CAAsB;AAAA,MACrB,GAAA,EAAK;AAAA,KACN,EACA,iBAAA,CAAsC;AAAA,MACrC,GAAA,EAAK;AAAA,KACN;AAAA,GACL;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}
+{"version":3,"file":"useCustomFieldExtensions.esm.js","sources":["../../src/hooks/useCustomFieldExtensions.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useAsync, useMountEffect } from '@react-hookz/web';\nimport { useApi, useElementFilter } from '@backstage/core-plugin-api';\nimport { formFieldsApiRef } from '../next';\nimport { FieldExtensionOptions } from '../extensions';\nimport {\n  FIELD_EXTENSION_KEY,\n  FIELD_EXTENSION_WRAPPER_KEY,\n} from '../extensions/keys';\n\n/**\n * Hook that returns all custom field extensions from the current outlet.\n * @public\n */\nexport const useCustomFieldExtensions = <\n  // todo(blam): this shouldn't be here, should remove this, but this is a breaking change to remove the generic.\n  TComponentDataType = FieldExtensionOptions,\n>(\n  outlet: React.ReactNode,\n) => {\n  // Get custom fields created with FormFieldBlueprint\n  const formFieldsApi = useApi(formFieldsApiRef);\n  const [{ result: blueprintFields }, { execute }] = useAsync(\n    () => formFieldsApi.getFormFields(),\n    [],\n  );\n  useMountEffect(execute);\n\n  // Get custom fields created with ScaffolderFieldExtensions\n  const outletFields = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: FIELD_EXTENSION_WRAPPER_KEY,\n      })\n      .findComponentData<TComponentDataType>({\n        key: FIELD_EXTENSION_KEY,\n      }),\n  );\n\n  // This should really be a different type moving forward, but we do this to keep type compatibility.\n  // should probably also move the defaults into the API eventually too, but that will come with the move\n  // to the new frontend system.\n  const blueprintsToLegacy: FieldExtensionOptions[] = blueprintFields?.map(\n    field => ({\n      component: field.component,\n      name: field.name,\n      validation: field.validation,\n      schema: field.schema?.schema,\n    }),\n  );\n\n  return [...blueprintsToLegacy, ...outletFields] as TComponentDataType[];\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,wBAAA,GAA2B,CAItC,MAAA,KACG;AAEH,EAAA,MAAM,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAA,MAAM,CAAC,EAAE,MAAA,EAAQ,eAAA,IAAmB,EAAE,OAAA,EAAS,CAAA,GAAI,QAAA;AAAA,IACjD,MAAM,cAAc,aAAA,EAAc;AAAA,IAClC;AAAC,GACH;AACA,EAAA,cAAA,CAAe,OAAO,CAAA;AAGtB,EAAA,MAAM,YAAA,GAAe,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KAC5C,SACG,qBAAA,CAAsB;AAAA,MACrB,GAAA,EAAK;AAAA,KACN,EACA,iBAAA,CAAsC;AAAA,MACrC,GAAA,EAAK;AAAA,KACN;AAAA,GACL;AAKA,EAAA,MAAM,qBAA8C,eAAA,EAAiB,GAAA;AAAA,IACnE,CAAA,KAAA,MAAU;AAAA,MACR,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,YAAY,KAAA,CAAM,UAAA;AAAA,MAClB,MAAA,EAAQ,MAAM,MAAA,EAAQ;AAAA,KACxB;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,GAAG,kBAAA,EAAoB,GAAG,YAAY,CAAA;AAChD;;;;"}

package/dist/next/api/FormFieldsApi.esm.js

@@ -0,0 +1,42 @@
+import { ApiBlueprint, createExtensionInput } from '@backstage/frontend-plugin-api';
+import { formFieldsApiRef } from './ref.esm.js';
+import '../blueprints/FormDecoratorBlueprint.esm.js';
+import { FormFieldBlueprint } from '../blueprints/FormFieldBlueprint.esm.js';
+import { OpaqueFormField } from '../../packages/scaffolder-internal/src/wiring/InternalFormField.esm.js';
+
+class DefaultScaffolderFormFieldsApi {
+  formFieldLoaders;
+  constructor(formFieldLoaders = []) {
+    this.formFieldLoaders = formFieldLoaders;
+  }
+  async getFormFields() {
+    const formFields = await Promise.all(
+      this.formFieldLoaders.map((loader) => loader())
+    );
+    const internalFormFields = formFields.map(OpaqueFormField.toInternal);
+    return internalFormFields;
+  }
+}
+const formFieldsApi = ApiBlueprint.makeWithOverrides({
+  name: "form-fields",
+  inputs: {
+    formFields: createExtensionInput([
+      FormFieldBlueprint.dataRefs.formFieldLoader
+    ])
+  },
+  factory(originalFactory, { inputs }) {
+    const formFieldLoaders = inputs.formFields.map(
+      (e) => e.get(FormFieldBlueprint.dataRefs.formFieldLoader)
+    );
+    return originalFactory(
+      (defineParams) => defineParams({
+        api: formFieldsApiRef,
+        deps: {},
+        factory: () => new DefaultScaffolderFormFieldsApi(formFieldLoaders)
+      })
+    );
+  }
+});
+
+export { formFieldsApi };
+//# sourceMappingURL=FormFieldsApi.esm.js.map

package/dist/next/api/FormFieldsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldsApi.esm.js","sources":["../../../src/next/api/FormFieldsApi.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ApiBlueprint,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { formFieldsApiRef } from './ref';\nimport { FormField, ScaffolderFormFieldsApi } from './types';\nimport { FormFieldBlueprint } from '../blueprints';\nimport { OpaqueFormField } from '@internal/scaffolder';\n\nclass DefaultScaffolderFormFieldsApi implements ScaffolderFormFieldsApi {\n  private readonly formFieldLoaders: Array<() => Promise<FormField>>;\n\n  constructor(formFieldLoaders: Array<() => Promise<FormField>> = []) {\n    this.formFieldLoaders = formFieldLoaders;\n  }\n\n  async getFormFields() {\n    const formFields = await Promise.all(\n      this.formFieldLoaders.map(loader => loader()),\n    );\n\n    const internalFormFields = formFields.map(OpaqueFormField.toInternal);\n\n    return internalFormFields;\n  }\n}\n\n/** @alpha */\nexport const formFieldsApi = ApiBlueprint.makeWithOverrides({\n  name: 'form-fields',\n  inputs: {\n    formFields: createExtensionInput([\n      FormFieldBlueprint.dataRefs.formFieldLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formFieldLoaders = inputs.formFields.map(e =>\n      e.get(FormFieldBlueprint.dataRefs.formFieldLoader),\n    );\n\n    return originalFactory(defineParams =>\n      defineParams({\n        api: formFieldsApiRef,\n        deps: {},\n        factory: () => new DefaultScaffolderFormFieldsApi(formFieldLoaders),\n      }),\n    );\n  },\n});\n"],"names":[],"mappings":";;;;;;AAyBA,MAAM,8BAAA,CAAkE;AAAA,EACrD,gBAAA;AAAA,EAEjB,WAAA,CAAY,gBAAA,GAAoD,EAAC,EAAG;AAClE,IAAA,IAAA,CAAK,gBAAA,GAAmB,gBAAA;AAAA,EAC1B;AAAA,EAEA,MAAM,aAAA,GAAgB;AACpB,IAAA,MAAM,UAAA,GAAa,MAAM,OAAA,CAAQ,GAAA;AAAA,MAC/B,IAAA,CAAK,gBAAA,CAAiB,GAAA,CAAI,CAAA,MAAA,KAAU,QAAQ;AAAA,KAC9C;AAEA,IAAA,MAAM,kBAAA,GAAqB,UAAA,CAAW,GAAA,CAAI,eAAA,CAAgB,UAAU,CAAA;AAEpE,IAAA,OAAO,kBAAA;AAAA,EACT;AACF;AAGO,MAAM,aAAA,GAAgB,aAAa,iBAAA,CAAkB;AAAA,EAC1D,IAAA,EAAM,aAAA;AAAA,EACN,MAAA,EAAQ;AAAA,IACN,YAAY,oBAAA,CAAqB;AAAA,MAC/B,mBAAmB,QAAA,CAAS;AAAA,KAC7B;AAAA,GACH;AAAA,EACA,OAAA,CAAQ,eAAA,EAAiB,EAAE,MAAA,EAAO,EAAG;AACnC,IAAA,MAAM,gBAAA,GAAmB,OAAO,UAAA,CAAW,GAAA;AAAA,MAAI,CAAA,CAAA,KAC7C,CAAA,CAAE,GAAA,CAAI,kBAAA,CAAmB,SAAS,eAAe;AAAA,KACnD;AAEA,IAAA,OAAO,eAAA;AAAA,MAAgB,kBACrB,YAAA,CAAa;AAAA,QACX,GAAA,EAAK,gBAAA;AAAA,QACL,MAAM,EAAC;AAAA,QACP,OAAA,EAAS,MAAM,IAAI,8BAAA,CAA+B,gBAAgB;AAAA,OACnE;AAAA,KACH;AAAA,EACF;AACF,CAAC;;;;"}

package/dist/next/api/ref.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/frontend-plugin-api';
+
+const formFieldsApiRef = createApiRef({
+  id: "plugin.scaffolder.form-fields"
+});
+
+export { formFieldsApiRef };
+//# sourceMappingURL=ref.esm.js.map

package/dist/next/api/ref.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.esm.js","sources":["../../../src/next/api/ref.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createApiRef } from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormFieldsApi } from './types';\n\n/**\n * @alpha\n * @deprecated This API is no longer necessary and will be removed\n */\nexport const formFieldsApiRef = createApiRef<ScaffolderFormFieldsApi>({\n  id: 'plugin.scaffolder.form-fields',\n});\n"],"names":[],"mappings":";;AAuBO,MAAM,mBAAmB,YAAA,CAAsC;AAAA,EACpE,EAAA,EAAI;AACN,CAAC;;;;"}

package/dist/next/blueprints/FormFieldBlueprint.esm.js

@@ -7,7 +7,10 @@ const formFieldExtensionDataRef = createExtensionDataRef().with({
 });
 const FormFieldBlueprint = createExtensionBlueprint({
   kind: "scaffolder-form-field",
-  attachTo: { id: "api:scaffolder/form-fields", input: "formFields" },
+  attachTo: [
+    { id: "page:scaffolder", input: "formFields" },
+    { id: "api:scaffolder/form-fields", input: "formFields" }
+  ],
   dataRefs: {
     formFieldLoader: formFieldExtensionDataRef
   },

package/dist/next/blueprints/FormFieldBlueprint.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldBlueprint.esm.js","sources":["../../../src/next/blueprints/FormFieldBlueprint.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  createExtensionBlueprint,\n  createExtensionDataRef,\n} from '@backstage/frontend-plugin-api';\nimport { z } from 'zod';\n\nimport { OpaqueFormField } from '@internal/scaffolder';\nimport { FormFieldExtensionData } from './types';\nimport { FormField } from '../api';\n\nconst formFieldExtensionDataRef = createExtensionDataRef<\n  () => Promise<FormField>\n>().with({\n  id: 'scaffolder.form-field-loader',\n});\n\n/**\n * @alpha\n * Creates extensions that are Field Extensions for the Scaffolder\n * */\nexport const FormFieldBlueprint = createExtensionBlueprint({\n  kind: 'scaffolder-form-field',\n  attachTo: { id: 'api:scaffolder/form-fields', input: 'formFields' },\n  dataRefs: {\n    formFieldLoader: formFieldExtensionDataRef,\n  },\n  output: [formFieldExtensionDataRef],\n  *factory(params: { field: () => Promise<FormField> }) {\n    yield formFieldExtensionDataRef(params.field);\n  },\n});\n\n/**\n * @alpha\n * Used to create a form field binding with typechecking for compliance\n */\nexport function createFormField<\n  TReturnValue extends z.ZodType,\n  TUiOptions extends z.ZodType,\n>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField {\n  return OpaqueFormField.createInstance('v1', opts);\n}\n"],"names":[],"mappings":";;;;AAyBA,MAAM,yBAAA,GAA4B,sBAAA,EAEhC,CAAE,IAAA,CAAK;AAAA,EACP,EAAA,EAAI;AACN,CAAC,CAAA;AAMM,MAAM,qBAAqB,wBAAA,CAAyB;AAAA,EACzD,IAAA,EAAM,uBAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,4BAAA,EAA8B,OAAO,YAAA,EAAa;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,MAAA,EAAQ,CAAC,yBAAyB,CAAA;AAAA,EAClC,CAAC,QAAQ,MAAA,EAA6C;AACpD,IAAA,MAAM,yBAAA,CAA0B,OAAO,KAAK,CAAA;AAAA,EAC9C;AACF,CAAC;AAMM,SAAS,gBAGd,IAAA,EAAmE;AACnE,EAAA,OAAO,eAAA,CAAgB,cAAA,CAAe,IAAA,EAAM,IAAI,CAAA;AAClD;;;;"}
+{"version":3,"file":"FormFieldBlueprint.esm.js","sources":["../../../src/next/blueprints/FormFieldBlueprint.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  createExtensionBlueprint,\n  createExtensionDataRef,\n} from '@backstage/frontend-plugin-api';\nimport { z } from 'zod';\n\nimport { OpaqueFormField } from '@internal/scaffolder';\nimport { FormFieldExtensionData } from './types';\nimport { FormField } from '../api';\n\nconst formFieldExtensionDataRef = createExtensionDataRef<\n  () => Promise<FormField>\n>().with({\n  id: 'scaffolder.form-field-loader',\n});\n\n/**\n * @alpha\n * Creates extensions that are Field Extensions for the Scaffolder\n * */\nexport const FormFieldBlueprint = createExtensionBlueprint({\n  kind: 'scaffolder-form-field',\n  attachTo: [\n    { id: 'page:scaffolder', input: 'formFields' },\n    { id: 'api:scaffolder/form-fields', input: 'formFields' },\n  ],\n  dataRefs: {\n    formFieldLoader: formFieldExtensionDataRef,\n  },\n  output: [formFieldExtensionDataRef],\n  *factory(params: { field: () => Promise<FormField> }) {\n    yield formFieldExtensionDataRef(params.field);\n  },\n});\n\n/**\n * @alpha\n * Used to create a form field binding with typechecking for compliance\n */\nexport function createFormField<\n  TReturnValue extends z.ZodType,\n  TUiOptions extends z.ZodType,\n>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField {\n  return OpaqueFormField.createInstance('v1', opts);\n}\n"],"names":[],"mappings":";;;;AAyBA,MAAM,yBAAA,GAA4B,sBAAA,EAEhC,CAAE,IAAA,CAAK;AAAA,EACP,EAAA,EAAI;AACN,CAAC,CAAA;AAMM,MAAM,qBAAqB,wBAAA,CAAyB;AAAA,EACzD,IAAA,EAAM,uBAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,EAAE,EAAA,EAAI,iBAAA,EAAmB,KAAA,EAAO,YAAA,EAAa;AAAA,IAC7C,EAAE,EAAA,EAAI,4BAAA,EAA8B,KAAA,EAAO,YAAA;AAAa,GAC1D;AAAA,EACA,QAAA,EAAU;AAAA,IACR,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,MAAA,EAAQ,CAAC,yBAAyB,CAAA;AAAA,EAClC,CAAC,QAAQ,MAAA,EAA6C;AACpD,IAAA,MAAM,yBAAA,CAA0B,OAAO,KAAK,CAAA;AAAA,EAC9C;AACF,CAAC;AAMM,SAAS,gBAGd,IAAA,EAAmE;AACnE,EAAA,OAAO,eAAA,CAAgB,cAAA,CAAe,IAAA,EAAM,IAAI,CAAA;AAClD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.19.6-next.0",
+  "version": "1.19.6",
   "description": "A frontend library that helps other Backstage plugins interact with the Scaffolder",
   "backstage": {
     "role": "web-library",
@@ -66,17 +66,17 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.12.1",
-    "@backstage/catalog-model": "1.7.6",
-    "@backstage/core-components": "0.18.6-next.0",
-    "@backstage/core-plugin-api": "1.12.2-next.0",
-    "@backstage/frontend-plugin-api": "0.14.0-next.0",
-    "@backstage/plugin-catalog-react": "1.21.6-next.0",
-    "@backstage/plugin-permission-react": "0.4.40-next.0",
-    "@backstage/plugin-scaffolder-common": "1.7.6-next.0",
-    "@backstage/theme": "0.7.1",
-    "@backstage/types": "1.2.2",
-    "@backstage/version-bridge": "1.0.11",
+    "@backstage/catalog-client": "^1.12.1",
+    "@backstage/catalog-model": "^1.7.6",
+    "@backstage/core-components": "^0.18.6",
+    "@backstage/core-plugin-api": "^1.12.2",
+    "@backstage/frontend-plugin-api": "^0.13.4",
+    "@backstage/plugin-catalog-react": "^1.21.6",
+    "@backstage/plugin-permission-react": "^0.4.39",
+    "@backstage/plugin-scaffolder-common": "^1.7.5",
+    "@backstage/theme": "^0.7.1",
+    "@backstage/types": "^1.2.2",
+    "@backstage/version-bridge": "^1.0.11",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -104,12 +104,12 @@
     "zod-to-json-schema": "^3.25.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.35.3-next.0",
-    "@backstage/core-app-api": "1.19.4-next.0",
-    "@backstage/plugin-catalog": "1.32.3-next.0",
-    "@backstage/plugin-catalog-common": "1.1.8-next.0",
-    "@backstage/plugin-permission-common": "0.9.5-next.0",
-    "@backstage/test-utils": "1.7.15-next.0",
+    "@backstage/cli": "^0.35.3",
+    "@backstage/core-app-api": "^1.19.4",
+    "@backstage/plugin-catalog": "^1.32.2",
+    "@backstage/plugin-catalog-common": "^1.1.7",
+    "@backstage/plugin-permission-common": "^0.9.5",
+    "@backstage/test-utils": "^1.7.14",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",