@backstage/plugin-scaffolder 0.14.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # @backstage/plugin-scaffolder
 
+## 1.0.0
+
+### Major Changes
+
+- b58c70c223: This package has been promoted to v1.0! To understand how this change affects the package, please check out our [versioning policy](https://backstage.io/docs/overview/versioning-policy).
+
+### Minor Changes
+
+- 9a408928a1: **BREAKING**: Removed the unused `titleComponent` property of `groups` passed to the `ScaffolderPage`. The property was already ignored, but existing usage should migrated to use the `title` property instead, which now accepts any `ReactNode`.
+
+### Patch Changes
+
+- 9b7e361783: Remove beta labels
+- a422d7ce5e: chore(deps): bump `@testing-library/react` from 11.2.6 to 12.1.3
+- 20a262c214: The `ScaffolderPage` now uses the `CatalogFilterLayout`, which means the filters are put in a drawer on smaller screens.
+- f24ef7864e: Minor typo fixes
+- d8716924d6: Implement a template preview page (`/create/preview`) to test creating form UIs
+- Updated dependencies
+  - @backstage/core-components@0.9.2
+  - @backstage/core-plugin-api@1.0.0
+  - @backstage/integration-react@1.0.0
+  - @backstage/plugin-catalog-react@1.0.0
+  - @backstage/plugin-permission-react@0.3.4
+  - @backstage/catalog-model@1.0.0
+  - @backstage/plugin-scaffolder-common@1.0.0
+  - @backstage/integration@1.0.0
+  - @backstage/catalog-client@1.0.0
+  - @backstage/config@1.0.0
+  - @backstage/errors@1.0.0
+  - @backstage/types@1.0.0
+  - @backstage/plugin-catalog-common@1.0.0
+
+## 0.15.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
+- 33e58456b5: Fixing the border color for the `FavoriteEntity` star button on the `TemplateCard`
+- Updated dependencies
+  - @backstage/plugin-catalog-react@0.9.0
+  - @backstage/core-components@0.9.1
+  - @backstage/plugin-scaffolder-common@0.3.0
+  - @backstage/catalog-model@0.13.0
+  - @backstage/plugin-catalog-common@0.2.2
+  - @backstage/catalog-client@0.9.0
+  - @backstage/integration-react@0.1.25
+
+## 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

package/dist/esm/{Router-ba25f61c.esm.js → Router-773d053b.esm.js}

@@ -1,10 +1,13 @@
 import React, { useState, useContext, useCallback } from 'react';
 import { useNavigate, Navigate, 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, featureFlagsApiRef, 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 scaffolderTaskRouteRef, h as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, j as SecretsContextProvider, k as TaskPage } from './index-da137e20.esm.js';
+import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage } from '@backstage/core-components';
+import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
+import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+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-25fdb62e.esm.js';
+import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+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, Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+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';
@@ -13,20 +16,22 @@ import useAsync from 'react-use/lib/useAsync';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
-import { stringifyEntityRef } from '@backstage/catalog-model';
 import classNames from 'classnames';
+import useDebounce from 'react-use/lib/useDebounce';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import { showPanel } from '@codemirror/panel';
+import { StreamLanguage } from '@codemirror/stream-parser';
+import CodeMirror from '@uiw/react-codemirror';
+import yaml from 'yaml';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
 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/Warning';
 import 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
@@ -74,19 +79,174 @@ const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   }
 ];
 
