@backstage/plugin-scaffolder 0.13.0 → 0.15.0

package/dist/esm/{index-7ce19edf.esm.js → index-ced3b204.esm.js}

@@ -1,26 +1,22 @@
-import { parseEntityRef, KubernetesValidatorFunctions, makeValidator, RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
-import { createApiRef, useApi, attachComponentData, createExternalRouteRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, useRouteRef, alertApiRef, useApp } from '@backstage/core-plugin-api';
+import { parseEntityRef, KubernetesValidatorFunctions, makeValidator, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { createApiRef, useApi, identityApiRef, attachComponentData, createExternalRouteRef, createRouteRef, createSubRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useApp, useRouteRef } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
-import { catalogApiRef, formatEntityRefTitle, useOwnedEntities, useStarredEntity, getEntityRelations, getEntitySourceLocation, EntityRefLinks, useEntityList, useEntityTypeFilter, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { TextField, FormControl as FormControl$1, withStyles, makeStyles, IconButton, Tooltip, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Link, FormControlLabel, Checkbox, Grid, StepButton, Paper, Button as Button$1, CircularProgress } from '@material-ui/core';
+import { catalogApiRef, humanizeEntityRef, useEntityTypeFilter, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { TextField, FormControl as FormControl$1, Box, Typography, FormControlLabel, Checkbox, makeStyles, Grid, StepButton, Paper, Button, CircularProgress } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useCallback, useEffect, useState, createContext, useContext, useMemo, memo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
-import { scmIntegrationsApiRef, scmAuthApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
+import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
-import { Select, Progress, ItemCardHeader, Button, ContentHeader, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, Lifecycle, ErrorPage, LogViewer } from '@backstage/core-components';
+import { Select, Progress, Link, Page, Header, Lifecycle, Content, ErrorPage, LogViewer } from '@backstage/core-components';
 import useDebounce from 'react-use/lib/useDebounce';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
-import WarningIcon from '@material-ui/icons/Warning';
-import { generatePath, useNavigate, useParams } from 'react-router';
 import capitalize from 'lodash/capitalize';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -36,6 +32,7 @@ import Check from '@material-ui/icons/Check';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import classNames from 'classnames';
 import { DateTime, Interval } from 'luxon';
+import { useNavigate, useParams } from 'react-router';
 import useInterval from 'react-use/lib/useInterval';
 import { useImmerReducer } from 'use-immer';
 import LanguageIcon from '@material-ui/icons/Language';
@@ -205,7 +202,7 @@ const EntityPicker = (props) => {
   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 entityRefs = entities == null ? void 0 : entities.items.map((e) => humanizeEntityRef(e, { defaultKind }));
   const onSelect = useCallback((_, value) => {
     onChange(value || "");
   }, [onChange]);
@@ -587,11 +584,11 @@ const useTemplateSecrets = () => {
   if (!value) {
     throw new Error("useTemplateSecrets must be used within a SecretsContextProvider");
   }
-  const { setSecrets } = value;
-  const setSecret = useCallback((input) => {
-    setSecrets((currentSecrets) => ({ ...currentSecrets, ...input }));
-  }, [setSecrets]);
-  return { setSecret };
+  const { setSecrets: updateSecrets } = value;
+  const setSecrets = useCallback((input) => {
+    updateSecrets((currentSecrets) => ({ ...currentSecrets, ...input }));
+  }, [updateSecrets]);
+  return { setSecrets };
 };
 
 const RepoUrlPicker = (props) => {
@@ -600,7 +597,7 @@ const RepoUrlPicker = (props) => {
   const [state, setState] = useState(parseRepoPickerUrl(formData));
   const integrationApi = useApi(scmIntegrationsApiRef);
   const scmAuthApi = useApi(scmAuthApiRef);
-  const { setSecret } = useTemplateSecrets();
+  const { setSecrets } = useTemplateSecrets();
   const allowedHosts = useMemo(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedHosts) != null ? _b2 : [];
@@ -638,7 +635,7 @@ const RepoUrlPicker = (props) => {
         customScopes: requestUserCredentials.additionalScopes
       }
     });
-    setSecret({ [requestUserCredentials.secretsKey]: token });
+    setSecrets({ [requestUserCredentials.secretsKey]: token });
   }, 500, [state, uiSchema]);
   const hostType = (_b = state.host && ((_a = integrationApi.byHost(state.host)) == null ? void 0 : _a.type)) != null ? _b : null;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RepoUrlPickerHost, {
@@ -710,7 +707,7 @@ const OwnedEntityPicker = (props) => {
   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 entityRefs = ownedEntities == null ? void 0 : ownedEntities.items.map((e) => humanizeEntityRef(e, { defaultKind })).filter((n) => n);
   const onSelect = (_, value) => {
     onChange(value || "");
   };
@@ -737,6 +734,29 @@ const OwnedEntityPicker = (props) => {
     })
   }));
 };
+function useOwnedEntities(allowedKinds) {
+  const identityApi = useApi(identityApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const { loading, value: refs } = useAsync(async () => {
+    const identity = await identityApi.getBackstageIdentity();
+    const identityRefs = identity.ownershipEntityRefs;
+    const catalogs = await catalogApi.getEntities(allowedKinds ? {
+      filter: {
+        kind: allowedKinds,
+        [`relations.${RELATION_OWNED_BY}`]: identityRefs || []
+      }
+    } : {
+      filter: {
+        [`relations.${RELATION_OWNED_BY}`]: identityRefs || []
+      }
+    });
+    return catalogs;
+  }, []);
+  const ownedEntities = useMemo(() => {
+    return refs;
+  }, [refs]);
+  return useMemo(() => ({ loading, ownedEntities }), [loading, ownedEntities]);
+}
 
 const FIELD_EXTENSION_WRAPPER_KEY = "scaffolder.extensions.wrapper.v1";
 const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
@@ -759,6 +779,21 @@ const registerComponentRouteRef = createExternalRouteRef({
 const rootRouteRef = createRouteRef({
   id: "scaffolder"
 });
+const selectedTemplateRouteRef = createSubRouteRef({
+  id: "scaffolder/selected-template",
+  parent: rootRouteRef,
+  path: "/templates/:templateName"
+});
+const scaffolderTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/task",
+  parent: rootRouteRef,
+  path: "/tasks/:taskId"
+});
+createSubRouteRef({
+  id: "scaffolder/actions",
+  parent: rootRouteRef,
+  path: "/actions"
+});
 
 const scaffolderPlugin = createPlugin({
   id: "scaffolder",
@@ -804,7 +839,7 @@ const OwnerPickerFieldExtension = scaffolderPlugin.provide(createScaffolderField
 }));
 const ScaffolderPage = scaffolderPlugin.provide(createRoutableExtension({
   name: "ScaffolderPage",
-  component: () => import('./Router-8ca04a51.esm.js').then((m) => m.Router),
+  component: () => import('./Router-47c9a9ee.esm.js').then((m) => m.Router),
   mountPoint: rootRouteRef
 }));
 const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(createScaffolderFieldExtension({
@@ -816,187 +851,6 @@ const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(createScaffolder
   name: "EntityTagsPicker"
 }));
 
-const YellowStar = withStyles({
-  root: {
-    color: "#f3ba37"
-  }
-})(Star);
-const WhiteBorderStar = withStyles({
-  root: {
-    color: "#ffffff"
-  }
-})(StarBorder);
-const useStyles$3 = makeStyles((theme) => ({
-  starButton: {
-    position: "absolute",
-    top: theme.spacing(0.5),
-    right: theme.spacing(0.5),
-    padding: "0.25rem"
-  }
-}));
-const favouriteTemplateTooltip = (isStarred) => isStarred ? "Remove from favorites" : "Add to favorites";
-const favouriteTemplateIcon = (isStarred) => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(WhiteBorderStar, null);
-const FavouriteTemplate = (props) => {
-  const classes = useStyles$3();
-  const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
-  return /* @__PURE__ */ React.createElement(IconButton, {
-    color: "inherit",
-    className: classes.starButton,
-    ...props,
-    onClick: () => toggleStarredEntity()
-  }, /* @__PURE__ */ React.createElement(Tooltip, {
-    title: favouriteTemplateTooltip(isStarredEntity)
-  }, favouriteTemplateIcon(isStarredEntity)));
-};
-
-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"
-  }
-}));
-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 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$2({ backgroundImage: theme.backgroundImage });
-  const href = generatePath(`${rootLink()}/templates/:templateName`, {
-    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(FavouriteTemplate, {
-    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"), 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 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$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,
-    deprecated: template.apiVersion === "backstage.io/v1beta2"
-  })))));
-};
-
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
   fontSize: "small"
 });
