@backstage/plugin-scaffolder 1.28.0-next.3 → 1.29.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @backstage/plugin-scaffolder
 
+## 1.29.0-next.0
+
+### Minor Changes
+
+- 9d864ff: Allowed passing `ui:disabled` for disabling the input field of all the pickers.
+
+### Patch Changes
+
+- 6a3fa48: Fixes DryRunContext not forwarding the correct Scaffolder Secrets to the DryRun API
+- b3b7c9c: Updated the alpha `page:scaffolder` extension to accept `formFields` input, matching the updated `FormFieldBlueprint`.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.16.0-next.0
+  - @backstage/plugin-scaffolder-react@1.14.6-next.0
+  - @backstage/frontend-plugin-api@0.9.6-next.0
+  - @backstage/core-compat-api@0.3.7-next.0
+  - @backstage/integration-react@1.2.4
+
+## 1.28.0
+
+### Minor Changes
+
+- 17088d2: Updating the `TaskLogStream` to take up all space in a running task, and also show the last line of the log by default
+- 5d469c9: Added support for autocompletion of GitHub branches in scaffolder
+- 8e67e4a: Added support for autocompletion to GithubRepoPicker component
+
+### Patch Changes
+
+- 82300ea: Added support for experimental form decorators when dry-running templates in the template editor.
+- eb3d91a: Use the custom error page if provided for displaying errors instead of the default error page
+- 3107f1f: Fixed a bug in the BitbucketRepoBranchPicker component that crashed the scaffolder
+- fe44946: Fixed bug of passing wrong value to `onChange` handler when using `GitLab` autocomplete
+- 3edf7e7: Add schema output return type to the `makeFieldSchema` function return
+- 1e935f0: Added conditional rendering of `oneOf` output schemas on the Installed Actions page for scaffolder actions
+- 58ec9e7: Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits.
+- 65d7020: Use template title for ongoing task page header
+- Updated dependencies
+  - @backstage/plugin-scaffolder-react@1.14.5
+  - @backstage/core-components@0.16.4
+  - @backstage/plugin-catalog-react@1.15.2
+  - @backstage/frontend-plugin-api@0.9.5
+  - @backstage/integration-react@1.2.4
+  - @backstage/core-compat-api@0.3.6
+  - @backstage/core-plugin-api@1.10.4
+  - @backstage/plugin-permission-react@0.4.31
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/errors@1.2.7
+  - @backstage/integration@1.16.1
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-scaffolder-common@1.5.9
+
 ## 1.28.0-next.3
 
 ### Minor Changes

package/dist/alpha/components/TemplateEditorPage/DryRunContext.esm.js

@@ -1,7 +1,8 @@
 import yaml from 'yaml';
 import { useApi } from '@backstage/core-plugin-api';
 import React, { createContext, useState, useRef, useCallback, useMemo, useContext } from 'react';
