@backstage/plugin-scaffolder 0.15.0 → 1.0.1-next.1

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @backstage/plugin-scaffolder
 
+## 1.0.1-next.1
+
+### Patch Changes
+
+- 4431873583: Update `usePermission` usage.
+- Updated dependencies
+  - @backstage/integration@1.1.0-next.1
+  - @backstage/plugin-permission-react@0.4.0-next.0
+  - @backstage/plugin-catalog-react@1.0.1-next.1
+  - @backstage/plugin-catalog-common@1.0.1-next.1
+  - @backstage/integration-react@1.0.1-next.1
+
+## 1.0.1-next.0
+
+### Patch Changes
+
+- d34900af81: Added a new `NextScaffolderRouter` which will eventually replace the exiting router
+- Updated dependencies
+  - @backstage/catalog-model@1.0.1-next.0
+  - @backstage/integration@1.0.1-next.0
+  - @backstage/plugin-catalog-react@1.0.1-next.0
+  - @backstage/core-components@0.9.3-next.0
+  - @backstage/catalog-client@1.0.1-next.0
+  - @backstage/plugin-scaffolder-common@1.0.1-next.0
+  - @backstage/integration-react@1.0.1-next.0
+  - @backstage/plugin-catalog-common@1.0.1-next.0
+
+## 1.0.0
+
+### Major Changes
+
+- b58c70c223: This package has been promoted to v1.0! To understand how this change affects the package, please check out our [versioning policy](https://backstage.io/docs/overview/versioning-policy).
+
+### Minor Changes
+
+- 9a408928a1: **BREAKING**: Removed the unused `titleComponent` property of `groups` passed to the `ScaffolderPage`. The property was already ignored, but existing usage should migrated to use the `title` property instead, which now accepts any `ReactNode`.
+
+### Patch Changes
+
+- 9b7e361783: Remove beta labels
+- a422d7ce5e: chore(deps): bump `@testing-library/react` from 11.2.6 to 12.1.3
+- 20a262c214: The `ScaffolderPage` now uses the `CatalogFilterLayout`, which means the filters are put in a drawer on smaller screens.
+- f24ef7864e: Minor typo fixes
+- d8716924d6: Implement a template preview page (`/create/preview`) to test creating form UIs
+- Updated dependencies
+  - @backstage/core-components@0.9.2
+  - @backstage/core-plugin-api@1.0.0
+  - @backstage/integration-react@1.0.0
+  - @backstage/plugin-catalog-react@1.0.0
+  - @backstage/plugin-permission-react@0.3.4
+  - @backstage/catalog-model@1.0.0
+  - @backstage/plugin-scaffolder-common@1.0.0
+  - @backstage/integration@1.0.0
+  - @backstage/catalog-client@1.0.0
+  - @backstage/config@1.0.0
+  - @backstage/errors@1.0.0
+  - @backstage/types@1.0.0
+  - @backstage/plugin-catalog-common@1.0.0
+
 ## 0.15.0
 
 ### Minor Changes

package/alpha/package.json

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

package/dist/esm/{Router-47c9a9ee.esm.js → Router-9a3e085b.esm.js}

@@ -1,11 +1,11 @@
 import React, { useState, useContext, useCallback } 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, Lifecycle, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage } from '@backstage/core-components';
-import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, useElementFilter } from '@backstage/core-plugin-api';
-import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker } from '@backstage/plugin-catalog-react';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
-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, s as selectedTemplateRouteRef, d as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, f as scaffolderApiRef, g as scaffolderTaskRouteRef, h as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, j as SecretsContextProvider, k as TaskPage } from './index-ced3b204.esm.js';
+import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage } from '@backstage/core-components';
+import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
+import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import { s as selectedTemplateRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, a as scaffolderApiRef, b as scaffolderTaskRouteRef, c as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, d as FIELD_EXTENSION_KEY, e as SecretsContextProvider, f as TaskPage } from './index-ae0b91e4.esm.js';
 import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import WarningIcon from '@material-ui/icons/Warning';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
@@ -17,6 +17,13 @@ import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
 import classNames from 'classnames';
+import useDebounce from 'react-use/lib/useDebounce';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import { showPanel } from '@codemirror/panel';
+import { StreamLanguage } from '@codemirror/stream-parser';
+import CodeMirror from '@uiw/react-codemirror';
+import yaml from 'yaml';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-4cf122e1.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -26,7 +33,6 @@ import '@material-ui/lab';
 import '@material-ui/core/FormHelperText';
 import '@material-ui/core/Input';
 import '@material-ui/core/InputLabel';
