@backstage/plugin-scaffolder 1.7.0 → 1.8.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/plugin-scaffolder
 
+## 1.8.0-next.0
+
+### Minor Changes
+
+- edae17309e: Added props to override default Scaffolder page title, subtitle and pageTitleOverride.
+  Routes like `rootRouteRef`, `selectedTemplateRouteRef`, `nextRouteRef`, `nextSelectedTemplateRouteRef` were made public and can be used in your app (e.g. in custom TemplateCard component).
+
+### Patch Changes
+
+- 4830a3569f: Basic analytics instrumentation is now in place:
+
+  - As users make their way through template steps, a `click` event is fired, including the step number.
+  - After a user clicks "Create" a `create` event is fired, including the name of the software that was just created. The template used at creation is set on the `entityRef` context key.
+
+- f905853ad6: Prefer using `Link` from `@backstage/core-components` rather than material-UI.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.2.1-next.0
+  - @backstage/core-components@0.12.0-next.0
+  - @backstage/core-plugin-api@1.1.0-next.0
+  - @backstage/integration@1.4.0-next.0
+  - @backstage/catalog-model@1.1.3-next.0
+  - @backstage/types@1.0.1-next.0
+  - @backstage/integration-react@1.1.6-next.0
+  - @backstage/plugin-permission-react@0.4.7-next.0
+  - @backstage/catalog-client@1.1.2-next.0
+  - @backstage/config@1.0.4-next.0
+  - @backstage/errors@1.1.3-next.0
+  - @backstage/theme@0.2.16
+  - @backstage/plugin-catalog-common@1.0.8-next.0
+  - @backstage/plugin-scaffolder-common@1.2.2-next.0
+
 ## 1.7.0
 
 ### Minor Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.7.0",
+  "version": "1.8.0-next.0",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/esm/{Router-4521e309.esm.js → Router-9b4af3fe.esm.js}

@@ -1,11 +1,11 @@
 import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Children, Component, Fragment } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
-import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
-import { useApp, useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, useRouteRefParams, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
+import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
+import { useApp, useRouteRef, useApi, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
 import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-e49d2205.esm.js';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-485e2e41.esm.js';
 import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import WarningIcon from '@material-ui/icons/Warning';
@@ -66,7 +66,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-bdf322b4.esm.js';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-bd0adcad.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -163,7 +163,7 @@ const DeprecationWarning = () => {
   }, /* @__PURE__ */ React.createElement(Tooltip, {
     title: Title
   }, /* @__PURE__ */ React.createElement(Link, {
-    href: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
+    to: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
     className: styles.link
   }, /* @__PURE__ */ React.createElement(WarningIcon, null))));
 };
@@ -291,7 +291,7 @@ const TemplateList = ({
     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, {
+  }, "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"), "."), /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(Card, {
     key: stringifyEntityRef(template),
@@ -362,7 +362,8 @@ function ScaffolderPageContextMenu(props) {
 const ScaffolderPageContents = ({
   TemplateCardComponent,
   groups,
-  contextMenu
+  contextMenu,
+  headerOptions
 }) => {
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
@@ -380,7 +381,8 @@ const ScaffolderPageContents = ({
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
     title: "Create a New Component",
-    subtitle: "Create new software components using standard templates"
+    subtitle: "Create new software components using standard templates",
+    ...headerOptions
   }, /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, {
     ...contextMenu
   })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
@@ -407,11 +409,13 @@ const ScaffolderPageContents = ({
 const ScaffolderPage = ({
   TemplateCardComponent,
   groups,
-  contextMenu
+  contextMenu,
+  headerOptions
 }) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(ScaffolderPageContents, {
   TemplateCardComponent,
   groups,
-  contextMenu
+  contextMenu,
+  headerOptions
 }));
 
 function isObject$1(value) {
@@ -570,6 +574,8 @@ const MultistepJsonForm = (props) => {
     finishButtonLabel,
     layouts
   } = props;
+  const { templateName } = useRouteRefParams(selectedTemplateRouteRef);
+  const analytics = useAnalytics();
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
   const errorApi = useApi(errorApiRef);
@@ -609,7 +615,9 @@ const MultistepJsonForm = (props) => {
     onReset();
   };
   const handleNext = () => {
-    setActiveStep(Math.min(activeStep + 1, steps.length));
+    const stepNum = Math.min(activeStep + 1, steps.length);
+    setActiveStep(stepNum);
+    analytics.captureEvent("click", `Next Step (${stepNum})`);
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
   const handleCreate = async () => {
@@ -619,6 +627,7 @@ const MultistepJsonForm = (props) => {
     setDisableButtons(true);
     try {
       await onFinish();
+      analytics.captureEvent("create", formData.name || `new ${templateName}`);
     } catch (err) {
       errorApi.post(err);
     } finally {
@@ -810,7 +819,9 @@ const TemplatePage = ({
   const customFieldValidators = Object.fromEntries(
     customFieldExtensions.map(({ name, validation }) => [name, validation])
   );
-  return /* @__PURE__ */ React.createElement(Page, {
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+    attributes: { entityRef: templateRef }
+  }, /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
@@ -839,7 +850,7 @@ const TemplatePage = ({
         )
       };
     })
-  }))));
+  })))));
 };
 
 const useStyles$c = makeStyles((theme) => ({
@@ -2454,7 +2465,7 @@ const ListTaskPageContent = (props) => {
       {
         title: "Task ID",
         field: "id",
-        render: (row) => /* @__PURE__ */ React.createElement(Link$1, {
+        render: (row) => /* @__PURE__ */ React.createElement(Link, {
           to: `${rootLink()}/tasks/${row.id}`
         }, row.id)
       },
@@ -2556,7 +2567,8 @@ const Router = (props) => {
     element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
       groups,
       TemplateCardComponent,
-      contextMenu: props.contextMenu
+      contextMenu: props.contextMenu,
+      headerOptions: props.headerOptions
     })
   }), /* @__PURE__ */ React.createElement(Route, {
     path: legacySelectedTemplateRouteRef.path,
@@ -2592,4 +2604,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-4521e309.esm.js.map
+//# sourceMappingURL=Router-9b4af3fe.esm.js.map