-import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
+import { scaffolderApiRef, useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
+import { useFormDecorators } from '../../hooks/useFormDecorators.esm.js';
 
 const MAX_CONTENT_SIZE = 64 * 1024;
 const CHUNK_SIZE = 32 * 1024;
@@ -25,7 +26,9 @@ function base64EncodeContent(content) {
   }
 }
 function DryRunProvider(props) {
+  const decorators = useFormDecorators();
   const scaffolderApi = useApi(scaffolderApiRef);
+  const { secrets: contextSecrets } = useTemplateSecrets();
   const [state, setState] = useState({
     results: [],
     selectedResult: void 0
@@ -63,10 +66,15 @@ function DryRunProvider(props) {
         throw new Error("Scaffolder API does not support dry-run");
       }
       const parsed = yaml.parse(options.templateContent);
+      const { formState: values, secrets } = await decorators.run({
+        formState: options.values,
+        secrets: contextSecrets,
+        manifest: parsed?.spec
+      });
       const response = await scaffolderApi.dryRun({
         template: parsed,
-        values: options.values,
-        secrets: {},
+        values,
+        secrets,
         directoryContents: options.files.map((file) => ({
           path: file.path,
           base64Content: base64EncodeContent(file.content)
@@ -81,7 +89,7 @@ function DryRunProvider(props) {
         selectedResult: prevState.selectedResult ?? result
       }));
     },
-    [scaffolderApi]
+    [scaffolderApi, decorators, contextSecrets]
   );
   const dryRun = useMemo(
     () => ({

package/dist/alpha/components/TemplateEditorPage/DryRunContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DryRunContext.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/DryRunContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 yaml from 'yaml';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { JsonObject } from '@backstage/types';\nimport React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  scaffolderApiRef,\n  ScaffolderDryRunResponse,\n} from '@backstage/plugin-scaffolder-react';\n\nconst MAX_CONTENT_SIZE = 64 * 1024;\nconst CHUNK_SIZE = 32 * 1024;\n\ninterface DryRunOptions {\n  templateContent: string;\n  values: JsonObject;\n  files: Array<{ path: string; content: string }>;\n}\n\nexport interface DryRunResult extends ScaffolderDryRunResponse {\n  id: number;\n}\n\ninterface DryRun {\n  results: DryRunResult[];\n  selectedResult: DryRunResult | undefined;\n\n  selectResult(id: number): void;\n  deleteResult(id: number): void;\n  execute(options: DryRunOptions): Promise<void>;\n}\n\nconst DryRunContext = createContext<DryRun | undefined>(undefined);\n\ninterface DryRunProviderProps {\n  children: ReactNode;\n}\n\nexport function base64EncodeContent(content: string): string {\n  if (content.length > MAX_CONTENT_SIZE) {\n    return window.btoa('<file too large>');\n  }\n\n  try {\n    return window.btoa(content);\n  } catch {\n    const decoder = new TextEncoder();\n    const buffer = decoder.encode(content);\n\n    const chunks = new Array<string>();\n    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {\n      chunks.push(\n        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE)),\n      );\n    }\n    return window.btoa(chunks.join(''));\n  }\n}\n\nexport function DryRunProvider(props: DryRunProviderProps) {\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const [state, setState] = useState<\n    Pick<DryRun, 'results' | 'selectedResult'>\n  >({\n    results: [],\n    selectedResult: undefined,\n  });\n  const idRef = useRef(1);\n\n  const selectResult = useCallback((id: number) => {\n    setState(prevState => {\n      const result = prevState.results.find(r => r.id === id);\n      if (result === prevState.selectedResult) {\n        return prevState;\n      }\n      return {\n        results: prevState.results,\n        selectedResult: result,\n      };\n    });\n  }, []);\n\n  const deleteResult = useCallback((id: number) => {\n    setState(prevState => {\n      const index = prevState.results.findIndex(r => r.id === id);\n      if (index === -1) {\n        return prevState;\n      }\n      const newResults = prevState.results.slice();\n      const [deleted] = newResults.splice(index, 1);\n      return {\n        results: newResults,\n        selectedResult:\n          prevState.selectedResult?.id === deleted.id\n            ? newResults[0]\n            : prevState.selectedResult,\n      };\n    });\n  }, []);\n\n  const execute = useCallback(\n    async (options: DryRunOptions) => {\n      if (!scaffolderApi.dryRun) {\n        throw new Error('Scaffolder API does not support dry-run');\n      }\n\n      const parsed = yaml.parse(options.templateContent);\n\n      const response = await scaffolderApi.dryRun({\n        template: parsed,\n        values: options.values,\n        secrets: {},\n        directoryContents: options.files.map(file => ({\n          path: file.path,\n          base64Content: base64EncodeContent(file.content),\n        })),\n      });\n\n      const result = {\n        ...response,\n        id: idRef.current++,\n      };\n\n      setState(prevState => ({\n        results: [...prevState.results, result],\n        selectedResult: prevState.selectedResult ?? result,\n      }));\n    },\n    [scaffolderApi],\n  );\n\n  const dryRun = useMemo(\n    () => ({\n      ...state,\n      selectResult,\n      deleteResult,\n      execute,\n    }),\n    [state, selectResult, deleteResult, execute],\n  );\n\n  return (\n    <DryRunContext.Provider value={dryRun}>\n      {props.children}\n    </DryRunContext.Provider>\n  );\n}\n\nexport function useDryRun(): DryRun {\n  const value = useContext(DryRunContext);\n  if (!value) {\n    throw new Error('must be used within a DryRunProvider');\n  }\n  return value;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DryRunContext.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/DryRunContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 yaml from 'yaml';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { JsonObject, JsonValue } from '@backstage/types';\nimport React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  scaffolderApiRef,\n  ScaffolderDryRunResponse,\n  useTemplateSecrets,\n} from '@backstage/plugin-scaffolder-react';\nimport { useFormDecorators } from '../../hooks/useFormDecorators';\n\nconst MAX_CONTENT_SIZE = 64 * 1024;\nconst CHUNK_SIZE = 32 * 1024;\n\ninterface DryRunOptions {\n  templateContent: string;\n  values: JsonObject;\n  files: Array<{ path: string; content: string }>;\n}\n\nexport interface DryRunResult extends ScaffolderDryRunResponse {\n  id: number;\n}\n\ninterface DryRun {\n  results: DryRunResult[];\n  selectedResult: DryRunResult | undefined;\n\n  selectResult(id: number): void;\n  deleteResult(id: number): void;\n  execute(options: DryRunOptions): Promise<void>;\n}\n\nconst DryRunContext = createContext<DryRun | undefined>(undefined);\n\ninterface DryRunProviderProps {\n  children: ReactNode;\n}\n\nexport function base64EncodeContent(content: string): string {\n  if (content.length > MAX_CONTENT_SIZE) {\n    return window.btoa('<file too large>');\n  }\n\n  try {\n    return window.btoa(content);\n  } catch {\n    const decoder = new TextEncoder();\n    const buffer = decoder.encode(content);\n\n    const chunks = new Array<string>();\n    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {\n      chunks.push(\n        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE)),\n      );\n    }\n    return window.btoa(chunks.join(''));\n  }\n}\n\nexport function DryRunProvider(props: DryRunProviderProps) {\n  const decorators = useFormDecorators();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const { secrets: contextSecrets } = useTemplateSecrets();\n  const [state, setState] = useState<\n    Pick<DryRun, 'results' | 'selectedResult'>\n  >({\n    results: [],\n    selectedResult: undefined,\n  });\n  const idRef = useRef(1);\n\n  const selectResult = useCallback((id: number) => {\n    setState(prevState => {\n      const result = prevState.results.find(r => r.id === id);\n      if (result === prevState.selectedResult) {\n        return prevState;\n      }\n      return {\n        results: prevState.results,\n        selectedResult: result,\n      };\n    });\n  }, []);\n\n  const deleteResult = useCallback((id: number) => {\n    setState(prevState => {\n      const index = prevState.results.findIndex(r => r.id === id);\n      if (index === -1) {\n        return prevState;\n      }\n      const newResults = prevState.results.slice();\n      const [deleted] = newResults.splice(index, 1);\n      return {\n        results: newResults,\n        selectedResult:\n          prevState.selectedResult?.id === deleted.id\n            ? newResults[0]\n            : prevState.selectedResult,\n      };\n    });\n  }, []);\n\n  const execute = useCallback(\n    async (options: DryRunOptions) => {\n      if (!scaffolderApi.dryRun) {\n        throw new Error('Scaffolder API does not support dry-run');\n      }\n\n      const parsed = yaml.parse(options.templateContent);\n\n      const { formState: values, secrets } = await decorators.run({\n        formState: options.values as Record<string, JsonValue>,\n        secrets: contextSecrets,\n        manifest: parsed?.spec,\n      });\n\n      const response = await scaffolderApi.dryRun({\n        template: parsed,\n        values,\n        secrets,\n        directoryContents: options.files.map(file => ({\n          path: file.path,\n          base64Content: base64EncodeContent(file.content),\n        })),\n      });\n\n      const result = {\n        ...response,\n        id: idRef.current++,\n      };\n\n      setState(prevState => ({\n        results: [...prevState.results, result],\n        selectedResult: prevState.selectedResult ?? result,\n      }));\n    },\n    [scaffolderApi, decorators, contextSecrets],\n  );\n\n  const dryRun = useMemo(\n    () => ({\n      ...state,\n      selectResult,\n      deleteResult,\n      execute,\n    }),\n    [state, selectResult, deleteResult, execute],\n  );\n\n  return (\n    <DryRunContext.Provider value={dryRun}>\n      {props.children}\n    </DryRunContext.Provider>\n  );\n}\n\nexport function useDryRun(): DryRun {\n  const value = useContext(DryRunContext);\n  if (!value) {\n    throw new Error('must be used within a DryRunProvider');\n  }\n  return value;\n}\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/TemplateWizardPage/TemplateWizardPage.esm.js

@@ -31,7 +31,7 @@ const TemplateWizardPage = (props) => {
     name: templateName
   });
   const { manifest } = useTemplateParameterSchema(templateRef);
-  const decorators = useFormDecorators({ manifest });
+  const decorators = useFormDecorators();
   const { value: editUrl } = useAsync(async () => {
     const data = await catalogApi.getEntityByRef(templateRef);
     return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];
@@ -43,7 +43,8 @@ const TemplateWizardPage = (props) => {
     setIsCreating(true);
     const { formState: values, secrets } = await decorators.run({
       formState: initialValues,
-      secrets: contextSecrets
+      secrets: contextSecrets,
+      manifest
     });
     const { taskId } = await scaffolderApi.scaffold({
       templateRef,

package/dist/alpha/components/TemplateWizardPage/TemplateWizardPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../../src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React, { useState } from 'react';\nimport { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport {\n  Workflow,\n  useTemplateParameterSchema,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page, Progress } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\nimport { useFormDecorators } from '../../hooks';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets: contextSecrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [isCreating, setIsCreating] = useState(false);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { manifest } = useTemplateParameterSchema(templateRef);\n  const decorators = useFormDecorators({ manifest });\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (initialValues: Record<string, JsonValue>) => {\n    if (isCreating) {\n      return;\n    }\n\n    setIsCreating(true);\n\n    const { formState: values, secrets } = await decorators.run({\n      formState: initialValues,\n      secrets: contextSecrets,\n    });\n\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride={t('templateWizardPage.pageTitle')}\n          title={t('templateWizardPage.title')}\n          subtitle={t('templateWizardPage.subtitle')}\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        {isCreating && <Progress />}\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../../src/alpha/components/TemplateWizardPage/TemplateWizardPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React, { useState } from 'react';\nimport { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport {\n  Workflow,\n  useTemplateParameterSchema,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page, Progress } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\nimport { useFormDecorators } from '../../hooks';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets: contextSecrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [isCreating, setIsCreating] = useState(false);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { manifest } = useTemplateParameterSchema(templateRef);\n  const decorators = useFormDecorators();\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (initialValues: Record<string, JsonValue>) => {\n    if (isCreating) {\n      return;\n    }\n\n    setIsCreating(true);\n\n    const { formState: values, secrets } = await decorators.run({\n      formState: initialValues,\n      secrets: contextSecrets,\n      manifest,\n    });\n\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride={t('templateWizardPage.pageTitle')}\n          title={t('templateWizardPage.title')}\n          subtitle={t('templateWizardPage.subtitle')}\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        {isCreating && <Progress />}\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/extensions.esm.js

@@ -1,5 +1,5 @@
 import { convertLegacyRouteRef, compatWrapper } from '@backstage/core-compat-api';
-import { PageBlueprint, NavItemBlueprint, ApiBlueprint, createApiFactory, discoveryApiRef, fetchApiRef, identityApiRef } from '@backstage/frontend-plugin-api';
+import { PageBlueprint, createExtensionInput, NavItemBlueprint, ApiBlueprint, createApiFactory, discoveryApiRef, fetchApiRef, identityApiRef } from '@backstage/frontend-plugin-api';
 import React from 'react';
 import { rootRouteRef } from '../routes.esm.js';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
@@ -8,11 +8,25 @@ import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderClient } from '../api.esm.js';
 
-const scaffolderPage = PageBlueprint.make({
-  params: {
-    routeRef: convertLegacyRouteRef(rootRouteRef),
-    defaultPath: "/create",
-    loader: () => import('../components/Router/index.esm.js').then((m) => compatWrapper(/* @__PURE__ */ React.createElement(m.Router, null)))
+const scaffolderPage = PageBlueprint.makeWithOverrides({
+  inputs: {
+    formFields: createExtensionInput([
+      FormFieldBlueprint.dataRefs.formFieldLoader
+    ])
+  },
+  factory(originalFactory, { inputs }) {
+    const formFieldLoaders = inputs.formFields.map(
+      (i) => i.get(FormFieldBlueprint.dataRefs.formFieldLoader)
+    );
+    return originalFactory({
+      routeRef: convertLegacyRouteRef(rootRouteRef),
+      defaultPath: "/create",
+      loader: () => import('../components/Router/Router.esm.js').then(
+        (m) => compatWrapper(
+          /* @__PURE__ */ React.createElement(m.InternalRouter, { formFieldLoaders })
+        )
+      )
+    });
   }
 });
 const scaffolderNavItem = NavItemBlueprint.make({

package/dist/alpha/extensions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.esm.js","sources":["../../src/alpha/extensions.tsx"],"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 */\n\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  NavItemBlueprint,\n  PageBlueprint,\n  ApiBlueprint,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n  identityApiRef,\n} from '@backstage/frontend-plugin-api';\nimport React from 'react';\nimport { rootRouteRef } from '../routes';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport { FormFieldBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { ScaffolderClient } from '../api';\n\nexport const scaffolderPage = PageBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    defaultPath: '/create',\n    loader: () =>\n      import('../components/Router').then(m => compatWrapper(<m.Router />)),\n  },\n});\n\nexport const scaffolderNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Create...',\n    icon: CreateComponentIcon,\n  },\n});\n\nexport const repoUrlPickerFormField = FormFieldBlueprint.make({\n  name: 'repo-url-picker',\n  params: {\n    field: () => import('./fields/RepoUrlPicker').then(m => m.RepoUrlPicker),\n  },\n});\n\nexport const scaffolderApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: scaffolderApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        fetchApi: fetchApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) =>\n        new ScaffolderClient({\n          discoveryApi,\n          scmIntegrationsApi,\n          fetchApi,\n          identityApi,\n        }),\n    }),\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAqCa,MAAA,cAAA,GAAiB,cAAc,IAAK,CAAA;AAAA,EAC/C,MAAQ,EAAA;AAAA,IACN,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,WAAa,EAAA,SAAA;AAAA,IACb,MAAQ,EAAA,MACN,OAAO,mCAAsB,CAAE,CAAA,IAAA,CAAK,CAAK,CAAA,KAAA,aAAA,iBAAe,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,MAAF,EAAA,IAAS,CAAE,CAAC;AAAA;AAE1E,CAAC;AAEY,MAAA,iBAAA,GAAoB,iBAAiB,IAAK,CAAA;AAAA,EACrD,MAAQ,EAAA;AAAA,IACN,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,KAAO,EAAA,WAAA;AAAA,IACP,IAAM,EAAA;AAAA;AAEV,CAAC;AAEY,MAAA,sBAAA,GAAyB,mBAAmB,IAAK,CAAA;AAAA,EAC5D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAO,+BAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAE3E,CAAC;AAEY,MAAA,aAAA,GAAgB,aAAa,IAAK,CAAA;AAAA,EAC7C,MAAQ,EAAA;AAAA,IACN,SAAS,gBAAiB,CAAA;AAAA,MACxB,GAAK,EAAA,gBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,kBAAoB,EAAA,qBAAA;AAAA,QACpB,QAAU,EAAA,WAAA;AAAA,QACV,WAAa,EAAA;AAAA,OACf;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,oBAAoB,QAAU,EAAA,WAAA,EACtD,KAAA,IAAI,gBAAiB,CAAA;AAAA,QACnB,YAAA;AAAA,QACA,kBAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACD;AAAA,KACJ;AAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"extensions.esm.js","sources":["../../src/alpha/extensions.tsx"],"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 */\n\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  NavItemBlueprint,\n  PageBlueprint,\n  ApiBlueprint,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n  identityApiRef,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport React from 'react';\nimport { rootRouteRef } from '../routes';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport { FormFieldBlueprint } from '@backstage/plugin-scaffolder-react/alpha';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { ScaffolderClient } from '../api';\n\nexport const scaffolderPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    formFields: createExtensionInput([\n      FormFieldBlueprint.dataRefs.formFieldLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formFieldLoaders = inputs.formFields.map(i =>\n      i.get(FormFieldBlueprint.dataRefs.formFieldLoader),\n    );\n    return originalFactory({\n      routeRef: convertLegacyRouteRef(rootRouteRef),\n      defaultPath: '/create',\n      loader: () =>\n        import('../components/Router/Router').then(m =>\n          compatWrapper(\n            <m.InternalRouter formFieldLoaders={formFieldLoaders} />,\n          ),\n        ),\n    });\n  },\n});\n\nexport const scaffolderNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Create...',\n    icon: CreateComponentIcon,\n  },\n});\n\nexport const repoUrlPickerFormField = FormFieldBlueprint.make({\n  name: 'repo-url-picker',\n  params: {\n    field: () => import('./fields/RepoUrlPicker').then(m => m.RepoUrlPicker),\n  },\n});\n\nexport const scaffolderApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: scaffolderApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        fetchApi: fetchApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) =>\n        new ScaffolderClient({\n          discoveryApi,\n          scmIntegrationsApi,\n          fetchApi,\n          identityApi,\n        }),\n    }),\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAsCa,MAAA,cAAA,GAAiB,cAAc,iBAAkB,CAAA;AAAA,EAC5D,MAAQ,EAAA;AAAA,IACN,YAAY,oBAAqB,CAAA;AAAA,MAC/B,mBAAmB,QAAS,CAAA;AAAA,KAC7B;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,gBAAA,GAAmB,OAAO,UAAW,CAAA,GAAA;AAAA,MAAI,CAC7C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,kBAAA,CAAmB,SAAS,eAAe;AAAA,KACnD;AACA,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,MAC5C,WAAa,EAAA,SAAA;AAAA,MACb,MAAQ,EAAA,MACN,OAAO,oCAA6B,CAAE,CAAA,IAAA;AAAA,QAAK,CACzC,CAAA,KAAA,aAAA;AAAA,0BACG,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,cAAF,EAAA,EAAiB,gBAAoC,EAAA;AAAA;AACxD;AACF,KACH,CAAA;AAAA;AAEL,CAAC;AAEY,MAAA,iBAAA,GAAoB,iBAAiB,IAAK,CAAA;AAAA,EACrD,MAAQ,EAAA;AAAA,IACN,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,KAAO,EAAA,WAAA;AAAA,IACP,IAAM,EAAA;AAAA;AAEV,CAAC;AAEY,MAAA,sBAAA,GAAyB,mBAAmB,IAAK,CAAA;AAAA,EAC5D,IAAM,EAAA,iBAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAO,+BAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAE3E,CAAC;AAEY,MAAA,aAAA,GAAgB,aAAa,IAAK,CAAA;AAAA,EAC7C,MAAQ,EAAA;AAAA,IACN,SAAS,gBAAiB,CAAA;AAAA,MACxB,GAAK,EAAA,gBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,kBAAoB,EAAA,qBAAA;AAAA,QACpB,QAAU,EAAA,WAAA;AAAA,QACV,WAAa,EAAA;AAAA,OACf;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,oBAAoB,QAAU,EAAA,WAAA,EACtD,KAAA,IAAI,gBAAiB,CAAA;AAAA,QACnB,YAAA;AAAA,QACA,kBAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACD;AAAA,KACJ;AAAA;AAEL,CAAC;;;;"}

package/dist/alpha/hooks/useFormDecorators.esm.js

@@ -1,13 +1,11 @@
 import { useApi, errorApiRef, useApiHolder } from '@backstage/core-plugin-api';
 import { formDecoratorsApiRef } from '../api/ref.esm.js';
 import useAsync from 'react-use/esm/useAsync';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { OpaqueFormDecorator } from '../../packages/scaffolder-internal/src/wiring/InternalFormDecorator.esm.js';
 import '../../packages/scaffolder-internal/src/wiring/InternalFormField.esm.js';
 
-const useFormDecorators = ({
-  manifest
-}) => {
+const useFormDecorators = () => {
   const formDecoratorsApi = useApi(formDecoratorsApiRef);
   const errorApi = useApi(errorApiRef);
   const { value: decorators } = useAsync(
@@ -39,13 +37,14 @@ const useFormDecorators = ({
     }
     return decoratorsMap;
   }, [apiHolder, decorators, errorApi]);
-  return {
-    run: async (opts) => {
+  const run = useCallback(
+    async (opts) => {
       let formState = { ...opts.formState };
       let secrets = { ...opts.secrets };
-      if (manifest?.EXPERIMENTAL_formDecorators) {
+      const formDecorators = opts.manifest?.EXPERIMENTAL_formDecorators;
+      if (formDecorators) {
         await Promise.all(
-          manifest.EXPERIMENTAL_formDecorators.map(async (decorator) => {
+          formDecorators.map(async (decorator) => {
             const formDecorator = boundDecorators?.get(decorator.id);
             if (!formDecorator) {
               errorApi.post(
@@ -67,8 +66,15 @@ const useFormDecorators = ({
         );
       }
       return { formState, secrets };
-    }
-  };
+    },
+    [boundDecorators, errorApi]
+  );
+  return useMemo(
+    () => ({
+      run
+    }),
+    [run]
+  );
 };
 
 export { useFormDecorators };

package/dist/alpha/hooks/useFormDecorators.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormDecorators.esm.js","sources":["../../../src/alpha/hooks/useFormDecorators.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 */\nimport { errorApiRef, useApi, useApiHolder } from '@backstage/core-plugin-api';\nimport { formDecoratorsApiRef } from '../api/ref';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useMemo } from 'react';\nimport { ScaffolderFormDecoratorContext } from '@backstage/plugin-scaffolder-react/alpha';\nimport { OpaqueFormDecorator } from '@internal/scaffolder';\nimport { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\n\n/** @internal */\ntype BoundFieldDecorator = {\n  decorator: (ctx: ScaffolderFormDecoratorContext) => Promise<void>;\n};\n\nexport const useFormDecorators = ({\n  manifest,\n}: {\n  manifest?: TemplateParameterSchema;\n}) => {\n  const formDecoratorsApi = useApi(formDecoratorsApiRef);\n  const errorApi = useApi(errorApiRef);\n  const { value: decorators } = useAsync(\n    () => formDecoratorsApi.getFormDecorators(),\n    [],\n  );\n  const apiHolder = useApiHolder();\n\n  const boundDecorators = useMemo(() => {\n    const decoratorsMap = new Map<string, BoundFieldDecorator>();\n\n    for (const decorator of decorators ?? []) {\n      try {\n        const { decorator: decoratorFn, deps } =\n          OpaqueFormDecorator.toInternal(decorator);\n\n        const resolvedDeps = Object.entries(deps ?? {}).map(([key, value]) => {\n          const api = apiHolder.get(value);\n          if (!api) {\n            throw new Error(\n              `Failed to resolve apiRef ${value.id} for form decorator ${decorator.id} it will be disabled`,\n            );\n          }\n          return [key, api];\n        });\n\n        decoratorsMap.set(decorator.id, {\n          decorator: ctx => decoratorFn(ctx, Object.fromEntries(resolvedDeps)),\n        });\n      } catch (ex) {\n        errorApi.post(ex);\n        return undefined;\n      }\n    }\n    return decoratorsMap;\n  }, [apiHolder, decorators, errorApi]);\n\n  return {\n    run: async (opts: {\n      formState: Record<string, JsonValue>;\n      secrets: Record<string, string>;\n    }) => {\n      let formState: Record<string, JsonValue> = { ...opts.formState };\n      let secrets: Record<string, string> = { ...opts.secrets };\n\n      if (manifest?.EXPERIMENTAL_formDecorators) {\n        // for each of the form decorators, go and call the decorator with the context\n        await Promise.all(\n          manifest.EXPERIMENTAL_formDecorators.map(async decorator => {\n            const formDecorator = boundDecorators?.get(decorator.id);\n            if (!formDecorator) {\n              errorApi.post(\n                new Error(`Failed to find form decorator ${decorator.id}`),\n              );\n              return;\n            }\n\n            await formDecorator.decorator({\n              setSecrets: (\n                handler: (\n                  oldState: Record<string, string>,\n                ) => Record<string, string>,\n              ) => {\n                secrets = { ...handler(secrets) };\n              },\n              setFormState: (\n                handler: (\n                  oldState: Record<string, JsonValue>,\n                ) => Record<string, JsonValue>,\n              ) => {\n                formState = { ...handler(formState) };\n              },\n              formState,\n              input: decorator.input ?? {},\n            });\n          }),\n        );\n      }\n\n      return { formState, secrets };\n    },\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFormDecorators.esm.js","sources":["../../../src/alpha/hooks/useFormDecorators.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 */\nimport { errorApiRef, useApi, useApiHolder } from '@backstage/core-plugin-api';\nimport { formDecoratorsApiRef } from '../api/ref';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useCallback, useMemo } from 'react';\nimport { ScaffolderFormDecoratorContext } from '@backstage/plugin-scaffolder-react/alpha';\nimport { OpaqueFormDecorator } from '@internal/scaffolder';\nimport { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\n\n/** @internal */\ntype BoundFieldDecorator = {\n  decorator: (ctx: ScaffolderFormDecoratorContext) => Promise<void>;\n};\n\nexport const useFormDecorators = () => {\n  const formDecoratorsApi = useApi(formDecoratorsApiRef);\n  const errorApi = useApi(errorApiRef);\n  const { value: decorators } = useAsync(\n    () => formDecoratorsApi.getFormDecorators(),\n    [],\n  );\n  const apiHolder = useApiHolder();\n\n  const boundDecorators = useMemo(() => {\n    const decoratorsMap = new Map<string, BoundFieldDecorator>();\n\n    for (const decorator of decorators ?? []) {\n      try {\n        const { decorator: decoratorFn, deps } =\n          OpaqueFormDecorator.toInternal(decorator);\n\n        const resolvedDeps = Object.entries(deps ?? {}).map(([key, value]) => {\n          const api = apiHolder.get(value);\n          if (!api) {\n            throw new Error(\n              `Failed to resolve apiRef ${value.id} for form decorator ${decorator.id} it will be disabled`,\n            );\n          }\n          return [key, api];\n        });\n\n        decoratorsMap.set(decorator.id, {\n          decorator: ctx => decoratorFn(ctx, Object.fromEntries(resolvedDeps)),\n        });\n      } catch (ex) {\n        errorApi.post(ex);\n        return undefined;\n      }\n    }\n    return decoratorsMap;\n  }, [apiHolder, decorators, errorApi]);\n\n  const run = useCallback(\n    async (opts: {\n      formState: Record<string, JsonValue>;\n      secrets: Record<string, string>;\n      manifest?: TemplateParameterSchema;\n    }) => {\n      let formState: Record<string, JsonValue> = { ...opts.formState };\n      let secrets: Record<string, string> = { ...opts.secrets };\n\n      const formDecorators = opts.manifest?.EXPERIMENTAL_formDecorators;\n      if (formDecorators) {\n        // for each of the form decorators, go and call the decorator with the context\n        await Promise.all(\n          formDecorators.map(async decorator => {\n            const formDecorator = boundDecorators?.get(decorator.id);\n            if (!formDecorator) {\n              errorApi.post(\n                new Error(`Failed to find form decorator ${decorator.id}`),\n              );\n              return;\n            }\n\n            await formDecorator.decorator({\n              setSecrets: (\n                handler: (\n                  oldState: Record<string, string>,\n                ) => Record<string, string>,\n              ) => {\n                secrets = { ...handler(secrets) };\n              },\n              setFormState: (\n                handler: (\n                  oldState: Record<string, JsonValue>,\n                ) => Record<string, JsonValue>,\n              ) => {\n                formState = { ...handler(formState) };\n              },\n              formState,\n              input: decorator.input ?? {},\n            });\n          }),\n        );\n      }\n\n      return { formState, secrets };\n    },\n    [boundDecorators, errorApi],\n  );\n\n  return useMemo(\n    () => ({\n      run,\n    }),\n    [run],\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha.d.ts

@@ -334,8 +334,6 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         };
     }>;
     "page:scaffolder": _backstage_frontend_plugin_api.ExtensionDefinition<{
-        kind: "page";
-        name: undefined;
         config: {
             path: string | undefined;
         };
@@ -345,7 +343,14 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
-        inputs: {};
+        inputs: {
+            formFields: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>, {
+                singleton: false;
+                optional: false;
+            }>;
+        };
+        kind: "page";
+        name: undefined;
         params: {
             defaultPath: string;
             loader: () => Promise<JSX.Element>;

package/dist/components/Router/Router.esm.js

@@ -15,8 +15,11 @@ import { CustomFieldsPage } from '../../alpha/components/TemplateEditorPage/Cust
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { taskReadPermission, templateManagementPermission } from '@backstage/plugin-scaffolder-common/alpha';
 import { useApp } from '@backstage/core-plugin-api';
+import { useAsync, useMountEffect } from '@react-hookz/web';
+import { OpaqueFormField } from '../../packages/scaffolder-internal/src/wiring/InternalFormField.esm.js';
+import '../../packages/scaffolder-internal/src/wiring/InternalFormDecorator.esm.js';
 
-const Router = (props) => {
+const InternalRouter = (props) => {
   const {
     components: {
       TemplateCardComponent,
@@ -29,10 +32,12 @@ const Router = (props) => {
   } = props;
   const outlet = useOutlet() || props.children;
   const customFieldExtensions = useCustomFieldExtensions(outlet);
+  const loadedFieldExtensions = useFormFieldLoaders(props.formFieldLoaders);
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
   const fieldExtensions = [
     ...customFieldExtensions,
+    ...loadedFieldExtensions,
     ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
       ({ name }) => !customFieldExtensions.some(
         (customFieldExtension) => customFieldExtension.name === name
@@ -133,6 +138,19 @@ const Router = (props) => {
     }
   ), /* @__PURE__ */ React.createElement(Route, { path: "*", element: /* @__PURE__ */ React.createElement(NotFoundErrorPage, null) }));
 };
+const Router = (props) => {
+  return /* @__PURE__ */ React.createElement(InternalRouter, { ...props });
+};
+function useFormFieldLoaders(formFieldLoaders) {
+  const [{ result: loadedFieldExtensions }, { execute }] = useAsync(async () => {
+    const loaded = await Promise.all(
+      (formFieldLoaders ?? []).map((loader) => loader())
+    );
+    return loaded.map((f) => OpaqueFormField.toInternal(f));
+  }, []);
+  useMountEffect(execute);
+  return loadedFieldExtensions;
+}
 
-export { Router };
+export { InternalRouter, Router };
 //# sourceMappingURL=Router.esm.js.map

package/dist/components/Router/Router.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Router.esm.js","sources":["../../../src/components/Router/Router.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React, { PropsWithChildren } from 'react';\nimport { Routes, Route, useOutlet } from 'react-router-dom';\n\nimport {\n  FieldExtensionOptions,\n  FormProps,\n  ReviewStepProps,\n  TemplateGroupFilter,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  ScaffolderTaskOutput,\n  SecretsContextProvider,\n  useCustomFieldExtensions,\n  useCustomLayouts,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';\n\nimport {\n  actionsRouteRef,\n  editorRouteRef,\n  customFieldsRouteRef,\n  editRouteRef,\n  scaffolderListTaskRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n  templateFormRouteRef,\n} from '../../routes';\n\nimport { ActionsPage } from '../../components/ActionsPage';\nimport { ListTasksPage } from '../../components/ListTasksPage';\n\nimport {\n  TemplateListPageProps,\n  TemplateWizardPageProps,\n} from '@backstage/plugin-scaffolder/alpha';\nimport { TemplateListPage, TemplateWizardPage } from '../../alpha/components';\nimport { OngoingTask } from '../OngoingTask';\nimport {\n  TemplateFormPage,\n  TemplateIntroPage,\n  TemplateEditorPage,\n  CustomFieldsPage,\n} from '../../alpha/components/TemplateEditorPage';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskReadPermission,\n  templateManagementPermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\nimport { useApp } from '@backstage/core-plugin-api';\n\n/**\n * The Props for the Scaffolder Router\n *\n * @public\n */\nexport type RouterProps = {\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n    TemplateCardComponent?: React.ComponentType<{\n      template: TemplateEntityV1beta3;\n    }>;\n    TaskPageComponent?: React.ComponentType<PropsWithChildren<{}>>;\n    EXPERIMENTAL_TemplateOutputsComponent?: React.ComponentType<{\n      output?: ScaffolderTaskOutput;\n    }>;\n    EXPERIMENTAL_TemplateListPageComponent?: React.ComponentType<TemplateListPageProps>;\n    EXPERIMENTAL_TemplateWizardPageComponent?: React.ComponentType<TemplateWizardPageProps>;\n  };\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n  defaultPreviewTemplate?: string;\n  formProps?: FormProps;\n  contextMenu?: {\n    /** Whether to show a link to the template editor */\n    editor?: boolean;\n    /** Whether to show a link to the actions documentation */\n    actions?: boolean;\n    /** Whether to show a link to the tasks page */\n    tasks?: boolean;\n    /** Whether to show a link to the create page (on /create subroutes) */\n    create?: boolean;\n  };\n};\n\n/**\n * The Scaffolder Router\n *\n * @public\n */\nexport const Router = (props: PropsWithChildren<RouterProps>) => {\n  const {\n    components: {\n      TemplateCardComponent,\n      TaskPageComponent = OngoingTask,\n      ReviewStepComponent,\n      EXPERIMENTAL_TemplateOutputsComponent: TemplateOutputsComponent,\n      EXPERIMENTAL_TemplateListPageComponent:\n        TemplateListPageComponent = TemplateListPage,\n      EXPERIMENTAL_TemplateWizardPageComponent:\n        TemplateWizardPageComponent = TemplateWizardPage,\n    } = {},\n  } = props;\n  const outlet = useOutlet() || props.children;\n  const customFieldExtensions =\n    useCustomFieldExtensions<FieldExtensionOptions>(outlet);\n  const app = useApp();\n  const { NotFoundErrorPage } = app.getComponents();\n\n  const fieldExtensions = [\n    ...customFieldExtensions,\n    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(\n      ({ name }) =>\n        !customFieldExtensions.some(\n          customFieldExtension => customFieldExtension.name === name,\n        ),\n    ),\n  ] as FieldExtensionOptions[];\n\n  const customLayouts = useCustomLayouts(outlet);\n\n  return (\n    <Routes>\n      <Route\n        path=\"/\"\n        element={\n          <TemplateListPageComponent\n            TemplateCardComponent={TemplateCardComponent}\n            contextMenu={props.contextMenu}\n            groups={props.groups}\n            templateFilter={props.templateFilter}\n            headerOptions={props.headerOptions}\n          />\n        }\n      />\n      <Route\n        path={selectedTemplateRouteRef.path}\n        element={\n          <SecretsContextProvider>\n            <TemplateWizardPageComponent\n              headerOptions={props.headerOptions}\n              customFieldExtensions={fieldExtensions}\n              layouts={customLayouts}\n              components={{ ReviewStepComponent }}\n              formProps={props.formProps}\n            />\n          </SecretsContextProvider>\n        }\n      />\n      <Route\n        path={scaffolderTaskRouteRef.path}\n        element={\n          <RequirePermission permission={taskReadPermission}>\n            <TaskPageComponent\n              TemplateOutputsComponent={TemplateOutputsComponent}\n            />\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={editRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateIntroPage />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={customFieldsRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <CustomFieldsPage fieldExtensions={fieldExtensions} />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={templateFormRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateFormPage\n                layouts={customLayouts}\n                formProps={props.formProps}\n                fieldExtensions={fieldExtensions}\n              />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n\n      <Route\n        path={actionsRouteRef.path}\n        element={<ActionsPage contextMenu={props.contextMenu} />}\n      />\n      <Route\n        path={scaffolderListTaskRouteRef.path}\n        element={\n          <RequirePermission permission={taskReadPermission}>\n            <ListTasksPage contextMenu={props.contextMenu} />\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={editorRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateEditorPage\n                layouts={customLayouts}\n                formProps={props.formProps}\n                fieldExtensions={fieldExtensions}\n              />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route path=\"*\" element={<NotFoundErrorPage />} />\n    </Routes>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Router.esm.js","sources":["../../../src/components/Router/Router.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React, { PropsWithChildren } from 'react';\nimport { Routes, Route, useOutlet } from 'react-router-dom';\n\nimport {\n  FieldExtensionOptions,\n  FormProps,\n  ReviewStepProps,\n  TemplateGroupFilter,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  ScaffolderTaskOutput,\n  SecretsContextProvider,\n  useCustomFieldExtensions,\n  useCustomLayouts,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';\n\nimport {\n  actionsRouteRef,\n  editorRouteRef,\n  customFieldsRouteRef,\n  editRouteRef,\n  scaffolderListTaskRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n  templateFormRouteRef,\n} from '../../routes';\n\nimport { ActionsPage } from '../../components/ActionsPage';\nimport { ListTasksPage } from '../../components/ListTasksPage';\n\nimport {\n  TemplateListPageProps,\n  TemplateWizardPageProps,\n} from '@backstage/plugin-scaffolder/alpha';\nimport { TemplateListPage, TemplateWizardPage } from '../../alpha/components';\nimport { OngoingTask } from '../OngoingTask';\nimport {\n  TemplateFormPage,\n  TemplateIntroPage,\n  TemplateEditorPage,\n  CustomFieldsPage,\n} from '../../alpha/components/TemplateEditorPage';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskReadPermission,\n  templateManagementPermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { FormField, OpaqueFormField } from '@internal/scaffolder';\nimport { useAsync, useMountEffect } from '@react-hookz/web';\n\n/**\n * The Props for the Scaffolder Router\n *\n * @public\n */\nexport type RouterProps = {\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n    TemplateCardComponent?: React.ComponentType<{\n      template: TemplateEntityV1beta3;\n    }>;\n    TaskPageComponent?: React.ComponentType<PropsWithChildren<{}>>;\n    EXPERIMENTAL_TemplateOutputsComponent?: React.ComponentType<{\n      output?: ScaffolderTaskOutput;\n    }>;\n    EXPERIMENTAL_TemplateListPageComponent?: React.ComponentType<TemplateListPageProps>;\n    EXPERIMENTAL_TemplateWizardPageComponent?: React.ComponentType<TemplateWizardPageProps>;\n  };\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n  defaultPreviewTemplate?: string;\n  formProps?: FormProps;\n  contextMenu?: {\n    /** Whether to show a link to the template editor */\n    editor?: boolean;\n    /** Whether to show a link to the actions documentation */\n    actions?: boolean;\n    /** Whether to show a link to the tasks page */\n    tasks?: boolean;\n    /** Whether to show a link to the create page (on /create subroutes) */\n    create?: boolean;\n  };\n};\n\n/**\n * Internal router with additional props that aren't available in the public API\n * for the old frontend system.\n *\n * @internal\n */\nexport const InternalRouter = (\n  props: PropsWithChildren<\n    RouterProps & { formFieldLoaders?: Array<() => Promise<FormField>> }\n  >,\n) => {\n  const {\n    components: {\n      TemplateCardComponent,\n      TaskPageComponent = OngoingTask,\n      ReviewStepComponent,\n      EXPERIMENTAL_TemplateOutputsComponent: TemplateOutputsComponent,\n      EXPERIMENTAL_TemplateListPageComponent:\n        TemplateListPageComponent = TemplateListPage,\n      EXPERIMENTAL_TemplateWizardPageComponent:\n        TemplateWizardPageComponent = TemplateWizardPage,\n    } = {},\n  } = props;\n  const outlet = useOutlet() || props.children;\n  const customFieldExtensions = useCustomFieldExtensions(outlet);\n  const loadedFieldExtensions = useFormFieldLoaders(props.formFieldLoaders);\n\n  const app = useApp();\n  const { NotFoundErrorPage } = app.getComponents();\n\n  const fieldExtensions = [\n    ...customFieldExtensions,\n    ...loadedFieldExtensions,\n    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(\n      ({ name }) =>\n        !customFieldExtensions.some(\n          customFieldExtension => customFieldExtension.name === name,\n        ),\n    ),\n  ] as FieldExtensionOptions[];\n\n  const customLayouts = useCustomLayouts(outlet);\n\n  return (\n    <Routes>\n      <Route\n        path=\"/\"\n        element={\n          <TemplateListPageComponent\n            TemplateCardComponent={TemplateCardComponent}\n            contextMenu={props.contextMenu}\n            groups={props.groups}\n            templateFilter={props.templateFilter}\n            headerOptions={props.headerOptions}\n          />\n        }\n      />\n      <Route\n        path={selectedTemplateRouteRef.path}\n        element={\n          <SecretsContextProvider>\n            <TemplateWizardPageComponent\n              headerOptions={props.headerOptions}\n              customFieldExtensions={fieldExtensions}\n              layouts={customLayouts}\n              components={{ ReviewStepComponent }}\n              formProps={props.formProps}\n            />\n          </SecretsContextProvider>\n        }\n      />\n      <Route\n        path={scaffolderTaskRouteRef.path}\n        element={\n          <RequirePermission permission={taskReadPermission}>\n            <TaskPageComponent\n              TemplateOutputsComponent={TemplateOutputsComponent}\n            />\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={editRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateIntroPage />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={customFieldsRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <CustomFieldsPage fieldExtensions={fieldExtensions} />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={templateFormRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateFormPage\n                layouts={customLayouts}\n                formProps={props.formProps}\n                fieldExtensions={fieldExtensions}\n              />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n\n      <Route\n        path={actionsRouteRef.path}\n        element={<ActionsPage contextMenu={props.contextMenu} />}\n      />\n      <Route\n        path={scaffolderListTaskRouteRef.path}\n        element={\n          <RequirePermission permission={taskReadPermission}>\n            <ListTasksPage contextMenu={props.contextMenu} />\n          </RequirePermission>\n        }\n      />\n      <Route\n        path={editorRouteRef.path}\n        element={\n          <RequirePermission permission={templateManagementPermission}>\n            <SecretsContextProvider>\n              <TemplateEditorPage\n                layouts={customLayouts}\n                formProps={props.formProps}\n                fieldExtensions={fieldExtensions}\n              />\n            </SecretsContextProvider>\n          </RequirePermission>\n        }\n      />\n      <Route path=\"*\" element={<NotFoundErrorPage />} />\n    </Routes>\n  );\n};\n\n/**\n * The Scaffolder Router\n *\n * @public\n */\nexport const Router = (props: PropsWithChildren<RouterProps>) => {\n  return <InternalRouter {...props} />;\n};\n\nfunction useFormFieldLoaders(\n  formFieldLoaders?: Array<() => Promise<FormField>>,\n) {\n  const [{ result: loadedFieldExtensions }, { execute }] =\n    useAsync(async () => {\n      const loaded = await Promise.all(\n        (formFieldLoaders ?? []).map(loader => loader()),\n      );\n      return loaded.map(f => OpaqueFormField.toInternal(f));\n    }, []);\n  useMountEffect(execute);\n  return loadedFieldExtensions;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fields/EntityPicker/EntityPicker.esm.js

@@ -29,6 +29,7 @@ const EntityPicker = (props) => {
   const catalogFilter = buildCatalogFilter(uiSchema);
   const defaultKind = uiSchema["ui:options"]?.defaultKind;
   const defaultNamespace = uiSchema["ui:options"]?.defaultNamespace || void 0;
+  const isDisabled = uiSchema?.["ui:disabled"] ?? false;
   const catalogApi = useApi(catalogApiRef);
   const entityPresentationApi = useApi(entityPresentationApiRef);
   const { value: entities, loading } = useAsync(async () => {
@@ -106,7 +107,7 @@ const EntityPicker = (props) => {
     /* @__PURE__ */ React.createElement(
       Autocomplete,
       {
-        disabled: required && !allowArbitraryValues && entities?.catalogEntities.length === 1,
+        disabled: isDisabled || required && !allowArbitraryValues && entities?.catalogEntities.length === 1,
         id: idSchema?.$id,
         value: selectedEntity,
         loading,
@@ -128,6 +129,7 @@ const EntityPicker = (props) => {
             FormHelperTextProps: { margin: "dense", style: { marginLeft: 0 } },
             variant: "outlined",
             required,
+            disabled: isDisabled,
             InputProps: params.InputProps
           }
         ),

package/dist/components/fields/EntityPicker/EntityPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPicker.esm.js","sources":["../../../../src/components/fields/EntityPicker/EntityPicker.tsx"],"sourcesContent":["/*\n * Copyright 2021 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  type EntityFilterQuery,\n  CATALOG_FILTER_EXISTS,\n} from '@backstage/catalog-client';\nimport {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  EntityDisplayName,\n  EntityRefPresentationSnapshot,\n  catalogApiRef,\n  entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\nimport Autocomplete, {\n  AutocompleteChangeReason,\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport React, { useCallback, useEffect } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  EntityPickerFilterQueryValue,\n  EntityPickerProps,\n  EntityPickerUiOptions,\n  EntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport { EntityPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `EntityPicker`\n * field extension.\n *\n * @public\n */\nexport const EntityPicker = (props: EntityPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    onChange,\n    schema: {\n      title = t('fields.entityPicker.title'),\n      description = t('fields.entityPicker.description'),\n    },\n    required,\n    uiSchema,\n    rawErrors,\n    formData,\n    idSchema,\n  } = props;\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n\n  const { value: entities, loading } = useAsync(async () => {\n    const fields = [\n      'metadata.name',\n      'metadata.namespace',\n      'metadata.title',\n      'kind',\n    ];\n    const { items } = await catalogApi.getEntities(\n      catalogFilter\n        ? { filter: catalogFilter, fields }\n        : { filter: undefined, fields },\n    );\n\n    const entityRefToPresentation = new Map<\n      string,\n      EntityRefPresentationSnapshot\n    >(\n      await Promise.all(\n        items.map(async item => {\n          const presentation = await entityPresentationApi.forEntity(item)\n            .promise;\n          return [stringifyEntityRef(item), presentation] as [\n            string,\n            EntityRefPresentationSnapshot,\n          ];\n        }),\n      ),\n    );\n\n    return { catalogEntities: items, entityRefToPresentation };\n  });\n\n  const allowArbitraryValues =\n    uiSchema['ui:options']?.allowArbitraryValues ?? true;\n\n  const getLabel = useCallback(\n    (freeSoloValue: string) => {\n      try {\n        // Will throw if defaultKind or defaultNamespace are not set\n        const parsedRef = parseEntityRef(freeSoloValue, {\n          defaultKind,\n          defaultNamespace,\n        });\n\n        return stringifyEntityRef(parsedRef);\n      } catch (err) {\n        return freeSoloValue;\n      }\n    },\n    [defaultKind, defaultNamespace],\n  );\n\n  const onSelect = useCallback(\n    (_: any, ref: string | Entity | null, reason: AutocompleteChangeReason) => {\n      // ref can either be a string from free solo entry or\n      if (typeof ref !== 'string') {\n        // if ref does not exist: pass 'undefined' to trigger validation for required value\n        onChange(ref ? stringifyEntityRef(ref as Entity) : undefined);\n      } else {\n        if (reason === 'blur' || reason === 'create-option') {\n          // Add in default namespace, etc.\n          let entityRef = ref;\n          try {\n            // Attempt to parse the entity ref into it's full form.\n            entityRef = stringifyEntityRef(\n              parseEntityRef(ref as string, {\n                defaultKind,\n                defaultNamespace,\n              }),\n            );\n          } catch (err) {\n            // If the passed in value isn't an entity ref, do nothing.\n          }\n          // We need to check against formData here as that's the previous value for this field.\n          if (formData !== ref || allowArbitraryValues) {\n            onChange(entityRef);\n          }\n        }\n      }\n    },\n    [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n  );\n\n  // Since free solo can be enabled, attempt to parse as a full entity ref first, then fall\n  // back to the given value.\n  const selectedEntity =\n    entities?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ??\n    (allowArbitraryValues && formData ? getLabel(formData) : '');\n\n  useEffect(() => {\n    if (\n      required &&\n      !allowArbitraryValues &&\n      entities?.catalogEntities.length === 1 &&\n      selectedEntity === ''\n    ) {\n      onChange(stringifyEntityRef(entities.catalogEntities[0]));\n    }\n  }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !formData}\n    >\n      <Autocomplete\n        disabled={\n          required &&\n          !allowArbitraryValues &&\n          entities?.catalogEntities.length === 1\n        }\n        id={idSchema?.$id}\n        value={selectedEntity}\n        loading={loading}\n        onChange={onSelect}\n        options={entities?.catalogEntities || []}\n        getOptionLabel={option =>\n          // option can be a string due to freeSolo.\n          typeof option === 'string'\n            ? option\n            : entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n                ?.entityRef!\n        }\n        autoSelect\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\n        filterOptions={createFilterOptions<Entity>({\n          stringify: option =>\n            entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </FormControl>\n  );\n};\n\n/**\n * Converts a especial `{exists: true}` value to the `CATALOG_FILTER_EXISTS` symbol.\n *\n * @param value - The value to convert.\n * @returns The converted value.\n */\nfunction convertOpsValues(\n  value: Exclude<EntityPickerFilterQueryValue, Array<any>>,\n): string | symbol {\n  if (typeof value === 'object' && value.exists) {\n    return CATALOG_FILTER_EXISTS;\n  }\n  return value?.toString();\n}\n\n/**\n * Converts schema filters to entity filter query, replacing `{exists:true}` values\n * with the constant `CATALOG_FILTER_EXISTS`.\n *\n * @param schemaFilters - An object containing schema filters with keys as filter names\n * and values as filter values.\n * @returns An object with the same keys as the input object, but with `{exists:true}` values\n * transformed to `CATALOG_FILTER_EXISTS` symbol.\n */\nfunction convertSchemaFiltersToQuery(\n  schemaFilters: EntityPickerFilterQuery,\n): Exclude<EntityFilterQuery, Array<any>> {\n  const query: EntityFilterQuery = {};\n\n  for (const [key, value] of Object.entries(schemaFilters)) {\n    if (Array.isArray(value)) {\n      query[key] = value;\n    } else {\n      query[key] = convertOpsValues(value);\n    }\n  }\n\n  return query;\n}\n\n/**\n * Builds an `EntityFilterQuery` based on the `uiSchema` passed in.\n * If `catalogFilter` is specified in the `uiSchema`, it is converted to a `EntityFilterQuery`.\n * If `allowedKinds` is specified in the `uiSchema` will support the legacy `allowedKinds` option.\n *\n * @param uiSchema The `uiSchema` of an `EntityPicker` component.\n * @returns An `EntityFilterQuery` based on the `uiSchema`, or `undefined` if `catalogFilter` is not specified in the `uiSchema`.\n */\nfunction buildCatalogFilter(\n  uiSchema: EntityPickerProps['uiSchema'],\n): EntityFilterQuery | undefined {\n  const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n  const catalogFilter: EntityPickerUiOptions['catalogFilter'] | undefined =\n    uiSchema['ui:options']?.catalogFilter ||\n    (allowedKinds && { kind: allowedKinds });\n\n  if (!catalogFilter) {\n    return undefined;\n  }\n\n  if (Array.isArray(catalogFilter)) {\n    return catalogFilter.map(convertSchemaFiltersToQuery);\n  }\n\n  return convertSchemaFiltersToQuery(catalogFilter);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityPicker.esm.js","sources":["../../../../src/components/fields/EntityPicker/EntityPicker.tsx"],"sourcesContent":["/*\n * Copyright 2021 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  type EntityFilterQuery,\n  CATALOG_FILTER_EXISTS,\n} from '@backstage/catalog-client';\nimport {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  EntityDisplayName,\n  EntityRefPresentationSnapshot,\n  catalogApiRef,\n  entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\nimport Autocomplete, {\n  AutocompleteChangeReason,\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport React, { useCallback, useEffect } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  EntityPickerFilterQueryValue,\n  EntityPickerProps,\n  EntityPickerUiOptions,\n  EntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport { EntityPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `EntityPicker`\n * field extension.\n *\n * @public\n */\nexport const EntityPicker = (props: EntityPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    onChange,\n    schema: {\n      title = t('fields.entityPicker.title'),\n      description = t('fields.entityPicker.description'),\n    },\n    required,\n    uiSchema,\n    rawErrors,\n    formData,\n    idSchema,\n  } = props;\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n\n  const { value: entities, loading } = useAsync(async () => {\n    const fields = [\n      'metadata.name',\n      'metadata.namespace',\n      'metadata.title',\n      'kind',\n    ];\n    const { items } = await catalogApi.getEntities(\n      catalogFilter\n        ? { filter: catalogFilter, fields }\n        : { filter: undefined, fields },\n    );\n\n    const entityRefToPresentation = new Map<\n      string,\n      EntityRefPresentationSnapshot\n    >(\n      await Promise.all(\n        items.map(async item => {\n          const presentation = await entityPresentationApi.forEntity(item)\n            .promise;\n          return [stringifyEntityRef(item), presentation] as [\n            string,\n            EntityRefPresentationSnapshot,\n          ];\n        }),\n      ),\n    );\n\n    return { catalogEntities: items, entityRefToPresentation };\n  });\n\n  const allowArbitraryValues =\n    uiSchema['ui:options']?.allowArbitraryValues ?? true;\n\n  const getLabel = useCallback(\n    (freeSoloValue: string) => {\n      try {\n        // Will throw if defaultKind or defaultNamespace are not set\n        const parsedRef = parseEntityRef(freeSoloValue, {\n          defaultKind,\n          defaultNamespace,\n        });\n\n        return stringifyEntityRef(parsedRef);\n      } catch (err) {\n        return freeSoloValue;\n      }\n    },\n    [defaultKind, defaultNamespace],\n  );\n\n  const onSelect = useCallback(\n    (_: any, ref: string | Entity | null, reason: AutocompleteChangeReason) => {\n      // ref can either be a string from free solo entry or\n      if (typeof ref !== 'string') {\n        // if ref does not exist: pass 'undefined' to trigger validation for required value\n        onChange(ref ? stringifyEntityRef(ref as Entity) : undefined);\n      } else {\n        if (reason === 'blur' || reason === 'create-option') {\n          // Add in default namespace, etc.\n          let entityRef = ref;\n          try {\n            // Attempt to parse the entity ref into it's full form.\n            entityRef = stringifyEntityRef(\n              parseEntityRef(ref as string, {\n                defaultKind,\n                defaultNamespace,\n              }),\n            );\n          } catch (err) {\n            // If the passed in value isn't an entity ref, do nothing.\n          }\n          // We need to check against formData here as that's the previous value for this field.\n          if (formData !== ref || allowArbitraryValues) {\n            onChange(entityRef);\n          }\n        }\n      }\n    },\n    [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n  );\n\n  // Since free solo can be enabled, attempt to parse as a full entity ref first, then fall\n  // back to the given value.\n  const selectedEntity =\n    entities?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ??\n    (allowArbitraryValues && formData ? getLabel(formData) : '');\n\n  useEffect(() => {\n    if (\n      required &&\n      !allowArbitraryValues &&\n      entities?.catalogEntities.length === 1 &&\n      selectedEntity === ''\n    ) {\n      onChange(stringifyEntityRef(entities.catalogEntities[0]));\n    }\n  }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !formData}\n    >\n      <Autocomplete\n        disabled={\n          isDisabled ||\n          (required &&\n            !allowArbitraryValues &&\n            entities?.catalogEntities.length === 1)\n        }\n        id={idSchema?.$id}\n        value={selectedEntity}\n        loading={loading}\n        onChange={onSelect}\n        options={entities?.catalogEntities || []}\n        getOptionLabel={option =>\n          // option can be a string due to freeSolo.\n          typeof option === 'string'\n            ? option\n            : entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n                ?.entityRef!\n        }\n        autoSelect\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            disabled={isDisabled}\n            InputProps={params.InputProps}\n          />\n        )}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\n        filterOptions={createFilterOptions<Entity>({\n          stringify: option =>\n            entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </FormControl>\n  );\n};\n\n/**\n * Converts a especial `{exists: true}` value to the `CATALOG_FILTER_EXISTS` symbol.\n *\n * @param value - The value to convert.\n * @returns The converted value.\n */\nfunction convertOpsValues(\n  value: Exclude<EntityPickerFilterQueryValue, Array<any>>,\n): string | symbol {\n  if (typeof value === 'object' && value.exists) {\n    return CATALOG_FILTER_EXISTS;\n  }\n  return value?.toString();\n}\n\n/**\n * Converts schema filters to entity filter query, replacing `{exists:true}` values\n * with the constant `CATALOG_FILTER_EXISTS`.\n *\n * @param schemaFilters - An object containing schema filters with keys as filter names\n * and values as filter values.\n * @returns An object with the same keys as the input object, but with `{exists:true}` values\n * transformed to `CATALOG_FILTER_EXISTS` symbol.\n */\nfunction convertSchemaFiltersToQuery(\n  schemaFilters: EntityPickerFilterQuery,\n): Exclude<EntityFilterQuery, Array<any>> {\n  const query: EntityFilterQuery = {};\n\n  for (const [key, value] of Object.entries(schemaFilters)) {\n    if (Array.isArray(value)) {\n      query[key] = value;\n    } else {\n      query[key] = convertOpsValues(value);\n    }\n  }\n\n  return query;\n}\n\n/**\n * Builds an `EntityFilterQuery` based on the `uiSchema` passed in.\n * If `catalogFilter` is specified in the `uiSchema`, it is converted to a `EntityFilterQuery`.\n * If `allowedKinds` is specified in the `uiSchema` will support the legacy `allowedKinds` option.\n *\n * @param uiSchema The `uiSchema` of an `EntityPicker` component.\n * @returns An `EntityFilterQuery` based on the `uiSchema`, or `undefined` if `catalogFilter` is not specified in the `uiSchema`.\n */\nfunction buildCatalogFilter(\n  uiSchema: EntityPickerProps['uiSchema'],\n): EntityFilterQuery | undefined {\n  const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n  const catalogFilter: EntityPickerUiOptions['catalogFilter'] | undefined =\n    uiSchema['ui:options']?.catalogFilter ||\n    (allowedKinds && { kind: allowedKinds });\n\n  if (!catalogFilter) {\n    return undefined;\n  }\n\n  if (Array.isArray(catalogFilter)) {\n    return catalogFilter.map(convertSchemaFiltersToQuery);\n  }\n\n  return convertSchemaFiltersToQuery(catalogFilter);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fields/EntityTagsPicker/EntityTagsPicker.esm.js

@@ -21,6 +21,7 @@ const EntityTagsPicker = (props) => {
   const kinds = uiSchema["ui:options"]?.kinds;
   const showCounts = uiSchema["ui:options"]?.showCounts;
   const helperText = uiSchema["ui:options"]?.helperText;
+  const isDisabled = uiSchema?.["ui:disabled"] ?? false;
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const { loading, value: existingTags } = useAsync(async () => {
     const facet = "metadata.tags";
@@ -62,6 +63,7 @@ const EntityTagsPicker = (props) => {
       freeSolo: true,
       filterSelectedOptions: true,
       onChange: setTags,
+      disabled: isDisabled,
       value: formData || [],
       inputValue,
       loading,
@@ -73,6 +75,7 @@ const EntityTagsPicker = (props) => {
         {
           ...params,
           label: t("fields.entityTagsPicker.title"),
+          disabled: isDisabled,
           onChange: (e) => setInputValue(e.target.value),
           error: inputError,
           helperText: helperText ?? t("fields.entityTagsPicker.description"),