@backstage/plugin-scaffolder-react 1.8.4-next.0 → 1.8.4

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.8.4
+
+### Patch Changes
+
+- abfbcfc: Updated dependency `@testing-library/react` to `^15.0.0`.
+- 87d2eb8: Updated dependency `json-schema-library` to `^9.0.0`.
+- cb1e3b0: Updated dependency `@testing-library/dom` to `^10.0.0`.
+- 0e692cf: Added ESLint rule `no-top-level-material-ui-4-imports` to migrate the Material UI imports.
+- df99f62: The `value` sent on the `create` analytics event (fired when a Scaffolder template is executed) is now set to the number of minutes saved by executing the template. This value is derived from the `backstage.io/time-saved` annotation on the template entity, if available.
+
+  Note: the `create` event is now captured in the `<Workflow>` component. If you are directly making use of the alpha-exported `<Stepper>` component, an analytics `create` event will no longer be captured on your behalf.
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.11.3
+  - @backstage/core-components@0.14.4
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/theme@0.5.3
+  - @backstage/version-bridge@1.0.8
+  - @backstage/catalog-client@1.6.4
+  - @backstage/catalog-model@1.4.5
+  - @backstage/types@1.1.1
+  - @backstage/plugin-scaffolder-common@1.5.1
+
+## 1.8.4-next.1
+
+### Patch Changes
+
+- 87d2eb8: Updated dependency `json-schema-library` to `^9.0.0`.
+- df99f62: The `value` sent on the `create` analytics event (fired when a Scaffolder template is executed) is now set to the number of minutes saved by executing the template. This value is derived from the `backstage.io/time-saved` annotation on the template entity, if available.
+
+  Note: the `create` event is now captured in the `<Workflow>` component. If you are directly making use of the alpha-exported `<Stepper>` component, an analytics `create` event will no longer be captured on your behalf.
+
+- Updated dependencies
+  - @backstage/catalog-client@1.6.4-next.0
+  - @backstage/catalog-model@1.4.5
+  - @backstage/core-components@0.14.4-next.0
+  - @backstage/core-plugin-api@1.9.1
+  - @backstage/theme@0.5.2
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+  - @backstage/plugin-catalog-react@1.11.3-next.1
+  - @backstage/plugin-scaffolder-common@1.5.1
+
 ## 1.8.4-next.0
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/alpha.d.ts

