@backstage/plugin-scaffolder 1.26.0-next.1 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @backstage/plugin-scaffolder
 
+## 1.26.0
+
+### Minor Changes
+
+- bf6eaf3: Added support for `FormFieldBlueprint` to create field extensions in the Scaffolder plugin
+- c433ae9: Improved the layout of the manage templates page (`/edit`) by adding icons and descriptions that better describe what each page is for. Updated the header menu to link back to the scaffolder create page.
+- 7bfaf23: Text field content of the `EntityPicker` is now more readable as it uses entity title instead of entity reference.
+- cc3f80c: Added ability to create a new local scaffolder template to ease onboarding when creating new templates.
+- 5492eb6: Added ability to link to a specific action on the actions page
+
+### Patch Changes
+
+- b2b2aa8: Fix extra divider displayed in owner list picker on list tasks page
+- 7f1f483: Create a separate route for the Scaffolder template editor and add the ability to refresh the page without closing the directory. Also, when the directory is closed, the user will stay on the editor page and can load a template folder from there.
+- f6c15d8: Apply `defaultValue` props in `MultiEntityPicker`
+- 7a3d622: Create a separate route for the template form editor so we refresh it without being redirected to scaffolder edit page.
+- 4698646: Change task list created at column to show timestamp
+- e969dc7: Move `@types/react` to a peer dependency.
+- e6bbfce: Add tests for the `TemplateEditorToolbarTemplatesMenu` component.
+- 4130291: Create a separate route for the custom fields explorer so we refresh it without being redirected to scaffolder edit page.
+- 4e9702e: Add tests for the new pages header navigation.
+- f25c9e3: Fix behavior of scaffolder entity pickers (EntityPicker, MultiEntityPicker, MyGroupsPicker) to not auto-fill and disable the field if there is only a single value option and the field is not required.
+- 785d68f: Add support for pagination in scaffolder tasks list
+- 94a7bcd: Change "Register Existing Component" CTA to outlined as it's not a primary action on the scaffolder pages
+- f989c47: Add translation to the editor toolbar component.
+- d4cafc8: Standardize template editor pages desktop and mobile layouts.
+- b1de959: Scaffolder task routes require read permission to access. The tasks list option in the scaffolder page context menu only shows with permission.
+- e698470: Updated dependency `@rjsf/utils` to `5.21.2`.
+  Updated dependency `@rjsf/core` to `5.21.2`.
+  Updated dependency `@rjsf/material-ui` to `5.21.2`.
+  Updated dependency `@rjsf/validator-ajv8` to `5.21.2`.
+- 720a2f9: Updated dependency `git-url-parse` to `^15.0.0`.
+- 01ffa58: Add tests for the `useTemplateDirectory` hook.
+- 3ac4766: Add an actions filter on the list actions page and drawer.
+- 11e0752: Make it possible to manually retry the scaffolder template from the step it failed
+- 09fcd95: Update the Scaffolder template editor to quickly access installed custom fields and actions when editing a template.
+- c18d925: Add tests for the `TemplateEditorToolbarFilesMenu` component.
+- Updated dependencies
+  - @backstage/core-components@0.15.1
+  - @backstage/plugin-scaffolder-react@1.13.0
+  - @backstage/frontend-plugin-api@0.9.0
+  - @backstage/integration-react@1.2.0
+  - @backstage/core-compat-api@0.3.1
+  - @backstage/core-plugin-api@1.10.0
+  - @backstage/plugin-permission-react@0.4.27
+  - @backstage/plugin-catalog-react@1.14.0
+  - @backstage/integration@1.15.1
+  - @backstage/catalog-client@1.7.1
+  - @backstage/catalog-model@1.7.0
+  - @backstage/errors@1.2.4
+  - @backstage/types@1.1.1
+  - @backstage/plugin-catalog-common@1.1.0
+  - @backstage/plugin-scaffolder-common@1.5.6
+
+## 1.26.0-next.2
+
+### Patch Changes
+
+- e6bbfce: Add tests for the `TemplateEditorToolbarTemplatesMenu` component.
+- 4e9702e: Add tests for the new pages header navigation.
+- f989c47: Add translation to the editor toolbar component.
+- d4cafc8: Standardize template editor pages desktop and mobile layouts.
+- 720a2f9: Updated dependency `git-url-parse` to `^15.0.0`.
+- 01ffa58: Add tests for the `useTemplateDirectory` hook.
+- 3ac4766: Add an actions filter on the list actions page and drawer.
+- c18d925: Add tests for the `TemplateEditorToolbarFilesMenu` component.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.14.0-next.2
+  - @backstage/integration@1.15.1-next.1
+  - @backstage/catalog-client@1.7.1-next.0
+  - @backstage/catalog-model@1.7.0
+  - @backstage/core-compat-api@0.3.1-next.2
+  - @backstage/core-components@0.15.1-next.2
+  - @backstage/core-plugin-api@1.10.0-next.1
+  - @backstage/errors@1.2.4
+  - @backstage/frontend-plugin-api@0.9.0-next.2
+  - @backstage/integration-react@1.2.0-next.2
+  - @backstage/types@1.1.1
+  - @backstage/plugin-catalog-common@1.1.0
+  - @backstage/plugin-permission-react@0.4.27-next.1
+  - @backstage/plugin-scaffolder-common@1.5.6
+  - @backstage/plugin-scaffolder-react@1.13.0-next.2
+
 ## 1.26.0-next.1
 
 ### Minor Changes

package/alpha/package.json

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

package/dist/alpha/components/TemplateEditorPage/CustomFieldExplorer.esm.js

@@ -4,13 +4,7 @@ import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
-import FormControl from '@material-ui/core/FormControl';
-import IconButton from '@material-ui/core/IconButton';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
 import { makeStyles } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
 import CodeMirror from '@uiw/react-codemirror';
 import React, { useState, useMemo, useCallback } from 'react';
 import yaml from 'yaml';
@@ -19,47 +13,63 @@ import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
 import validator from '@rjsf/validator-ajv8';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