@@ -1188,34 +1042,20 @@ const IconLink = (props) => {
     className: classes.svgIcon
   }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, {
     item: true
-  }, /* @__PURE__ */ React.createElement(Link$1, {
+  }, /* @__PURE__ */ React.createElement(Link, {
     to: href,
     ...linkProps
   }, text || href)));
 };
 
 const TaskPageLinks = ({ output }) => {
-  const { entityRef: entityRefOutput, remoteUrl } = output;
-  let { links = [] } = output;
+  const { links = [] } = output;
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
     var _a;
     return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
   };
-  if (remoteUrl) {
-    links = [{ url: remoteUrl, title: "Repo" }, ...links];
-  }
-  if (entityRefOutput) {
-    links = [
-      {
-        entityRef: entityRefOutput,
-        title: "Open in catalog",
-        icon: "catalog"
-      },
-      ...links
-    ];
-  }
   return /* @__PURE__ */ React.createElement(Box, {
     px: 3,
     pb: 3
@@ -1355,15 +1195,12 @@ const TaskStatusStepper = memo(({
     })))));
   })));
 });
-const hasLinks = ({
-  entityRef,
-  remoteUrl,
-  links = []
-}) => !!(entityRef || remoteUrl || links.length > 0);
+const hasLinks = ({ links = [] }) => links.length > 0;
 const TaskPage = ({ loadingText }) => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const rootLink = useRouteRef(rootRouteRef);
