@backstage/plugin-scaffolder 1.10.0-next.0 → 1.10.0-next.2

package/dist/esm/{index-7e25101d.esm.js → index-618869a2.esm.js}

@@ -1,32 +1,40 @@
-import { parseEntityRef, KubernetesValidatorFunctions, makeValidator, RELATION_OWNED_BY } from '@backstage/catalog-model';
-import { createApiRef, useApi, identityApiRef, attachComponentData, createExternalRouteRef, createRouteRef, createSubRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useApp, useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api';
+import { parseEntityRef, KubernetesValidatorFunctions, RELATION_OWNED_BY, makeValidator, stringifyEntityRef } from '@backstage/catalog-model';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
+import { attachComponentData, useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, useRouteRef, useRouteRefParams, errorApiRef, AnalyticsContext, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useApp } from '@backstage/core-plugin-api';
+import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
+import { scaffolderApiRef as scaffolderApiRef$1, useTemplateSecrets as useTemplateSecrets$1, Stepper, createScaffolderFieldExtension as createScaffolderFieldExtension$1, ScaffolderFieldExtensions as ScaffolderFieldExtensions$1 } from '@backstage/plugin-scaffolder-react';
 import { catalogApiRef, humanizeEntityRef, useEntityTypeFilter, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { TextField, FormControl as FormControl$1, Box, Typography, FormControlLabel, Checkbox, makeStyles, Grid, StepButton, Paper, Button, CircularProgress } from '@material-ui/core';
+import { TextField, FormControl as FormControl$1, makeStyles, Box, Typography, FormControlLabel, Checkbox, Grid, StepButton, Paper, Button, CircularProgress } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { useCallback, useEffect, useState, createContext, useContext, useMemo, useRef, memo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useRef, memo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { z } from 'zod';
 import zodToJsonSchema from 'zod-to-json-schema';
-import useEffectOnce from 'react-use/lib/useEffectOnce';
-import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
-import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
-import { Select, Progress, DismissableBanner, Link, Page, Header, Content, ErrorPage, LogViewer } from '@backstage/core-components';
+import { Select, Progress, Page, Header, Content, InfoCard, MarkdownContent, DismissableBanner, Link, ErrorPage, LogViewer } from '@backstage/core-components';
 import useDebounce from 'react-use/lib/useDebounce';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
+import { useNavigate, Navigate } from 'react-router-dom';
 import capitalize from 'lodash/capitalize';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import '@material-ui/core/Button';
+import '@material-ui/core/IconButton';
+import '@material-ui/core/useMediaQuery';
+import '@material-ui/icons/AddCircleOutline';
+import '@backstage/plugin-catalog-common';
+import '@backstage/plugin-permission-react';
 import Grid$1 from '@material-ui/core/Grid';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
-import Stepper from '@material-ui/core/Stepper';
+import Stepper$1 from '@material-ui/core/Stepper';
 import { makeStyles as makeStyles$1, createStyles } from '@material-ui/core/styles';
 import Typography$1 from '@material-ui/core/Typography';
 import Cancel from '@material-ui/icons/Cancel';
@@ -34,14 +42,10 @@ import Check from '@material-ui/icons/Check';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import classNames from 'classnames';
 import { DateTime, Interval } from 'luxon';
-import { useNavigate } from 'react-router-dom';
 import useInterval from 'react-use/lib/useInterval';
 import { useImmerReducer } from 'use-immer';
 import LanguageIcon from '@material-ui/icons/Language';
 
-const scaffolderApiRef = createApiRef({
-  id: "plugin.scaffolder.service"
-});
 class ScaffolderClient {
   constructor(options) {
     var _a, _b;
@@ -238,6 +242,20 @@ class ScaffolderClient {
   }
 }
 
+const LAYOUTS_KEY = "scaffolder.layout.v1";
+const LAYOUTS_WRAPPER_KEY = "scaffolder.layouts.wrapper.v1";
+function createScaffolderLayout(options) {
+  return {
+    expose() {
+      const LayoutDataHolder = () => null;
+      attachComponentData(LayoutDataHolder, LAYOUTS_KEY, options);
+      return LayoutDataHolder;
+    }
+  };
+}
+const ScaffolderLayouts = () => null;
+attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
+
 function makeFieldSchemaFromZod(returnSchema, uiOptionsSchema) {
   return {
     schema: {
@@ -255,6 +273,9 @@ const entityQueryFilterExpressionSchema = z.record(
 const EntityPickerFieldSchema = makeFieldSchemaFromZod(
   z.string(),
   z.object({
+    /**
+     * @deprecated Use `catalogFilter` instead.
+     */
     allowedKinds: z.array(z.string()).optional().describe(
       "DEPRECATED: Use `catalogFilter` instead. List of kinds of entities to derive options from"
     ),
@@ -341,6 +362,14 @@ const EntityPicker = (props) => {
   );
 };
 
+const entityNamePickerValidation = (value, validation) => {
+  if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
+    validation.addError(
+      "Must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters."
+    );
+  }
+};
+
 const EntityNamePickerFieldSchema = makeFieldSchemaFromZod(z.string());
 const EntityNamePickerSchema = EntityNamePickerFieldSchema.schema;
 
@@ -372,98 +401,12 @@ const EntityNamePicker = (props) => {
   );
 };
 
-const entityNamePickerValidation = (value, validation) => {
-  if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
-    validation.addError(
-      "Must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters."
-    );
-  }
-};
-
-const EntityTagsPickerFieldSchema = makeFieldSchemaFromZod(
-  z.array(z.string()),
-  z.object({
-    kinds: z.array(z.string()).optional().describe("List of kinds of entities to derive tags from"),
-    showCounts: z.boolean().optional().describe("Whether to show usage counts per tag"),
-    helperText: z.string().optional().describe("Helper text to display")
-  })
-);
-const EntityTagsPickerSchema = EntityTagsPickerFieldSchema.schema;
-
-const EntityTagsPicker = (props) => {
-  var _a, _b, _c;
-  const { formData, onChange, uiSchema } = props;
-  const catalogApi = useApi(catalogApiRef);
-  const [tagOptions, setTagOptions] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [inputError, setInputError] = useState(false);
-  const tagValidator = makeValidator().isValidTag;
-  const kinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.kinds;
-  const showCounts = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.showCounts;
-  const helperText = (_c = uiSchema["ui:options"]) == null ? void 0 : _c.helperText;
-  const { loading, value: existingTags } = useAsync(async () => {
-    const facet = "metadata.tags";
-    const tagsRequest = { facets: [facet] };
-    if (kinds) {
-      tagsRequest.filter = { kind: kinds };
-    }
-    const { facets } = await catalogApi.getEntityFacets(tagsRequest);
-    const tagFacets = Object.fromEntries(
-      facets[facet].map(({ value, count }) => [value, count])
-    );
-    setTagOptions(
-      Object.keys(tagFacets).sort(
-        (a, b) => showCounts ? tagFacets[b] - tagFacets[a] : a.localeCompare(b)
-      )
-    );
-    return tagFacets;
-  });
-  const setTags = (_, values) => {
-    let hasError = false;
-    let addDuplicate = false;
-    const currentTags = formData || [];
-    if ((values == null ? void 0 : values.length) && currentTags.length < values.length) {
-      const newTag = values[values.length - 1] = values[values.length - 1].toLocaleLowerCase("en-US").trim();
-      hasError = !tagValidator(newTag);
-      addDuplicate = currentTags.indexOf(newTag) !== -1;
-    }
-    setInputError(hasError);
-    setInputValue(!hasError ? "" : inputValue);
-    if (!hasError && !addDuplicate) {
-      onChange(values || []);
-    }
-  };
-  useEffectOnce(() => onChange(formData || []));
-  return /* @__PURE__ */ React.createElement(FormControl$1, { margin: "normal" }, /* @__PURE__ */ React.createElement(
-    Autocomplete$1,
-    {
-      multiple: true,
-      freeSolo: true,
-      filterSelectedOptions: true,
-      onChange: setTags,
-      value: formData || [],
-      inputValue,
-      loading,
-      options: tagOptions,
-      ChipProps: { size: "small" },
-      renderOption: (option) => showCounts ? `${option} (${existingTags == null ? void 0 : existingTags[option]})` : option,
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          label: "Tags",
-          onChange: (e) => setInputValue(e.target.value),
-          error: inputError,
-          helperText: helperText != null ? helperText : "Add any relevant tags, hit 'Enter' to add new tags. Valid format: [a-z0-9+#] separated by [-], at most 63 characters"
-        }
-      )
-    }
-  ));
-};
-
 const OwnerPickerFieldSchema = makeFieldSchemaFromZod(
   z.string(),
   z.object({
+    /**
+     * @deprecated Use `catalogFilter` instead.
+     */
     allowedKinds: z.array(z.string()).default(["Group", "User"]).optional().describe(
       "DEPRECATED: Use `catalogFilter` instead. List of kinds of entities to derive options from. Defaults to Group and User"
     ),
@@ -507,6 +450,71 @@ const OwnerPicker = (props) => {
   );
 };
 
+const RepoUrlPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    allowedHosts: z.array(z.string()).optional().describe("List of allowed SCM platform hosts"),
+    allowedOrganizations: z.array(z.string()).optional().describe("List of allowed organizations in the given SCM platform"),
+    allowedOwners: z.array(z.string()).optional().describe("List of allowed owners in the given SCM platform"),
+    allowedProjects: z.array(z.string()).optional().describe("List of allowed projects in the given SCM platform"),
+    allowedRepos: z.array(z.string()).optional().describe("List of allowed repos in the given SCM platform"),
+    requestUserCredentials: z.object({
+      secretsKey: z.string().describe(
+        "Key used within the template secrets context to store the credential"
+      ),
+      additionalScopes: z.object({
+        gerrit: z.array(z.string()).optional().describe("Additional Gerrit scopes to request"),
+        github: z.array(z.string()).optional().describe("Additional GitHub scopes to request"),
+        gitlab: z.array(z.string()).optional().describe("Additional GitLab scopes to request"),
+        bitbucket: z.array(z.string()).optional().describe("Additional BitBucket scopes to request"),
+        azure: z.array(z.string()).optional().describe("Additional Azure scopes to request")
+      }).optional().describe("Additional permission scopes to request")
+    }).optional().describe(
+      "If defined will request user credentials to auth against the given SCM platform"
+    )
+  })
+);
+const RepoUrlPickerSchema = RepoUrlPickerFieldSchema.schema;
+
+const repoPickerValidation = (value, validation, context) => {
+  var _a, _b;
+  try {
+    const { host, searchParams } = new URL(`https://${value}`);
+    const integrationApi = context.apiHolder.get(scmIntegrationsApiRef);
+    if (!host) {
+      validation.addError(
+        "Incomplete repository location provided, host not provided"
+      );
+    } else {
+      if (((_a = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _a.type) === "bitbucket") {
+        if (host === "bitbucket.org" && !searchParams.get("workspace")) {
+          validation.addError(
+            "Incomplete repository location provided, workspace not provided"
+          );
+        }
+        if (!searchParams.get("project")) {
+          validation.addError(
+            "Incomplete repository location provided, project not provided"
+          );
+        }
+      } else if (((_b = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _b.type) !== "gerrit") {
+        if (!searchParams.get("owner")) {
+          validation.addError(
+            "Incomplete repository location provided, owner not provided"
+          );
+        }
+      }
+      if (!searchParams.get("repo")) {
+        validation.addError(
+          "Incomplete repository location provided, repo not provided"
+        );
+      }
+    }
+  } catch {
+    validation.addError("Unable to parse the Repository URL");
+  }
+};
+
 const GithubRepoPicker = (props) => {
   const { allowedOwners = [], rawErrors, state, onChange } = props;
   const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
@@ -744,7 +752,7 @@ const GerritRepoPicker = (props) => {
 
 const RepoUrlPickerHost = (props) => {
   const { host, hosts, onChange, rawErrors } = props;
-  const scaffolderApi = useApi(scaffolderApiRef);
+  const scaffolderApi = useApi(scaffolderApiRef$1);
   const { value: { integrations } = { integrations: [] }, loading } = useAsync(
     async () => {
       return await scaffolderApi.getIntegrationsList({
@@ -871,56 +879,6 @@ function parseRepoPickerUrl(url) {
   return { host, owner, repoName, organization, workspace, project };
 }
 
-const SecretsContext = createContext(
-  void 0
-);
-const SecretsContextProvider = ({ children }) => {
-  const [secrets, setSecrets] = useState({});
-  return /* @__PURE__ */ React.createElement(SecretsContext.Provider, { value: { secrets, setSecrets } }, children);
-};
-const useTemplateSecrets = () => {
-  const value = useContext(SecretsContext);
-  if (!value) {
-    throw new Error(
-      "useTemplateSecrets must be used within a SecretsContextProvider"
-    );
-  }
-  const { setSecrets: updateSecrets } = value;
-  const setSecrets = useCallback(
-    (input) => {
-      updateSecrets((currentSecrets) => ({ ...currentSecrets, ...input }));
-    },
-    [updateSecrets]
-  );
-  return { setSecrets };
-};
-
-const RepoUrlPickerFieldSchema = makeFieldSchemaFromZod(
-  z.string(),
-  z.object({
-    allowedHosts: z.array(z.string()).optional().describe("List of allowed SCM platform hosts"),
-    allowedOrganizations: z.array(z.string()).optional().describe("List of allowed organizations in the given SCM platform"),
-    allowedOwners: z.array(z.string()).optional().describe("List of allowed owners in the given SCM platform"),
-    allowedProjects: z.array(z.string()).optional().describe("List of allowed projects in the given SCM platform"),
-    allowedRepos: z.array(z.string()).optional().describe("List of allowed repos in the given SCM platform"),
-    requestUserCredentials: z.object({
-      secretsKey: z.string().describe(
-        "Key used within the template secrets context to store the credential"
-      ),
-      additionalScopes: z.object({
-        gerrit: z.array(z.string()).optional().describe("Additional Gerrit scopes to request"),
-        github: z.array(z.string()).optional().describe("Additional GitHub scopes to request"),
-        gitlab: z.array(z.string()).optional().describe("Additional GitLab scopes to request"),
-        bitbucket: z.array(z.string()).optional().describe("Additional BitBucket scopes to request"),
-        azure: z.array(z.string()).optional().describe("Additional Azure scopes to request")
-      }).optional().describe("Additional permission scopes to request")
-    }).optional().describe(
-      "If defined will request user credentials to auth against the given SCM platform"
-    )
-  })
-);
-const RepoUrlPickerSchema = RepoUrlPickerFieldSchema.schema;
-
 const RepoUrlPicker = (props) => {
   var _a, _b;
   const { uiSchema, onChange, rawErrors, formData } = props;
@@ -929,7 +887,7 @@ const RepoUrlPicker = (props) => {
   );
   const integrationApi = useApi(scmIntegrationsApiRef);
   const scmAuthApi = useApi(scmAuthApiRef);
-  const { setSecrets } = useTemplateSecrets();
+  const { setSecrets } = useTemplateSecrets$1();
   const allowedHosts = useMemo(
     () => {
       var _a2, _b2;
@@ -1089,45 +1047,6 @@ const RepoUrlPicker = (props) => {
   ));
 };
 
-const repoPickerValidation = (value, validation, context) => {
-  var _a, _b;
-  try {
-    const { host, searchParams } = new URL(`https://${value}`);
-    const integrationApi = context.apiHolder.get(scmIntegrationsApiRef);
-    if (!host) {
-      validation.addError(
-        "Incomplete repository location provided, host not provided"
-      );
-    } else {
-      if (((_a = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _a.type) === "bitbucket") {
-        if (host === "bitbucket.org" && !searchParams.get("workspace")) {
-          validation.addError(
-            "Incomplete repository location provided, workspace not provided"
-          );
-        }
-        if (!searchParams.get("project")) {
-          validation.addError(
-            "Incomplete repository location provided, project not provided"
-          );
-        }
-      } else if (((_b = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _b.type) !== "gerrit") {
-        if (!searchParams.get("owner")) {
-          validation.addError(
-            "Incomplete repository location provided, owner not provided"
-          );
-        }
-      }
-      if (!searchParams.get("repo")) {
-        validation.addError(
-          "Incomplete repository location provided, repo not provided"
-        );
-      }
-    }
-  } catch {
-    validation.addError("Unable to parse the Repository URL");
-  }
-};
-
 const OwnedEntityPickerFieldSchema = makeFieldSchemaFromZod(
   z.string(),
   z.object({
@@ -1222,54 +1141,86 @@ function useOwnedEntities(allowedKinds) {
   return useMemo(() => ({ loading, ownedEntities }), [loading, ownedEntities]);
 }
 
-const FIELD_EXTENSION_WRAPPER_KEY = "scaffolder.extensions.wrapper.v1";
-const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
-function createScaffolderFieldExtension(options) {
-  return {
-    expose() {
-      const FieldExtensionDataHolder = () => null;
-      attachComponentData(
-        FieldExtensionDataHolder,
-        FIELD_EXTENSION_KEY,
-        options
-      );
-      return FieldExtensionDataHolder;
-    }
-  };
-}
-function createNextScaffolderFieldExtension(options) {
-  return {
-    expose() {
-      const FieldExtensionDataHolder = () => null;
-      attachComponentData(
-        FieldExtensionDataHolder,
-        FIELD_EXTENSION_KEY,
-        options
-      );
-      return FieldExtensionDataHolder;
-    }
-  };
-}
-const ScaffolderFieldExtensions = () => null;
-attachComponentData(
-  ScaffolderFieldExtensions,
-  FIELD_EXTENSION_WRAPPER_KEY,
-  true
+const EntityTagsPickerFieldSchema = makeFieldSchemaFromZod(
+  z.array(z.string()),
+  z.object({
+    kinds: z.array(z.string()).optional().describe("List of kinds of entities to derive tags from"),
+    showCounts: z.boolean().optional().describe("Whether to show usage counts per tag"),
+    helperText: z.string().optional().describe("Helper text to display")
+  })
 );
+const EntityTagsPickerSchema = EntityTagsPickerFieldSchema.schema;
 
-const LAYOUTS_KEY = "scaffolder.layout.v1";
-const LAYOUTS_WRAPPER_KEY = "scaffolder.layouts.wrapper.v1";
-function createScaffolderLayout(options) {
-  return {
-    expose() {
-      const LayoutDataHolder = () => null;
-      attachComponentData(LayoutDataHolder, LAYOUTS_KEY, options);
-      return LayoutDataHolder;
+const EntityTagsPicker = (props) => {
+  var _a, _b, _c;
+  const { formData, onChange, uiSchema } = props;
+  const catalogApi = useApi(catalogApiRef);
+  const [tagOptions, setTagOptions] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [inputError, setInputError] = useState(false);
+  const tagValidator = makeValidator().isValidTag;
+  const kinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.kinds;
+  const showCounts = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.showCounts;
+  const helperText = (_c = uiSchema["ui:options"]) == null ? void 0 : _c.helperText;
+  const { loading, value: existingTags } = useAsync(async () => {
+    const facet = "metadata.tags";
+    const tagsRequest = { facets: [facet] };
+    if (kinds) {
+      tagsRequest.filter = { kind: kinds };
+    }
+    const { facets } = await catalogApi.getEntityFacets(tagsRequest);
+    const tagFacets = Object.fromEntries(
+      facets[facet].map(({ value, count }) => [value, count])
+    );
+    setTagOptions(
+      Object.keys(tagFacets).sort(
+        (a, b) => showCounts ? tagFacets[b] - tagFacets[a] : a.localeCompare(b)
+      )
+    );
+    return tagFacets;
+  });
+  const setTags = (_, values) => {
+    let hasError = false;
+    let addDuplicate = false;
+    const currentTags = formData || [];
+    if ((values == null ? void 0 : values.length) && currentTags.length < values.length) {
+      const newTag = values[values.length - 1] = values[values.length - 1].toLocaleLowerCase("en-US").trim();
+      hasError = !tagValidator(newTag);
+      addDuplicate = currentTags.indexOf(newTag) !== -1;
+    }
+    setInputError(hasError);
+    setInputValue(!hasError ? "" : inputValue);
+    if (!hasError && !addDuplicate) {
+      onChange(values || []);
     }
   };
-}
-const ScaffolderLayouts = () => null;
-attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
+  useEffectOnce(() => onChange(formData || []));
+  return /* @__PURE__ */ React.createElement(FormControl$1, { margin: "normal" }, /* @__PURE__ */ React.createElement(
+    Autocomplete$1,
+    {
+      multiple: true,
+      freeSolo: true,
+      filterSelectedOptions: true,
+      onChange: setTags,
+      value: formData || [],
+      inputValue,
+      loading,
+      options: tagOptions,
+      ChipProps: { size: "small" },
+      renderOption: (option) => showCounts ? `${option} (${existingTags == null ? void 0 : existingTags[option]})` : option,
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          label: "Tags",
+          onChange: (e) => setInputValue(e.target.value),
+          error: inputError,
+          helperText: helperText != null ? helperText : "Add any relevant tags, hit 'Enter' to add new tags. Valid format: [a-z0-9+#] separated by [-], at most 63 characters"
+        }
+      )
+    }
+  ));
+};
 
 const registerComponentRouteRef = createExternalRouteRef({
   id: "register-component",
@@ -1280,58 +1231,145 @@ const viewTechDocRouteRef = createExternalRouteRef({
   optional: true,
   params: ["namespace", "kind", "name"]
 });
-const rootRouteRef = createRouteRef({
+const rootRouteRef$1 = createRouteRef({
   id: "scaffolder"
 });
 const legacySelectedTemplateRouteRef = createSubRouteRef({
   id: "scaffolder/legacy/selected-template",
-  parent: rootRouteRef,
+  parent: rootRouteRef$1,
   path: "/templates/:templateName"
 });
-const nextRouteRef = createRouteRef({
-  id: "scaffolder/next"
-});
 const selectedTemplateRouteRef = createSubRouteRef({
   id: "scaffolder/selected-template",
-  parent: rootRouteRef,
-  path: "/templates/:namespace/:templateName"
-});
-const nextSelectedTemplateRouteRef = createSubRouteRef({
-  id: "scaffolder/next/selected-template",
-  parent: nextRouteRef,
+  parent: rootRouteRef$1,
   path: "/templates/:namespace/:templateName"
 });
 const scaffolderTaskRouteRef = createSubRouteRef({
   id: "scaffolder/task",
-  parent: rootRouteRef,
-  path: "/tasks/:taskId"
-});
-createSubRouteRef({
-  id: "scaffolder/next/task",
-  parent: nextRouteRef,
+  parent: rootRouteRef$1,
   path: "/tasks/:taskId"
 });
 const scaffolderListTaskRouteRef = createSubRouteRef({
   id: "scaffolder/list-tasks",
-  parent: rootRouteRef,
+  parent: rootRouteRef$1,
   path: "/tasks"
 });
 const actionsRouteRef = createSubRouteRef({
   id: "scaffolder/actions",
-  parent: rootRouteRef,
+  parent: rootRouteRef$1,
   path: "/actions"
 });
 const editRouteRef = createSubRouteRef({
   id: "scaffolder/edit",
-  parent: rootRouteRef,
+  parent: rootRouteRef$1,
   path: "/edit"
 });
 
+const nextRouteRef = createRouteRef({
+  id: "scaffolder/next"
+});
+const nextSelectedTemplateRouteRef = createSubRouteRef({
+  id: "scaffolder/next/selected-template",
+  parent: nextRouteRef,
+  path: "/templates/:namespace/:templateName"
+});
+const nextScaffolderTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/next/task",
+  parent: nextRouteRef,
+  path: "/tasks/:taskId"
+});
+
+const useStyles$2 = makeStyles(() => ({
+  markdown: {
+    /** to make the styles for React Markdown not leak into the description */
+    "& :first-child": {
+      marginTop: 0
+    },
+    "& :last-child": {
+      marginBottom: 0
+    }
+  }
+}));
+const useTemplateParameterSchema = (templateRef) => {
+  const scaffolderApi = useApi(scaffolderApiRef$1);
+  const { value, loading, error } = useAsync(
+    () => scaffolderApi.getTemplateParameterSchema(templateRef),
+    [scaffolderApi, templateRef]
+  );
+  return { manifest: value, loading, error };
+};
+const TemplateWizardPage = (props) => {
+  var _a;
+  const styles = useStyles$2();
+  const rootRef = useRouteRef(nextRouteRef);
+  const taskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const { secrets } = useTemplateSecrets$1();
+  const scaffolderApi = useApi(scaffolderApiRef$1);
+  const navigate = useNavigate();
+  const { templateName, namespace } = useRouteRefParams(
+    selectedTemplateRouteRef
+  );
+  const templateRef = stringifyEntityRef({
+    kind: "Template",
+    namespace,
+    name: templateName
+  });
+  const errorApi = useApi(errorApiRef);
+  const { loading, manifest, error } = useTemplateParameterSchema(templateRef);
+  const onComplete = async (values) => {
+    const { taskId } = await scaffolderApi.scaffold({
+      templateRef,
+      values,
+      secrets
+    });
+    navigate(taskRoute({ taskId }));
+  };
+  useEffect(() => {
+    if (error) {
+      errorApi.post(new Error(`Failed to load template, ${error}`));
+    }
+  }, [error, errorApi]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Navigate, { to: rootRef() });
+  }
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a new component",
+      title: "Create a new component",
+      subtitle: "Create new software components using standard templates in your organization"
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(Progress, null), manifest && /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title: manifest.title,
+      subheader: /* @__PURE__ */ React.createElement(
+        MarkdownContent,
+        {
+          className: styles.markdown,
+          content: (_a = manifest.description) != null ? _a : "No description"
+        }
+      ),
+      noPadding: true,
+      titleTypographyProps: { component: "h2" }
+    },
+    /* @__PURE__ */ React.createElement(
+      Stepper,
+      {
+        manifest,
+        extensions: props.customFieldExtensions,
+        onComplete,
+        FormProps: props.FormProps
+      }
+    )
+  ))));
+};
+
 const scaffolderPlugin = createPlugin({
   id: "scaffolder",
   apis: [
     createApiFactory({
-      api: scaffolderApiRef,
+      api: scaffolderApiRef$1,
       deps: {
         discoveryApi: discoveryApiRef,
         scmIntegrationsApi: scmIntegrationsApiRef,
@@ -1347,7 +1385,9 @@ const scaffolderPlugin = createPlugin({
     })
   ],
   routes: {
-    root: rootRouteRef
+    root: rootRouteRef$1,
+    selectedTemplate: selectedTemplateRouteRef,
+    ongoingTask: scaffolderTaskRouteRef
   },
   externalRoutes: {
     registerComponent: registerComponentRouteRef,
@@ -1355,14 +1395,14 @@ const scaffolderPlugin = createPlugin({
   }
 });
 const EntityPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: EntityPicker,
     name: "EntityPicker",
     schema: EntityPickerSchema
   })
 );
 const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: EntityNamePicker,
     name: "EntityNamePicker",
     validation: entityNamePickerValidation,
@@ -1370,7 +1410,7 @@ const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
   })
 );
 const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: RepoUrlPicker,
     name: "RepoUrlPicker",
     validation: repoPickerValidation,
@@ -1378,7 +1418,7 @@ const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
   })
 );
 const OwnerPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: OwnerPicker,
     name: "OwnerPicker",
     schema: OwnerPickerSchema
@@ -1387,19 +1427,19 @@ const OwnerPickerFieldExtension = scaffolderPlugin.provide(
 const ScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
     name: "ScaffolderPage",
-    component: () => import('./Router-416b874d.esm.js').then((m) => m.Router),
-    mountPoint: rootRouteRef
+    component: () => import('./Router-c499b201.esm.js').then((m) => m.Router),
+    mountPoint: rootRouteRef$1
   })
 );
 const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: OwnedEntityPicker,
     name: "OwnedEntityPicker",
     schema: OwnedEntityPickerSchema
   })
 );
 const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
+  createScaffolderFieldExtension$1({
     component: EntityTagsPicker,
     name: "EntityTagsPicker",
     schema: EntityTagsPickerSchema
@@ -1408,7 +1448,7 @@ const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
 const NextScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
     name: "NextScaffolderPage",
-    component: () => import('./index-78c07979.esm.js').then((m) => m.Router),
+    component: () => import('./index-6aee5f45.esm.js').then((m) => m.Router),
     mountPoint: nextRouteRef
   })
 );
@@ -1515,7 +1555,7 @@ function reducer(draft, action) {
   }
 }
 const useTaskEventStream = (taskId) => {
-  const scaffolderApi = useApi(scaffolderApiRef);
+  const scaffolderApi = useApi(scaffolderApiRef$1);
   const [state, dispatch] = useImmerReducer(reducer, {
     loading: true,
     completed: false,
@@ -1733,7 +1773,7 @@ const TaskStatusStepper = memo(
     const { steps, currentStepId, onUserStepChange } = props;
     const classes = useStyles(props);
     return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
-      Stepper,
+      Stepper$1,
       {
         activeStep: steps.findIndex((s) => s.id === currentStepId),
         orientation: "vertical",
@@ -1765,7 +1805,7 @@ const hasLinks = ({ links = [] }) => links.length > 0;
 const TaskPage = ({ loadingText }) => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const rootPath = useRouteRef(rootRouteRef);
+  const rootPath = useRouteRef(rootRouteRef$1);
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
   const [lastActiveStepId, setLastActiveStepId] = useState(
@@ -1861,5 +1901,11 @@ const TaskPage = ({ loadingText }) => {
   ))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 9 }, !currentStepId && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement("div", { style: { height: "80vh" } }, /* @__PURE__ */ React.createElement(TaskErrors, { error: taskStream.error }), /* @__PURE__ */ React.createElement(LogViewer, { text: logAsString })))))));
 };
 
-export { OwnerPickerFieldSchema as $, OwnedEntityPickerSchema as A, nextSelectedTemplateRouteRef as B, nextRouteRef as C, ScaffolderClient as D, EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, createScaffolderFieldExtension as G, ScaffolderFieldExtensions as H, createScaffolderLayout as I, ScaffolderLayouts as J, EntityPickerFieldExtension as K, LAYOUTS_WRAPPER_KEY as L, EntityNamePickerFieldExtension as M, EntityTagsPickerFieldExtension as N, OwnerPicker as O, OwnerPickerFieldExtension as P, OwnedEntityPickerFieldExtension as Q, RepoUrlPicker as R, SecretsContext as S, TemplateTypePicker as T, RepoUrlPickerFieldExtension as U, ScaffolderPage as V, scaffolderPlugin as W, NextScaffolderPage as X, createNextScaffolderFieldExtension as Y, makeFieldSchemaFromZod as Z, EntityPickerFieldSchema as _, actionsRouteRef as a, RepoUrlPickerFieldSchema as a0, OwnedEntityPickerFieldSchema as a1, EntityTagsPickerFieldSchema as a2, useTemplateSecrets as a3, scaffolderListTaskRouteRef as b, scaffolderApiRef as c, scaffolderTaskRouteRef as d, editRouteRef as e, rootRouteRef as f, TaskStatusStepper as g, TaskPageLinks as h, FIELD_EXTENSION_KEY as i, LAYOUTS_KEY as j, SecretsContextProvider as k, legacySelectedTemplateRouteRef as l, TaskPage as m, EntityPickerSchema as n, EntityNamePicker as o, entityNamePickerValidation as p, EntityNamePickerSchema as q, registerComponentRouteRef as r, selectedTemplateRouteRef as s, EntityTagsPicker as t, EntityTagsPickerSchema as u, viewTechDocRouteRef as v, repoPickerValidation as w, RepoUrlPickerSchema as x, OwnerPickerSchema as y, OwnedEntityPicker as z };
-//# sourceMappingURL=index-7e25101d.esm.js.map
+const rootRouteRef = rootRouteRef$1;
+const createScaffolderFieldExtension = createScaffolderFieldExtension$1;
+const ScaffolderFieldExtensions = ScaffolderFieldExtensions$1;
+const useTemplateSecrets = useTemplateSecrets$1;
+const scaffolderApiRef = scaffolderApiRef$1;
+
+export { ScaffolderFieldExtensions as $, createScaffolderLayout as A, ScaffolderLayouts as B, EntityPickerFieldExtension as C, EntityNamePickerFieldExtension as D, EntityPicker as E, EntityTagsPickerFieldExtension as F, OwnerPickerFieldExtension as G, OwnedEntityPickerFieldExtension as H, RepoUrlPickerFieldExtension as I, ScaffolderPage as J, scaffolderPlugin as K, LAYOUTS_WRAPPER_KEY as L, nextRouteRef as M, NextScaffolderPage as N, OwnerPicker as O, nextScaffolderTaskRouteRef as P, makeFieldSchemaFromZod as Q, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, EntityPickerFieldSchema as U, OwnerPickerFieldSchema as V, RepoUrlPickerFieldSchema as W, OwnedEntityPickerFieldSchema as X, EntityTagsPickerFieldSchema as Y, rootRouteRef as Z, createScaffolderFieldExtension as _, actionsRouteRef as a, useTemplateSecrets as a0, scaffolderApiRef as a1, scaffolderListTaskRouteRef as b, scaffolderTaskRouteRef as c, rootRouteRef$1 as d, editRouteRef as e, TaskStatusStepper as f, TaskPageLinks as g, LAYOUTS_KEY as h, TaskPage as i, EntityPickerSchema as j, EntityNamePicker as k, legacySelectedTemplateRouteRef as l, entityNamePickerValidation as m, EntityNamePickerSchema as n, EntityTagsPicker as o, EntityTagsPickerSchema as p, repoPickerValidation as q, registerComponentRouteRef as r, selectedTemplateRouteRef as s, RepoUrlPickerSchema as t, OwnerPickerSchema as u, viewTechDocRouteRef as v, OwnedEntityPicker as w, OwnedEntityPickerSchema as x, nextSelectedTemplateRouteRef as y, TemplateWizardPage as z };
+//# sourceMappingURL=index-618869a2.esm.js.map