@backstage/plugin-scaffolder 0.11.12 → 0.11.16

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @backstage/plugin-scaffolder
 
+## 0.11.16
+
+### Patch Changes
+
+- 9c25894892: Implement a `EntityTagsPicker` field extension
+- 7d4b4e937c: Uptake changes to the GitHub Credentials Provider interface.
+- d078377f67: Support navigating back to pre-filled templates to update inputs of scaffolder tasks for resubmission
+- Updated dependencies
+  - @backstage/plugin-catalog-react@0.6.9
+  - @backstage/plugin-scaffolder-common@0.1.2
+  - @backstage/integration@0.7.0
+  - @backstage/integration-react@0.1.17
+
+## 0.11.15
+
+### Patch Changes
+
+- c5eb756760: Fix a small browser console warning
+- ff5ff57883: EntityPicker can require an existing entity be selected by disallowing arbitrary values
+- 0f645a7947: Added OwnedEntityPicker field which displays Owned Entities in options
+- b646a73fe0: In @backstage/plugin-scaffolder - When user will have one option available in hostUrl or owner - autoselect and select component should be readonly.
+
+  in @backstage/core-components - Select component has extended API with few more props: native : boolean, disabled: boolean. native - if set to true - Select component will use native browser select picker (not rendered by Material UI lib ).
+  disabled - if set to true - action on component will not be possible.
+
+- 7a4bd2ceac: Prefer using `Link` from `@backstage/core-components` rather than material-UI.
+- 4c269c7c23: Add DescriptionField override to support Markdown
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/plugin-catalog-react@0.6.8
+  - @backstage/core-components@0.8.2
+  - @backstage/catalog-client@0.5.3
+  - @backstage/integration-react@0.1.16
+
+## 0.11.14
+
+### Patch Changes
+
+- 6845cce533: Can specify allowedOwners to the RepoUrlPicker picker in a template definition
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- 2edcf7738f: Fix bug with setting owner in RepoUrlPicker causing validation failure
+- b291c3176e: Switch to using `LogViewer` component from `@backstage/core-components` to display scaffolder logs.
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+  - @backstage/integration-react@0.1.15
+  - @backstage/plugin-catalog-react@0.6.5
+
+## 0.11.13
+
+### Patch Changes
+
+- ed5bef529e: Add group filtering to the scaffolder page so that individuals can surface specific templates to end users ahead of others, or group templates together. This can be accomplished by passing in a `groups` prop to the `ScaffolderPage`
+
+  ```
+  <ScaffolderPage
+    groups={[
+      {
+        title: "Recommended",
+        filter: entity =>
+          entity?.metadata?.tags?.includes('recommended') ?? false,
+      },
+    ]}
+  />
+  ```
+
+- Updated dependencies
+  - @backstage/integration@0.6.10
+  - @backstage/core-components@0.7.6
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+
 ## 0.11.12
 
 ### Patch Changes

package/dist/esm/{Router-5919d585.esm.js → Router-a8e778fd.esm.js}

@@ -1,10 +1,11 @@
-import React, { useState, useCallback, useEffect, memo, Suspense, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, memo, useMemo } from 'react';
 import { useNavigate, Navigate, generatePath, useParams as useParams$1, useOutlet, Routes, Route } from 'react-router';
-import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, Link, Progress, ErrorPage } from '@backstage/core-components';
+import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, MarkdownContent, StructuredMetadataTable, InfoCard, Link, ErrorPage, LogViewer, Progress } from '@backstage/core-components';
 import { useRouteRef, useApi, errorApiRef, useApiHolder, useApp, useElementFilter } from '@backstage/core-plugin-api';
 import { EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { makeStyles, Stepper, Step, StepLabel, Typography, StepContent, Button, Paper, Box, LinearProgress, Grid, StepButton, CircularProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
-import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, b as registerComponentRouteRef, T as TemplateTypePicker, c as TemplateList, s as scaffolderApiRef, d as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, f as FIELD_EXTENSION_KEY } from './index-9d7df4e7.esm.js';
+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 scaffolderApiRef, g as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, h as FIELD_EXTENSION_KEY } from './index-f378943f.esm.js';
+import qs from 'qs';
 import { useParams } from 'react-router-dom';
 import { useAsync, useInterval } from 'react-use';
 import { withTheme } from '@rjsf/core';
