@backstage/plugin-scaffolder 1.31.0-next.0 → 1.31.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/plugin-scaffolder
 
+## 1.31.0-next.1
+
+### Patch Changes
+
+- fb58f20: Internal update to use the new `pluginId` option of `createFrontendPlugin`.
+- 72d019d: Removed various typos
+- Updated dependencies
+  - @backstage/core-components@0.17.2-next.0
+  - @backstage/frontend-plugin-api@0.10.2-next.0
+  - @backstage/core-compat-api@0.4.2-next.1
+  - @backstage/integration@1.16.4-next.1
+  - @backstage/plugin-catalog-react@1.18.0-next.1
+  - @backstage/plugin-scaffolder-react@1.16.0-next.1
+  - @backstage/integration-react@1.2.7-next.1
+  - @backstage/catalog-client@1.10.0-next.0
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-plugin-api@1.10.6
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.4-next.0
+  - @backstage/plugin-permission-react@0.4.34-next.0
+  - @backstage/plugin-scaffolder-common@1.5.11-next.0
+
 ## 1.31.0-next.0
 
 ### Minor Changes

package/dist/alpha/components/TemplateEditorPage/{CustomFieldPlaygroud.esm.js → CustomFieldPlayground.esm.js}

@@ -37,7 +37,7 @@ const useStyles = makeStyles(
   }),
   { name: "ScaffolderCustomFieldExtensionsPlaygroud" }
 );