-import 'react-use/lib/useDebounce';
 import 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
@@ -45,35 +51,6 @@ import 'react-use/lib/useInterval';
 import 'use-immer';
 import '@material-ui/icons/Language';
 
-const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
-  {
-    component: EntityPicker,
-    name: "EntityPicker"
-  },
-  {
-    component: EntityNamePicker,
-    name: "EntityNamePicker",
-    validation: entityNamePickerValidation
-  },
-  {
-    component: EntityTagsPicker,
-    name: "EntityTagsPicker"
-  },
-  {
-    component: RepoUrlPicker,
-    name: "RepoUrlPicker",
-    validation: repoPickerValidation
-  },
-  {
-    component: OwnerPicker,
-    name: "OwnerPicker"
-  },
-  {
-    component: OwnedEntityPicker,
-    name: "OwnedEntityPicker"
-  }
-];
-
 const useStyles$2 = makeStyles((theme) => ({
   cardHeader: {
     position: "relative"
@@ -210,10 +187,6 @@ const TemplateList = ({
   const Card = TemplateCardComponent || TemplateCard;
   const maybeFilteredEntities = group ? entities.filter((e) => group.filter(e)) : entities;
   const titleComponent = (() => {
-    if (group == null ? void 0 : group.titleComponent) {
-      console.warn("DEPRECATED: group.titleComponent is now deprecated. Use group.title instead, it can be a string or a react component");
-      return group == null ? void 0 : group.titleComponent;
-    }
     if (group && group.title) {
       if (typeof group.title === "string") {
         return /* @__PURE__ */ React.createElement(ContentHeader, {
@@ -242,19 +215,10 @@ const TemplateList = ({
   })))));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
-  contentWrapper: {
-    display: "grid",
-    gridTemplateAreas: "'filters' 'grid'",
-    gridTemplateColumns: "250px 1fr",
-    gridColumnGap: theme.spacing(2)
-  }
-}));
 const ScaffolderPageContents = ({
   TemplateCardComponent,
   groups
 }) => {
-  const styles = useStyles$1();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
     title: groups ? "Other Templates" : "Templates",
@@ -263,29 +227,27 @@ const ScaffolderPageContents = ({
       return !filtered.some((result) => result === true);
     }
   };
-  const { allowed } = usePermission(catalogEntityCreatePermission);
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission
+  });
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create a New Component ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      shorthand: true
-    })),
+    title: "Create a New Component",
     subtitle: "Create new software components using standard templates"
   }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: "Available Templates"
   }, allowed && /* @__PURE__ */ React.createElement(CreateButton, {
     title: "Register Existing Component",
     to: registerComponentLink && registerComponentLink()
-  }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement("div", {
-    className: styles.contentWrapper
-  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, {
+  }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, {
     initialFilter: "template",
     hidden: true
   }), /* @__PURE__ */ React.createElement(UserListPicker, {
     initialFilter: "all",
     availableFilters: ["all", "starred"]
-  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement("div", null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
+  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
     key: index,
     TemplateCardComponent,
     group
@@ -477,6 +439,9 @@ const MultistepJsonForm = (props) => {
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
   const handleCreate = async () => {
+    if (!onFinish) {
+      return;
+    }
     setDisableButtons(true);
     try {
       await onFinish();
@@ -541,7 +506,7 @@ const MultistepJsonForm = (props) => {
     variant: "contained",
     color: "primary",
     onClick: handleCreate,
-    disabled: disableButtons
+    disabled: !onFinish || disableButtons
   }, "Create"))));
 };
 
@@ -639,9 +604,7 @@ const TemplatePage = ({
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create a New Component ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      shorthand: true
-    })),
+    title: "Create a New Component",
     subtitle: "Create new software components using standard templates"
   }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, {
     "data-testid": "loading-progress"
@@ -664,7 +627,7 @@ const TemplatePage = ({
   }))));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
     padding: theme.spacing(1),