@@ -24,15 +25,14 @@ import { useImmerReducer } from 'use-immer';
 import { parseEntityName } from '@backstage/catalog-model';
 import LanguageIcon from '@material-ui/icons/Language';
 import '@backstage/errors';
-import 'qs';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
+import '@material-ui/lab';
 import '@backstage/integration-react';
-import '@material-ui/core/Select';
-import '@material-ui/core/InputLabel';
-import '@material-ui/core/Input';
 import '@material-ui/core/FormHelperText';
+import '@material-ui/core/Input';
+import '@material-ui/core/InputLabel';
 import '@material-ui/icons/Star';
 import '@material-ui/icons/StarBorder';
 import '@material-ui/icons/Warning';
@@ -40,7 +40,6 @@ import 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
 import '@material-ui/icons/ExpandMore';
-import '@material-ui/lab';
 
 const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   {
@@ -52,6 +51,10 @@ const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
     name: "EntityNamePicker",
     validation: entityNamePickerValidation
   },
+  {
+    component: EntityTagsPicker,
+    name: "EntityTagsPicker"
+  },
   {
     component: RepoUrlPicker,
     name: "RepoUrlPicker",
@@ -60,6 +63,10 @@ const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   {
     component: OwnerPicker,
     name: "OwnerPicker"
+  },
+  {
+    component: OwnedEntityPicker,
+    name: "OwnedEntityPicker"
   }
 ];
 