-const CustomFieldPlaygroud = ({
+const CustomFieldPlayground = ({
   fieldExtensions = []
 }) => {
   const classes = useStyles();
@@ -203,5 +203,5 @@ const CustomFieldPlaygroud = ({
   ] });
 };
 
-export { CustomFieldPlaygroud };
-//# sourceMappingURL=CustomFieldPlaygroud.esm.js.map
+export { CustomFieldPlayground };
+//# sourceMappingURL=CustomFieldPlayground.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldPlayground.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldPlayground.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 { 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 CustomFieldPlayground = ({\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/TemplateEditorToolbar.esm.js

@@ -18,7 +18,7 @@ import FunctionsIcon from '@material-ui/icons/Functions';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { ActionPageContent } from '../../../components/ActionsPage/ActionsPage.esm.js';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
-import { CustomFieldPlaygroud } from './CustomFieldPlaygroud.esm.js';
+import { CustomFieldPlayground } from './CustomFieldPlayground.esm.js';
 import { TemplatingExtensionsPageContent } from '../../../components/TemplatingExtensionsPage/TemplatingExtensionsPage.esm.js';
 
 const useStyles = makeStyles(
@@ -101,7 +101,7 @@ function TemplateEditorToolbar(props) {
         anchor: "right",
         open: showFieldsDrawer,
         onClose: () => setShowFieldsDrawer(false),
-        children: /* @__PURE__ */ jsx(CustomFieldPlaygroud, { fieldExtensions })
+        children: /* @__PURE__ */ jsx(CustomFieldPlayground, { fieldExtensions })
       }
     ),
     /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.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 { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport FunctionsIcon from '@material-ui/icons/Functions';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { CustomFieldPlaygroud } from './CustomFieldPlaygroud';\nimport { TemplatingExtensionsPageContent } from '../../../components/TemplatingExtensionsPage/TemplatingExtensionsPage';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '90%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('sm')]: {\n        width: '70%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showExtensionsDrawer, setShowExtensionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup className={classes.toolbarDefaultActions} variant=\"text\">\n          <Tooltip\n            title={t('templateEditorToolbar.customFieldExplorerTooltip')}\n          >\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.installedActionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.templatingExtensionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowExtensionsDrawer(true)}>\n              <FunctionsIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>\n            {t('templateEditorToolbar.addToCatalogButton')}\n          </Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlaygroud fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showExtensionsDrawer}\n          onClose={() => setShowExtensionsDrawer(false)}\n        >\n          <TemplatingExtensionsPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">\n            {t('templateEditorToolbar.addToCatalogDialogTitle')}\n          </DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              {t(\n                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',\n              )}\n              <ul>\n                {t(\n                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',\n                )\n                  .split('\\n')\n                  .map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n              </ul>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button\n              color=\"primary\"\n              href={t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',\n              )}\n              target=\"_blank\"\n            >\n              {t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',\n              )}\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.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 { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport FunctionsIcon from '@material-ui/icons/Functions';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { CustomFieldPlayground } from './CustomFieldPlayground';\nimport { TemplatingExtensionsPageContent } from '../../../components/TemplatingExtensionsPage/TemplatingExtensionsPage';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '90%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('sm')]: {\n        width: '70%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showExtensionsDrawer, setShowExtensionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup className={classes.toolbarDefaultActions} variant=\"text\">\n          <Tooltip\n            title={t('templateEditorToolbar.customFieldExplorerTooltip')}\n          >\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.installedActionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.templatingExtensionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowExtensionsDrawer(true)}>\n              <FunctionsIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>\n            {t('templateEditorToolbar.addToCatalogButton')}\n          </Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlayground fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showExtensionsDrawer}\n          onClose={() => setShowExtensionsDrawer(false)}\n        >\n          <TemplatingExtensionsPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">\n            {t('templateEditorToolbar.addToCatalogDialogTitle')}\n          </DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              {t(\n                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',\n              )}\n              <ul>\n                {t(\n                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',\n                )\n                  .split('\\n')\n                  .map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n              </ul>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button\n              color=\"primary\"\n              href={t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',\n              )}\n              target=\"_blank\"\n            >\n              {t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',\n              )}\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -117,7 +117,7 @@ const TemplateFormPreviewer = ({
       )
     ).catch(
       (e) => alertApi.post({
-        message: `Error loading exisiting templates: ${e.message}`,
+        message: `Error loading existing templates: ${e.message}`,
         severity: "error"
       })
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.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 yaml from 'yaml';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.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 yaml from 'yaml';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading existing templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/plugin.esm.js

@@ -7,7 +7,7 @@ import './api/ref.esm.js';
 import { formDecoratorsApi } from './api/FormDecoratorsApi.esm.js';
 
 var plugin = createFrontendPlugin({
-  id: "scaffolder",
+  pluginId: "scaffolder",
   routes: convertLegacyRouteRefs({
     root: rootRouteRef,
     selectedTemplate: selectedTemplateRouteRef,

package/dist/alpha/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../../src/alpha/plugin.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 { convertLegacyRouteRefs } from '@backstage/core-compat-api';\nimport { createFrontendPlugin } from '@backstage/frontend-plugin-api';\nimport {\n  rootRouteRef,\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n  templatingExtensionsRouteRef,\n  viewTechDocRouteRef,\n} from '../routes';\nimport {\n  repoUrlPickerFormField,\n  scaffolderNavItem,\n  scaffolderPage,\n  scaffolderApi,\n} from './extensions';\nimport { formFieldsApi } from '@backstage/plugin-scaffolder-react/alpha';\nimport { formDecoratorsApi } from './api';\n\n/** @alpha */\nexport default createFrontendPlugin({\n  id: 'scaffolder',\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n    selectedTemplate: selectedTemplateRouteRef,\n    ongoingTask: scaffolderTaskRouteRef,\n    actions: actionsRouteRef,\n    listTasks: scaffolderListTaskRouteRef,\n    edit: editRouteRef,\n    templatingExtensions: templatingExtensionsRouteRef,\n  }),\n  externalRoutes: convertLegacyRouteRefs({\n    registerComponent: registerComponentRouteRef,\n    viewTechDoc: viewTechDocRouteRef,\n  }),\n  extensions: [\n    scaffolderApi,\n    scaffolderPage,\n    scaffolderNavItem,\n    formDecoratorsApi,\n    formFieldsApi,\n    repoUrlPickerFormField,\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;AAuCA,aAAe,oBAAqB,CAAA;AAAA,EAClC,EAAI,EAAA,YAAA;AAAA,EACJ,QAAQ,sBAAuB,CAAA;AAAA,IAC7B,IAAM,EAAA,YAAA;AAAA,IACN,gBAAkB,EAAA,wBAAA;AAAA,IAClB,WAAa,EAAA,sBAAA;AAAA,IACb,OAAS,EAAA,eAAA;AAAA,IACT,SAAW,EAAA,0BAAA;AAAA,IACX,IAAM,EAAA,YAAA;AAAA,IACN,oBAAsB,EAAA;AAAA,GACvB,CAAA;AAAA,EACD,gBAAgB,sBAAuB,CAAA;AAAA,IACrC,iBAAmB,EAAA,yBAAA;AAAA,IACnB,WAAa,EAAA;AAAA,GACd,CAAA;AAAA,EACD,UAAY,EAAA;AAAA,IACV,aAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA;AAEJ,CAAC,CAAA;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../../src/alpha/plugin.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 { convertLegacyRouteRefs } from '@backstage/core-compat-api';\nimport { createFrontendPlugin } from '@backstage/frontend-plugin-api';\nimport {\n  rootRouteRef,\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n  templatingExtensionsRouteRef,\n  viewTechDocRouteRef,\n} from '../routes';\nimport {\n  repoUrlPickerFormField,\n  scaffolderNavItem,\n  scaffolderPage,\n  scaffolderApi,\n} from './extensions';\nimport { formFieldsApi } from '@backstage/plugin-scaffolder-react/alpha';\nimport { formDecoratorsApi } from './api';\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'scaffolder',\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n    selectedTemplate: selectedTemplateRouteRef,\n    ongoingTask: scaffolderTaskRouteRef,\n    actions: actionsRouteRef,\n    listTasks: scaffolderListTaskRouteRef,\n    edit: editRouteRef,\n    templatingExtensions: templatingExtensionsRouteRef,\n  }),\n  externalRoutes: convertLegacyRouteRefs({\n    registerComponent: registerComponentRouteRef,\n    viewTechDoc: viewTechDocRouteRef,\n  }),\n  extensions: [\n    scaffolderApi,\n    scaffolderPage,\n    scaffolderNavItem,\n    formDecoratorsApi,\n    formFieldsApi,\n    repoUrlPickerFormField,\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;AAuCA,aAAe,oBAAqB,CAAA;AAAA,EAClC,QAAU,EAAA,YAAA;AAAA,EACV,QAAQ,sBAAuB,CAAA;AAAA,IAC7B,IAAM,EAAA,YAAA;AAAA,IACN,gBAAkB,EAAA,wBAAA;AAAA,IAClB,WAAa,EAAA,sBAAA;AAAA,IACb,OAAS,EAAA,eAAA;AAAA,IACT,SAAW,EAAA,0BAAA;AAAA,IACX,IAAM,EAAA,YAAA;AAAA,IACN,oBAAsB,EAAA;AAAA,GACvB,CAAA;AAAA,EACD,gBAAgB,sBAAuB,CAAA;AAAA,IACrC,iBAAmB,EAAA,yBAAA;AAAA,IACnB,WAAa,EAAA;AAAA,GACd,CAAA;AAAA,EACD,UAAY,EAAA;AAAA,IACV,aAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA;AAEJ,CAAC,CAAA;;;;"}

package/dist/components/FileBrowser/FileBrowser.esm.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(1)
   }
 }));
-function parseFileEntires(paths) {
+function parseFileEntries(paths) {
   const root = {
     type: "directory",
     name: "",
@@ -68,7 +68,7 @@ function FileTreeItem({ entry }) {
 function FileBrowser(props) {
   const classes = useStyles();
   const fileTree = useMemo(
-    () => parseFileEntires(props.filePaths),
+    () => parseFileEntries(props.filePaths),
     [props.filePaths]
   );
   return /* @__PURE__ */ jsx(
@@ -88,5 +88,5 @@ function FileBrowser(props) {
   );
 }
 
-export { FileBrowser, parseFileEntires };
+export { FileBrowser, parseFileEntries };
 //# sourceMappingURL=FileBrowser.esm.js.map

package/dist/components/FileBrowser/FileBrowser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileBrowser.esm.js","sources":["../../../src/components/FileBrowser/FileBrowser.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 { useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TreeView from '@material-ui/lab/TreeView';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport TreeItem from '@material-ui/lab/TreeItem';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    whiteSpace: 'nowrap',\n    overflowY: 'auto',\n    padding: theme.spacing(1),\n  },\n}));\n\nexport type FileEntry =\n  | {\n      type: 'file';\n      name: string;\n      path: string;\n    }\n  | {\n      type: 'directory';\n      name: string;\n      path: string;\n      children: FileEntry[];\n    };\n\nexport function parseFileEntires(paths: string[]): FileEntry[] {\n  const root: FileEntry = {\n    type: 'directory',\n    name: '',\n    path: '',\n    children: [],\n  };\n\n  for (const path of paths.slice().sort()) {\n    const parts = path.split('/');\n\n    let current = root;\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      if (part === '') {\n        throw new Error(`Invalid path part: ''`);\n      }\n\n      const entryPath = parts.slice(0, i + 1).join('/');\n\n      const existing = current.children.find(child => child.name === part);\n      if (existing?.type === 'file') {\n        throw new Error(`Duplicate filename at '${entryPath}'`);\n      } else if (existing) {\n        current = existing;\n      } else {\n        if (i < parts.length - 1) {\n          const newEntry: FileEntry = {\n            type: 'directory',\n            name: part,\n            path: entryPath,\n            children: [],\n          };\n          const firstFileIndex = current.children.findIndex(\n            child => child.type === 'file',\n          );\n          current.children.splice(firstFileIndex, 0, newEntry);\n          current = newEntry;\n        } else {\n          current.children.push({\n            type: 'file',\n            name: part,\n            path: entryPath,\n          });\n        }\n      }\n    }\n  }\n\n  return root.children;\n}\n\nfunction FileTreeItem({ entry }: { entry: FileEntry }) {\n  if (entry.type === 'file') {\n    return <TreeItem nodeId={entry.path} label={entry.name} />;\n  }\n\n  return (\n    <TreeItem nodeId={entry.path} label={entry.name}>\n      {entry.children.map(child => (\n        <FileTreeItem key={child.path} entry={child} />\n      ))}\n    </TreeItem>\n  );\n}\n\ninterface FileBrowserProps {\n  /** A list of all filepaths to show, directories are separated with a `/` */\n  filePaths: string[];\n  /** The currently selected file */\n  selected?: string;\n  /** Callback for when a file is selected */\n  onSelect?(filePath: string): void;\n}\n\n/** A simple file browser that allows you to select individual files */\nexport function FileBrowser(props: FileBrowserProps) {\n  const classes = useStyles();\n\n  const fileTree = useMemo(\n    () => parseFileEntires(props.filePaths),\n    [props.filePaths],\n  );\n\n  return (\n    <TreeView\n      selected={props.selected}\n      className={classes.root}\n      defaultCollapseIcon={<ExpandMoreIcon />}\n      defaultExpandIcon={<ChevronRightIcon />}\n      onNodeSelect={(_e: unknown, nodeId: string) => {\n        if (props.onSelect && props.filePaths.includes(nodeId)) {\n          props.onSelect(nodeId);\n        }\n      }}\n    >\n      {fileTree.map(entry => (\n        <FileTreeItem key={entry.path} entry={entry} />\n      ))}\n    </TreeView>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileBrowser.esm.js","sources":["../../../src/components/FileBrowser/FileBrowser.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 { useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TreeView from '@material-ui/lab/TreeView';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport TreeItem from '@material-ui/lab/TreeItem';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    whiteSpace: 'nowrap',\n    overflowY: 'auto',\n    padding: theme.spacing(1),\n  },\n}));\n\nexport type FileEntry =\n  | {\n      type: 'file';\n      name: string;\n      path: string;\n    }\n  | {\n      type: 'directory';\n      name: string;\n      path: string;\n      children: FileEntry[];\n    };\n\nexport function parseFileEntries(paths: string[]): FileEntry[] {\n  const root: FileEntry = {\n    type: 'directory',\n    name: '',\n    path: '',\n    children: [],\n  };\n\n  for (const path of paths.slice().sort()) {\n    const parts = path.split('/');\n\n    let current = root;\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      if (part === '') {\n        throw new Error(`Invalid path part: ''`);\n      }\n\n      const entryPath = parts.slice(0, i + 1).join('/');\n\n      const existing = current.children.find(child => child.name === part);\n      if (existing?.type === 'file') {\n        throw new Error(`Duplicate filename at '${entryPath}'`);\n      } else if (existing) {\n        current = existing;\n      } else {\n        if (i < parts.length - 1) {\n          const newEntry: FileEntry = {\n            type: 'directory',\n            name: part,\n            path: entryPath,\n            children: [],\n          };\n          const firstFileIndex = current.children.findIndex(\n            child => child.type === 'file',\n          );\n          current.children.splice(firstFileIndex, 0, newEntry);\n          current = newEntry;\n        } else {\n          current.children.push({\n            type: 'file',\n            name: part,\n            path: entryPath,\n          });\n        }\n      }\n    }\n  }\n\n  return root.children;\n}\n\nfunction FileTreeItem({ entry }: { entry: FileEntry }) {\n  if (entry.type === 'file') {\n    return <TreeItem nodeId={entry.path} label={entry.name} />;\n  }\n\n  return (\n    <TreeItem nodeId={entry.path} label={entry.name}>\n      {entry.children.map(child => (\n        <FileTreeItem key={child.path} entry={child} />\n      ))}\n    </TreeItem>\n  );\n}\n\ninterface FileBrowserProps {\n  /** A list of all filepaths to show, directories are separated with a `/` */\n  filePaths: string[];\n  /** The currently selected file */\n  selected?: string;\n  /** Callback for when a file is selected */\n  onSelect?(filePath: string): void;\n}\n\n/** A simple file browser that allows you to select individual files */\nexport function FileBrowser(props: FileBrowserProps) {\n  const classes = useStyles();\n\n  const fileTree = useMemo(\n    () => parseFileEntries(props.filePaths),\n    [props.filePaths],\n  );\n\n  return (\n    <TreeView\n      selected={props.selected}\n      className={classes.root}\n      defaultCollapseIcon={<ExpandMoreIcon />}\n      defaultExpandIcon={<ChevronRightIcon />}\n      onNodeSelect={(_e: unknown, nodeId: string) => {\n        if (props.onSelect && props.filePaths.includes(nodeId)) {\n          props.onSelect(nodeId);\n        }\n      }}\n    >\n      {fileTree.map(entry => (\n        <FileTreeItem key={entry.path} entry={entry} />\n      ))}\n    </TreeView>\n  );\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.31.0-next.0",
+  "version": "1.31.0-next.1",
   "description": "The Backstage plugin that helps you create new things",
   "backstage": {
     "role": "frontend-plugin",
@@ -72,18 +72,18 @@
   "dependencies": {
     "@backstage/catalog-client": "1.10.0-next.0",
     "@backstage/catalog-model": "1.7.3",
-    "@backstage/core-compat-api": "0.4.2-next.0",
-    "@backstage/core-components": "0.17.1",
+    "@backstage/core-compat-api": "0.4.2-next.1",
+    "@backstage/core-components": "0.17.2-next.0",
     "@backstage/core-plugin-api": "1.10.6",
     "@backstage/errors": "1.2.7",
-    "@backstage/frontend-plugin-api": "0.10.1",
-    "@backstage/integration": "1.16.4-next.0",
-    "@backstage/integration-react": "1.2.7-next.0",
-    "@backstage/plugin-catalog-common": "1.1.3",
-    "@backstage/plugin-catalog-react": "1.18.0-next.0",
-    "@backstage/plugin-permission-react": "0.4.33",
-    "@backstage/plugin-scaffolder-common": "1.5.10",
-    "@backstage/plugin-scaffolder-react": "1.16.0-next.0",
+    "@backstage/frontend-plugin-api": "0.10.2-next.0",
+    "@backstage/integration": "1.16.4-next.1",
+    "@backstage/integration-react": "1.2.7-next.1",
+    "@backstage/plugin-catalog-common": "1.1.4-next.0",
+    "@backstage/plugin-catalog-react": "1.18.0-next.1",
+    "@backstage/plugin-permission-react": "0.4.34-next.0",
+    "@backstage/plugin-scaffolder-common": "1.5.11-next.0",
+    "@backstage/plugin-scaffolder-react": "1.16.0-next.1",
     "@backstage/types": "1.2.1",
     "@codemirror/language": "^6.0.0",
     "@codemirror/legacy-modes": "^6.1.0",
@@ -117,12 +117,12 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.32.1-next.0",
+    "@backstage/cli": "0.32.1-next.1",
     "@backstage/core-app-api": "1.16.1",
-    "@backstage/dev-utils": "1.1.10-next.0",
-    "@backstage/plugin-catalog": "1.29.1-next.0",
-    "@backstage/plugin-permission-common": "0.8.4",
-    "@backstage/test-utils": "1.7.7",
+    "@backstage/dev-utils": "1.1.10-next.1",
+    "@backstage/plugin-catalog": "1.29.1-next.1",
+    "@backstage/plugin-permission-common": "0.9.0-next.0",
+    "@backstage/test-utils": "1.7.8-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",

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

@@ -1 +0,0 @@
-{"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 { 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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"}