@backstage/plugin-scaffolder-react 1.2.0-next.2 → 1.3.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.3.0-next.0
+
+### Minor Changes
+
+- 259d3407b9b: Move `CategoryPicker` from `scaffolder` into `scaffolder-react`
+  Move `ContextMenu` into `scaffolder-react` and rename it to `ScaffolderPageContextMenu`
+- 2cfd03d7376: To offer better customization options, `ScaffolderPageContextMenu` takes callbacks as props instead of booleans
+- 48da4c46e45: `scaffolder/next`: Export the `TemplateGroupFilter` and `TemplateGroups` and make an extensible component
+
+### Patch Changes
+
+- e27ddc36dad: Added a possibility to cancel the running task (executing of a scaffolder template)
+- 7a6b16cc506: `scaffolder/next`: Bump `@rjsf/*` deps to 5.3.1
+- f84fc7fd040: Updated dependency `@rjsf/validator-ajv8` to `5.3.0`.
+- 8e00acb28db: Small tweaks to remove warnings in the console during development (mainly focusing on techdocs)
+- Updated dependencies
+  - @backstage/plugin-scaffolder-common@1.2.7-next.0
+  - @backstage/core-components@0.12.6-next.0
+  - @backstage/plugin-catalog-react@1.4.1-next.0
+  - @backstage/core-plugin-api@1.5.0
+  - @backstage/catalog-client@1.4.0
+  - @backstage/catalog-model@1.2.1
+  - @backstage/errors@1.1.5
+  - @backstage/theme@0.2.18
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+
+## 1.2.0
+
+### Minor Changes
+
+- 8f4d13f21cf: Move `useTaskStream`, `TaskBorder`, `TaskLogStream` and `TaskSteps` into `scaffolder-react`.
+
+### Patch Changes
+
+- 65454876fb2: Minor API report tweaks
+- 3c96e77b513: Make scaffolder adhere to page themes by using page `fontColor` consistently. If your theme overwrites template list or card headers, review those styles.
+- c8d78b9ae9d: fix bug with `hasErrors` returning false when dealing with empty objects
+- 9b8c374ace5: Remove timer for skipped steps in Scaffolder Next's TaskSteps
+- 44941fc97eb: scaffolder/next: Move the `uiSchema` to its own property in the validation `context` to align with component development and access of `ui:options`
+- d9893263ba9: scaffolder/next: Fix for steps without properties
+- 928a12a9b3e: Internal refactor of `/alpha` exports.
+- cc418d652a7: scaffolder/next: Added the ability to get the fields definition in the schema in the validation function
+- d4100d0ec42: Fix alignment bug for owners on `TemplateCard`
+- Updated dependencies
+  - @backstage/catalog-client@1.4.0
+  - @backstage/core-components@0.12.5
+  - @backstage/plugin-catalog-react@1.4.0
+  - @backstage/errors@1.1.5
+  - @backstage/core-plugin-api@1.5.0
+  - @backstage/catalog-model@1.2.1
+  - @backstage/theme@0.2.18
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+  - @backstage/plugin-scaffolder-common@1.2.6
+
 ## 1.2.0-next.2
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.2.0-next.2",
+  "version": "1.3.0-next.0",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/alpha.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { JsonObject, JsonValue } from '@backstage/types';
-import * as react from 'react';
-import react__default, { PropsWithChildren, ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { PropsWithChildren, ReactNode } from 'react';
 import { ApiHolder, Extension, IconComponent } from '@backstage/core-plugin-api';
 import * as _rjsf_utils from '@rjsf/utils';
 import { FieldProps, UiSchema, UIOptionsType, FieldValidation } from '@rjsf/utils';
@@ -156,9 +156,9 @@ interface TemplateGroupProps {
         }[];
     }[];
     onSelected: (template: TemplateEntityV1beta3) => void;
-    title: react__default.ReactNode;
+    title: React__default.ReactNode;
     components?: {
-        CardComponent?: react__default.ComponentType<TemplateCardProps>;
+        CardComponent?: React__default.ComponentType<TemplateCardProps>;
     };
 }
 /**
@@ -167,6 +167,34 @@ interface TemplateGroupProps {
  */
 declare const TemplateGroup: (props: TemplateGroupProps) => JSX.Element;
 
