@backstage/plugin-scaffolder 0.12.3 → 0.15.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,151 @@
 # @backstage/plugin-scaffolder
 
+## 0.15.0-next.0
+
+### Minor Changes
+
+- 310e905998: The following deprecations are now breaking and have been removed:
+
+  - **BREAKING**: Support for `backstage.io/v1beta2` Software Templates has been removed. Please migrate your legacy templates to the new `scaffolder.backstage.io/v1beta3` `apiVersion` by following the [migration guide](https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3)
+
+  - **BREAKING**: Removed the deprecated `TemplateMetadata`. Please use `TemplateInfo` instead.
+
+  - **BREAKING**: Removed the deprecated `context.baseUrl`. It's now available on `context.templateInfo.baseUrl`.
+
+  - **BREAKING**: Removed the deprecated `DispatchResult`, use `TaskBrokerDispatchResult` instead.
+
+  - **BREAKING**: Removed the deprecated `runCommand`, use `executeShellCommond` instead.
+
+  - **BREAKING**: Removed the deprecated `Status` in favour of `TaskStatus` instead.
+
+  - **BREAKING**: Removed the deprecated `TaskState` in favour of `CurrentClaimedTask` instead.
+
+- 1360f7d73a: **BREAKING**: Removed `ScaffolderTaskOutput.entityRef` and `ScaffolderTaskOutput.remoteUrl`, which both have been deprecated for over a year. Please use the `links` output instead.
+- e63e5a9452: Removed the following previously deprecated exports:
+
+  - **BREAKING**: Removed the deprecated `TemplateList` component and the `TemplateListProps` type. Please use the `TemplateCard` to create your own list component instead to render these lists.
+
+  - **BREAKING**: Removed the deprecated `setSecret` method, please use `setSecrets` instead.
+
+  - **BREAKING**: Removed the deprecated `TemplateCardComponent` and `TaskPageComponent` props from the `ScaffolderPage` component. These are now provided using the `components` prop with the shape `{{ TemplateCardComponent: () => JSX.Element, TaskPageComponent: () => JSX.Element }}`
+
+  - **BREAKING**: Removed `JobStatus` as this type was actually a legacy type used in `v1alpha` templates and the workflow engine and should no longer be used or depended on.
+
+### Patch Changes
+
+- d741c97b98: Render markdown for description in software templates
+- Updated dependencies
+  - @backstage/plugin-catalog-react@0.9.0-next.0
+  - @backstage/core-components@0.9.1-next.0
+  - @backstage/plugin-scaffolder-common@0.3.0-next.0
+  - @backstage/catalog-model@0.13.0-next.0
+  - @backstage/plugin-catalog-common@0.2.2-next.0
+  - @backstage/catalog-client@0.9.0-next.0
+  - @backstage/integration-react@0.1.25-next.0
+
+## 0.14.0
+
+### Minor Changes
+
+- 1c2755991d: - **BREAKING**: Removed the `FavouriteTemplate` export in favor of the `FavoriteEntity` from `@backstage/plugin-catalog-react`. Please migrate any usages to that component instead if you are creating your own `TemplateCard` page.
+- 86da51cec5: **BREAKING**: Removing the exports of the raw components that back the `CustomFieldExtensions`.
+
+### Patch Changes
+
+- f41a293231: - **DEPRECATION**: Deprecated `formatEntityRefTitle` in favor of the new `humanizeEntityRef` method instead. Please migrate to using the new method instead.
+- 55361f3f7b: Added some deprecations as follows:
+
+  - **DEPRECATED**: `TemplateCardComponent` and `TaskPageComponent` props have been deprecated, and moved to a `components` prop instead. You can pass them in through there instead.
+  - **DEPRECATED**: `TemplateList` and `TemplateListProps` has been deprecated. Please use the `TemplateCard` to create your own list component instead.
+  - **DEPRECATED**: `setSecret` has been deprecated in favour of `setSecrets` when calling `useTemplateSecrets`
+
+  Other notable changes:
+
+  - `scaffolderApi.scaffold()` `values` type has been narrowed from `Record<string, any>` to `Record<string, JsonValue>` instead.
+  - Moved all navigation internally over to using `routeRefs` and `subRouteRefs`
+
+- Updated dependencies
+  - @backstage/catalog-model@0.12.0
+  - @backstage/catalog-client@0.8.0
+  - @backstage/core-components@0.9.0
+  - @backstage/plugin-catalog-react@0.8.0
+  - @backstage/plugin-catalog-common@0.2.0
+  - @backstage/integration@0.8.0
+  - @backstage/core-plugin-api@0.8.0
+  - @backstage/plugin-scaffolder-common@0.2.3
+  - @backstage/integration-react@0.1.24
+  - @backstage/plugin-permission-react@0.3.3
+
+## 0.13.0
+
+### Minor Changes
+
+- 50e0242ac2: - **BREAKING** - `scaffolderApi.scaffold()` now takes one `options` argument instead of 3, the existing arguments should just be wrapped up in one object instead.
+  - **BREAKING** - `scaffolderApi.scaffold()` now returns an object instead of a single string for the job ID. It's now `{ taskId: string }`
+  - **BREAKING** - `scaffolderApi.scaffold()` now takes a `templateRef` instead of `templateName` as an argument in the options. This should be a valid stringified `entityRef`.
+  - **BREAKING** - `scaffolderApi.getIntegrationsList` now returns an object `{ integrations: { type: string, title: string, host: string }[] }` instead of just an array.
+- a2589000ee: - **BREAKING** - Removed the `plugin` export, use `scaffolderPlugin` instead.
+  - **BREAKING** - Removed the `TextValuePicker` component export, you can inline this component instead as it's a simple wrapper around a `TextField` from `@material-ui/core`.
+
+### Patch Changes
+
+- 67a7c02d26: Remove usages of `EntityRef` and `parseEntityName` from `@backstage/catalog-model`
+- 6e1cbc12a6: Updated according to the new `getEntityFacets` catalog API method
+- b776ce5aab: Replaced use of deprecated `useEntityListProvider` hook with `useEntityList`.
+- 0f37cdef19: Migrated over from the deprecated `spec.metadata` to `spec.templateInfo` for the `name` and the `baseUrl` of the template.
+- 50e0242ac2: - Moved the `JSONSchema` type from `@backstage/catalog-model` to `JSONSchema7`.
+  - Renamed and prefixed some types ready for exporting.
+- a2589000ee: - Reworking the `FieldExtensionComponentType` so we can export the `ui:schema:options` props in the `api-report.md`.
+  - Exporting all of the `UiOptions` types for the `FieldExtensions` so we can see them in the `api-report.md`.
+  - Removing the redundant type in the `CustomFieldValidator` union.
+- 2f2543592c: You can now hide sections or fields in your templates based on a feature flag. For example, take this template:
+
+  ```json
+  {
+    title: 'my-schema',
+    steps: [
+      {
+        title: 'Fill in some steps',
+        schema: {
+          title: 'Fill in some steps',
+          'backstage:featureFlag': 'experimental-feature',
+          properties: {
+            name: {
+              title: 'Name',
+              type: 'string',
+              'backstage:featureFlag': 'should-show-some-stuff-first-option',
+            },
+            description: {
+              title: 'Description',
+              type: 'string',
+              description: 'A description for the component',
+            },
+            owner: {
+              title: 'Owner',
+              type: 'string',
+              description: 'Owner of the component',
+            },
+          },
+          type: 'object',
+        },
+    },
+  }
+
+  ```
+
+  If you have a feature flag that is called `experimental-feature` then your first step would be shown if you that feature flag was not active then it wouldn't be shown. The same goes for the properties in the schema. Make sure to use the key `backstage:featureFlag` in your templates if you want to use this functionality.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.10
+  - @backstage/plugin-scaffolder-common@0.2.2
+  - @backstage/plugin-catalog-react@0.7.0
+  - @backstage/catalog-model@0.11.0
+  - @backstage/catalog-client@0.7.2
+  - @backstage/core-plugin-api@0.7.0
+  - @backstage/integration@0.7.5
+  - @backstage/integration-react@0.1.23
+  - @backstage/plugin-permission-react@0.3.2
+
 ## 0.12.3
 
 ### Patch Changes