+import SearchIcon from '@material-ui/icons/Search';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 
 const useStyles = makeStyles(
   (theme) => ({
     root: {
       gridArea: "pageContent",
       display: "grid",
+      gridGap: theme.spacing(2),
       gridTemplateAreas: `
+      "controls"
+      "fieldForm"
+      "preview"
+    `,
+      [theme.breakpoints.up("md")]: {
+        gridTemplateAreas: `
       "controls controls"
       "fieldForm preview"
     `,
-      gridTemplateRows: "auto 1fr",
-      gridTemplateColumns: "1fr 1fr"
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: "1fr 1fr"
+      }
     },
     controls: {
       gridArea: "controls",
       display: "flex",
       flexFlow: "row nowrap",
-      alignItems: "center",
-      margin: theme.spacing(1)
+      alignItems: "center"
     },
     fieldForm: {
       gridArea: "fieldForm"
     },
     preview: {
-      gridArea: "preview"
+      gridArea: "preview",
+      display: "grid",
+      gridGap: theme.spacing(2),
+      alignContent: "start"
     }
   }),
   { name: "ScaffolderCustomFieldExplorer" }
 );
 const CustomFieldExplorer = ({
-  customFieldExtensions = [],
-  onClose
+  customFieldExtensions = []
 }) => {
   const classes = useStyles();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
-  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
+  const [selectedField, setSelectedField] = useState(fieldOptions?.[0]);
   const [fieldFormState, setFieldFormState] = useState({});
   const [refreshKey, setRefreshKey] = useState(Date.now());
-  const sampleFieldTemplate = useMemo(
-    () => yaml.stringify({
+  const sampleFieldTemplate = useMemo(() => {
+    if (!selectedField) {
+      return "";
+    }
+    return yaml.stringify({
       parameters: [
         {
           title: `${selectedField.name} Example`,
@@ -72,9 +82,8 @@ const CustomFieldExplorer = ({
           }
         }
       ]
-    }),
-    [fieldFormState, selectedField]
-  );
+    });
+  }, [fieldFormState, selectedField]);
   const fieldComponents = useMemo(() => {
     return Object.fromEntries(
       customFieldExtensions.map(({ name, component }) => [name, component])
@@ -94,16 +103,39 @@ const CustomFieldExplorer = ({
     },
     [setFieldFormState, setRefreshKey]
   );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, t("templateEditorPage.customFieldExplorer.selectFieldLabel")), /* @__PURE__ */ React.createElement(
-    Select,
+  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(
+    Autocomplete,
     {
+      id: "custom-fields-autocomplete",
       value: selectedField,
-      label: t("templateEditorPage.customFieldExplorer.selectFieldLabel"),
-      labelId: "select-field-label",
-      onChange: (e) => handleSelectionChange(e.target.value)
-    },
-    fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option }, option.name))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
+      options: fieldOptions,
+      getOptionLabel: (option) => option.name,
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          "aria-label": t(
+            "templateEditorPage.customFieldExplorer.selectFieldLabel"
+          ),
+          placeholder: t(
+            "templateEditorPage.customFieldExplorer.selectFieldLabel"
+          ),
+          variant: "outlined",
+          InputProps: {
+            ...params.InputProps,
+            startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+          }
+        }
+      ),
+      onChange: (_event, option) => {
+        if (option) {
+          handleSelectionChange(option);
+        }
+      },
+      disableClearable: true,
+      fullWidth: true
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
     CardHeader,
     {
       title: t("templateEditorPage.customFieldExplorer.fieldForm.title")
@@ -118,7 +150,7 @@ const CustomFieldExplorer = ({
       formContext: { fieldFormState },
       onSubmit: (e) => handleFieldConfigChange(e.formData),
       validator,
-      schema: selectedField.schema?.uiOptions || {},
+      schema: selectedField?.schema?.uiOptions || {},
       experimental_defaultFormStateBehavior: {
         allOf: "populateDefaults"
       }
@@ -129,7 +161,7 @@ const CustomFieldExplorer = ({
         variant: "contained",
         color: "primary",
         type: "submit",
-        disabled: !selectedField.schema?.uiOptions
+        disabled: !selectedField?.schema?.uiOptions
       },
       t(
         "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"

package/dist/alpha/components/TemplateEditorPage/CustomFieldExplorer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFieldExplorer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Button from '@material-ui/core/Button';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport validator from '@rjsf/validator-ajv8';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\n/** @public */\nexport type ScaffolderCustomFieldExplorerClassKey =\n  | 'root'\n  | 'controls'\n  | 'fieldForm'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"controls controls\"\n      \"fieldForm preview\"\n    `,\n      gridTemplateRows: 'auto 1fr',\n      gridTemplateColumns: '1fr 1fr',\n    },\n    controls: {\n      gridArea: 'controls',\n      display: 'flex',\n      flexFlow: 'row nowrap',\n      alignItems: 'center',\n      margin: theme.spacing(1),\n    },\n    fieldForm: {\n      gridArea: 'fieldForm',\n    },\n    preview: {\n      gridArea: 'preview',\n    },\n  }),\n  { name: 'ScaffolderCustomFieldExplorer' },\n);\n\nexport const CustomFieldExplorer = ({\n  customFieldExtensions = [],\n  onClose,\n}: {\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const fieldOptions = customFieldExtensions.filter(field => !!field.schema);\n  const [selectedField, setSelectedField] = useState(fieldOptions[0]);\n  const [fieldFormState, setFieldFormState] = useState({});\n  const [refreshKey, setRefreshKey] = useState(Date.now());\n  const sampleFieldTemplate = useMemo(\n    () =>\n      yaml.stringify({\n        parameters: [\n          {\n            title: `${selectedField.name} Example`,\n            properties: {\n              [selectedField.name]: {\n                type: selectedField.schema?.returnValue?.type,\n                'ui:field': selectedField.name,\n                'ui:options': fieldFormState,\n              },\n            },\n          },\n        ],\n      }),\n    [fieldFormState, selectedField],\n  );\n\n  const fieldComponents = useMemo(() => {\n    return Object.fromEntries(\n      customFieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [customFieldExtensions]);\n\n  const handleSelectionChange = useCallback(\n    (selection: FieldExtensionOptions) => {\n      setSelectedField(selection);\n      setFieldFormState({});\n    },\n    [setFieldFormState, setSelectedField],\n  );\n\n  const handleFieldConfigChange = useCallback(\n    (state: {}) => {\n      setFieldFormState(state);\n      // Force TemplateEditorForm to re-render since some fields\n      // may not be responsive to ui:option changes\n      setRefreshKey(Date.now());\n    },\n    [setFieldFormState, setRefreshKey],\n  );\n\n  return (\n    <main className={classes.root}>\n      <div className={classes.controls}>\n        <FormControl variant=\"outlined\" size=\"small\" fullWidth>\n          <InputLabel id=\"select-field-label\">\n            {t('templateEditorPage.customFieldExplorer.selectFieldLabel')}\n          </InputLabel>\n          <Select\n            value={selectedField}\n            label={t('templateEditorPage.customFieldExplorer.selectFieldLabel')}\n            labelId=\"select-field-label\"\n            onChange={e =>\n              handleSelectionChange(e.target.value as FieldExtensionOptions)\n            }\n          >\n            {fieldOptions.map((option, idx) => (\n              <MenuItem key={idx} value={option as any}>\n                {option.name}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n\n        <IconButton size=\"medium\" onClick={onClose} aria-label=\"Close\">\n          <CloseIcon />\n        </IconButton>\n      </div>\n      <div className={classes.fieldForm}>\n        <Card>\n          <CardHeader\n            title={t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n          />\n          <CardContent>\n            <Form\n              showErrorList={false}\n              fields={{ ...fieldComponents }}\n              noHtml5Validate\n              formData={fieldFormState}\n              formContext={{ fieldFormState }}\n              onSubmit={e => handleFieldConfigChange(e.formData)}\n              validator={validator}\n              schema={selectedField.schema?.uiOptions || {}}\n              experimental_defaultFormStateBehavior={{\n                allOf: 'populateDefaults',\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={!selectedField.schema?.uiOptions}\n              >\n                {t(\n                  'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n                )}\n              </Button>\n            </Form>\n          </CardContent>\n        </Card>\n      </div>\n      <div className={classes.preview}>\n        <Card>\n          <CardHeader\n            title={t('templateEditorPage.customFieldExplorer.preview.title')}\n          />\n          <CardContent>\n            <CodeMirror\n              readOnly\n              theme=\"dark\"\n              height=\"100%\"\n              extensions={[StreamLanguage.define(yamlSupport)]}\n              value={sampleFieldTemplate}\n            />\n          </CardContent>\n        </Card>\n        <TemplateEditorForm\n          key={refreshKey}\n          content={sampleFieldTemplate}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={() => null}\n        />\n      </div>\n    </main>\n  );\n};\n"],"names":["yamlSupport"],"mappings":"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"}
+{"version":3,"file":"CustomFieldExplorer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Button from '@material-ui/core/Button';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport validator from '@rjsf/validator-ajv8';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport SearchIcon from '@material-ui/icons/Search';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\n/** @public */\nexport type ScaffolderCustomFieldExplorerClassKey =\n  | 'root'\n  | 'controls'\n  | 'fieldForm'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridGap: theme.spacing(2),\n      gridTemplateAreas: `\n      \"controls\"\n      \"fieldForm\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"controls controls\"\n      \"fieldForm preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    controls: {\n      gridArea: 'controls',\n      display: 'flex',\n      flexFlow: 'row nowrap',\n      alignItems: 'center',\n    },\n    fieldForm: {\n      gridArea: 'fieldForm',\n    },\n    preview: {\n      gridArea: 'preview',\n      display: 'grid',\n      gridGap: theme.spacing(2),\n      alignContent: 'start',\n    },\n  }),\n  { name: 'ScaffolderCustomFieldExplorer' },\n);\n\nexport const CustomFieldExplorer = ({\n  customFieldExtensions = [],\n}: {\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const fieldOptions = customFieldExtensions.filter(field => !!field.schema);\n  const [selectedField, setSelectedField] = useState(fieldOptions?.[0]);\n  const [fieldFormState, setFieldFormState] = useState({});\n  const [refreshKey, setRefreshKey] = useState(Date.now());\n  const sampleFieldTemplate = useMemo(() => {\n    if (!selectedField) {\n      return '';\n    }\n    return yaml.stringify({\n      parameters: [\n        {\n          title: `${selectedField.name} Example`,\n          properties: {\n            [selectedField.name]: {\n              type: selectedField.schema?.returnValue?.type,\n              'ui:field': selectedField.name,\n              'ui:options': fieldFormState,\n            },\n          },\n        },\n      ],\n    });\n  }, [fieldFormState, selectedField]);\n\n  const fieldComponents = useMemo(() => {\n    return Object.fromEntries(\n      customFieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [customFieldExtensions]);\n\n  const handleSelectionChange = useCallback(\n    (selection: FieldExtensionOptions) => {\n      setSelectedField(selection);\n      setFieldFormState({});\n    },\n    [setFieldFormState, setSelectedField],\n  );\n\n  const handleFieldConfigChange = useCallback(\n    (state: {}) => {\n      setFieldFormState(state);\n      // Force TemplateEditorForm to re-render since some fields\n      // may not be responsive to ui:option changes\n      setRefreshKey(Date.now());\n    },\n    [setFieldFormState, setRefreshKey],\n  );\n\n  return (\n    <main className={classes.root}>\n      <div className={classes.controls}>\n        <Autocomplete\n          id=\"custom-fields-autocomplete\"\n          value={selectedField}\n          options={fieldOptions}\n          getOptionLabel={option => option.name}\n          renderInput={params => (\n            <TextField\n              {...params}\n              aria-label={t(\n                'templateEditorPage.customFieldExplorer.selectFieldLabel',\n              )}\n              placeholder={t(\n                'templateEditorPage.customFieldExplorer.selectFieldLabel',\n              )}\n              variant=\"outlined\"\n              InputProps={{\n                ...params.InputProps,\n                startAdornment: (\n                  <InputAdornment position=\"start\">\n                    <SearchIcon />\n                  </InputAdornment>\n                ),\n              }}\n            />\n          )}\n          onChange={(_event, option) => {\n            if (option) {\n              handleSelectionChange(option);\n            }\n          }}\n          disableClearable\n          fullWidth\n        />\n      </div>\n      <div className={classes.fieldForm}>\n        <Card>\n          <CardHeader\n            title={t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n          />\n          <CardContent>\n            <Form\n              showErrorList={false}\n              fields={{ ...fieldComponents }}\n              noHtml5Validate\n              formData={fieldFormState}\n              formContext={{ fieldFormState }}\n              onSubmit={e => handleFieldConfigChange(e.formData)}\n              validator={validator}\n              schema={selectedField?.schema?.uiOptions || {}}\n              experimental_defaultFormStateBehavior={{\n                allOf: 'populateDefaults',\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={!selectedField?.schema?.uiOptions}\n              >\n                {t(\n                  'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n                )}\n              </Button>\n            </Form>\n          </CardContent>\n        </Card>\n      </div>\n      <div className={classes.preview}>\n        <Card>\n          <CardHeader\n            title={t('templateEditorPage.customFieldExplorer.preview.title')}\n          />\n          <CardContent>\n            <CodeMirror\n              readOnly\n              theme=\"dark\"\n              height=\"100%\"\n              extensions={[StreamLanguage.define(yamlSupport)]}\n              value={sampleFieldTemplate}\n            />\n          </CardContent>\n        </Card>\n        <TemplateEditorForm\n          key={refreshKey}\n          content={sampleFieldTemplate}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={() => null}\n        />\n      </div>\n    </main>\n  );\n};\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.esm.js

@@ -5,16 +5,16 @@ import CodeMirror from '@uiw/react-codemirror';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import SearchIcon from '@material-ui/icons/Search';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { Form } from '@backstage/plugin-scaffolder-react/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
@@ -28,7 +28,7 @@ const useStyles = makeStyles(
       gridTemplateRows: "auto 1fr"
     },
     controls: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(3)
     },
     code: {
       width: "100%"
@@ -81,16 +81,39 @@ const CustomFieldPlaygroud = ({
     },
     [setFieldFormState, setRefreshKey]
   );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, t("templateEditorPage.customFieldExplorer.selectFieldLabel")), /* @__PURE__ */ React.createElement(
-    Select,
+  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(
+    Autocomplete,
     {
+      id: "custom-fields-autocomplete",
       value: selectedField,
-      label: t("templateEditorPage.customFieldExplorer.selectFieldLabel"),
-      labelId: "select-field-label",
-      onChange: (e) => handleSelectionChange(e.target.value)
-    },
-    fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option }, option.name))
-  ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: true }, /* @__PURE__ */ React.createElement(
+      options: fieldOptions,
+      getOptionLabel: (option) => option.name,
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          "aria-label": t(
+            "templateEditorPage.customFieldExplorer.selectFieldLabel"
+          ),
+          placeholder: t(
+            "templateEditorPage.customFieldExplorer.selectFieldLabel"
+          ),
+          variant: "outlined",
+          InputProps: {
+            ...params.InputProps,
+            startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+          }
+        }
+      ),
+      onChange: (_event, option) => {
+        if (option) {
+          handleSelectionChange(option);
+        }
+      },
+      disableClearable: true,
+      fullWidth: true
+    }
+  )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: true }, /* @__PURE__ */ React.createElement(
     AccordionSummary,
     {
       expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),

package/dist/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFieldPlaygroud.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport validator from '@rjsf/validator-ajv8';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { TemplateEditorForm } from './TemplateEditorForm';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateRows: 'auto 1fr',\n    },\n    controls: {\n      marginBottom: theme.spacing(2),\n    },\n    code: {\n      width: '100%',\n    },\n  }),\n  { name: 'ScaffolderCustomFieldExtensionsPlaygroud' },\n);\n\nexport const CustomFieldPlaygroud = ({\n  fieldExtensions = [],\n}: {\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const fieldOptions = fieldExtensions.filter(field => !!field.schema);\n  const [refreshKey, setRefreshKey] = useState(Date.now());\n  const [fieldFormState, setFieldFormState] = useState({});\n  const [selectedField, setSelectedField] = useState(fieldOptions[0]);\n  const sampleFieldTemplate = useMemo(\n    () =>\n      yaml.stringify({\n        parameters: [\n          {\n            title: `${selectedField.name} Example`,\n            properties: {\n              [selectedField.name]: {\n                type: selectedField.schema?.returnValue?.type,\n                'ui:field': selectedField.name,\n                'ui:options': fieldFormState,\n              },\n            },\n          },\n        ],\n      }),\n    [fieldFormState, selectedField],\n  );\n\n  const fieldComponents = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  const handleSelectionChange = useCallback(\n    (selection: FieldExtensionOptions) => {\n      setSelectedField(selection);\n      setFieldFormState({});\n    },\n    [setFieldFormState, setSelectedField],\n  );\n\n  const handleFieldConfigChange = useCallback(\n    (state: {}) => {\n      setFieldFormState(state);\n      // Force TemplateEditorForm to re-render since some fields\n      // may not be responsive to ui:option changes\n      setRefreshKey(Date.now());\n    },\n    [setFieldFormState, setRefreshKey],\n  );\n\n  return (\n    <main className={classes.root}>\n      <div className={classes.controls}>\n        <FormControl variant=\"outlined\" fullWidth>\n          <InputLabel id=\"select-field-label\">\n            {t('templateEditorPage.customFieldExplorer.selectFieldLabel')}\n          </InputLabel>\n          <Select\n            value={selectedField}\n            label={t('templateEditorPage.customFieldExplorer.selectFieldLabel')}\n            labelId=\"select-field-label\"\n            onChange={e =>\n              handleSelectionChange(e.target.value as FieldExtensionOptions)\n            }\n          >\n            {fieldOptions.map((option, idx) => (\n              <MenuItem key={idx} value={option as any}>\n                {option.name}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </div>\n      <div>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-code-content\"\n            id=\"panel-code-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.preview.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <div className={classes.code}>\n              <CodeMirror\n                readOnly\n                theme=\"dark\"\n                height=\"100%\"\n                width=\"100%\"\n                extensions={[StreamLanguage.define(yamlSupport)]}\n                value={sampleFieldTemplate}\n              />\n            </div>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-preview-content\"\n            id=\"panel-preview-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.fieldPreview.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TemplateEditorForm\n              key={refreshKey}\n              content={sampleFieldTemplate}\n              contentIsSpec\n              fieldExtensions={fieldExtensions}\n              setErrorText={() => null}\n            />\n          </AccordionDetails>\n        </Accordion>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-options-content\"\n            id=\"panel-options-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Form\n              showErrorList={false}\n              fields={{ ...fieldComponents }}\n              noHtml5Validate\n              formData={fieldFormState}\n              formContext={{ fieldFormState }}\n              onSubmit={e => handleFieldConfigChange(e.formData)}\n              validator={validator}\n              schema={selectedField.schema?.uiOptions || {}}\n              experimental_defaultFormStateBehavior={{\n                allOf: 'populateDefaults',\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={!selectedField.schema?.uiOptions}\n              >\n                {t(\n                  'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n                )}\n              </Button>\n            </Form>\n          </AccordionDetails>\n        </Accordion>\n      </div>\n    </main>\n  );\n};\n"],"names":["yamlSupport"],"mappings":"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"}
+{"version":3,"file":"CustomFieldPlaygroud.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport validator from '@rjsf/validator-ajv8';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { TemplateEditorForm } from './TemplateEditorForm';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateRows: 'auto 1fr',\n    },\n    controls: {\n      marginBottom: theme.spacing(3),\n    },\n    code: {\n      width: '100%',\n    },\n  }),\n  { name: 'ScaffolderCustomFieldExtensionsPlaygroud' },\n);\n\nexport const CustomFieldPlaygroud = ({\n  fieldExtensions = [],\n}: {\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const fieldOptions = fieldExtensions.filter(field => !!field.schema);\n  const [refreshKey, setRefreshKey] = useState(Date.now());\n  const [fieldFormState, setFieldFormState] = useState({});\n  const [selectedField, setSelectedField] = useState(fieldOptions[0]);\n  const sampleFieldTemplate = useMemo(\n    () =>\n      yaml.stringify({\n        parameters: [\n          {\n            title: `${selectedField.name} Example`,\n            properties: {\n              [selectedField.name]: {\n                type: selectedField.schema?.returnValue?.type,\n                'ui:field': selectedField.name,\n                'ui:options': fieldFormState,\n              },\n            },\n          },\n        ],\n      }),\n    [fieldFormState, selectedField],\n  );\n\n  const fieldComponents = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  const handleSelectionChange = useCallback(\n    (selection: FieldExtensionOptions) => {\n      setSelectedField(selection);\n      setFieldFormState({});\n    },\n    [setFieldFormState, setSelectedField],\n  );\n\n  const handleFieldConfigChange = useCallback(\n    (state: {}) => {\n      setFieldFormState(state);\n      // Force TemplateEditorForm to re-render since some fields\n      // may not be responsive to ui:option changes\n      setRefreshKey(Date.now());\n    },\n    [setFieldFormState, setRefreshKey],\n  );\n\n  return (\n    <main className={classes.root}>\n      <div className={classes.controls}>\n        <Autocomplete\n          id=\"custom-fields-autocomplete\"\n          value={selectedField}\n          options={fieldOptions}\n          getOptionLabel={option => option.name}\n          renderInput={params => (\n            <TextField\n              {...params}\n              aria-label={t(\n                'templateEditorPage.customFieldExplorer.selectFieldLabel',\n              )}\n              placeholder={t(\n                'templateEditorPage.customFieldExplorer.selectFieldLabel',\n              )}\n              variant=\"outlined\"\n              InputProps={{\n                ...params.InputProps,\n                startAdornment: (\n                  <InputAdornment position=\"start\">\n                    <SearchIcon />\n                  </InputAdornment>\n                ),\n              }}\n            />\n          )}\n          onChange={(_event, option) => {\n            if (option) {\n              handleSelectionChange(option);\n            }\n          }}\n          disableClearable\n          fullWidth\n        />\n      </div>\n      <div>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-code-content\"\n            id=\"panel-code-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.preview.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <div className={classes.code}>\n              <CodeMirror\n                readOnly\n                theme=\"dark\"\n                height=\"100%\"\n                width=\"100%\"\n                extensions={[StreamLanguage.define(yamlSupport)]}\n                value={sampleFieldTemplate}\n              />\n            </div>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-preview-content\"\n            id=\"panel-preview-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.fieldPreview.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TemplateEditorForm\n              key={refreshKey}\n              content={sampleFieldTemplate}\n              contentIsSpec\n              fieldExtensions={fieldExtensions}\n              setErrorText={() => null}\n            />\n          </AccordionDetails>\n        </Accordion>\n        <Accordion defaultExpanded>\n          <AccordionSummary\n            expandIcon={<ExpandMoreIcon />}\n            aria-controls=\"panel-options-content\"\n            id=\"panel-options-header\"\n          >\n            <Typography variant=\"h6\">\n              {t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Form\n              showErrorList={false}\n              fields={{ ...fieldComponents }}\n              noHtml5Validate\n              formData={fieldFormState}\n              formContext={{ fieldFormState }}\n              onSubmit={e => handleFieldConfigChange(e.formData)}\n              validator={validator}\n              schema={selectedField.schema?.uiOptions || {}}\n              experimental_defaultFormStateBehavior={{\n                allOf: 'populateDefaults',\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={!selectedField.schema?.uiOptions}\n              >\n                {t(\n                  'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n                )}\n              </Button>\n            </Form>\n          </AccordionDetails>\n        </Accordion>\n      </div>\n    </main>\n  );\n};\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/CustomFieldsPage.esm.js

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from 'react';
 import { Page, Header, Content } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -8,25 +7,17 @@ import { scaffolderTranslationRef } from '../../../translation.esm.js';
 import { CustomFieldExplorer } from './CustomFieldExplorer.esm.js';
 
 function CustomFieldsPage(props) {
-  const navigate = useNavigate();
   const editLink = useRouteRef(editRouteRef);
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  const handleClose = useCallback(() => {
-    navigate(editLink());
-  }, [navigate, editLink]);
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      title: t("templateEditorPage.title"),
-      subtitle: t("templateEditorPage.subtitle")
+      title: t("templateCustomFieldPage.title"),
+      subtitle: t("templateCustomFieldPage.subtitle"),
+      type: t("templateIntroPage.title"),
+      typeLink: editLink()
     }
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
-    CustomFieldExplorer,
-    {
-      customFieldExtensions: props.fieldExtensions,
-      onClose: handleClose
-    }
-  )));
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(CustomFieldExplorer, { customFieldExtensions: props.fieldExtensions })));
 }
 
 export { CustomFieldsPage };

