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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @backstage/plugin-scaffolder
 
+## 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-next.2",
   "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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"}