+/**
+ * @alpha
+ */
+declare type TemplateGroupFilter = {
+    title?: React__default.ReactNode;
+    filter: (entity: TemplateEntityV1beta3) => boolean;
+};
+/**
+ * @alpha
+ */
+interface TemplateGroupsProps {
+    groups: TemplateGroupFilter[];
+    templateFilter?: (entity: TemplateEntityV1beta3) => boolean;
+    TemplateCardComponent?: React__default.ComponentType<{
+        template: TemplateEntityV1beta3;
+    }>;
+    onTemplateSelected?: (template: TemplateEntityV1beta3) => void;
+    additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {
+        icon: IconComponent;
+        text: string;
+        url: string;
+    }[];
+}
+/**
+ * @alpha
+ */
+declare const TemplateGroups: (props: TemplateGroupsProps) => JSX.Element | null;
+
 /**
  * @alpha
  */
@@ -196,7 +224,7 @@ declare const DefaultTemplateOutputs: (props: {
 }) => JSX.Element | null;
 
 /** @alpha */
-declare const Form: react.ComponentType<_rjsf_core_v5.FormProps<any, _rjsf_utils.RJSFSchema, any>>;
+declare const Form: React.ComponentType<_rjsf_core_v5.FormProps<any, _rjsf_utils.RJSFSchema, any>>;
 
 /**
  * Props for the TaskSteps component
@@ -227,6 +255,26 @@ declare const TaskLogStream: (props: {
     };
 }) => JSX.Element;
 
+/**
+ * The Category Picker that is rendered on the left side for picking
+ * categories and filtering the template list.
+ * @alpha
+ */
+declare const TemplateCategoryPicker: () => JSX.Element | null;
+
+/**
+ * @alpha
+ */
+declare type ScaffolderPageContextMenuProps = {
+    onEditorClicked?: () => void;
+    onActionsClicked?: () => void;
+    onTasksClicked?: () => void;
+};
+/**
+ * @alpha
+ */
+declare function ScaffolderPageContextMenu(props: ScaffolderPageContextMenuProps): JSX.Element | null;
+
 /**
  * Takes a step from a Backstage Template Manifest and converts it to a JSON Schema and UI Schema for rjsf
  * @alpha
@@ -245,7 +293,7 @@ declare const createFieldValidation: () => FieldValidation;
  * This hook is used to get the formData from the query string.
  * @alpha
  */