package/dist/alpha/components/TemplateEditorPage/CustomFieldsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFieldsPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\n\ninterface CustomFieldsPageProps {\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}\n\nexport function CustomFieldsPage(props: CustomFieldsPageProps) {\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        subtitle={t('templateEditorPage.subtitle')}\n      />\n      <Content>\n        <CustomFieldExplorer\n          customFieldExtensions={props.fieldExtensions}\n          onClose={handleClose}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAiCO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,0BAA0B,CAAA;AAAA,MACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,KAAA;AAAA,GAC3C,sCACC,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,uBAAuB,KAAM,CAAA,eAAA;AAAA,MAC7B,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,GAEb,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CustomFieldsPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldsPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\n\ninterface CustomFieldsPageProps {\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}\n\nexport function CustomFieldsPage(props: CustomFieldsPageProps) {\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateCustomFieldPage.title')}\n        subtitle={t('templateCustomFieldPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content>\n        <CustomFieldExplorer customFieldExtensions={props.fieldExtensions} />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgCO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,+BAA+B,CAAA;AAAA,MACxC,QAAA,EAAU,EAAE,kCAAkC,CAAA;AAAA,MAC9C,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,MACjC,UAAU,QAAS,EAAA;AAAA,KAAA;AAAA,GACrB,sCACC,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,qBAAuB,EAAA,KAAA,CAAM,eAAiB,EAAA,CACrE,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/DirectoryEditorContext.esm.js

@@ -123,6 +123,9 @@ function DirectoryEditorProvider(props) {
   const { directory } = props;
   const [{ result, error }, { execute }] = useAsync(
     async (dir) => {
+      if (!dir) {
+        return void 0;
+      }
       const manager = new DirectoryEditorManager(dir);
       await manager.reload();
       const firstYaml = manager.files.find((file) => file.path.match(/\.ya?ml$/));
@@ -133,9 +136,7 @@ function DirectoryEditorProvider(props) {
     }
   );
   useEffect(() => {
-    if (directory) {
-      execute(directory);
-    }
+    execute(directory);
   }, [execute, directory]);
   if (error) {
     return /* @__PURE__ */ React.createElement(ErrorPanel, { error });

package/dist/alpha/components/TemplateEditorPage/DirectoryEditorContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DirectoryEditorContext.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorPanel } from '@backstage/core-components';\nimport { useAsync, useRerender } from '@react-hookz/web';\nimport React, { createContext, ReactNode, useContext, useEffect } from 'react';\nimport {\n  TemplateDirectoryAccess,\n  TemplateFileAccess,\n} from '../../../lib/filesystem';\n\nconst MAX_SIZE = 1024 * 1024;\nconst MAX_SIZE_MESSAGE = 'This file is too large to be displayed';\n\ninterface DirectoryEditorFile {\n  /** The path of the file relative to the root directory */\n  path: string;\n  /** The staged content of the file */\n  content: string;\n  /** Whether the staged content matches what is on disk */\n  dirty: boolean;\n\n  /** Update the staged content of the file without saving */\n  updateContent(content: string): void;\n  /** Save the staged content of the file to disk */\n  save(): Promise<void>;\n  /** Reload the staged content of the file from disk */\n  reload(): Promise<void>;\n}\n\ninterface DirectoryEditor {\n  /** A list of all files in the edited directory */\n  files: Array<DirectoryEditorFile>;\n\n  /** The currently selected file */\n  selectedFile: DirectoryEditorFile | undefined;\n  /** Switch the selected file */\n  setSelectedFile(path: string | undefined): void;\n\n  /** Save all files to disk */\n  save(): Promise<void>;\n  /** Reload all files from disk */\n  reload(): Promise<void>;\n\n  subscribe(listener: () => void): () => void;\n}\n\nclass DirectoryEditorFileManager implements DirectoryEditorFile {\n  readonly #access: TemplateFileAccess;\n  readonly #signalUpdate: () => void;\n\n  #content?: string;\n  #savedContent?: string;\n\n  constructor(access: TemplateFileAccess, signalUpdate: () => void) {\n    this.#access = access;\n    this.#signalUpdate = signalUpdate;\n  }\n\n  get path() {\n    return this.#access.path;\n  }\n\n  get content() {\n    return this.#content ?? MAX_SIZE_MESSAGE;\n  }\n\n  updateContent(content: string): void {\n    if (this.#content === undefined) {\n      return;\n    }\n    this.#content = content;\n    this.#signalUpdate();\n  }\n\n  get dirty() {\n    return this.#content !== this.#savedContent;\n  }\n\n  async save(): Promise<void> {\n    if (this.#content !== undefined) {\n      await this.#access.save(this.#content);\n      this.#savedContent = this.#content;\n      this.#signalUpdate();\n    }\n  }\n\n  async reload(): Promise<void> {\n    const file = await this.#access.file();\n    if (file.size > MAX_SIZE) {\n      if (this.#content !== undefined) {\n        this.#content = undefined;\n        this.#savedContent = undefined;\n        this.#signalUpdate();\n      }\n      return;\n    }\n\n    const content = await file.text();\n    if (this.#content !== content) {\n      this.#content = content;\n      this.#savedContent = content;\n      this.#signalUpdate();\n    }\n  }\n}\n\nclass DirectoryEditorManager implements DirectoryEditor {\n  readonly #access: TemplateDirectoryAccess;\n  readonly #listeners = new Set<() => void>();\n\n  #files: DirectoryEditorFile[] = [];\n  #selectedFile: DirectoryEditorFile | undefined;\n\n  constructor(access: TemplateDirectoryAccess) {\n    this.#access = access;\n  }\n\n  get files() {\n    return this.#files;\n  }\n\n  get selectedFile() {\n    return this.#selectedFile;\n  }\n\n  setSelectedFile = (path: string | undefined): void => {\n    const prev = this.#selectedFile;\n    const next = this.#files.find(file => file.path === path);\n    if (prev !== next) {\n      this.#selectedFile = next;\n      this.#signalUpdate();\n    }\n  };\n\n  get dirty() {\n    return this.#files.some(file => file.dirty);\n  }\n\n  async save(): Promise<void> {\n    await Promise.all(this.#files.map(file => file.save()));\n  }\n\n  async reload(): Promise<void> {\n    const selectedPath = this.#selectedFile?.path;\n\n    const files = await this.#access.listFiles();\n    const fileManagers = await Promise.all(\n      files.map(async file => {\n        const manager = new DirectoryEditorFileManager(\n          file,\n          this.#signalUpdate,\n        );\n        await manager.reload();\n        return manager;\n      }),\n    );\n    this.#files.length = 0;\n    this.#files.push(...fileManagers);\n\n    this.setSelectedFile(selectedPath);\n    this.#signalUpdate();\n  }\n\n  subscribe(listener: () => void): () => void {\n    this.#listeners.add(listener);\n    return () => {\n      this.#listeners.delete(listener);\n    };\n  }\n\n  #signalUpdate = () => {\n    this.#listeners.forEach(listener => listener());\n  };\n}\n\nconst DirectoryEditorContext = createContext<DirectoryEditor | undefined>(\n  undefined,\n);\n\nexport function useDirectoryEditor(): DirectoryEditor | undefined {\n  const value = useContext(DirectoryEditorContext);\n  const rerender = useRerender();\n\n  useEffect(() => value?.subscribe(rerender), [value, rerender]);\n\n  return value;\n}\n\ninterface DirectoryEditorProviderProps {\n  directory?: TemplateDirectoryAccess;\n  children?: ReactNode;\n}\n\nexport function DirectoryEditorProvider(props: DirectoryEditorProviderProps) {\n  const { directory } = props;\n\n  const [{ result, error }, { execute }] = useAsync(\n    async (dir: TemplateDirectoryAccess) => {\n      const manager = new DirectoryEditorManager(dir);\n      await manager.reload();\n\n      const firstYaml = manager.files.find(file => file.path.match(/\\.ya?ml$/));\n      if (firstYaml) {\n        manager.setSelectedFile(firstYaml.path);\n      }\n\n      return manager;\n    },\n  );\n\n  useEffect(() => {\n    if (directory) {\n      execute(directory);\n    }\n  }, [execute, directory]);\n\n  if (error) {\n    return <ErrorPanel error={error} />;\n  }\n\n  return (\n    <DirectoryEditorContext.Provider value={result}>\n      {props.children}\n    </DirectoryEditorContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;AAwBA,MAAM,WAAW,IAAO,GAAA,IAAA,CAAA;AACxB,MAAM,gBAAmB,GAAA,wCAAA,CAAA;AAmCzB,MAAM,0BAA0D,CAAA;AAAA,EACrD,OAAA,CAAA;AAAA,EACA,aAAA,CAAA;AAAA,EAET,QAAA,CAAA;AAAA,EACA,aAAA,CAAA;AAAA,EAEA,WAAA,CAAY,QAA4B,YAA0B,EAAA;AAChE,IAAA,IAAA,CAAK,OAAU,GAAA,MAAA,CAAA;AACf,IAAA,IAAA,CAAK,aAAgB,GAAA,YAAA,CAAA;AAAA,GACvB;AAAA,EAEA,IAAI,IAAO,GAAA;AACT,IAAA,OAAO,KAAK,OAAQ,CAAA,IAAA,CAAA;AAAA,GACtB;AAAA,EAEA,IAAI,OAAU,GAAA;AACZ,IAAA,OAAO,KAAK,QAAY,IAAA,gBAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,cAAc,OAAuB,EAAA;AACnC,IAAI,IAAA,IAAA,CAAK,aAAa,KAAW,CAAA,EAAA;AAC/B,MAAA,OAAA;AAAA,KACF;AACA,IAAA,IAAA,CAAK,QAAW,GAAA,OAAA,CAAA;AAChB,IAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,GACrB;AAAA,EAEA,IAAI,KAAQ,GAAA;AACV,IAAO,OAAA,IAAA,CAAK,aAAa,IAAK,CAAA,aAAA,CAAA;AAAA,GAChC;AAAA,EAEA,MAAM,IAAsB,GAAA;AAC1B,IAAI,IAAA,IAAA,CAAK,aAAa,KAAW,CAAA,EAAA;AAC/B,MAAA,MAAM,IAAK,CAAA,OAAA,CAAQ,IAAK,CAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AACrC,MAAA,IAAA,CAAK,gBAAgB,IAAK,CAAA,QAAA,CAAA;AAC1B,MAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,KACrB;AAAA,GACF;AAAA,EAEA,MAAM,MAAwB,GAAA;AAC5B,IAAA,MAAM,IAAO,GAAA,MAAM,IAAK,CAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AACrC,IAAI,IAAA,IAAA,CAAK,OAAO,QAAU,EAAA;AACxB,MAAI,IAAA,IAAA,CAAK,aAAa,KAAW,CAAA,EAAA;AAC/B,QAAA,IAAA,CAAK,QAAW,GAAA,KAAA,CAAA,CAAA;AAChB,QAAA,IAAA,CAAK,aAAgB,GAAA,KAAA,CAAA,CAAA;AACrB,QAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,OACrB;AACA,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,IAAK,EAAA,CAAA;AAChC,IAAI,IAAA,IAAA,CAAK,aAAa,OAAS,EAAA;AAC7B,MAAA,IAAA,CAAK,QAAW,GAAA,OAAA,CAAA;AAChB,MAAA,IAAA,CAAK,aAAgB,GAAA,OAAA,CAAA;AACrB,MAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,KACrB;AAAA,GACF;AACF,CAAA;AAEA,MAAM,sBAAkD,CAAA;AAAA,EAC7C,OAAA,CAAA;AAAA,EACA,UAAA,uBAAiB,GAAgB,EAAA,CAAA;AAAA,EAE1C,SAAgC,EAAC,CAAA;AAAA,EACjC,aAAA,CAAA;AAAA,EAEA,YAAY,MAAiC,EAAA;AAC3C,IAAA,IAAA,CAAK,OAAU,GAAA,MAAA,CAAA;AAAA,GACjB;AAAA,EAEA,IAAI,KAAQ,GAAA;AACV,IAAA,OAAO,IAAK,CAAA,MAAA,CAAA;AAAA,GACd;AAAA,EAEA,IAAI,YAAe,GAAA;AACjB,IAAA,OAAO,IAAK,CAAA,aAAA,CAAA;AAAA,GACd;AAAA,EAEA,eAAA,GAAkB,CAAC,IAAmC,KAAA;AACpD,IAAA,MAAM,OAAO,IAAK,CAAA,aAAA,CAAA;AAClB,IAAA,MAAM,OAAO,IAAK,CAAA,MAAA,CAAO,KAAK,CAAQ,IAAA,KAAA,IAAA,CAAK,SAAS,IAAI,CAAA,CAAA;AACxD,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,IAAA,CAAK,aAAgB,GAAA,IAAA,CAAA;AACrB,MAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,KACrB;AAAA,GACF,CAAA;AAAA,EAEA,IAAI,KAAQ,GAAA;AACV,IAAA,OAAO,IAAK,CAAA,MAAA,CAAO,IAAK,CAAA,CAAA,IAAA,KAAQ,KAAK,KAAK,CAAA,CAAA;AAAA,GAC5C;AAAA,EAEA,MAAM,IAAsB,GAAA;AAC1B,IAAM,MAAA,OAAA,CAAQ,IAAI,IAAK,CAAA,MAAA,CAAO,IAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,IAAK,EAAC,CAAC,CAAA,CAAA;AAAA,GACxD;AAAA,EAEA,MAAM,MAAwB,GAAA;AAC5B,IAAM,MAAA,YAAA,GAAe,KAAK,aAAe,EAAA,IAAA,CAAA;AAEzC,IAAA,MAAM,KAAQ,GAAA,MAAM,IAAK,CAAA,OAAA,CAAQ,SAAU,EAAA,CAAA;AAC3C,IAAM,MAAA,YAAA,GAAe,MAAM,OAAQ,CAAA,GAAA;AAAA,MACjC,KAAA,CAAM,GAAI,CAAA,OAAM,IAAQ,KAAA;AACtB,QAAA,MAAM,UAAU,IAAI,0BAAA;AAAA,UAClB,IAAA;AAAA,UACA,IAAK,CAAA,aAAA;AAAA,SACP,CAAA;AACA,QAAA,MAAM,QAAQ,MAAO,EAAA,CAAA;AACrB,QAAO,OAAA,OAAA,CAAA;AAAA,OACR,CAAA;AAAA,KACH,CAAA;AACA,IAAA,IAAA,CAAK,OAAO,MAAS,GAAA,CAAA,CAAA;AACrB,IAAK,IAAA,CAAA,MAAA,CAAO,IAAK,CAAA,GAAG,YAAY,CAAA,CAAA;AAEhC,IAAA,IAAA,CAAK,gBAAgB,YAAY,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,GACrB;AAAA,EAEA,UAAU,QAAkC,EAAA;AAC1C,IAAK,IAAA,CAAA,UAAA,CAAW,IAAI,QAAQ,CAAA,CAAA;AAC5B,IAAA,OAAO,MAAM;AACX,MAAK,IAAA,CAAA,UAAA,CAAW,OAAO,QAAQ,CAAA,CAAA;AAAA,KACjC,CAAA;AAAA,GACF;AAAA,EAEA,gBAAgB,MAAM;AACpB,IAAA,IAAA,CAAK,UAAW,CAAA,OAAA,CAAQ,CAAY,QAAA,KAAA,QAAA,EAAU,CAAA,CAAA;AAAA,GAChD,CAAA;AACF,CAAA;AAEA,MAAM,sBAAyB,GAAA,aAAA;AAAA,EAC7B,KAAA,CAAA;AACF,CAAA,CAAA;AAEO,SAAS,kBAAkD,GAAA;AAChE,EAAM,MAAA,KAAA,GAAQ,WAAW,sBAAsB,CAAA,CAAA;AAC/C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAU,SAAA,CAAA,MAAM,OAAO,SAAU,CAAA,QAAQ,GAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA,CAAA;AAE7D,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAOO,SAAS,wBAAwB,KAAqC,EAAA;AAC3E,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA,CAAA;AAEtB,EAAM,MAAA,CAAC,EAAE,MAAQ,EAAA,KAAA,IAAS,EAAE,OAAA,EAAS,CAAI,GAAA,QAAA;AAAA,IACvC,OAAO,GAAiC,KAAA;AACtC,MAAM,MAAA,OAAA,GAAU,IAAI,sBAAA,CAAuB,GAAG,CAAA,CAAA;AAC9C,MAAA,MAAM,QAAQ,MAAO,EAAA,CAAA;AAErB,MAAM,MAAA,SAAA,GAAY,QAAQ,KAAM,CAAA,IAAA,CAAK,UAAQ,IAAK,CAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAC,CAAA,CAAA;AACxE,MAAA,IAAI,SAAW,EAAA;AACb,QAAQ,OAAA,CAAA,eAAA,CAAgB,UAAU,IAAI,CAAA,CAAA;AAAA,OACxC;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,OAAA,CAAQ,SAAS,CAAA,CAAA;AAAA,KACnB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA,CAAA;AAEvB,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,KAAc,EAAA,CAAA,CAAA;AAAA,GACnC;AAEA,EAAA,2CACG,sBAAuB,CAAA,QAAA,EAAvB,EAAgC,KAAO,EAAA,MAAA,EAAA,EACrC,MAAM,QACT,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DirectoryEditorContext.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/DirectoryEditorContext.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorPanel } from '@backstage/core-components';\nimport { useAsync, useRerender } from '@react-hookz/web';\nimport React, { createContext, ReactNode, useContext, useEffect } from 'react';\nimport {\n  TemplateDirectoryAccess,\n  TemplateFileAccess,\n} from '../../../lib/filesystem';\n\nconst MAX_SIZE = 1024 * 1024;\nconst MAX_SIZE_MESSAGE = 'This file is too large to be displayed';\n\ninterface DirectoryEditorFile {\n  /** The path of the file relative to the root directory */\n  path: string;\n  /** The staged content of the file */\n  content: string;\n  /** Whether the staged content matches what is on disk */\n  dirty: boolean;\n\n  /** Update the staged content of the file without saving */\n  updateContent(content: string): void;\n  /** Save the staged content of the file to disk */\n  save(): Promise<void>;\n  /** Reload the staged content of the file from disk */\n  reload(): Promise<void>;\n}\n\ninterface DirectoryEditor {\n  /** A list of all files in the edited directory */\n  files: Array<DirectoryEditorFile>;\n\n  /** The currently selected file */\n  selectedFile: DirectoryEditorFile | undefined;\n  /** Switch the selected file */\n  setSelectedFile(path: string | undefined): void;\n\n  /** Save all files to disk */\n  save(): Promise<void>;\n  /** Reload all files from disk */\n  reload(): Promise<void>;\n\n  subscribe(listener: () => void): () => void;\n}\n\nclass DirectoryEditorFileManager implements DirectoryEditorFile {\n  readonly #access: TemplateFileAccess;\n  readonly #signalUpdate: () => void;\n\n  #content?: string;\n  #savedContent?: string;\n\n  constructor(access: TemplateFileAccess, signalUpdate: () => void) {\n    this.#access = access;\n    this.#signalUpdate = signalUpdate;\n  }\n\n  get path() {\n    return this.#access.path;\n  }\n\n  get content() {\n    return this.#content ?? MAX_SIZE_MESSAGE;\n  }\n\n  updateContent(content: string): void {\n    if (this.#content === undefined) {\n      return;\n    }\n    this.#content = content;\n    this.#signalUpdate();\n  }\n\n  get dirty() {\n    return this.#content !== this.#savedContent;\n  }\n\n  async save(): Promise<void> {\n    if (this.#content !== undefined) {\n      await this.#access.save(this.#content);\n      this.#savedContent = this.#content;\n      this.#signalUpdate();\n    }\n  }\n\n  async reload(): Promise<void> {\n    const file = await this.#access.file();\n    if (file.size > MAX_SIZE) {\n      if (this.#content !== undefined) {\n        this.#content = undefined;\n        this.#savedContent = undefined;\n        this.#signalUpdate();\n      }\n      return;\n    }\n\n    const content = await file.text();\n    if (this.#content !== content) {\n      this.#content = content;\n      this.#savedContent = content;\n      this.#signalUpdate();\n    }\n  }\n}\n\nclass DirectoryEditorManager implements DirectoryEditor {\n  readonly #access: TemplateDirectoryAccess;\n  readonly #listeners = new Set<() => void>();\n\n  #files: DirectoryEditorFile[] = [];\n  #selectedFile: DirectoryEditorFile | undefined;\n\n  constructor(access: TemplateDirectoryAccess) {\n    this.#access = access;\n  }\n\n  get files() {\n    return this.#files;\n  }\n\n  get selectedFile() {\n    return this.#selectedFile;\n  }\n\n  setSelectedFile = (path: string | undefined): void => {\n    const prev = this.#selectedFile;\n    const next = this.#files.find(file => file.path === path);\n    if (prev !== next) {\n      this.#selectedFile = next;\n      this.#signalUpdate();\n    }\n  };\n\n  get dirty() {\n    return this.#files.some(file => file.dirty);\n  }\n\n  async save(): Promise<void> {\n    await Promise.all(this.#files.map(file => file.save()));\n  }\n\n  async reload(): Promise<void> {\n    const selectedPath = this.#selectedFile?.path;\n\n    const files = await this.#access.listFiles();\n    const fileManagers = await Promise.all(\n      files.map(async file => {\n        const manager = new DirectoryEditorFileManager(\n          file,\n          this.#signalUpdate,\n        );\n        await manager.reload();\n        return manager;\n      }),\n    );\n    this.#files.length = 0;\n    this.#files.push(...fileManagers);\n\n    this.setSelectedFile(selectedPath);\n    this.#signalUpdate();\n  }\n\n  subscribe(listener: () => void): () => void {\n    this.#listeners.add(listener);\n    return () => {\n      this.#listeners.delete(listener);\n    };\n  }\n\n  #signalUpdate = () => {\n    this.#listeners.forEach(listener => listener());\n  };\n}\n\nconst DirectoryEditorContext = createContext<DirectoryEditor | undefined>(\n  undefined,\n);\n\nexport function useDirectoryEditor(): DirectoryEditor | undefined {\n  const value = useContext(DirectoryEditorContext);\n  const rerender = useRerender();\n\n  useEffect(() => value?.subscribe(rerender), [value, rerender]);\n\n  return value;\n}\n\ninterface DirectoryEditorProviderProps {\n  directory?: TemplateDirectoryAccess;\n  children?: ReactNode;\n}\n\nexport function DirectoryEditorProvider(props: DirectoryEditorProviderProps) {\n  const { directory } = props;\n\n  const [{ result, error }, { execute }] = useAsync(\n    async (dir?: TemplateDirectoryAccess) => {\n      if (!dir) {\n        return undefined;\n      }\n\n      const manager = new DirectoryEditorManager(dir);\n      await manager.reload();\n\n      const firstYaml = manager.files.find(file => file.path.match(/\\.ya?ml$/));\n      if (firstYaml) {\n        manager.setSelectedFile(firstYaml.path);\n      }\n\n      return manager;\n    },\n  );\n\n  useEffect(() => {\n    execute(directory);\n  }, [execute, directory]);\n\n  if (error) {\n    return <ErrorPanel error={error} />;\n  }\n\n  return (\n    <DirectoryEditorContext.Provider value={result}>\n      {props.children}\n    </DirectoryEditorContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}