+  const rootPath = useRouteRef(rootRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
   const [lastActiveStepId, setLastActiveStepId] = useState(void 0);
   const { taskId } = useParams();
@@ -1404,16 +1241,14 @@ const TaskPage = ({ loadingText }) => {
   const handleStartOver = () => {
     var _a, _b, _c;
     if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.templateInfo) == null ? void 0 : _b.entityRef)) {
-      navigate(generatePath(rootLink()));
+      navigate(rootPath());
       return;
     }
-    const formData = taskStream.task.spec.apiVersion === "backstage.io/v1beta2" ? taskStream.task.spec.values : taskStream.task.spec.parameters;
+    const formData = taskStream.task.spec.parameters;
     const { name } = parseEntityRef((_c = taskStream.task.spec.templateInfo) == null ? void 0 : _c.entityRef);
-    navigate(generatePath(`${rootLink()}/templates/:templateName?${qs.stringify({
+    navigate(`${templateRoute({ templateName: name })}?${qs.stringify({
       formData: JSON.stringify(formData)
-    })}`, {
-      templateName: name
-    }));
+    })}`);
   };
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
@@ -1439,7 +1274,7 @@ const TaskPage = ({ loadingText }) => {
     onUserStepChange: setUserSelectedStepId
   }), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, {
     output
-  }), /* @__PURE__ */ React.createElement(Button$1, {
+  }), /* @__PURE__ */ React.createElement(Button, {
     className: classes.button,
     onClick: handleStartOver,
     disabled: !completed,
@@ -1455,5 +1290,5 @@ const TaskPage = ({ loadingText }) => {
   })))))));
 };
 
-export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, SecretsContext as S, TemplateTypePicker as T, EntityNamePicker as a, EntityTagsPicker as b, OwnedEntityPicker as c, registerComponentRouteRef as d, entityNamePickerValidation as e, TemplateList as f, rootRouteRef as g, FIELD_EXTENSION_KEY as h, SecretsContextProvider as i, TaskPage as j, ScaffolderClient as k, createScaffolderFieldExtension as l, ScaffolderFieldExtensions as m, EntityPickerFieldExtension as n, EntityNamePickerFieldExtension as o, EntityTagsPickerFieldExtension as p, OwnerPickerFieldExtension as q, repoPickerValidation as r, scaffolderApiRef as s, OwnedEntityPickerFieldExtension as t, RepoUrlPickerFieldExtension as u, ScaffolderPage as v, scaffolderPlugin as w, FavouriteTemplate as x, useTemplateSecrets as y };
-//# sourceMappingURL=index-7ce19edf.esm.js.map
+export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, SecretsContext as S, TemplateTypePicker as T, EntityNamePicker as a, EntityTagsPicker as b, OwnedEntityPicker as c, registerComponentRouteRef as d, entityNamePickerValidation as e, scaffolderApiRef as f, scaffolderTaskRouteRef as g, rootRouteRef as h, FIELD_EXTENSION_KEY as i, SecretsContextProvider as j, TaskPage as k, ScaffolderClient as l, createScaffolderFieldExtension as m, ScaffolderFieldExtensions as n, EntityPickerFieldExtension as o, EntityNamePickerFieldExtension as p, EntityTagsPickerFieldExtension as q, repoPickerValidation as r, selectedTemplateRouteRef as s, OwnerPickerFieldExtension as t, OwnedEntityPickerFieldExtension as u, RepoUrlPickerFieldExtension as v, ScaffolderPage as w, scaffolderPlugin as x, useTemplateSecrets as y };
+//# sourceMappingURL=index-ced3b204.esm.js.map