-declare const useFormDataFromQuery: (initialState?: Record<string, JsonValue>) => [Record<string, any>, react.Dispatch<react.SetStateAction<Record<string, any>>>];
+declare const useFormDataFromQuery: (initialState?: Record<string, JsonValue>) => [Record<string, any>, React.Dispatch<React.SetStateAction<Record<string, any>>>];
 
 /**
  * @alpha
@@ -256,4 +304,4 @@ declare const useTemplateParameterSchema: (templateRef: string) => {
     error: Error | undefined;
 };
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormProps, NextCustomFieldValidator, NextFieldExtensionComponentProps, NextFieldExtensionOptions, NextFieldExtensionUiSchema, ParsedTemplateSchema, ReviewState, ReviewStateProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateGroup, TemplateGroupProps, Workflow, WorkflowProps, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormProps, NextCustomFieldValidator, NextFieldExtensionComponentProps, NextFieldExtensionOptions, NextFieldExtensionUiSchema, ParsedTemplateSchema, ReviewState, ReviewStateProps, ScaffolderPageContextMenu, ScaffolderPageContextMenuProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateCategoryPicker, TemplateGroup, TemplateGroupFilter, TemplateGroupProps, TemplateGroups, TemplateGroupsProps, Workflow, WorkflowProps, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };

package/dist/alpha.esm.js

@@ -1,5 +1,5 @@
-import { useApi, featureFlagsApiRef, createApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, attachComponentData } from '@backstage/core-plugin-api';
-import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography, Paper, CircularProgress, LinearProgress, StepButton } from '@material-ui/core';
+import { useApi, featureFlagsApiRef, createApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, alertApiRef, attachComponentData } from '@backstage/core-plugin-api';
+import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography, Paper, CircularProgress, LinearProgress, StepButton, FormControlLabel, Checkbox, TextField } from '@material-ui/core';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Draft07 } from 'json-schema-library';
 import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard, LogViewer } from '@backstage/core-components';
@@ -9,8 +9,10 @@ import useAsync from 'react-use/lib/useAsync';
 import { getOrCreateGlobalSingleton, createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import { withTheme } from '@rjsf/core-v5';
 import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
-import { FavoriteEntity, getEntityRelations, EntityRefLinks, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { FavoriteEntity, getEntityRelations, EntityRefLinks, useEntityList, entityRouteRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import LanguageIcon from '@material-ui/icons/Language';
+import { isTemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { TemplateGroup as TemplateGroup$1 } from '@backstage/plugin-scaffolder-react/alpha';
 import WebIcon from '@material-ui/icons/Web';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
 import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
@@ -22,6 +24,21 @@ import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
 import { useMountEffect } from '@react-hookz/web';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import capitalize from 'lodash/capitalize';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Autocomplete } from '@material-ui/lab';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import Description from '@material-ui/icons/Description';
+import Edit from '@material-ui/icons/Edit';
+import List from '@material-ui/icons/List';
+import MoreVert from '@material-ui/icons/MoreVert';
 
 function isObject$1(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -328,7 +345,7 @@ var FieldOverrides = /*#__PURE__*/Object.freeze({
 
 const Form = withTheme(require("@rjsf/material-ui-v5").Theme);
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   backButton: {
     marginRight: theme.spacing(1)
   },
@@ -355,7 +372,7 @@ const Stepper = (stepperProps) => {
   const [activeStep, setActiveStep] = useState(0);
   const [formState, setFormState] = useFormDataFromQuery(props.initialState);
   const [errors, setErrors] = useState();
-  const styles = useStyles$7();
+  const styles = useStyles$8();
   const extensions = useMemo(() => {
     return Object.fromEntries(
       props.extensions.map(({ name, component }) => [name, component])
@@ -447,7 +464,7 @@ const Stepper = (stepperProps) => {
   )))));
 };
 
-const useStyles$6 = makeStyles(() => ({
+const useStyles$7 = makeStyles(() => ({
   header: {
     backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
     color: ({ cardFontColor }) => cardFontColor
@@ -466,7 +483,7 @@ const CardHeader = (props) => {
   } = props;
   const { getPageTheme } = useTheme();
   const themeForType = getPageTheme({ themeId: type });
-  const styles = useStyles$6({
+  const styles = useStyles$7({
     cardFontColor: themeForType.fontColor,
     cardBackgroundImage: themeForType.backgroundImage
   });
@@ -481,18 +498,18 @@ const CardHeader = (props) => {
   );
 };
 
-const useStyles$5 = makeStyles(() => ({
+const useStyles$6 = makeStyles(() => ({
   linkText: {
     display: "inline-flex",
     alignItems: "center"
   }
 }));
 const CardLink = ({ icon: Icon, text, url }) => {
-  const styles = useStyles$5();
+  const styles = useStyles$6();
   return /* @__PURE__ */ React.createElement("div", { className: styles.linkText }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(Link, { style: { marginLeft: "8px" }, to: url }, text || url));
 };
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   box: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -530,7 +547,7 @@ const useStyles$4 = makeStyles((theme) => ({
 const TemplateCard = (props) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const { template } = props;
-  const styles = useStyles$4();
+  const styles = useStyles$5();
   const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
   const app = useApp();
   const iconResolver = (key) => {
@@ -551,14 +568,16 @@ const TemplateCard = (props) => {
       label: tag,
       key: tag
     }
-  )))))), (props.additionalLinks || ((_e = template.metadata.links) == null ? void 0 : _e.length)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_f = props.additionalLinks) == null ? void 0 : _f.map(({ icon, text, url }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), (_g = template.metadata.links) == null ? void 0 : _g.map(({ url, icon, title }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    CardLink,
-    {
-      icon: iconResolver(icon),
-      text: title || url,
-      url
-    }
-  )))))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px", flex: 1, alignItems: "flex-end" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
+  )))))), (props.additionalLinks || ((_e = template.metadata.links) == null ? void 0 : _e.length)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_f = props.additionalLinks) == null ? void 0 : _f.map(({ icon, text, url }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), (_g = template.metadata.links) == null ? void 0 : _g.map(
+    ({ url, icon, title }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(
+      CardLink,
+      {
+        icon: iconResolver(icon),
+        text: title || url,
+        url
+      }
+    ))
+  )))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px", flex: 1, alignItems: "flex-end" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
     EntityRefLinks,
     {
       style: { marginLeft: "8px" },
@@ -603,6 +622,48 @@ const TemplateGroup = (props) => {
   ))));
 };
 
+const TemplateGroups = (props) => {
+  const { loading, error, entities } = useEntityList();
+  const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } = props;
+  const errorApi = useApi(errorApiRef);
+  const onSelected = useCallback(
+    (template) => {
+      onTemplateSelected == null ? void 0 : onTemplateSelected(template);
+    },
+    [onTemplateSelected]
+  );
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    errorApi.post(error);
+    return null;
+  }
+  if (!entities || !entities.length) {
+    return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), ".");
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, groups.map(({ title, filter }, index) => {
+    const templates = entities.filter(isTemplateEntityV1beta3).filter((e) => templateFilter ? !templateFilter(e) : true).filter(filter).map((template) => {
+      var _a, _b;
+      const additionalLinks = (_b = (_a = props.additionalLinksForEntity) == null ? void 0 : _a.call(props, template)) != null ? _b : [];
+      return {
+        template,
+        additionalLinks
+      };
+    });
+    return /* @__PURE__ */ React.createElement(
+      TemplateGroup$1,
+      {
+        key: index,
+        templates,
+        title,
+        components: { CardComponent: TemplateCardComponent },
+        onSelected
+      }
+    );
+  }));
+};
+
 const SecretsContext = createVersionedContext("secrets-context");
 const SecretsContextProvider = (props) => {
   const [secrets, setSecrets] = useState({});
@@ -615,7 +676,7 @@ const SecretsContextProvider = (props) => {
   );
 };
 