-const useStyles$1 = makeStyles((theme) => ({
-  contentWrapper: {
-    display: "grid",
-    gridTemplateAreas: "'filters' 'grid'",
-    gridTemplateColumns: "250px 1fr",
-    gridColumnGap: theme.spacing(2)
+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",
+    color: "#fff"
+  }
+}));
+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 && 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 ScaffolderPageContents = ({
   TemplateCardComponent,
   groups
 }) => {
-  const styles = useStyles$1();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
     title: groups ? "Other Templates" : "Templates",
@@ -100,24 +260,20 @@ const ScaffolderPageContents = ({
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create a New Component ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      shorthand: true
-    })),
+    title: "Create a New Component",
     subtitle: "Create new software components using standard templates"
   }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: "Available Templates"
   }, allowed && /* @__PURE__ */ React.createElement(CreateButton, {
     title: "Register Existing Component",
     to: registerComponentLink && registerComponentLink()
-  }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement("div", {
-    className: styles.contentWrapper
-  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, {
+  }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, {
     initialFilter: "template",
     hidden: true
   }), /* @__PURE__ */ React.createElement(UserListPicker, {
     initialFilter: "all",
     availableFilters: ["all", "starred"]
-  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement("div", null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
+  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
     key: index,
     TemplateCardComponent,
     group
@@ -309,6 +465,9 @@ const MultistepJsonForm = (props) => {
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
   const handleCreate = async () => {
+    if (!onFinish) {
+      return;
+    }
     setDisableButtons(true);
     try {
       await onFinish();
@@ -345,10 +504,10 @@ const MultistepJsonForm = (props) => {
       },
       ...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"
@@ -363,17 +522,17 @@ const MultistepJsonForm = (props) => {
     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,
-    disabled: disableButtons
+    disabled: !onFinish || disableButtons
   }, "Create"))));
 };
 
@@ -471,9 +630,7 @@ const TemplatePage = ({
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create a New Component ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      shorthand: true
-    })),
+    title: "Create a New Component",
     subtitle: "Create new software components using standard templates"
   }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, {
     "data-testid": "loading-progress"
@@ -496,7 +653,7 @@ const TemplatePage = ({
   }))));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
     padding: theme.spacing(1),