@@ -687,7 +650,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
-  const classes = useStyles();
+  const classes = useStyles$1();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
@@ -772,8 +735,166 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
+const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+  - title: Fill in some steps
+    required:
+      - name
+    properties:
+      name:
+        title: Name
+        type: string
+        description: Unique name of the component
+      owner:
+        title: Owner
+        type: string
+        description: Owner of the component
+        ui:field: OwnerPicker
+        ui:options:
+          allowedKinds:
+            - Group
+  - title: Choose a location
+    required:
+      - repoUrl
+    properties:
+      repoUrl:
+        title: Repository Location
+        type: string
+        ui:field: RepoUrlPicker
+        ui:options:
+          allowedHosts:
+            - github.com
+`;
+const useStyles = makeStyles({
+  templateSelect: {
+    marginBottom: "10px"
+  },
+  grid: {
+    height: "100%"
+  },
+  codeMirror: {
+    height: "95%"
+  }
+});
+const TemplatePreviewPage = ({
+  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
+  customFieldExtensions = []
+}) => {
+  const classes = useStyles();
+  const alertApi = useApi(alertApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const apiHolder = useApiHolder();
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [schema, setSchema] = useState({
+    title: "",
+    steps: []
+  });
+  const [templateOptions, setTemplateOptions] = useState([]);
+  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+  const [formState, setFormState] = useState({});
+  const { loading } = useAsync(() => catalogApi.getEntities({
+    filter: { kind: "template" },
+    fields: [
+      "kind",
+      "metadata.namespace",
+      "metadata.name",
+      "metadata.title",
+      "spec.parameters"
+    ]
+  }).then(({ items }) => setTemplateOptions(items.map((template) => {
+    var _a;
+    return {
+      label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
+      value: template
+    };
+  }))).catch((e) => alertApi.post({
+    message: `Error loading exisiting templates: ${e.message}`,
+    severity: "error"
+  })), [catalogApi]);
+  const errorPanel = document.createElement("div");
+  errorPanel.style.color = "red";
+  useDebounce(() => {
+    try {
+      const parsedTemplate = yaml.parse(templateYaml);
+      setSchema({
+        title: "Preview",
+        steps: parsedTemplate.parameters.map((param) => ({
+          title: param.title,
+          schema: param
+        }))
+      });
+      setFormState({});
+    } catch (e) {
+      errorPanel.textContent = e.message;
+    }
+  }, 250, [setFormState, setSchema, templateYaml]);
+  const handleSelectChange = useCallback((selected) => {
+    setSelectedTemplate(selected);
+    setTemplateYaml(yaml.stringify(selected.spec));
+  }, [setTemplateYaml]);
+  const handleFormReset = () => setFormState({});
+  const handleFormChange = useCallback((e) => setFormState(e.formData), [setFormState]);
+  const handleCodeChange = useCallback((code) => {
+    setTemplateYaml(code);
+  }, [setTemplateYaml]);
+  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, {
+    title: "Template Preview",
+    subtitle: "Preview your template parameter UI"
+  }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    className: classes.grid
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, /* @__PURE__ */ React.createElement(FormControl, {
+    className: classes.templateSelect,
+    variant: "outlined",
+    fullWidth: true
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    id: "select-template-label"
+  }, "Load Existing Template"), /* @__PURE__ */ React.createElement(Select, {
+    value: selectedTemplate,
+    label: "Load Existing Template",
+    labelId: "select-template-label",
+    onChange: (e) => handleSelectChange(e.target.value)
+  }, templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, {
+    key: idx,
+    value: option.value
+  }, option.label)))), /* @__PURE__ */ React.createElement(CodeMirror, {
+    className: classes.codeMirror,
+    value: templateYaml,
+    theme: "dark",
+    height: "100%",
+    extensions: [
+      StreamLanguage.define(yaml$1),
+      showPanel.of(() => ({ dom: errorPanel, top: true }))
+    ],
+    onChange: handleCodeChange
+  })), /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 6
+  }, schema && /* @__PURE__ */ React.createElement(InfoCard, {
+    key: JSON.stringify(schema)
+  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
+    formData: formState,
+    fields: customFieldComponents,
+    onChange: handleFormChange,
+    onReset: handleFormReset,
+    steps: schema.steps.map((step) => {
+      return {
+        ...step,
+        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
+      };
+    })
+  }))))));
+};
+
 const Router = (props) => {
-  const { groups, components = {} } = props;
+  const { groups, components = {}, defaultPreviewTemplate } = props;
   const { TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
   const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
@@ -803,8 +924,14 @@ const Router = (props) => {
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/actions",
     element: /* @__PURE__ */ React.createElement(ActionsPage, null)
+  }), /* @__PURE__ */ React.createElement(Route, {
+    path: "/preview",
+    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePreviewPage, {
+      defaultPreviewTemplate,
+      customFieldExtensions: fieldExtensions
+    }))
   }));
 };
 
 export { Router };
-//# sourceMappingURL=Router-47c9a9ee.esm.js.map
+//# sourceMappingURL=Router-9a3e085b.esm.js.map