@@ -72,10 +79,18 @@ const useStyles$3 = makeStyles((theme) => ({
   }
 }));
 const ScaffolderPageContents = ({
-  TemplateCardComponent
+  TemplateCardComponent,
+  groups
 }) => {
   const styles = useStyles$3();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const otherTemplatesGroup = {
+    title: groups ? "Other Templates" : "Templates",
+    filter: (entity) => {
+      const filtered = (groups != null ? groups : []).map((group) => group.filter(entity));
+      return !filtered.some((result) => result === true);
+    }
+  };
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -97,14 +112,22 @@ const ScaffolderPageContents = ({
   }), /* @__PURE__ */ React.createElement(UserListPicker, {
     initialFilter: "all",
     availableFilters: ["all", "starred"]
-  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TemplateList, {
-    TemplateCardComponent
+  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement("div", null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
+    key: index,
+    TemplateCardComponent,
+    group
+  })), /* @__PURE__ */ React.createElement(TemplateList, {
+    key: "other",
+    TemplateCardComponent,
+    group: otherTemplatesGroup
   })))));
 };
 const ScaffolderPage = ({
-  TemplateCardComponent
+  TemplateCardComponent,
+  groups
 }) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(ScaffolderPageContents, {
-  TemplateCardComponent
+  TemplateCardComponent,
+  groups
 }));
 
 function isObject$1(value) {
@@ -114,7 +137,7 @@ function extractUiSchema(schema, uiSchema) {
   if (!isObject$1(schema)) {
     return;
   }
-  const {properties, items, anyOf, oneOf, allOf, dependencies} = schema;
+  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
   for (const propName in schema) {
     if (!schema.hasOwnProperty(propName)) {
       continue;
@@ -183,9 +206,18 @@ function transformSchemaToProps(inputSchema) {
   delete schema.title;
   const uiSchema = {};
   extractUiSchema(schema, uiSchema);
-  return {schema, uiSchema};
+  return { schema, uiSchema };
 }
 
+const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, {
+  content: description
+});
+
+var fieldOverrides = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DescriptionField: DescriptionField
+});
+
 const Form = withTheme(Theme);
 function getUiSchemasFromSteps(steps) {
   const uiSchemas = [];
@@ -264,7 +296,7 @@ const MultistepJsonForm = ({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, {
     activeStep,
     orientation: "vertical"
-  }, steps.map(({title, schema, ...formProps}, index) => {
+  }, steps.map(({ title, schema, ...formProps }, index) => {
     return /* @__PURE__ */ React.createElement(Step, {
       key: title
     }, /* @__PURE__ */ React.createElement(StepLabel, {
@@ -278,7 +310,7 @@ const MultistepJsonForm = ({
       key: title
     }, /* @__PURE__ */ React.createElement(Form, {
       showErrorList: false,
-      fields,
+      fields: { ...fieldOverrides, ...fields },
       widgets,
       noHtml5Validate: true,
       formData,
@@ -323,12 +355,12 @@ const MultistepJsonForm = ({
 
 const useTemplateParameterSchema = (templateName) => {
   const scaffolderApi = useApi(scaffolderApiRef);
-  const {value, loading, error} = useAsync(() => scaffolderApi.getTemplateParameterSchema({
+  const { value, loading, error } = useAsync(() => scaffolderApi.getTemplateParameterSchema({
     name: templateName,
     kind: "template",
     namespace: "default"
   }), [scaffolderApi, templateName]);
-  return {schema: value, loading, error};
+  return { schema: value, loading, error };
 };
 function isObject(obj) {
   return typeof obj === "object" && obj !== null && !Array.isArray(obj);
@@ -366,16 +398,26 @@ const TemplatePage = ({
   const apiHolder = useApiHolder();
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
-  const {templateName} = useParams();
+  const { templateName } = useParams();
   const navigate = useNavigate();
   const rootLink = useRouteRef(rootRouteRef);
-  const {schema, loading, error} = useTemplateParameterSchema(templateName);
-  const [formState, setFormState] = useState({});
+  const { schema, loading, error } = useTemplateParameterSchema(templateName);
+  const [formState, setFormState] = useState(() => {
+    var _a;
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true
+    });
+    return (_a = query.formData) != null ? _a : {};
+  });
   const handleFormReset = () => setFormState({});
   const handleChange = useCallback((e) => setFormState(e.formData), [setFormState]);
   const handleCreate = async () => {
+    var _a;
     const id = await scaffolderApi.scaffold(templateName, formState);
-    navigate(generatePath(`${rootLink()}/tasks/:taskId`, {taskId: id}));
+    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 }));
   };
   if (error) {
     errorApi.post(new Error(`Failed to load template, ${error}`));
@@ -389,8 +431,8 @@ const TemplatePage = ({
       to: rootLink()
     });
   }
-  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({name, component}) => [name, component]));
-  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({name, validation}) => [name, validation]));
+  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, {
@@ -404,7 +446,7 @@ const TemplatePage = ({
   }), schema && /* @__PURE__ */ React.createElement(InfoCard, {
     title: schema.title,
     noPadding: true,
-    titleTypographyProps: {component: "h2"}
+    titleTypographyProps: { component: "h2" }
   }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
     formData: formState,
     fields: customFieldComponents,
@@ -414,7 +456,7 @@ const TemplatePage = ({
     steps: schema.steps.map((step) => {
       return {
         ...step,
-        validate: createValidator(step.schema, customFieldValidators, {apiHolder})
+        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
       };
     })
   }))));
@@ -425,7 +467,7 @@ function reducer(draft, action) {
   switch (action.type) {
     case "INIT": {
       draft.steps = action.data.spec.steps.reduce((current, next) => {
-        current[next.id] = {status: "open", id: next.id};
+        current[next.id] = { status: "open", id: next.id };
         return current;
       }, {});
       draft.stepLogs = action.data.spec.steps.reduce((current, next) => {
@@ -491,13 +533,13 @@ const useTaskEventStream = (taskId) => {
       if (didCancel) {
         return;
       }
-      dispatch({type: "INIT", data: task});
-      const observable = scaffolderApi.streamLogs({taskId});
+      dispatch({ type: "INIT", data: task });
+      const observable = scaffolderApi.streamLogs({ taskId });
       const collectedLogEvents = new Array();
       function emitLogs() {
         if (collectedLogEvents.length) {
           const logs = collectedLogEvents.splice(0, collectedLogEvents.length);
-          dispatch({type: "LOGS", data: logs});
+          dispatch({ type: "LOGS", data: logs });
         }
       }
       logPusher = setInterval(emitLogs, 500);
@@ -508,7 +550,7 @@ const useTaskEventStream = (taskId) => {
               return collectedLogEvents.push(event);
             case "completion":
               emitLogs();
-              dispatch({type: "COMPLETED", data: event});
+              dispatch({ type: "COMPLETED", data: event });
               return void 0;
             default:
               throw new Error(`Unhandled event type ${event.type} in observer`);
@@ -516,12 +558,12 @@ const useTaskEventStream = (taskId) => {
         },
         error: (error) => {
           emitLogs();
-          dispatch({type: "ERROR", data: error});
+          dispatch({ type: "ERROR", data: error });
         }
       });
     }, (error) => {
       if (!didCancel) {
-        dispatch({type: "ERROR", data: error});
+        dispatch({ type: "ERROR", data: error });
       }
     });
     return () => {
@@ -548,7 +590,7 @@ const useStyles$2 = makeStyles({
   }
 });
 const IconLink = (props) => {
-  const {href, text, Icon, ...linkProps} = props;
+  const { href, text, Icon, ...linkProps } = props;
   const classes = useStyles$2();
   return /* @__PURE__ */ React.createElement(Grid, {
     container: true,
@@ -567,9 +609,9 @@ const IconLink = (props) => {
   }, text || href)));
 };
 
-const TaskPageLinks = ({output}) => {
-  const {entityRef: entityRefOutput, remoteUrl} = output;
-  let {links = []} = output;
+const TaskPageLinks = ({ output }) => {
+  const { entityRef: entityRefOutput, remoteUrl } = output;
+  let { links = [] } = output;
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
@@ -577,7 +619,7 @@ const TaskPageLinks = ({output}) => {
     return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
   };
   if (remoteUrl) {
-    links = [{url: remoteUrl, title: "Repo"}, ...links];
+    links = [{ url: remoteUrl, title: "Repo" }, ...links];
   }
   if (entityRefOutput) {
     links = [
@@ -592,14 +634,14 @@ const TaskPageLinks = ({output}) => {
   return /* @__PURE__ */ React.createElement(Box, {
     px: 3,
     pb: 3
-  }, links.filter(({url, entityRef}) => url || entityRef).map(({url, entityRef, title, icon}) => {
+  }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
     if (entityRef) {
       const entityName = parseEntityName(entityRef);
       const target = entityRoute(entityName);
-      return {title, icon, url: target};
+      return { title, icon, url: target };
     }
-    return {title, icon, url};
-  }).map(({url, title, icon}, i) => /* @__PURE__ */ React.createElement(IconLink, {
+    return { title, icon, url };
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(IconLink, {
     key: `output-link-${i}`,
     href: url,
     text: title != null ? title : url,
@@ -608,15 +650,14 @@ const TaskPageLinks = ({output}) => {
   })));
 };
 
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const humanizeDuration = require("humanize-duration");
 const useStyles$1 = makeStyles$1((theme) => createStyles({
   root: {
     width: "100%"
   },
   button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1)
+    marginBottom: theme.spacing(2),
+    marginLeft: theme.spacing(2)
   },
   actionsContainer: {
     marginBottom: theme.spacing(2)
@@ -634,7 +675,7 @@ const useStyles$1 = makeStyles$1((theme) => createStyles({
     width: "100%"
   }
 }));
-const StepTimeTicker = ({step}) => {
+const StepTimeTicker = ({ step }) => {
   const [time, setTime] = useState("");
   useInterval(() => {
     if (!step.startedAt) {
@@ -644,7 +685,7 @@ const StepTimeTicker = ({step}) => {
     const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
     const startedAt = DateTime.fromISO(step.startedAt);
     const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
-    setTime(humanizeDuration(formatted, {round: true}));
+    setTime(humanizeDuration(formatted, { round: true }));
   }, 1e3);
   return /* @__PURE__ */ React.createElement(Typography$1, {
     variant: "caption"
@@ -666,7 +707,7 @@ const useStepIconStyles = makeStyles$1((theme) => createStyles({
 }));
 function TaskStepIconComponent(props) {
   const classes = useStepIconStyles();
-  const {active, completed, error} = props;
+  const { active, completed, error } = props;
   const getMiddle = () => {
     if (active) {
       return /* @__PURE__ */ React.createElement(CircularProgress, {
@@ -729,24 +770,14 @@ const TaskStatusStepper = memo(({
     })))));
   })));
 });
-const TaskLogger = memo(({log}) => {
-  return /* @__PURE__ */ React.createElement(Suspense, {
-    fallback: /* @__PURE__ */ React.createElement(Progress, null)
-  }, /* @__PURE__ */ React.createElement("div", {
-    style: {height: "80vh"}
-  }, /* @__PURE__ */ React.createElement(LazyLog, {
-    text: log,
-    extraLines: 1,
-    follow: true,
-    selectableLines: true,
-    enableSearch: true
-  })));
-});
-const hasLinks = ({entityRef, remoteUrl, links = []}) => !!(entityRef || remoteUrl || links.length > 0);
+const hasLinks = ({ entityRef, remoteUrl, links = [] }) => !!(entityRef || remoteUrl || links.length > 0);
 const TaskPage = () => {
+  const classes = useStyles$1();
+  const navigate = useNavigate();
+  const rootLink = useRouteRef(rootRouteRef);
   const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
   const [lastActiveStepId, setLastActiveStepId] = useState(void 0);
-  const {taskId} = useParams$1();
+  const { taskId } = useParams$1();
   const taskStream = useTaskEventStream(taskId);
   const completed = taskStream.completed;
   const steps = useMemo(() => {
@@ -780,7 +811,17 @@ const TaskPage = () => {
     return log.join("\n");
   }, [taskStream.stepLogs, currentStepId]);
   const taskNotFound = taskStream.completed === true && taskStream.loading === false && !taskStream.task;
-  const {output} = taskStream;
+  const { output } = taskStream;
+  const handleStartOver = () => {
+    var _a, _b;
+    if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.metadata) == null ? void 0 : _b.name)) {
+      navigate(generatePath(rootLink()));
+    }
+    const formData = taskStream.task.spec.apiVersion === "backstage.io/v1beta2" ? taskStream.task.spec.values : taskStream.task.spec.parameters;
+    navigate(generatePath(`${rootLink()}/templates/:templateName?${qs.stringify({ formData })}`, {
+      templateName: taskStream.task.spec.metadata.name
+    }));
+  };
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -805,12 +846,20 @@ const TaskPage = () => {
     onUserStepChange: setUserSelectedStepId
   }), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, {
     output
-  }))), /* @__PURE__ */ React.createElement(Grid$1, {
+  }), /* @__PURE__ */ React.createElement(Button, {
+    className: classes.button,
+    onClick: handleStartOver,
+    disabled: !completed,
+    variant: "contained",
+    color: "primary"
+  }, "Start Over"))), /* @__PURE__ */ React.createElement(Grid$1, {
     item: true,
     xs: 9
-  }, /* @__PURE__ */ React.createElement(TaskLogger, {
-    log: logAsString
-  }))))));
+  }, /* @__PURE__ */ React.createElement("div", {
+    style: { height: "80vh" }
+  }, /* @__PURE__ */ React.createElement(LogViewer, {
+    text: logAsString
+  })))))));
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -837,7 +886,7 @@ const useStyles = makeStyles((theme) => ({
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
   const classes = useStyles();
-  const {loading, value, error} = useAsync(async () => {
+  const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
   if (loading) {
@@ -921,7 +970,7 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const Router = ({TemplateCardComponent}) => {
+const Router = ({ TemplateCardComponent, groups }) => {
   const outlet = useOutlet();
   const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
     key: FIELD_EXTENSION_WRAPPER_KEY
@@ -930,12 +979,13 @@ const Router = ({TemplateCardComponent}) => {
   }));
   const fieldExtensions = [
     ...customFieldExtensions,
-    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({name}) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({ name }) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
   ];
   return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
     path: "/",
     element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
-      TemplateCardComponent
+      TemplateCardComponent,
+      groups
     })
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/templates/:templateName",
@@ -952,4 +1002,4 @@ const Router = ({TemplateCardComponent}) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-5919d585.esm.js.map
+//# sourceMappingURL=Router-a8e778fd.esm.js.map