package/dist/esm/{Router-fe84df85.esm.js → Router-722c3528.esm.js}

@@ -1,10 +1,13 @@
 import React, { useState, useContext, useCallback } from 'react';
-import { useNavigate, Navigate, generatePath, useOutlet, Routes, Route } from 'react-router';
-import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, MarkdownContent, StructuredMetadataTable, InfoCard, Progress, ErrorPage } from '@backstage/core-components';
-import { useRouteRef, useApi, errorApiRef, useApiHolder, useElementFilter } from '@backstage/core-plugin-api';
-import { EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker } from '@backstage/plugin-catalog-react';
-import { makeStyles, Stepper, Step, StepLabel, Typography, StepContent, Button, Paper, Box, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
-import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, b as EntityTagsPicker, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, c as OwnedEntityPicker, d as registerComponentRouteRef, T as TemplateTypePicker, f as TemplateList, S as SecretsContext, s as scaffolderApiRef, g as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, h as FIELD_EXTENSION_KEY, i as SecretsContextProvider, j as TaskPage } from './index-87e5c74b.esm.js';
+import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
+import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, Lifecycle, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage } from '@backstage/core-components';
+import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, useElementFilter } from '@backstage/core-plugin-api';
+import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker } from '@backstage/plugin-catalog-react';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, b as EntityTagsPicker, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, c as OwnedEntityPicker, s as selectedTemplateRouteRef, d as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, f as scaffolderApiRef, g as scaffolderTaskRouteRef, h as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, j as SecretsContextProvider, k as TaskPage } from './index-3fd3ab40.esm.js';
+import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
+import WarningIcon from '@material-ui/icons/Warning';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
 import qs from 'qs';