@@ -519,7 +676,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
-  const classes = useStyles();
+  const classes = useStyles$1();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
@@ -604,20 +761,169 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const Router = (props) => {
-  var _a;
-  const {
-    TemplateCardComponent: legacyTemplateCardComponent,
-    TaskPageComponent: legacyTaskPageComponent,
-    groups,
-    components = {}
-  } = props;
-  if (legacyTemplateCardComponent || legacyTaskPageComponent) {
-    console.warn("DEPRECATION: 'TemplateCardComponent' and 'TaskPageComponent' are deprecated when calling the 'ScaffolderPage'. Use 'components' prop to pass these component overrides instead.");
+const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+  - title: Fill in some steps
+    required:
+      - name
+    properties:
+      name:
+        title: Name
+        type: string
+        description: Unique name of the component
+      owner:
+        title: Owner
+        type: string
+        description: Owner of the component
+        ui:field: OwnerPicker
+        ui:options:
+          allowedKinds:
+            - Group
+  - title: Choose a location
+    required:
+      - repoUrl
+    properties:
+      repoUrl:
+        title: Repository Location
+        type: string
+        ui:field: RepoUrlPicker
+        ui:options:
+          allowedHosts:
+            - github.com
+`;
+const useStyles = makeStyles({
+  templateSelect: {
+    marginBottom: "10px"
+  },
+  grid: {
+    height: "100%"
+  },
+  codeMirror: {
+    height: "95%"
   }
+});
+const TemplatePreviewPage = ({
+  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
+  customFieldExtensions = []
+}) => {
+  const classes = useStyles();
+  const alertApi = useApi(alertApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const apiHolder = useApiHolder();
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [schema, setSchema] = useState({
+    title: "",
+    steps: []
+  });
+  const [templateOptions, setTemplateOptions] = useState([]);
+  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+  const [formState, setFormState] = useState({});
+  const { loading } = useAsync(() => catalogApi.getEntities({
+    filter: { kind: "template" },
+    fields: [
+      "kind",
+      "metadata.namespace",
+      "metadata.name",
+      "metadata.title",
+      "spec.parameters"
+    ]
+  }).then(({ items }) => setTemplateOptions(items.map((template) => {
+    var _a;
+    return {
+      label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
+      value: template
+    };
+  }))).catch((e) => alertApi.post({
+    message: `Error loading exisiting templates: ${e.message}`,
+    severity: "error"
+  })), [catalogApi]);
+  const errorPanel = document.createElement("div");
+  errorPanel.style.color = "red";
+  useDebounce(() => {
+    try {
+      const parsedTemplate = yaml.parse(templateYaml);
+      setSchema({
+        title: "Preview",
+        steps: parsedTemplate.parameters.map((param) => ({
+          title: param.title,
+          schema: param
+        }))
+      });
+      setFormState({});
+    } catch (e) {
+      errorPanel.textContent = e.message;
+    }
+  }, 250, [setFormState, setSchema, templateYaml]);
+  const handleSelectChange = useCallback((selected) => {
+    setSelectedTemplate(selected);
+    setTemplateYaml(yaml.stringify(selected.spec));
+  }, [setTemplateYaml]);
+  const handleFormReset = () => setFormState({});
+  const handleFormChange = useCallback((e) => setFormState(e.formData), [setFormState]);
+  const handleCodeChange = useCallback((code) => {
+    setTemplateYaml(code);
+  }, [setTemplateYaml]);
+  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({ name, component }) => [name, component]));
+  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({ name, validation }) => [name, validation]));
+  return /* @__PURE__ */ React.createElement(Page, {
+    themeId: "home"
+  }, /* @__PURE__ */ React.createElement(Header, {
+    title: "Template Preview",
+    subtitle: "Preview your template parameter UI"
+  }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    className: classes.grid
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, /* @__PURE__ */ React.createElement(FormControl, {
+    className: classes.templateSelect,
+    variant: "outlined",
+    fullWidth: true
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    id: "select-template-label"
+  }, "Load Existing Template"), /* @__PURE__ */ React.createElement(Select, {
+    value: selectedTemplate,
+    label: "Load Existing Template",
+    labelId: "select-template-label",
+    onChange: (e) => handleSelectChange(e.target.value)
+  }, templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, {
+    key: idx,
+    value: option.value
+  }, option.label)))), /* @__PURE__ */ React.createElement(CodeMirror, {
+    className: classes.codeMirror,
+    value: templateYaml,
+    theme: "dark",
+    height: "100%",
+    extensions: [
+      StreamLanguage.define(yaml$1),
+      showPanel.of(() => ({ dom: errorPanel, top: true }))
+    ],
+    onChange: handleCodeChange
+  })), /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, schema && /* @__PURE__ */ React.createElement(InfoCard, {
+    key: JSON.stringify(schema)
+  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
+    formData: formState,
+    fields: customFieldComponents,
+    onChange: handleFormChange,
+    onReset: handleFormReset,
+    steps: schema.steps.map((step) => {
+      return {
+        ...step,
+        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
+      };
+    })
+  }))))));
+};
+
+const Router = (props) => {
+  const { groups, components = {}, defaultPreviewTemplate } = props;
   const { TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
-  const TaskPageElement = (_a = TaskPageComponent != null ? TaskPageComponent : legacyTaskPageComponent) != null ? _a : TaskPage;
+  const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
   const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
     key: FIELD_EXTENSION_WRAPPER_KEY
   }).findComponentData({
@@ -631,7 +937,7 @@ const Router = (props) => {
     path: "/",
     element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
       groups,
-      TemplateCardComponent: TemplateCardComponent != null ? TemplateCardComponent : legacyTemplateCardComponent
+      TemplateCardComponent
     })
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/templates/:templateName",
@@ -644,8 +950,14 @@ const Router = (props) => {
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/actions",
     element: /* @__PURE__ */ React.createElement(ActionsPage, null)
+  }), /* @__PURE__ */ React.createElement(Route, {
+    path: "/preview",
+    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePreviewPage, {
+      defaultPreviewTemplate,
+      customFieldExtensions: fieldExtensions
+    }))
   }));
 };
 
 export { Router };
-//# sourceMappingURL=Router-ba25f61c.esm.js.map
+//# sourceMappingURL=Router-773d053b.esm.js.map