@backstage/plugin-scaffolder 0.11.11 → 0.11.15

package/dist/esm/{index-8b883a7e.esm.js → index-210d6da0.esm.js}

@@ -2,19 +2,18 @@ import { createApiRef, useApi, attachComponentData, createExternalRouteRef, crea
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
-import { catalogApiRef, formatEntityRefTitle, useStarredEntity, getEntityRelations, getEntitySourceLocation, EntityRefLinks, useEntityListProvider, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, formatEntityRefTitle, useOwnedEntities, useStarredEntity, getEntityRelations, getEntitySourceLocation, EntityRefLinks, useEntityListProvider, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import { TextField, withStyles, makeStyles, IconButton, Tooltip, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Link, FormControlLabel, Checkbox } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useCallback, useEffect } from 'react';
 import { useAsync } from 'react-use';
 import { KubernetesValidatorFunctions, RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { Progress, Select, ItemCardHeader, Button, ContentHeader, WarningPanel, Link as Link$1, Content, ItemCardGrid } from '@backstage/core-components';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
-import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import { Progress, ItemCardHeader, Button, WarningPanel, ItemCardGrid } from '@backstage/core-components';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import WarningIcon from '@material-ui/icons/Warning';
@@ -26,8 +25,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
 
 const scaffolderApiRef = createApiRef({
-  id: "plugin.scaffolder.service",
-  description: "Used to make requests towards the scaffolder backend"
+  id: "plugin.scaffolder.service"
 });
 class ScaffolderClient {
   constructor(options) {
@@ -43,17 +41,17 @@ class ScaffolderClient {
       ...this.scmIntegrationsApi.bitbucket.list(),
       ...this.scmIntegrationsApi.github.list(),
       ...this.scmIntegrationsApi.gitlab.list()
-    ].map((c) => ({type: c.type, title: c.title, host: c.config.host})).filter((c) => options.allowedHosts.includes(c.host));
+    ].map((c) => ({ type: c.type, title: c.title, host: c.config.host })).filter((c) => options.allowedHosts.includes(c.host));
   }
   async getTemplateParameterSchema(templateName) {
-    const {namespace, kind, name} = templateName;
+    const { namespace, kind, name } = templateName;
     const token = await this.identityApi.getIdToken();
     const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
     const templatePath = [namespace, kind, name].map((s) => encodeURIComponent(s)).join("/");
     const url = `${baseUrl}/v2/templates/${templatePath}/parameter-schema`;
     const response = await fetch(url, {
       headers: {
-        ...token && {Authorization: `Bearer ${token}`}
+        ...token && { Authorization: `Bearer ${token}` }
       }
     });
     if (!response.ok) {
@@ -69,16 +67,16 @@ class ScaffolderClient {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        ...token && {Authorization: `Bearer ${token}`}
+        ...token && { Authorization: `Bearer ${token}` }
       },
-      body: JSON.stringify({templateName, values: {...values}})
+      body: JSON.stringify({ templateName, values: { ...values } })
     });
     if (response.status !== 201) {
       const status = `${response.status} ${response.statusText}`;
       const body = await response.text();
       throw new Error(`Backend request failed, ${status} ${body.trim()}`);
     }
-    const {id} = await response.json();
+    const { id } = await response.json();
     return id;
   }
   async getTask(taskId) {
@@ -86,10 +84,10 @@ class ScaffolderClient {
     const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
     const url = `${baseUrl}/v2/tasks/${encodeURIComponent(taskId)}`;
     const response = await fetch(url, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
-      throw ResponseError.fromResponse(response);
+      throw await ResponseError.fromResponse(response);
     }
     return await response.json();
   }
@@ -110,7 +108,7 @@ class ScaffolderClient {
       }
       this.discoveryApi.getBaseUrl("scaffolder").then((baseUrl) => {
         const url = `${baseUrl}/v2/tasks/${encodeURIComponent(taskId)}/eventstream`;
-        const eventSource = new EventSource(url, {withCredentials: true});
+        const eventSource = new EventSource(url, { withCredentials: true });
         eventSource.addEventListener("log", (event) => {
           if (event.data) {
             try {
@@ -147,7 +145,7 @@ class ScaffolderClient {
     return new ObservableImpl((subscriber) => {
       this.discoveryApi.getBaseUrl("scaffolder").then(async (baseUrl) => {
         while (!subscriber.closed) {
-          const url = `${baseUrl}/v2/tasks/${encodeURIComponent(taskId)}/events?${qs.stringify({after})}`;
+          const url = `${baseUrl}/v2/tasks/${encodeURIComponent(taskId)}/events?${qs.stringify({ after })}`;
           const response = await fetch(url);
           if (!response.ok) {
             await new Promise((resolve) => setTimeout(resolve, 1e3));
@@ -170,18 +168,22 @@ class ScaffolderClient {
     const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
     const token = await this.identityApi.getIdToken();
     const response = await fetch(`${baseUrl}/v2/actions`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
-      throw ResponseError.fromResponse(response);
+      throw await ResponseError.fromResponse(response);
     }
     return await response.json();
   }
 }
 
+const allowArbitraryValues = (uiSchema) => {
+  var _a, _b;
+  return (_b = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowArbitraryValues) != null ? _b : true;
+};
 const EntityPicker = ({
   onChange,
-  schema: {title = "Entity", description = "An entity from the catalog"},
+  schema: { title = "Entity", description = "An entity from the catalog" },
   required,
   uiSchema,
   rawErrors,
@@ -192,23 +194,29 @@ const EntityPicker = ({
   const allowedKinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowedKinds;
   const defaultKind = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.defaultKind;
   const catalogApi = useApi(catalogApiRef);
-  const {value: entities, loading} = useAsync(() => catalogApi.getEntities(allowedKinds ? {filter: {kind: allowedKinds}} : void 0));
-  const entityRefs = entities == null ? void 0 : entities.items.map((e) => formatEntityRefTitle(e, {defaultKind}));
-  const onSelect = (_, value) => {
+  const { value: entities, loading } = useAsync(() => catalogApi.getEntities(allowedKinds ? { filter: { kind: allowedKinds } } : void 0));
+  const entityRefs = entities == null ? void 0 : entities.items.map((e) => formatEntityRefTitle(e, { defaultKind }));
+  const onSelect = useCallback((_, value) => {
     onChange(value || "");
-  };
+  }, [onChange]);
+  useEffect(() => {
+    if ((entityRefs == null ? void 0 : entityRefs.length) === 1) {
+      onChange(entityRefs[0]);
+    }
+  }, [entityRefs, onChange]);
   return /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required,
     error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData
   }, /* @__PURE__ */ React.createElement(Autocomplete, {
+    disabled: (entityRefs == null ? void 0 : entityRefs.length) === 1,
     id: idSchema == null ? void 0 : idSchema.$id,
     value: formData || "",
     loading,
     onChange: onSelect,
     options: entityRefs || [],
     autoSelect: true,
-    freeSolo: true,
+    freeSolo: allowArbitraryValues(uiSchema),
     renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
       ...params,
       label: title,
@@ -224,10 +232,10 @@ const EntityPicker = ({
 const TextValuePicker = ({
   onChange,
   required,
-  schema: {title, description},
+  schema: { title, description },
   rawErrors,
   formData,
-  uiSchema: {"ui:autofocus": autoFocus},
+  uiSchema: { "ui:autofocus": autoFocus },
   idSchema,
   placeholder
 }) => /* @__PURE__ */ React.createElement(TextField, {
@@ -237,17 +245,17 @@ const TextValuePicker = ({
   helperText: description,
   required,
   value: formData != null ? formData : "",
-  onChange: ({target: {value}}) => onChange(value),
+  onChange: ({ target: { value } }) => onChange(value),
   margin: "normal",
   error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData,
-  inputProps: {autoFocus}
+  inputProps: { autoFocus }
 });
 
 const EntityNamePicker = ({
-  schema: {title = "Name", description = "Unique name of the component"},
+  schema: { title = "Name", description = "Unique name of the component" },
   ...props
 }) => /* @__PURE__ */ React.createElement(TextValuePicker, {
-  schema: {title, description},
+  schema: { title, description },
   ...props
 });
 
@@ -258,7 +266,7 @@ const entityNamePickerValidation = (value, validation) => {
 };
 
 const OwnerPicker = ({
-  schema: {title = "Owner", description = "The owner of the component"},
+  schema: { title = "Owner", description = "The owner of the component" },
   uiSchema,
   ...props
 }) => {
@@ -275,12 +283,12 @@ const OwnerPicker = ({
   };
   return /* @__PURE__ */ React.createElement(EntityPicker, {
     ...props,
-    schema: {title, description},
+    schema: { title, description },
     uiSchema: ownerUiSchema
   });
 };
 
-function splitFormData(url) {
+function splitFormData(url, allowedOwners) {
   let host = void 0;
   let owner = void 0;
   let repo = void 0;
@@ -291,7 +299,7 @@ function splitFormData(url) {
     if (url) {
       const parsed = new URL(`https://${url}`);
       host = parsed.host;
-      owner = parsed.searchParams.get("owner") || void 0;
+      owner = parsed.searchParams.get("owner") || (allowedOwners == null ? void 0 : allowedOwners[0]);
       repo = parsed.searchParams.get("repo") || void 0;
       organization = parsed.searchParams.get("organization") || void 0;
       workspace = parsed.searchParams.get("workspace") || void 0;
@@ -299,7 +307,7 @@ function splitFormData(url) {
     }
   } catch {
   }
-  return {host, owner, repo, organization, workspace, project};
+  return { host, owner, repo, organization, workspace, project };
 }
 function serializeFormData(data) {
   if (!data.host) {
@@ -329,17 +337,18 @@ const RepoUrlPicker = ({
   rawErrors,
   formData
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const scaffolderApi = useApi(scaffolderApiRef);
   const integrationApi = useApi(scmIntegrationsApiRef);
   const allowedHosts = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowedHosts;
-  const {value: integrations, loading} = useAsync(async () => {
-    return await scaffolderApi.getIntegrationsList({allowedHosts});
+  const allowedOwners = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.allowedOwners;
+  const { value: integrations, loading } = useAsync(async () => {
+    return await scaffolderApi.getIntegrationsList({ allowedHosts });
   });
-  const {host, owner, repo, organization, workspace, project} = splitFormData(formData);
-  const updateHost = useCallback((evt) => {
+  const { host, owner, repo, organization, workspace, project } = splitFormData(formData, allowedOwners);
+  const updateHost = useCallback((value) => {
     onChange(serializeFormData({
-      host: evt.target.value,
+      host: value,
       owner,
       repo,
       organization,
@@ -347,6 +356,14 @@ const RepoUrlPicker = ({
       project
     }));
   }, [onChange, owner, repo, organization, workspace, project]);
+  const updateOwnerSelect = useCallback((value) => onChange(serializeFormData({
+    host,
+    owner: value,
+    repo,
+    organization,
+    workspace,
+    project
+  })), [onChange, host, repo, organization, workspace, project]);
   const updateOwner = useCallback((evt) => onChange(serializeFormData({
     host,
     owner: evt.target.value,
@@ -411,21 +428,20 @@ const RepoUrlPicker = ({
   if (loading) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
+  const hostsOptions = integrations ? integrations.filter((i) => allowedHosts == null ? void 0 : allowedHosts.includes(i.host)).map((i) => ({ label: i.title, value: i.host })) : [{ label: "Loading...", value: "loading" }];
+  const ownersOptions = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required: true,
     error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !host
-  }, /* @__PURE__ */ React.createElement(InputLabel, {
-    htmlFor: "hostInput"
-  }, "Host"), /* @__PURE__ */ React.createElement(Select, {
+  }, /* @__PURE__ */ React.createElement(Select, {
     native: true,
-    id: "hostInput",
+    disabled: hostsOptions.length === 1,
+    label: "Host",
     onChange: updateHost,
-    value: host
-  }, integrations ? integrations.filter((i) => allowedHosts == null ? void 0 : allowedHosts.includes(i.host)).map((i) => /* @__PURE__ */ React.createElement("option", {
-    key: i.host,
-    value: i.host
-  }, i.title)) : /* @__PURE__ */ React.createElement("p", null, "loading")), /* @__PURE__ */ React.createElement(FormHelperText, null, "The host where the repository will be created")), host === "dev.azure.com" && /* @__PURE__ */ React.createElement(FormControl, {
+    selected: host,
+    items: hostsOptions
+  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The host where the repository will be created")), host === "dev.azure.com" && /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required: true,
     error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !organization
@@ -435,7 +451,7 @@ const RepoUrlPicker = ({
     id: "repoInput",
     onChange: updateOrganization,
     value: organization
-  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The name of the organization")), host && ((_b = integrationApi.byHost(host)) == null ? void 0 : _b.type) === "bitbucket" && /* @__PURE__ */ React.createElement(React.Fragment, null, host === "bitbucket.org" && /* @__PURE__ */ React.createElement(FormControl, {
+  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The name of the organization")), host && ((_c = integrationApi.byHost(host)) == null ? void 0 : _c.type) === "bitbucket" && /* @__PURE__ */ React.createElement(React.Fragment, null, host === "bitbucket.org" && /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required: true,
     error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !workspace
@@ -455,7 +471,7 @@ const RepoUrlPicker = ({
     id: "wokrspaceInput",
     onChange: updateProject,
     value: project
-  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The project where the repository will be created"))), host && ((_c = integrationApi.byHost(host)) == null ? void 0 : _c.type) !== "bitbucket" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, {
+  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The project where the repository will be created"))), host && ((_d = integrationApi.byHost(host)) == null ? void 0 : _d.type) !== "bitbucket" && !allowedOwners && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required: true,
     error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !owner
@@ -465,6 +481,17 @@ const RepoUrlPicker = ({
     id: "ownerInput",
     onChange: updateOwner,
     value: owner
+  }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The organization, user or project that this repo will belong to"))), host && ((_e = integrationApi.byHost(host)) == null ? void 0 : _e.type) !== "bitbucket" && allowedOwners && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, {
+    margin: "normal",
+    required: true,
+    error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !owner
+  }, /* @__PURE__ */ React.createElement(Select, {
+    native: true,
+    label: "Owner Available",
+    onChange: updateOwnerSelect,
+    disabled: ownersOptions.length === 1,
+    selected: owner,
+    items: ownersOptions
   }), /* @__PURE__ */ React.createElement(FormHelperText, null, "The organization, user or project that this repo will belong to"))), /* @__PURE__ */ React.createElement(FormControl, {
     margin: "normal",
     required: true,
@@ -481,7 +508,7 @@ const RepoUrlPicker = ({
 const repoPickerValidation = (value, validation, context) => {
   var _a;
   try {
-    const {host, searchParams} = new URL(`https://${value}`);
+    const { host, searchParams } = new URL(`https://${value}`);
     const integrationApi = context.apiHolder.get(scmIntegrationsApiRef);
     if (!host) {
       validation.addError("Incomplete repository location provided, host not provided");
@@ -507,6 +534,47 @@ const repoPickerValidation = (value, validation, context) => {
   }
 };
 
+const OwnedEntityPicker = ({
+  onChange,
+  schema: { title = "Entity", description = "An entity from the catalog" },
+  required,
+  uiSchema,
+  rawErrors,
+  formData,
+  idSchema
+}) => {
+  var _a, _b;
+  const allowedKinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowedKinds;
+  const defaultKind = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.defaultKind;
+  const { ownedEntities, loading } = useOwnedEntities(allowedKinds);
+  const entityRefs = ownedEntities == null ? void 0 : ownedEntities.items.map((e) => formatEntityRefTitle(e, { defaultKind })).filter((n) => n);
+  const onSelect = (_, value) => {
+    onChange(value || "");
+  };
+  return /* @__PURE__ */ React.createElement(FormControl, {
+    margin: "normal",
+    required,
+    error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData
+  }, /* @__PURE__ */ React.createElement(Autocomplete, {
+    id: idSchema == null ? void 0 : idSchema.$id,
+    value: formData || "",
+    loading,
+    onChange: onSelect,
+    options: entityRefs || [],
+    autoSelect: true,
+    freeSolo: true,
+    renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+      ...params,
+      label: title,
+      margin: "normal",
+      helperText: description,
+      variant: "outlined",
+      required,
+      InputProps: params.InputProps
+    })
+  }));
+};
+
 const FIELD_EXTENSION_WRAPPER_KEY = "scaffolder.extensions.wrapper.v1";
 const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
 function createScaffolderFieldExtension(options) {
@@ -539,7 +607,7 @@ const scaffolderPlugin = createPlugin({
         identityApi: identityApiRef,
         scmIntegrationsApi: scmIntegrationsApiRef
       },
-      factory: ({discoveryApi, identityApi, scmIntegrationsApi}) => new ScaffolderClient({discoveryApi, identityApi, scmIntegrationsApi})
+      factory: ({ discoveryApi, identityApi, scmIntegrationsApi }) => new ScaffolderClient({ discoveryApi, identityApi, scmIntegrationsApi })
     })
   ],
   routes: {
@@ -569,9 +637,13 @@ const OwnerPickerFieldExtension = scaffolderPlugin.provide(createScaffolderField
 }));
 const ScaffolderPage = scaffolderPlugin.provide(createRoutableExtension({
   name: "ScaffolderPage",
-  component: () => import('./Router-de99a5d2.esm.js').then((m) => m.Router),
+  component: () => import('./Router-6eee3fa9.esm.js').then((m) => m.Router),
   mountPoint: rootRouteRef
 }));
+const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(createScaffolderFieldExtension({
+  component: OwnedEntityPicker,
+  name: "OwnedEntityPicker"
+}));
 
 const YellowStar = withStyles({
   root: {
@@ -595,7 +667,7 @@ const favouriteTemplateTooltip = (isStarred) => isStarred ? "Remove from favorit
 const favouriteTemplateIcon = (isStarred) => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(WhiteBorderStar, null);
 const FavouriteTemplate = (props) => {
   const classes = useStyles$1();
-  const {toggleStarredEntity, isStarredEntity} = useStarredEntity(props.entity);
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
   return /* @__PURE__ */ React.createElement(IconButton, {
     color: "inherit",
     className: classes.starButton,
@@ -611,7 +683,7 @@ const useStyles = makeStyles((theme) => ({
     position: "relative"
   },
   title: {
-    backgroundImage: ({backgroundImage}) => backgroundImage
+    backgroundImage: ({ backgroundImage }) => backgroundImage
   },
   box: {
     overflow: "hidden",
@@ -659,7 +731,7 @@ const getTemplateCardProps = (template) => {
 const DeprecationWarning = () => {
   const styles = useDeprecationStyles();
   const Title = /* @__PURE__ */ React.createElement(Typography, {
-    style: {padding: 10, maxWidth: 300}
+    style: { padding: 10, maxWidth: 300 }
   }, "This template syntax is deprecated. Click for more info.");
   return /* @__PURE__ */ React.createElement("div", {
     className: styles.deprecationIcon
@@ -670,15 +742,15 @@ const DeprecationWarning = () => {
     className: styles.link
   }, /* @__PURE__ */ React.createElement(WarningIcon, null))));
 };
-const TemplateCard = ({template, deprecated}) => {
+const TemplateCard = ({ template, deprecated }) => {
   var _a;
   const backstageTheme = useTheme();
   const rootLink = useRouteRef(rootRouteRef);
   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({backgroundImage: theme.backgroundImage});
+  const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
+  const theme = backstageTheme.getPageTheme({ themeId });
+  const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(`${rootLink()}/templates/:templateName`, {
     templateName: templateProps.name
   });
@@ -691,9 +763,9 @@ const TemplateCard = ({template, deprecated}) => {
   }), deprecated && /* @__PURE__ */ React.createElement(DeprecationWarning, null), /* @__PURE__ */ React.createElement(ItemCardHeader, {
     title: templateProps.title,
     subtitle: templateProps.type,
-    classes: {root: classes.title}
+    classes: { root: classes.title }
   })), /* @__PURE__ */ React.createElement(CardContent, {
-    style: {display: "grid"}
+    style: { display: "grid" }
   }, /* @__PURE__ */ React.createElement(Box, {
     className: classes.box
   }, /* @__PURE__ */ React.createElement(Typography, {
@@ -726,19 +798,31 @@ const TemplateCard = ({template, deprecated}) => {
   }, "Choose")));
 };
 
-const TemplateList = ({TemplateCardComponent}) => {
-  const {loading, error, entities} = useEntityListProvider();
+const TemplateList = ({
+  TemplateCardComponent,
+  group
+}) => {
+  const { loading, error, entities } = useEntityListProvider();
   const Card = TemplateCardComponent || TemplateCard;
+  const maybeFilteredEntities = group ? entities.filter((e) => group.filter(e)) : entities;
+  const title = group ? group.titleComponent || /* @__PURE__ */ React.createElement(ContentHeader, {
+    title: group.title
+  }) : /* @__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, {
-    href: "https://backstage.io/docs/features/software-templates/adding-templates"
-  }, "adding templates"), "."), /* @__PURE__ */ React.createElement(ItemCardGrid, null, entities && (entities == null ? void 0 : entities.length) > 0 && entities.map((template) => /* @__PURE__ */ React.createElement(Card, {
+  }, "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, title, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(Card, {
     key: stringifyEntityRef(template),
     template
-  }))));
+  })))));
 };
 
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
@@ -749,7 +833,7 @@ const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, {
 });
 const TemplateTypePicker = () => {
   const alertApi = useApi(alertApiRef);
-  const {error, loading, availableTypes, selectedTypes, setSelectedTypes} = useEntityTypeFilter();
+  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
   if (loading)
     return /* @__PURE__ */ React.createElement(Progress, null);
   if (!availableTypes)
@@ -772,7 +856,7 @@ const TemplateTypePicker = () => {
     options: availableTypes,
     value: selectedTypes,
     onChange: (_, value) => setSelectedTypes(value),
-    renderOption: (option, {selected}) => /* @__PURE__ */ React.createElement(FormControlLabel, {
+    renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(FormControlLabel, {
       control: /* @__PURE__ */ React.createElement(Checkbox, {
         icon,
         checkedIcon,
@@ -791,5 +875,5 @@ const TemplateTypePicker = () => {
   }));
 };
 
-export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, EntityNamePicker as a, registerComponentRouteRef as b, TemplateList as c, rootRouteRef as d, entityNamePickerValidation as e, FIELD_EXTENSION_KEY as f, createScaffolderFieldExtension as g, ScaffolderFieldExtensions as h, EntityPickerFieldExtension as i, EntityNamePickerFieldExtension as j, OwnerPickerFieldExtension as k, RepoUrlPickerFieldExtension as l, ScaffolderPage as m, scaffolderPlugin as n, TextValuePicker as o, FavouriteTemplate as p, repoPickerValidation as r, scaffolderApiRef as s };
-//# sourceMappingURL=index-8b883a7e.esm.js.map
+export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, EntityNamePicker as a, OwnedEntityPicker as b, registerComponentRouteRef as c, TemplateList as d, entityNamePickerValidation as e, rootRouteRef as f, FIELD_EXTENSION_KEY as g, createScaffolderFieldExtension as h, ScaffolderFieldExtensions as i, EntityPickerFieldExtension as j, EntityNamePickerFieldExtension as k, OwnerPickerFieldExtension as l, OwnedEntityPickerFieldExtension as m, RepoUrlPickerFieldExtension as n, ScaffolderPage as o, scaffolderPlugin as p, TextValuePicker as q, repoPickerValidation as r, scaffolderApiRef as s, FavouriteTemplate as t };
+//# sourceMappingURL=index-210d6da0.esm.js.map