@@ -52,6 +52,11 @@ declare const ReviewState: (props: ReviewStateProps) => React__default.JSX.Eleme
 type StepperProps = {
     manifest: TemplateParameterSchema;
     extensions: FieldExtensionOptions<any, any>[];
+    /**
+     * @deprecated This was only ever used for analytics tracking purposes, which
+     * is now handled in the `<Workflow />` component. Passing it in will have no
+     * effect.
+     */
     templateName?: string;
     formProps?: FormProps;
     initialState?: Record<string, JsonValue>;

package/dist/alpha.esm.js

@@ -1,5 +1,10 @@
 import { useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, alertApiRef } from '@backstage/core-plugin-api';
-import { makeStyles, FormControl, Typography, createStyles, Paper, List, ListItem, ListItemIcon, ListItemText, LinearProgress, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, CircularProgress, StepButton, FormControlLabel, Checkbox, TextField } from '@material-ui/core';
+import MuiStepper from '@material-ui/core/Stepper';
+import MuiStep from '@material-ui/core/Step';
+import MuiStepLabel from '@material-ui/core/StepLabel';
+import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import { makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Draft07 } from 'json-schema-library';
 import { parse, stringify } from 'flatted';
@@ -7,36 +12,53 @@ import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIco
 import validator from '@rjsf/validator-ajv8';
 import qs from 'qs';
 import useAsync from 'react-use/esm/useAsync';
-import { s as scaffolderApiRef, S as SecretsContextProvider } from './esm/ref-DURDhsGA.esm.js';
+import { s as scaffolderApiRef, S as SecretsContextProvider } from './esm/ref-NRtFlQHB.esm.js';
 import cloneDeep from 'lodash/cloneDeep';
 import { withTheme } from '@rjsf/core';
 import { getUiOptions, getTemplate } from '@rjsf/utils';
+import FormControl from '@material-ui/core/FormControl';
+import Typography from '@material-ui/core/Typography';
 import { Theme } from '@rjsf/material-ui';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Paper from '@material-ui/core/Paper';
 import ErrorIcon from '@material-ui/icons/Error';
 import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
-import { FavoriteEntity, getEntityRelations, EntityRefLinks, useEntityList, entityRouteRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
+import { FavoriteEntity, getEntityRelations, EntityRefLinks, useEntityList, catalogApiRef, entityRouteRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Chip from '@material-ui/core/Chip';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
 import LanguageIcon from '@material-ui/icons/Language';
 import { isTemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { Duration, DateTime, Interval } from 'luxon';
+import useAsync$1 from 'react-use/lib/useAsync';
 import LinkIcon from '@material-ui/icons/Link';
 import DescriptionIcon from '@material-ui/icons/Description';
+import MuiStepButton from '@material-ui/core/StepButton';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
 import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
 import classNames from 'classnames';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import useInterval from 'react-use/esm/useInterval';
-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 Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import TextField from '@material-ui/core/TextField';
 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 Autocomplete from '@material-ui/lab/Autocomplete';
 import IconButton from '@material-ui/core/IconButton';
-import ListItemIcon$1 from '@material-ui/core/ListItemIcon';
-import ListItemText$1 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';
@@ -175,6 +197,7 @@ function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+const isJsonError = (value) => "type" in value && value.type === "error";
 const createAsyncValidators = (rootSchema, validators, context) => {
   async function validate(formData, pathPrefix = "#", current = formData) {
     var _a, _b;
@@ -198,9 +221,20 @@ const createAsyncValidators = (rootSchema, validators, context) => {
       }
     };
     for (const [key, value] of Object.entries(current)) {
-      const path = `${pathPrefix}/${key}`;
-      const definitionInSchema = parsedSchema.getSchema(path, formData);
-      const { schema, uiSchema } = extractSchemaFromStep(definitionInSchema);
+      const pointer = `${pathPrefix}/${key}`;
+      const definitionInSchema = parsedSchema.getSchema({
+        pointer,
+        data: formData
+      });
+      if (!definitionInSchema) {
+        continue;
+      }
+      if (isJsonError(definitionInSchema)) {
+        throw new Error(definitionInSchema.message);
+      }
+      const { schema, uiSchema } = extractSchemaFromStep(
+        definitionInSchema
+      );
       const hasItems = definitionInSchema && definitionInSchema.items;
       const doValidateItem = async (propValue, itemSchema, itemUiSchema) => {
         await validateForm(
@@ -217,7 +251,7 @@ const createAsyncValidators = (rootSchema, validators, context) => {
           await doValidateItem(propValue, itemsSchema, itemsUiSchema);
         }
       };
-      if (definitionInSchema && "ui:field" in definitionInSchema) {
+      if ("ui:field" in definitionInSchema) {
         await doValidateItem(definitionInSchema, schema, uiSchema);
       } else if (hasItems && "ui:field" in definitionInSchema.items) {
         await doValidate(definitionInSchema.items);
@@ -227,7 +261,7 @@ const createAsyncValidators = (rootSchema, validators, context) => {
           await doValidate(propValue);
         }
       } else if (isObject(value)) {
-        formValidation[key] = await validate(formData, path, value);
+        formValidation[key] = await validate(formData, pointer, value);
       }
     }
     return formValidation;
@@ -243,10 +277,10 @@ const ReviewState = (props) => {
       var _a;
       for (const step of props.schemas) {
         const parsedSchema = new Draft07(step.mergedSchema);
-        const definitionInSchema = parsedSchema.getSchema(
-          `#/${key}`,
-          props.formState
-        );
+        const definitionInSchema = parsedSchema.getSchema({
+          pointer: `#/${key}`,
+          data: props.formState
+        });
         if (definitionInSchema) {
           const backstageReviewOptions = (_a = definitionInSchema["ui:backstage"]) == null ? void 0 : _a.review;
           if (backstageReviewOptions) {
@@ -663,11 +697,8 @@ const Stepper = (stepperProps) => {
     [setFormState]
   );
   const handleCreate = useCallback(() => {
-    var _a2;
     props.onCreate(formState);
-    const name = typeof formState.name === "string" ? formState.name : void 0;
-    analytics.captureEvent("create", (_a2 = name != null ? name : props.templateName) != null ? _a2 : "unknown");
-  }, [props, formState, analytics]);
+  }, [props, formState]);
   const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
   const handleNext = async ({
     formData = {}
@@ -692,7 +723,7 @@ const Stepper = (stepperProps) => {
   const createLabel = (_d = (_c = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _c.createButtonText) != null ? _d : createButtonText;
   const reviewLabel = (_f = (_e = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _e.reviewButtonText) != null ? _f : reviewButtonText;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isValidating && /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" }), /* @__PURE__ */ React.createElement(
-    Stepper$1,
+    MuiStepper,
     {
       activeStep,
       alternativeLabel: true,
@@ -701,8 +732,8 @@ const Stepper = (stepperProps) => {
     },
     steps.map((step, index) => {
       const isAllowedLabelClick = activeStep > index;
-      return /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(
-        StepLabel,
+      return /* @__PURE__ */ React.createElement(MuiStep, { key: index }, /* @__PURE__ */ React.createElement(
+        MuiStepLabel,
         {
           "aria-label": `Step ${index + 1}`,
           style: { cursor: isAllowedLabelClick ? "pointer" : "default" },
@@ -714,7 +745,7 @@ const Stepper = (stepperProps) => {
         step.title
       ));
     }),
-    /* @__PURE__ */ React.createElement(Step, null, /* @__PURE__ */ React.createElement(StepLabel, null, "Review"))
+    /* @__PURE__ */ React.createElement(MuiStep, null, /* @__PURE__ */ React.createElement(MuiStepLabel, null, "Review"))
   ), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
     Form,
     {
@@ -989,6 +1020,24 @@ const TemplateGroups = (props) => {
   }));
 };
 
+const useTemplateTimeSavedMinutes = (templateRef) => {
+  const catalogApi = useApi(catalogApiRef);
+  const { value: timeSavedMinutes } = useAsync$1(async () => {
+    var _a;
+    const entity = await catalogApi.getEntityByRef(templateRef);
+    const timeSaved = (_a = entity == null ? void 0 : entity.metadata.annotations) == null ? void 0 : _a["backstage.io/time-saved"];
+    if (!entity || !timeSaved) {
+      return void 0;
+    }
+    const durationMs = Duration.fromISO(timeSaved).as("minutes");
+    if (Number.isNaN(durationMs)) {
+      return void 0;
+    }
+    return durationMs;
+  }, [catalogApi, templateRef]);
+  return timeSavedMinutes;
+};
+
 const useStyles$5 = makeStyles({
   markdown: {
     /** to make the styles for React Markdown not leak into the description */
@@ -1002,7 +1051,8 @@ const useStyles$5 = makeStyles({
 });
 const Workflow = (workflowProps) => {
   var _a;
-  const { title, description, namespace, templateName, ...props } = workflowProps;
+  const { title, description, namespace, templateName, onCreate, ...props } = workflowProps;
+  const analytics = useAnalytics();
   const styles = useStyles$5();
   const templateRef = stringifyEntityRef({
     kind: "Template",
@@ -1012,6 +1062,18 @@ const Workflow = (workflowProps) => {
   const errorApi = useApi(errorApiRef);
   const { loading, manifest, error } = useTemplateParameterSchema(templateRef);
   const sortedManifest = useFilteredSchemaProperties(manifest);
+  const minutesSaved = useTemplateTimeSavedMinutes(templateRef);
+  const workflowOnCreate = useCallback(
+    async (formState) => {
+      var _a2;
+      onCreate(formState);
+      const name = typeof formState.name === "string" ? formState.name : void 0;
+      analytics.captureEvent("create", (_a2 = name != null ? name : templateName) != null ? _a2 : "unknown", {
+        value: minutesSaved
+      });
+    },
+    [onCreate, analytics, templateName, minutesSaved]
+  );
   useEffect(() => {
     if (error) {
       errorApi.post(new Error(`Failed to load template, ${error}`));
@@ -1038,7 +1100,7 @@ const Workflow = (workflowProps) => {
       Stepper,
       {
         manifest: sortedManifest,
-        templateName,
+        onCreate: workflowOnCreate,
         ...props
       }
     )
@@ -1249,7 +1311,7 @@ const TaskSteps = (props) => {
       isError: (_b = props.isError) != null ? _b : false
     }
   ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(
-    Stepper$1,
+    MuiStepper,
     {
       activeStep: props.activeStep,
       alternativeLabel: true,
@@ -1267,8 +1329,8 @@ const TaskSteps = (props) => {
         active: isActive,
         skipped: isSkipped
       };
-      return /* @__PURE__ */ React.createElement(Step, { key: step.id }, /* @__PURE__ */ React.createElement(StepButton, null, /* @__PURE__ */ React.createElement(
-        StepLabel,
+      return /* @__PURE__ */ React.createElement(MuiStep, { key: step.id }, /* @__PURE__ */ React.createElement(MuiStepButton, null, /* @__PURE__ */ React.createElement(
+        MuiStepLabel,
         {
           StepIconProps: stepIconProps,
           StepIconComponent: StepIcon,
@@ -1281,7 +1343,7 @@ const TaskSteps = (props) => {
   )));
 };
 
-const useStyles$2 = makeStyles$1({
+const useStyles$2 = makeStyles({
   root: {
     width: "100%",
     height: "100%",
@@ -1360,7 +1422,7 @@ const TemplateCategoryPicker = () => {
   ));
 };
 
-const useStyles = makeStyles$1((theme) => ({
+const useStyles = makeStyles((theme) => ({
   button: {
     color: theme.page.fontColor
   }
@@ -1403,7 +1465,7 @@ function ScaffolderPageContextMenu(props) {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Create" })), onEditorClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Template Editor" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Installed Actions" })), onTasksClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(List$1, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Task List" })))
+    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Create" })), 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(DescriptionIcon, { 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$1, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
   ));
 }