@@ -12,22 +15,18 @@ import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
+import cloneDeep from 'lodash/cloneDeep';
 import classNames from 'classnames';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
-import '@backstage/catalog-model';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/lab';
-import '@backstage/integration-react';
 import '@material-ui/core/FormHelperText';
 import '@material-ui/core/Input';
 import '@material-ui/core/InputLabel';
 import 'react-use/lib/useDebounce';
-import '@material-ui/icons/Star';
-import '@material-ui/icons/StarBorder';
-import '@material-ui/icons/Warning';
 import 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
@@ -75,6 +74,173 @@ const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   }
 ];
 
+const useStyles$2 = makeStyles((theme) => ({
+  cardHeader: {
+    position: "relative"
+  },
+  title: {
+    backgroundImage: ({ backgroundImage }) => backgroundImage
+  },
+  box: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    "-webkit-line-clamp": 10,
+    "-webkit-box-orient": "vertical",
+    paddingBottom: "0.8em"
+  },
+  label: {
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+    fontSize: "0.65rem",
+    fontWeight: "bold",
+    letterSpacing: 0.5,
+    lineHeight: 1,
+    paddingBottom: "0.2rem"
+  },
+  leftButton: {
+    marginRight: "auto"
+  },
+  starButton: {
+    position: "absolute",
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    padding: "0.25rem"
+  }
+}));
+const useDeprecationStyles = makeStyles((theme) => ({
+  deprecationIcon: {
+    position: "absolute",
+    top: theme.spacing(0.5),
+    right: theme.spacing(3.5),
+    padding: "0.25rem"
+  },
+  link: {
+    color: theme.palette.warning.light
+  }
+}));
+const getTemplateCardProps = (template) => {
+  var _a, _b, _c, _d, _e;
+  return {
+    key: template.metadata.uid,
+    name: template.metadata.name,
+    title: `${(_a = template.metadata.title || template.metadata.name) != null ? _a : ""}`,
+    type: (_b = template.spec.type) != null ? _b : "",
+    description: (_c = template.metadata.description) != null ? _c : "-",
+    tags: (_e = (_d = template.metadata) == null ? void 0 : _d.tags) != null ? _e : []
+  };
+};
+const DeprecationWarning = () => {
+  const styles = useDeprecationStyles();
+  const Title = /* @__PURE__ */ React.createElement(Typography, {
+    style: { padding: 10, maxWidth: 300 }
+  }, "This template uses a syntax that has been deprecated, and should be migrated to a newer syntax. Click for more info.");
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.deprecationIcon
+  }, /* @__PURE__ */ React.createElement(Tooltip, {
+    title: Title
+  }, /* @__PURE__ */ React.createElement(Link, {
+    href: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
+    className: styles.link
+  }, /* @__PURE__ */ React.createElement(WarningIcon, null))));
+};
+const TemplateCard = ({ template, deprecated }) => {
+  var _a;
+  const backstageTheme = useTheme();
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const templateProps = getTemplateCardProps(template);
+  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
+  const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
+  const theme = backstageTheme.getPageTheme({ themeId });
+  const classes = useStyles$2({ backgroundImage: theme.backgroundImage });
+  const href = templateRoute({ templateName: templateProps.name });
+  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, {
+    className: classes.cardHeader
+  }, /* @__PURE__ */ React.createElement(FavoriteEntity, {
+    className: classes.starButton,
+    entity: template
+  }), deprecated && /* @__PURE__ */ React.createElement(DeprecationWarning, null), /* @__PURE__ */ React.createElement(ItemCardHeader, {
+    title: templateProps.title,
+    subtitle: templateProps.type,
+    classes: { root: classes.title }
+  })), /* @__PURE__ */ React.createElement(CardContent, {
+    style: { display: "grid" }
+  }, /* @__PURE__ */ React.createElement(Box, {
+    className: classes.box
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body2",
+    className: classes.label
+  }, "Description"), /* @__PURE__ */ React.createElement(MarkdownContent, {
+    content: templateProps.description
+  })), /* @__PURE__ */ React.createElement(Box, {
+    className: classes.box
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body2",
+    className: classes.label
+  }, "Owner"), /* @__PURE__ */ React.createElement(EntityRefLinks, {
+    entityRefs: ownedByRelations,
+    defaultKind: "Group"
+  })), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body2",
+    className: classes.label
+  }, "Tags"), (_a = templateProps.tags) == null ? void 0 : _a.map((tag) => /* @__PURE__ */ React.createElement(Chip, {
+    size: "small",
+    label: tag,
+    key: tag
+  })))), /* @__PURE__ */ React.createElement(CardActions, null, sourceLocation && /* @__PURE__ */ React.createElement(IconButton, {
+    className: classes.leftButton,
+    href: sourceLocation.locationTargetUrl
+  }, /* @__PURE__ */ React.createElement(ScmIntegrationIcon, {
+    type: sourceLocation.integrationType
+  })), /* @__PURE__ */ React.createElement(Button, {
+    color: "primary",
+    to: href,
+    "aria-label": `Choose ${templateProps.title}`
+  }, "Choose")));
+};
+
+const TemplateList = ({
+  TemplateCardComponent,
+  group
+}) => {
+  const { loading, error, entities } = useEntityList();
+  const Card = TemplateCardComponent || TemplateCard;
+  const maybeFilteredEntities = group ? entities.filter((e) => group.filter(e)) : entities;
+  const titleComponent = (() => {
+    if (group == null ? void 0 : group.titleComponent) {
+      console.warn("DEPRECATED: group.titleComponent is now deprecated. Use group.title instead, it can be a string or a react component");
+      return group == null ? void 0 : group.titleComponent;
+    }
+    if (group && group.title) {
+      if (typeof group.title === "string") {
+        return /* @__PURE__ */ React.createElement(ContentHeader, {
+          title: group.title
+        });
+      }
+      return group.title;
+    }
+    return /* @__PURE__ */ React.createElement(ContentHeader, {
+      title: "Other Templates"
+    });
+  })();
+  if (group && maybeFilteredEntities.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Progress, null), error && /* @__PURE__ */ React.createElement(WarningPanel, {
+    title: "Oops! Something went wrong loading the templates"
+  }, error.message), !error && !loading && !entities.length && /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body2"
+  }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link$1, {
+    to: "https://backstage.io/docs/features/software-templates/adding-templates"
+  }, "adding templates"), "."), /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(Card, {
+    key: stringifyEntityRef(template),
+    template,
+    deprecated: template.apiVersion === "backstage.io/v1beta2"
+  })))));
+};
+
 const useStyles$1 = makeStyles((theme) => ({
   contentWrapper: {
     display: "grid",
@@ -271,18 +437,36 @@ function getReviewData(formData, steps) {
   }
   return reviewData;
 }
-const MultistepJsonForm = ({
-  steps,
-  formData,
-  onChange,
-  onReset,
-  onFinish,
-  fields,
-  widgets
-}) => {
+const MultistepJsonForm = (props) => {
+  const { formData, onChange, onReset, onFinish, fields, widgets } = props;
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
   const errorApi = useApi(errorApiRef);
+  const featureFlagApi = useApi(featureFlagsApiRef);
+  const featureFlagKey = "backstage:featureFlag";
+  const filterOutProperties = (step) => {
+    var _a;
+    const filteredStep = cloneDeep(step);
+    const removedPropertyKeys = [];
+    if (filteredStep.schema.properties) {
+      filteredStep.schema.properties = Object.fromEntries(Object.entries(filteredStep.schema.properties).filter(([key, value]) => {
+        if (value[featureFlagKey]) {
+          if (featureFlagApi.isActive(value[featureFlagKey])) {
+            return true;
+          }
+          removedPropertyKeys.push(key);
+          return false;
+        }
+        return true;
+      }));
+      filteredStep.schema.required = Array.isArray(filteredStep.schema.required) ? (_a = filteredStep.schema.required) == null ? void 0 : _a.filter((r) => !removedPropertyKeys.includes(r)) : filteredStep.schema.required;
+    }
+    return filteredStep;
+  };
+  const steps = props.steps.filter((step) => {
+    const featureFlag = step.schema[featureFlagKey];
+    return typeof featureFlag !== "string" || featureFlagApi.isActive(featureFlag);
+  }).map(filterOutProperties);
   const handleReset = () => {
     setActiveStep(0);
     onReset();
@@ -328,10 +512,10 @@ const MultistepJsonForm = ({
       },
       ...formProps,
       ...transformSchemaToProps(schema)
-    }, /* @__PURE__ */ React.createElement(Button, {
+    }, /* @__PURE__ */ React.createElement(Button$1, {
       disabled: activeStep === 0,
       onClick: handleBack
-    }, "Back"), /* @__PURE__ */ React.createElement(Button, {
+    }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
       variant: "contained",
       color: "primary",
       type: "submit"
@@ -346,13 +530,13 @@ const MultistepJsonForm = ({
     metadata: getReviewData(formData, steps)
   }), /* @__PURE__ */ React.createElement(Box, {
     mb: 4
-  }), /* @__PURE__ */ React.createElement(Button, {
+  }), /* @__PURE__ */ React.createElement(Button$1, {
     onClick: handleBack,
     disabled: disableButtons
-  }, "Back"), /* @__PURE__ */ React.createElement(Button, {
+  }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
     onClick: handleReset,
     disabled: disableButtons
-  }, "Reset"), /* @__PURE__ */ React.createElement(Button, {
+  }, "Reset"), /* @__PURE__ */ React.createElement(Button$1, {
     variant: "contained",
     color: "primary",
     onClick: handleCreate,
@@ -360,13 +544,9 @@ const MultistepJsonForm = ({
   }, "Create"))));
 };
 
-const useTemplateParameterSchema = (templateName) => {
+const useTemplateParameterSchema = (templateRef) => {
   const scaffolderApi = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(() => scaffolderApi.getTemplateParameterSchema({
-    name: templateName,
-    kind: "template",
-    namespace: "default"
-  }), [scaffolderApi, templateName]);
+  const { value, loading, error } = useAsync(() => scaffolderApi.getTemplateParameterSchema(templateRef), [scaffolderApi, templateRef]);
   return { schema: value, loading, error };
 };
 function isObject(obj) {
@@ -408,7 +588,8 @@ const TemplatePage = ({
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName } = useParams();
   const navigate = useNavigate();
-  const rootLink = useRouteRef(rootRouteRef);
+  const scaffolderTaskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const rootRoute = useRouteRef(rootRouteRef);
   const { schema, loading, error } = useTemplateParameterSchema(templateName);
   const [formState, setFormState] = useState(() => {
     var _a;
@@ -425,22 +606,30 @@ const TemplatePage = ({
   const handleChange = useCallback((e) => setFormState(e.formData), [setFormState]);
   const handleCreate = async () => {
     var _a;
-    const id = await scaffolderApi.scaffold(templateName, formState, secretsContext == null ? void 0 : secretsContext.secrets);
+    const { taskId } = await scaffolderApi.scaffold({
+      templateRef: stringifyEntityRef({
+        name: templateName,
+        kind: "template",
+        namespace: "default"
+      }),
+      values: formState,
+      secrets: secretsContext == null ? void 0 : secretsContext.secrets
+    });
     const formParams = qs.stringify({ formData: formState }, { addQueryPrefix: true });
     const newUrl = `${window.location.pathname}${formParams}`;
     (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
-    navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id }));
+    navigate(scaffolderTaskRoute({ taskId }));
   };
   if (error) {
     errorApi.post(new Error(`Failed to load template, ${error}`));
     return /* @__PURE__ */ React.createElement(Navigate, {
-      to: rootLink()
+      to: rootRoute()
     });
   }
   if (!loading && !schema) {
     errorApi.post(new Error("Template was not found."));
     return /* @__PURE__ */ React.createElement(Navigate, {
-      to: rootLink()
+      to: rootRoute()
     });
   }
   const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({ name, component }) => [name, component]));
@@ -582,13 +771,11 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const Router = ({
-  TemplateCardComponent,
-  TaskPageComponent,
-  groups
-}) => {
+const Router = (props) => {
+  const { groups, components = {} } = props;
+  const { TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
-  const TaskPageElement = TaskPageComponent || TaskPage;
+  const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
   const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
     key: FIELD_EXTENSION_WRAPPER_KEY
   }).findComponentData({
@@ -601,8 +788,8 @@ const Router = ({
   return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
     path: "/",
     element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
-      TemplateCardComponent,
-      groups
+      groups,
+      TemplateCardComponent
     })
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/templates/:templateName",
@@ -619,4 +806,4 @@ const Router = ({
 };
 
 export { Router };
-//# sourceMappingURL=Router-fe84df85.esm.js.map
+//# sourceMappingURL=Router-722c3528.esm.js.map