-const useStyles$3 = makeStyles(() => ({
+const useStyles$4 = makeStyles(() => ({
   markdown: {
     /** to make the styles for React Markdown not leak into the description */
     "& :first-child": {
@@ -629,7 +690,7 @@ const useStyles$3 = makeStyles(() => ({
 const Workflow = (workflowProps) => {
   var _a;
   const { title, description, namespace, templateName, ...props } = workflowProps;
-  const styles = useStyles$3();
+  const styles = useStyles$4();
   const templateRef = stringifyEntityRef({
     kind: "Template",
     namespace,
@@ -664,7 +725,7 @@ const Workflow = (workflowProps) => {
 };
 const EmbeddableWorkflow = (props) => /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(Workflow, { ...props }));
 
-const useStyles$2 = makeStyles({
+const useStyles$3 = makeStyles({
   root: {
     "&:hover": {
       textDecoration: "none"
@@ -673,7 +734,7 @@ const useStyles$2 = makeStyles({
 });
 const LinkOutputs = (props) => {
   const { links = [] } = props.output;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
@@ -760,7 +821,7 @@ const StepTime = (props) => {
   return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   failed: {
     backgroundColor: theme.palette.error.main
   },
@@ -769,7 +830,7 @@ const useStyles$1 = makeStyles((theme) => ({
   }
 }));
 const TaskBorder = (props) => {
-  const styles = useStyles$1();
+  const styles = useStyles$2();
   if (!props.isComplete) {
     return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
   }
@@ -813,16 +874,17 @@ const TaskSteps = (props) => {
         StepLabel,
         {
           StepIconProps: stepIconProps,
-          StepIconComponent: StepIcon
+          StepIconComponent: StepIcon,
+          "data-testid": "step-label"
         },
         /* @__PURE__ */ React.createElement(Box, null, step.name),
-        /* @__PURE__ */ React.createElement(StepTime, { step })
+        !isSkipped && /* @__PURE__ */ React.createElement(StepTime, { step })
       )));
     })
   )));
 };
 
-const useStyles = makeStyles$1({
+const useStyles$1 = makeStyles$1({
   root: {
     width: "100%",
     height: "100%",
@@ -830,7 +892,7 @@ const useStyles = makeStyles$1({
   }
 });
 const TaskLogStream = (props) => {
-  const styles = useStyles();
+  const styles = useStyles$1();
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
     LogViewer,
     {
@@ -839,6 +901,94 @@ const TaskLogStream = (props) => {
   ));
 };
 
+const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const TemplateCategoryPicker = () => {
+  const alertApi = useApi(alertApiRef);
+  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
+  if (loading)
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (error) {
+    alertApi.post({
+      message: `Failed to load entity types with error: ${error}`,
+      severity: "error"
+    });
+    return null;
+  }
+  if (!availableTypes)
+    return null;
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Categories"), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      multiple: true,
+      "aria-label": "Categories",
+      options: availableTypes,
+      value: selectedTypes,
+      onChange: (_, value) => setSelectedTypes(value),
+      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              icon,
+              checkedIcon,
+              checked: selected
+            }
+          ),
+          label: capitalize(option)
+        }
+      ),
+      size: "small",
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
+    }
+  ));
+};
+
+const useStyles = makeStyles$1((theme) => ({
+  button: {
+    color: theme.page.fontColor
+  }
+}));
+function ScaffolderPageContextMenu(props) {
+  const { onEditorClicked, onActionsClicked, onTasksClicked } = props;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState();
+  if (!onEditorClicked && !onActionsClicked) {
+    return null;
+  }
+  const onOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const onClose = () => {
+    setAnchorEl(void 0);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: onOpen,
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, onEditorClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), onTasksClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
+  ));
+}
+
 const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
 
 function createNextScaffolderFieldExtension(options) {
@@ -855,5 +1005,5 @@ function createNextScaffolderFieldExtension(options) {
   };
 }
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateGroup, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
 //# sourceMappingURL=alpha.esm.js.map