@backstage/plugin-scaffolder 1.19.4-next.2 → 1.20.1-next.0

package/dist/next/TemplateEditorPage/TemplateEditorBrowser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorBrowser.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorBrowser.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 Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport React from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { FileBrowser } from '../../components/FileBrowser';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    padding: theme.spacing(1),\n  },\n  buttons: {\n    display: 'flex',\n    flexFlow: 'row nowrap',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n  },\n  buttonsGap: {\n    flex: '1 1 auto',\n  },\n  buttonsDivider: {\n    marginBottom: theme.spacing(1),\n  },\n}));\n\n/** The local file browser for the template editor */\nexport function TemplateEditorBrowser(props: { onClose?: () => void }) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const changedFiles = directoryEditor.files.filter(file => file.dirty);\n\n  const handleClose = () => {\n    if (!props.onClose) {\n      return;\n    }\n    if (changedFiles.length > 0) {\n      // eslint-disable-next-line no-alert\n      const accepted = window.confirm(\n        'Are you sure? Unsaved changes will be lost',\n      );\n      if (!accepted) {\n        return;\n      }\n    }\n    props.onClose();\n  };\n\n  return (\n    <>\n      <div className={classes.buttons}>\n        <Tooltip title=\"Save all files\">\n          <IconButton\n            className={classes.button}\n            disabled={directoryEditor.files.every(file => !file.dirty)}\n            onClick={() => directoryEditor.save()}\n          >\n            <SaveIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Reload directory\">\n          <IconButton\n            className={classes.button}\n            onClick={() => directoryEditor.reload()}\n          >\n            <RefreshIcon />\n          </IconButton>\n        </Tooltip>\n        <div className={classes.buttonsGap} />\n        <Tooltip title=\"Close directory\">\n          <IconButton className={classes.button} onClick={handleClose}>\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </div>\n      <Divider className={classes.buttonsDivider} />\n      <FileBrowser\n        selected={directoryEditor.selectedFile?.path ?? ''}\n        onSelect={directoryEditor.setSelectedFile}\n        filePaths={directoryEditor.files.map(file => file.path)}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorBrowser.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorBrowser.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 Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport React from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { FileBrowser } from '../../components/FileBrowser';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    padding: theme.spacing(1),\n  },\n  buttons: {\n    display: 'flex',\n    flexFlow: 'row nowrap',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n  },\n  buttonsGap: {\n    flex: '1 1 auto',\n  },\n  buttonsDivider: {\n    marginBottom: theme.spacing(1),\n  },\n}));\n\n/** The local file browser for the template editor */\nexport function TemplateEditorBrowser(props: { onClose?: () => void }) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const changedFiles = directoryEditor.files.filter(file => file.dirty);\n\n  const handleClose = () => {\n    if (!props.onClose) {\n      return;\n    }\n    if (changedFiles.length > 0) {\n      // eslint-disable-next-line no-alert\n      const accepted = window.confirm(\n        'Are you sure? Unsaved changes will be lost',\n      );\n      if (!accepted) {\n        return;\n      }\n    }\n    props.onClose();\n  };\n\n  return (\n    <>\n      <div className={classes.buttons}>\n        <Tooltip title=\"Save all files\">\n          <IconButton\n            className={classes.button}\n            disabled={directoryEditor.files.every(file => !file.dirty)}\n            onClick={() => directoryEditor.save()}\n          >\n            <SaveIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Reload directory\">\n          <IconButton\n            className={classes.button}\n            onClick={() => directoryEditor.reload()}\n          >\n            <RefreshIcon />\n          </IconButton>\n        </Tooltip>\n        <div className={classes.buttonsGap} />\n        <Tooltip title=\"Close directory\">\n          <IconButton className={classes.button} onClick={handleClose}>\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </div>\n      <Divider className={classes.buttonsDivider} />\n      <FileBrowser\n        selected={directoryEditor.selectedFile?.path ?? ''}\n        onSelect={directoryEditor.setSelectedFile}\n        filePaths={directoryEditor.files.map(file => file.path)}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateEditorForm.esm.js

@@ -7,12 +7,6 @@ import { createAsyncValidators, Stepper } from '@backstage/plugin-scaffolder-rea
 import { useDryRun } from './DryRunContext.esm.js';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, key + "" , value);
-  return value;
-};
 const useStyles = makeStyles({
   containerWrapper: {
     position: "relative",
@@ -29,12 +23,9 @@ const useStyles = makeStyles({
   }
 });
 class ErrorBoundary extends Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "state", {
-      shouldRender: true
-    });
-  }
+  state = {
+    shouldRender: true
+  };
   componentDidUpdate(prevProps) {
     if (prevProps.invalidator !== this.props.invalidator) {
       this.setState({ shouldRender: true });
@@ -129,7 +120,7 @@ function TemplateEditorForm(props) {
       extensions: fieldExtensions,
       components: fields,
       onCreate: async (options) => {
-        await (onDryRun == null ? void 0 : onDryRun(options));
+        await onDryRun?.(options);
       },
       layouts
     }

package/dist/next/TemplateEditorPage/TemplateEditorForm.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorForm.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 { useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonObject, JsonValue } from '@backstage/types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  Stepper,\n  createAsyncValidators,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useDryRun } from './DryRunContext';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  container: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    overflow: 'auto',\n  },\n});\n\ninterface ErrorBoundaryProps {\n  invalidator: unknown;\n  setErrorText(errorText: string | undefined): void;\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  shouldRender: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state = {\n    shouldRender: true,\n  };\n\n  componentDidUpdate(prevProps: { invalidator: unknown }) {\n    if (prevProps.invalidator !== this.props.invalidator) {\n      this.setState({ shouldRender: true });\n    }\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.setErrorText(error.message);\n    this.setState({ shouldRender: false });\n  }\n\n  render() {\n    return this.state.shouldRender ? this.props.children : null;\n  }\n}\n\ninterface TemplateEditorFormProps {\n  content?: string;\n  /** Setting this to true will cause the content to be parsed as if it is the template entity spec */\n  contentIsSpec?: boolean;\n  setErrorText: (errorText?: string) => void;\n\n  onDryRun?: (data: JsonObject) => Promise<void>;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nfunction isJsonObject(value: JsonValue | undefined): value is JsonObject {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/** Shows the a template form that is parsed from the provided content */\nexport function TemplateEditorForm(props: TemplateEditorFormProps) {\n  const {\n    content,\n    contentIsSpec,\n    onDryRun,\n    setErrorText,\n    fieldExtensions = [],\n    layouts = [],\n  } = props;\n  const classes = useStyles();\n  const apiHolder = useApiHolder();\n\n  const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();\n\n  const fields = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  useDebounce(\n    () => {\n      try {\n        if (!content) {\n          setSteps(undefined);\n          return;\n        }\n        const parsed: JsonValue = yaml\n          .parseAllDocuments(content)\n          .filter(c => c)\n          .map(c => c.toJSON())[0];\n\n        if (!isJsonObject(parsed)) {\n          setSteps(undefined);\n          return;\n        }\n\n        let rootObj = parsed;\n        if (!contentIsSpec) {\n          const isTemplate =\n            String(parsed.kind).toLocaleLowerCase('en-US') === 'template';\n          if (!isTemplate) {\n            setSteps(undefined);\n            return;\n          }\n\n          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};\n        }\n\n        const { parameters } = rootObj;\n\n        if (!Array.isArray(parameters)) {\n          setErrorText('Template parameters must be an array');\n          setSteps(undefined);\n          return;\n        }\n\n        const fieldValidators = Object.fromEntries(\n          fieldExtensions.map(({ name, validation }) => [name, validation]),\n        );\n\n        setErrorText();\n        setSteps(\n          parameters.flatMap(param =>\n            isJsonObject(param)\n              ? [\n                  {\n                    title: String(param.title),\n                    schema: param,\n                    validate: createAsyncValidators(param, fieldValidators, {\n                      apiHolder,\n                    }),\n                  },\n                ]\n              : [],\n          ),\n        );\n      } catch (e) {\n        setErrorText(e.message);\n      }\n    },\n    250,\n    [contentIsSpec, content, apiHolder],\n  );\n\n  if (!steps) {\n    return null;\n  }\n\n  return (\n    <div className={classes.containerWrapper}>\n      <div className={classes.container}>\n        <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>\n          <Stepper\n            manifest={{ steps, title: 'Template Editor' }}\n            extensions={fieldExtensions}\n            components={fields}\n            onCreate={async options => {\n              await onDryRun?.(options);\n            }}\n            layouts={layouts}\n          />\n        </ErrorBoundary>\n      </div>\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */\nexport function TemplateEditorFormDirectoryEditorDryRun(\n  props: Pick<\n    TemplateEditorFormProps,\n    'setErrorText' | 'fieldExtensions' | 'layouts'\n  >,\n) {\n  const { setErrorText, fieldExtensions = [], layouts } = props;\n  const dryRun = useDryRun();\n\n  const directoryEditor = useDirectoryEditor();\n  const { selectedFile } = directoryEditor;\n\n  const handleDryRun = async (data: JsonObject) => {\n    if (!selectedFile) {\n      return;\n    }\n\n    try {\n      await dryRun.execute({\n        templateContent: selectedFile.content,\n        values: data,\n        files: directoryEditor.files,\n      });\n      setErrorText();\n    } catch (e) {\n      setErrorText(String(e.cause || e));\n      throw e;\n    }\n  };\n\n  const content =\n    selectedFile && selectedFile.path.match(/\\.ya?ml$/)\n      ? selectedFile.content\n      : undefined;\n\n  return (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n    />\n  );\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorForm.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 { useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonObject, JsonValue } from '@backstage/types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  Stepper,\n  createAsyncValidators,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useDryRun } from './DryRunContext';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  container: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    overflow: 'auto',\n  },\n});\n\ninterface ErrorBoundaryProps {\n  invalidator: unknown;\n  setErrorText(errorText: string | undefined): void;\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  shouldRender: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state = {\n    shouldRender: true,\n  };\n\n  componentDidUpdate(prevProps: { invalidator: unknown }) {\n    if (prevProps.invalidator !== this.props.invalidator) {\n      this.setState({ shouldRender: true });\n    }\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.setErrorText(error.message);\n    this.setState({ shouldRender: false });\n  }\n\n  render() {\n    return this.state.shouldRender ? this.props.children : null;\n  }\n}\n\ninterface TemplateEditorFormProps {\n  content?: string;\n  /** Setting this to true will cause the content to be parsed as if it is the template entity spec */\n  contentIsSpec?: boolean;\n  setErrorText: (errorText?: string) => void;\n\n  onDryRun?: (data: JsonObject) => Promise<void>;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nfunction isJsonObject(value: JsonValue | undefined): value is JsonObject {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/** Shows the a template form that is parsed from the provided content */\nexport function TemplateEditorForm(props: TemplateEditorFormProps) {\n  const {\n    content,\n    contentIsSpec,\n    onDryRun,\n    setErrorText,\n    fieldExtensions = [],\n    layouts = [],\n  } = props;\n  const classes = useStyles();\n  const apiHolder = useApiHolder();\n\n  const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();\n\n  const fields = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  useDebounce(\n    () => {\n      try {\n        if (!content) {\n          setSteps(undefined);\n          return;\n        }\n        const parsed: JsonValue = yaml\n          .parseAllDocuments(content)\n          .filter(c => c)\n          .map(c => c.toJSON())[0];\n\n        if (!isJsonObject(parsed)) {\n          setSteps(undefined);\n          return;\n        }\n\n        let rootObj = parsed;\n        if (!contentIsSpec) {\n          const isTemplate =\n            String(parsed.kind).toLocaleLowerCase('en-US') === 'template';\n          if (!isTemplate) {\n            setSteps(undefined);\n            return;\n          }\n\n          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};\n        }\n\n        const { parameters } = rootObj;\n\n        if (!Array.isArray(parameters)) {\n          setErrorText('Template parameters must be an array');\n          setSteps(undefined);\n          return;\n        }\n\n        const fieldValidators = Object.fromEntries(\n          fieldExtensions.map(({ name, validation }) => [name, validation]),\n        );\n\n        setErrorText();\n        setSteps(\n          parameters.flatMap(param =>\n            isJsonObject(param)\n              ? [\n                  {\n                    title: String(param.title),\n                    schema: param,\n                    validate: createAsyncValidators(param, fieldValidators, {\n                      apiHolder,\n                    }),\n                  },\n                ]\n              : [],\n          ),\n        );\n      } catch (e) {\n        setErrorText(e.message);\n      }\n    },\n    250,\n    [contentIsSpec, content, apiHolder],\n  );\n\n  if (!steps) {\n    return null;\n  }\n\n  return (\n    <div className={classes.containerWrapper}>\n      <div className={classes.container}>\n        <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>\n          <Stepper\n            manifest={{ steps, title: 'Template Editor' }}\n            extensions={fieldExtensions}\n            components={fields}\n            onCreate={async options => {\n              await onDryRun?.(options);\n            }}\n            layouts={layouts}\n          />\n        </ErrorBoundary>\n      </div>\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */\nexport function TemplateEditorFormDirectoryEditorDryRun(\n  props: Pick<\n    TemplateEditorFormProps,\n    'setErrorText' | 'fieldExtensions' | 'layouts'\n  >,\n) {\n  const { setErrorText, fieldExtensions = [], layouts } = props;\n  const dryRun = useDryRun();\n\n  const directoryEditor = useDirectoryEditor();\n  const { selectedFile } = directoryEditor;\n\n  const handleDryRun = async (data: JsonObject) => {\n    if (!selectedFile) {\n      return;\n    }\n\n    try {\n      await dryRun.execute({\n        templateContent: selectedFile.content,\n        values: data,\n        files: directoryEditor.files,\n      });\n      setErrorText();\n    } catch (e) {\n      setErrorText(String(e.cause || e));\n      throw e;\n    }\n  };\n\n  const content =\n    selectedFile && selectedFile.path.match(/\\.ya?ml$/)\n      ? selectedFile.content\n      : undefined;\n\n  return (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n    />\n  );\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateEditorIntro.esm.js

@@ -32,10 +32,7 @@ function TemplateEditorIntro(props) {
     CardActionArea,
     {
       disabled: !supportsLoad,
-      onClick: () => {
-        var _a;
-        return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
-      }
+      onClick: () => props.onSelect?.("local")
     },
     /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
       Typography,
@@ -63,14 +60,8 @@ function TemplateEditorIntro(props) {
     },
     /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
   )));
-  const cardFormEditor = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
-    var _a;
-    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "form");
-  } }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
-  const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
-    var _a;
-    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "field-explorer");
-  } }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "View and play around with available installed custom field extensions."))));
+  const cardFormEditor = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => props.onSelect?.("form") }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
+  const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => props.onSelect?.("field-explorer") }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "View and play around with available installed custom field extensions."))));
   return /* @__PURE__ */ React.createElement("div", { style: props.style }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h2", className: classes.introText }, "Get started by choosing one of the options below"), /* @__PURE__ */ React.createElement(
     "div",
     {

package/dist/next/TemplateEditorPage/TemplateEditorIntro.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorIntro.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 from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../lib/filesystem';\n\nconst useStyles = makeStyles(theme => ({\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  card: {\n    position: 'relative',\n    maxWidth: 340,\n    marginTop: theme.spacing(4),\n    margin: theme.spacing(0, 2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (option: 'local' | 'form' | 'field-explorer') => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\n\n  const cardLoadLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('local')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            Load Template Directory\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            Load a local template directory, allowing you to both edit and try\n            executing your own template.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title=\"Only supported in some Chromium-based browsers\"\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardFormEditor = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('form')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Edit Template Form\n          </Typography>\n          <Typography variant=\"body1\">\n            Preview and edit a template form, either using a sample template or\n            by loading a template from the catalog.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  const cardFieldExplorer = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Custom Field Explorer\n          </Typography>\n          <Typography variant=\"body1\">\n            View and play around with available installed custom field\n            extensions.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        Get started by choosing one of the options below\n      </Typography>\n      <div\n        style={{\n          display: 'flex',\n          flexFlow: 'row wrap',\n          alignItems: 'flex-start',\n          justifyContent: 'center',\n          alignContent: 'flex-start',\n        }}\n      >\n        {supportsLoad && cardLoadLocal}\n        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorIntro.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 from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../lib/filesystem';\n\nconst useStyles = makeStyles(theme => ({\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  card: {\n    position: 'relative',\n    maxWidth: 340,\n    marginTop: theme.spacing(4),\n    margin: theme.spacing(0, 2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (option: 'local' | 'form' | 'field-explorer') => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\n\n  const cardLoadLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('local')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            Load Template Directory\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            Load a local template directory, allowing you to both edit and try\n            executing your own template.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title=\"Only supported in some Chromium-based browsers\"\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardFormEditor = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('form')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Edit Template Form\n          </Typography>\n          <Typography variant=\"body1\">\n            Preview and edit a template form, either using a sample template or\n            by loading a template from the catalog.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  const cardFieldExplorer = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Custom Field Explorer\n          </Typography>\n          <Typography variant=\"body1\">\n            View and play around with available installed custom field\n            extensions.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        Get started by choosing one of the options below\n      </Typography>\n      <div\n        style={{\n          display: 'flex',\n          flexFlow: 'row wrap',\n          alignItems: 'flex-start',\n          justifyContent: 'center',\n          alignContent: 'flex-start',\n        }}\n      >\n        {supportsLoad && cardLoadLocal}\n        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateEditorPage.esm.js

@@ -23,7 +23,7 @@ function TemplateEditorPage(props) {
     onCreateClicked: () => navigate(createLink())
   };
   let content = null;
-  if ((selection == null ? void 0 : selection.type) === "local") {
+  if (selection?.type === "local") {
     content = /* @__PURE__ */ React.createElement(
       TemplateEditor,
       {
@@ -33,7 +33,7 @@ function TemplateEditorPage(props) {
         layouts: props.layouts
       }
     );
-  } else if ((selection == null ? void 0 : selection.type) === "form") {
+  } else if (selection?.type === "form") {
     content = /* @__PURE__ */ React.createElement(
       TemplateFormPreviewer,
       {
@@ -43,7 +43,7 @@ function TemplateEditorPage(props) {
         layouts: props.layouts
       }
     );
-  } else if ((selection == null ? void 0 : selection.type) === "field-explorer") {
+  } else if (selection?.type === "field-explorer") {
     content = /* @__PURE__ */ React.createElement(
       CustomFieldExplorer,
       {

package/dist/next/TemplateEditorPage/TemplateEditorPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorPage.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 React, { useState } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport {\n  TemplateDirectoryAccess,\n  WebFileSystemAccess,\n} from '../../lib/filesystem';\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\nimport { TemplateEditor } from './TemplateEditor';\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\nimport {\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  actionsRouteRef,\n  rootRouteRef,\n  scaffolderListTaskRouteRef,\n} from '../../routes';\n\ntype Selection =\n  | {\n      type: 'local';\n      directory: TemplateDirectoryAccess;\n    }\n  | {\n      type: 'form';\n    }\n  | {\n      type: 'field-explorer';\n    };\n\ninterface TemplateEditorPageProps {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nexport function TemplateEditorPage(props: TemplateEditorPageProps) {\n  const [selection, setSelection] = useState<Selection>();\n  const navigate = useNavigate();\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: undefined,\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: () => navigate(tasksLink()),\n    onCreateClicked: () => navigate(createLink()),\n  };\n\n  let content: JSX.Element | null = null;\n  if (selection?.type === 'local') {\n    content = (\n      <TemplateEditor\n        directory={selection.directory}\n        fieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'form') {\n    content = (\n      <TemplateFormPreviewer\n        defaultPreviewTemplate={props.defaultPreviewTemplate}\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'field-explorer') {\n    content = (\n      <CustomFieldExplorer\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n      />\n    );\n  } else {\n    content = (\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => setSelection({ type: 'local', directory }))\n                .catch(() => {});\n            } else if (option === 'form') {\n              setSelection({ type: 'form' });\n            } else if (option === 'field-explorer') {\n              setSelection({ type: 'field-explorer' });\n            }\n          }}\n        />\n      </Content>\n    );\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Template Editor\"\n        subtitle=\"Edit, preview, and try out templates and template forms\"\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      {content}\n    </Page>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorPage.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 React, { useState } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport {\n  TemplateDirectoryAccess,\n  WebFileSystemAccess,\n} from '../../lib/filesystem';\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\nimport { TemplateEditor } from './TemplateEditor';\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\nimport {\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  actionsRouteRef,\n  rootRouteRef,\n  scaffolderListTaskRouteRef,\n} from '../../routes';\n\ntype Selection =\n  | {\n      type: 'local';\n      directory: TemplateDirectoryAccess;\n    }\n  | {\n      type: 'form';\n    }\n  | {\n      type: 'field-explorer';\n    };\n\ninterface TemplateEditorPageProps {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nexport function TemplateEditorPage(props: TemplateEditorPageProps) {\n  const [selection, setSelection] = useState<Selection>();\n  const navigate = useNavigate();\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: undefined,\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: () => navigate(tasksLink()),\n    onCreateClicked: () => navigate(createLink()),\n  };\n\n  let content: JSX.Element | null = null;\n  if (selection?.type === 'local') {\n    content = (\n      <TemplateEditor\n        directory={selection.directory}\n        fieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'form') {\n    content = (\n      <TemplateFormPreviewer\n        defaultPreviewTemplate={props.defaultPreviewTemplate}\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'field-explorer') {\n    content = (\n      <CustomFieldExplorer\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n      />\n    );\n  } else {\n    content = (\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => setSelection({ type: 'local', directory }))\n                .catch(() => {});\n            } else if (option === 'form') {\n              setSelection({ type: 'form' });\n            } else if (option === 'field-explorer') {\n              setSelection({ type: 'field-explorer' });\n            }\n          }}\n        />\n      </Content>\n    );\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Template Editor\"\n        subtitle=\"Edit, preview, and try out templates and template forms\"\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      {content}\n    </Page>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateEditorTextArea.esm.js

@@ -74,28 +74,21 @@ function TemplateEditorTextArea(props) {
     IconButton,
     {
       className: classes.floatingButton,
-      onClick: () => {
-        var _a;
-        return (_a = props.onSave) == null ? void 0 : _a.call(props);
-      }
+      onClick: () => props.onSave?.()
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
   )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       className: classes.floatingButton,
-      onClick: () => {
-        var _a;
-        return (_a = props.onReload) == null ? void 0 : _a.call(props);
-      }
+      onClick: () => props.onReload?.()
     },
     /* @__PURE__ */ React.createElement(RefreshIcon, null)
   )))));
 }
 function TemplateEditorDirectoryEditorTextArea(props) {
-  var _a, _b;
   const directoryEditor = useDirectoryEditor();
-  const actions = ((_a = directoryEditor.selectedFile) == null ? void 0 : _a.dirty) ? {
+  const actions = directoryEditor.selectedFile?.dirty ? {
     onSave: () => directoryEditor.save(),
     onReload: () => directoryEditor.reload()
   } : {
@@ -105,11 +98,8 @@ function TemplateEditorDirectoryEditorTextArea(props) {
     TemplateEditorTextArea,
     {
       errorText: props.errorText,
-      content: (_b = directoryEditor.selectedFile) == null ? void 0 : _b.content,
-      onUpdate: (content) => {
-        var _a2;
-        return (_a2 = directoryEditor.selectedFile) == null ? void 0 : _a2.updateContent(content);
-      },
+      content: directoryEditor.selectedFile?.content,
+      onUpdate: (content) => directoryEditor.selectedFile?.updateContent(content),
       ...actions
     }
   );

package/dist/next/TemplateEditorPage/TemplateEditorTextArea.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorTextArea.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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  codeMirror: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip title=\"Save file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip title=\"Reload file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const directoryEditor = useDirectoryEditor();\n\n  const actions = directoryEditor.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content => directoryEditor.selectedFile?.updateContent(content)}\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport","_a"],"mappings":"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"}
+{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorTextArea.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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  codeMirror: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip title=\"Save file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip title=\"Reload file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const directoryEditor = useDirectoryEditor();\n\n  const actions = directoryEditor.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content => directoryEditor.selectedFile?.updateContent(content)}\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateFormPreviewer.esm.js

@@ -104,13 +104,10 @@ const TemplateFormPreviewer = ({
       ]
     }).then(
       ({ items }) => setTemplateOptions(
-        items.map((template) => {
-          var _a;
-          return {
-            label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
-            value: template
-          };
-        })
+        items.map((template) => ({
+          label: template.metadata.title ?? humanizeEntityRef(template, { defaultKind: "template" }),
+          value: template
+        }))
       )
     ).catch(
       (e) => alertApi.post({

package/dist/next/TemplateEditorPage/TemplateFormPreviewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../src/next/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 */\nimport { Entity } from '@backstage/catalog-model';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport LinearProgress from '@material-ui/core/LinearProgress';\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 React, { useCallback, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\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\ntype TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    display: 'grid',\n    gridTemplateAreas: `\n      \"controls controls\"\n      \"textArea 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  textArea: {\n    gridArea: 'textArea',\n  },\n  preview: {\n    gridArea: 'preview',\n  },\n}));\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  onClose,\n  layouts = [],\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [selectedTemplate, setSelectedTemplate] = useState('');\n  const [errorText, setErrorText] = useState<string>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const { loading } = 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: any) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.spec));\n    },\n    [setTemplateYaml],\n  );\n\n  return (\n    <>\n      {loading && <LinearProgress />}\n      <main className={classes.root}>\n        <div className={classes.controls}>\n          <FormControl variant=\"outlined\" size=\"small\" fullWidth>\n            <InputLabel id=\"select-template-label\">\n              Load Existing Template\n            </InputLabel>\n            <Select\n              value={selectedTemplate}\n              label=\"Load Existing Template\"\n              labelId=\"select-template-label\"\n              onChange={e => handleSelectChange(e.target.value)}\n            >\n              {templateOptions.map((option, idx) => (\n                <MenuItem key={idx} value={option.value as any}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n\n          <IconButton size=\"medium\" onClick={onClose}>\n            <CloseIcon />\n          </IconButton>\n        </div>\n        <div className={classes.textArea}>\n          <TemplateEditorTextArea\n            content={templateYaml}\n            onUpdate={setTemplateYaml}\n            errorText={errorText}\n          />\n        </div>\n        <div className={classes.preview}>\n          <TemplateEditorForm\n            content={templateYaml}\n            contentIsSpec\n            fieldExtensions={customFieldExtensions}\n            setErrorText={setErrorText}\n            layouts={layouts}\n          />\n        </div>\n      </main>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../src/next/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 */\nimport { Entity } from '@backstage/catalog-model';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport LinearProgress from '@material-ui/core/LinearProgress';\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 React, { useCallback, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\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\ntype TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    display: 'grid',\n    gridTemplateAreas: `\n      \"controls controls\"\n      \"textArea 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  textArea: {\n    gridArea: 'textArea',\n  },\n  preview: {\n    gridArea: 'preview',\n  },\n}));\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  onClose,\n  layouts = [],\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [selectedTemplate, setSelectedTemplate] = useState('');\n  const [errorText, setErrorText] = useState<string>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const { loading } = 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: any) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.spec));\n    },\n    [setTemplateYaml],\n  );\n\n  return (\n    <>\n      {loading && <LinearProgress />}\n      <main className={classes.root}>\n        <div className={classes.controls}>\n          <FormControl variant=\"outlined\" size=\"small\" fullWidth>\n            <InputLabel id=\"select-template-label\">\n              Load Existing Template\n            </InputLabel>\n            <Select\n              value={selectedTemplate}\n              label=\"Load Existing Template\"\n              labelId=\"select-template-label\"\n              onChange={e => handleSelectChange(e.target.value)}\n            >\n              {templateOptions.map((option, idx) => (\n                <MenuItem key={idx} value={option.value as any}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n\n          <IconButton size=\"medium\" onClick={onClose}>\n            <CloseIcon />\n          </IconButton>\n        </div>\n        <div className={classes.textArea}>\n          <TemplateEditorTextArea\n            content={templateYaml}\n            onUpdate={setTemplateYaml}\n            errorText={errorText}\n          />\n        </div>\n        <div className={classes.preview}>\n          <TemplateEditorForm\n            content={templateYaml}\n            contentIsSpec\n            fieldExtensions={customFieldExtensions}\n            setErrorText={setErrorText}\n            layouts={layouts}\n          />\n        </div>\n      </main>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAM,4BAA+B,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AA4CrC,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,aAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,iBAAmB,EAAA,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAInB,gBAAkB,EAAA,UAAA;AAAA,IAClB,mBAAqB,EAAA,SAAA;AAAA,GACvB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,UAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACzB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,UAAA;AAAA,GACZ;AAAA,EACA,OAAS,EAAA;AAAA,IACP,QAAU,EAAA,SAAA;AAAA,GACZ;AACF,CAAE,CAAA,CAAA,CAAA;AAEK,MAAM,wBAAwB,CAAC;AAAA,EACpC,sBAAyB,GAAA,4BAAA;AAAA,EACzB,wBAAwB,EAAC;AAAA,EACzB,OAAA;AAAA,EACA,UAAU,EAAC;AACb,CAKM,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAiB,EAAA,CAAA;AACnD,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA,CAA2B,EAAE,CAAA,CAAA;AAC3E,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,sBAAsB,CAAA,CAAA;AAEvE,EAAM,MAAA,EAAE,SAAY,GAAA,QAAA;AAAA,IAClB,MACE,WACG,WAAY,CAAA;AAAA,MACX,MAAA,EAAQ,EAAE,IAAA,EAAM,UAAW,EAAA;AAAA,MAC3B,MAAQ,EAAA;AAAA,QACN,MAAA;AAAA,QACA,oBAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,iBAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA;AAAA,OACF;AAAA,KACD,CACA,CAAA,IAAA;AAAA,MAAK,CAAC,EAAE,KAAA,EACP,KAAA,kBAAA;AAAA,QACE,KAAA,CAAM,IAAI,CAAa,QAAA,MAAA;AAAA,UACrB,KAAA,EACE,SAAS,QAAS,CAAA,KAAA,IAClB,kBAAkB,QAAU,EAAA,EAAE,WAAa,EAAA,UAAA,EAAY,CAAA;AAAA,UACzD,KAAO,EAAA,QAAA;AAAA,SACP,CAAA,CAAA;AAAA,OACJ;AAAA,KAED,CAAA,KAAA;AAAA,MAAM,CAAA,CAAA,KACL,SAAS,IAAK,CAAA;AAAA,QACZ,OAAA,EAAS,CAAsC,mCAAA,EAAA,CAAA,CAAE,OAAO,CAAA,CAAA;AAAA,QACxD,QAAU,EAAA,OAAA;AAAA,OACX,CAAA;AAAA,KACH;AAAA,IACJ,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA;AAAA,IAEzB,CAAC,QAAkB,KAAA;AACjB,MAAA,mBAAA,CAAoB,QAAQ,CAAA,CAAA;AAC5B,MAAA,eAAA,CAAgB,IAAK,CAAA,SAAA,CAAU,QAAS,CAAA,IAAI,CAAC,CAAA,CAAA;AAAA,KAC/C;AAAA,IACA,CAAC,eAAe,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAe,CAC5B,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,QACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UAAW,EAAA,IAAA,EAAK,OAAQ,EAAA,SAAA,EAAS,IACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,uBAAwB,EAAA,EAAA,wBAEvC,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,gBAAA;AAAA,MACP,KAAM,EAAA,wBAAA;AAAA,MACN,OAAQ,EAAA,uBAAA;AAAA,MACR,QAAU,EAAA,CAAA,CAAA,KAAK,kBAAmB,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,KAAA;AAAA,IAE/C,eAAgB,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,wBAC3B,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,GAAK,EAAA,GAAA,EAAK,KAAO,EAAA,MAAA,CAAO,KAC/B,EAAA,EAAA,MAAA,CAAO,KACV,CACD,CAAA;AAAA,GAEL,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,IAAA,EAAK,UAAS,OAAS,EAAA,OAAA,EAAA,kBAChC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAU,CACb,CACF,CAAA,sCACC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,QACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,YAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,SAAA;AAAA,KAAA;AAAA,GAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,OACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,YAAA;AAAA,MACT,aAAa,EAAA,IAAA;AAAA,MACb,eAAiB,EAAA,qBAAA;AAAA,MACjB,YAAA;AAAA,MACA,OAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/TemplateListPage/TemplateListPage.esm.js

@@ -20,7 +20,6 @@ const createGroupsWithOther = (groups) => [
   }
 ];
 const TemplateListPage = (props) => {
-  var _a, _b, _c;
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const {
     TemplateCardComponent,
@@ -37,19 +36,18 @@ const TemplateListPage = (props) => {
   const app = useApp();
   const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup];
   const scaffolderPageContextMenuProps = {
-    onEditorClicked: ((_a = props == null ? void 0 : props.contextMenu) == null ? void 0 : _a.editor) !== false ? () => navigate(editorLink()) : void 0,
-    onActionsClicked: ((_b = props == null ? void 0 : props.contextMenu) == null ? void 0 : _b.actions) !== false ? () => navigate(actionsLink()) : void 0,
-    onTasksClicked: ((_c = props == null ? void 0 : props.contextMenu) == null ? void 0 : _c.tasks) !== false ? () => navigate(tasksLink()) : void 0
+    onEditorClicked: props?.contextMenu?.editor !== false ? () => navigate(editorLink()) : void 0,
+    onActionsClicked: props?.contextMenu?.actions !== false ? () => navigate(actionsLink()) : void 0,
+    onTasksClicked: props?.contextMenu?.tasks !== false ? () => navigate(tasksLink()) : void 0
   };
   const additionalLinksForEntity = useCallback(
     (template) => {
-      var _a2, _b2;
       const { kind, namespace, name } = parseEntityRef(
         stringifyEntityRef(template)
       );
-      return ((_a2 = template.metadata.annotations) == null ? void 0 : _a2["backstage.io/techdocs-ref"]) && viewTechDocsLink ? [
+      return template.metadata.annotations?.["backstage.io/techdocs-ref"] && viewTechDocsLink ? [
         {
-          icon: (_b2 = app.getSystemIcon("docs")) != null ? _b2 : DocsIcon,
+          icon: app.getSystemIcon("docs") ?? DocsIcon,
           text: "View TechDocs",
           url: viewTechDocsLink({ kind, namespace, name })
         }

package/dist/next/TemplateListPage/TemplateListPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateListPage.esm.js","sources":["../../../src/next/TemplateListPage/TemplateListPage.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 } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\n\nimport {\n  Content,\n  ContentHeader,\n  DocsIcon,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport {\n  EntityKindPicker,\n  EntityListProvider,\n  EntitySearchBar,\n  EntityTagPicker,\n  CatalogFilterLayout,\n  UserListPicker,\n} from '@backstage/plugin-catalog-react';\nimport {\n  ScaffolderPageContextMenu,\n  TemplateCategoryPicker,\n  TemplateGroups,\n} from '@backstage/plugin-scaffolder-react/alpha';\n\nimport { RegisterExistingButton } from './RegisterExistingButton';\nimport {\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  selectedTemplateRouteRef,\n  viewTechDocRouteRef,\n} from '../../routes';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\n\n/**\n * @alpha\n */\nexport type TemplateListPageProps = {\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  contextMenu?: {\n    editor?: boolean;\n    actions?: boolean;\n    tasks?: boolean;\n  };\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nconst defaultGroup: TemplateGroupFilter = {\n  title: 'Templates',\n  filter: () => true,\n};\n\nconst createGroupsWithOther = (\n  groups: TemplateGroupFilter[],\n): TemplateGroupFilter[] => [\n  ...groups,\n  {\n    title: 'Other Templates',\n    filter: e => ![...groups].some(({ filter }) => filter(e)),\n  },\n];\n\n/**\n * @alpha\n */\nexport const TemplateListPage = (props: TemplateListPageProps) => {\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const {\n    TemplateCardComponent,\n    groups: givenGroups = [],\n    templateFilter,\n    headerOptions,\n  } = props;\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);\n  const templateRoute = useRouteRef(selectedTemplateRouteRef);\n  const app = useApp();\n\n  const groups = givenGroups.length\n    ? createGroupsWithOther(givenGroups)\n    : [defaultGroup];\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked:\n      props?.contextMenu?.editor !== false\n        ? () => navigate(editorLink())\n        : undefined,\n    onActionsClicked:\n      props?.contextMenu?.actions !== false\n        ? () => navigate(actionsLink())\n        : undefined,\n    onTasksClicked:\n      props?.contextMenu?.tasks !== false\n        ? () => navigate(tasksLink())\n        : undefined,\n  };\n\n  const additionalLinksForEntity = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { kind, namespace, name } = parseEntityRef(\n        stringifyEntityRef(template),\n      );\n      return template.metadata.annotations?.['backstage.io/techdocs-ref'] &&\n        viewTechDocsLink\n        ? [\n            {\n              icon: app.getSystemIcon('docs') ?? DocsIcon,\n              text: 'View TechDocs',\n              url: viewTechDocsLink({ kind, namespace, name }),\n            },\n          ]\n        : [];\n    },\n    [app, viewTechDocsLink],\n  );\n\n  const onTemplateSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));\n\n      navigate(templateRoute({ namespace, templateName: name }));\n    },\n    [navigate, templateRoute],\n  );\n\n  return (\n    <EntityListProvider>\n      <Page themeId=\"home\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...headerOptions}\n        >\n          <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n        </Header>\n        <Content>\n          <ContentHeader title=\"Available Templates\">\n            <RegisterExistingButton\n              title=\"Register Existing Component\"\n              to={registerComponentLink && registerComponentLink()}\n            />\n            <SupportButton>\n              Create new software components using standard templates. Different\n              templates create different kinds of components (services,\n              websites, documentation, ...).\n            </SupportButton>\n          </ContentHeader>\n\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntitySearchBar />\n              <EntityKindPicker initialFilter=\"template\" hidden />\n              <UserListPicker\n                initialFilter=\"all\"\n                availableFilters={['all', 'starred']}\n              />\n              <TemplateCategoryPicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <TemplateGroups\n                groups={groups}\n                templateFilter={templateFilter}\n                TemplateCardComponent={TemplateCardComponent}\n                onTemplateSelected={onTemplateSelected}\n                additionalLinksForEntity={additionalLinksForEntity}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </Content>\n      </Page>\n    </EntityListProvider>\n  );\n};\n"],"names":["_a","_b"],"mappings":"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"}
+{"version":3,"file":"TemplateListPage.esm.js","sources":["../../../src/next/TemplateListPage/TemplateListPage.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 } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\n\nimport {\n  Content,\n  ContentHeader,\n  DocsIcon,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport {\n  EntityKindPicker,\n  EntityListProvider,\n  EntitySearchBar,\n  EntityTagPicker,\n  CatalogFilterLayout,\n  UserListPicker,\n} from '@backstage/plugin-catalog-react';\nimport {\n  ScaffolderPageContextMenu,\n  TemplateCategoryPicker,\n  TemplateGroups,\n} from '@backstage/plugin-scaffolder-react/alpha';\n\nimport { RegisterExistingButton } from './RegisterExistingButton';\nimport {\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  selectedTemplateRouteRef,\n  viewTechDocRouteRef,\n} from '../../routes';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\n\n/**\n * @alpha\n */\nexport type TemplateListPageProps = {\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  contextMenu?: {\n    editor?: boolean;\n    actions?: boolean;\n    tasks?: boolean;\n  };\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nconst defaultGroup: TemplateGroupFilter = {\n  title: 'Templates',\n  filter: () => true,\n};\n\nconst createGroupsWithOther = (\n  groups: TemplateGroupFilter[],\n): TemplateGroupFilter[] => [\n  ...groups,\n  {\n    title: 'Other Templates',\n    filter: e => ![...groups].some(({ filter }) => filter(e)),\n  },\n];\n\n/**\n * @alpha\n */\nexport const TemplateListPage = (props: TemplateListPageProps) => {\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const {\n    TemplateCardComponent,\n    groups: givenGroups = [],\n    templateFilter,\n    headerOptions,\n  } = props;\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);\n  const templateRoute = useRouteRef(selectedTemplateRouteRef);\n  const app = useApp();\n\n  const groups = givenGroups.length\n    ? createGroupsWithOther(givenGroups)\n    : [defaultGroup];\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked:\n      props?.contextMenu?.editor !== false\n        ? () => navigate(editorLink())\n        : undefined,\n    onActionsClicked:\n      props?.contextMenu?.actions !== false\n        ? () => navigate(actionsLink())\n        : undefined,\n    onTasksClicked:\n      props?.contextMenu?.tasks !== false\n        ? () => navigate(tasksLink())\n        : undefined,\n  };\n\n  const additionalLinksForEntity = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { kind, namespace, name } = parseEntityRef(\n        stringifyEntityRef(template),\n      );\n      return template.metadata.annotations?.['backstage.io/techdocs-ref'] &&\n        viewTechDocsLink\n        ? [\n            {\n              icon: app.getSystemIcon('docs') ?? DocsIcon,\n              text: 'View TechDocs',\n              url: viewTechDocsLink({ kind, namespace, name }),\n            },\n          ]\n        : [];\n    },\n    [app, viewTechDocsLink],\n  );\n\n  const onTemplateSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));\n\n      navigate(templateRoute({ namespace, templateName: name }));\n    },\n    [navigate, templateRoute],\n  );\n\n  return (\n    <EntityListProvider>\n      <Page themeId=\"home\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...headerOptions}\n        >\n          <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n        </Header>\n        <Content>\n          <ContentHeader title=\"Available Templates\">\n            <RegisterExistingButton\n              title=\"Register Existing Component\"\n              to={registerComponentLink && registerComponentLink()}\n            />\n            <SupportButton>\n              Create new software components using standard templates. Different\n              templates create different kinds of components (services,\n              websites, documentation, ...).\n            </SupportButton>\n          </ContentHeader>\n\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntitySearchBar />\n              <EntityKindPicker initialFilter=\"template\" hidden />\n              <UserListPicker\n                initialFilter=\"all\"\n                availableFilters={['all', 'starred']}\n              />\n              <TemplateCategoryPicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <TemplateGroups\n                groups={groups}\n                templateFilter={templateFilter}\n                TemplateCardComponent={TemplateCardComponent}\n                onTemplateSelected={onTemplateSelected}\n                additionalLinksForEntity={additionalLinksForEntity}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </Content>\n      </Page>\n    </EntityListProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA4EA,MAAM,YAAoC,GAAA;AAAA,EACxC,KAAO,EAAA,WAAA;AAAA,EACP,QAAQ,MAAM,IAAA;AAChB,CAAA,CAAA;AAEA,MAAM,qBAAA,GAAwB,CAC5B,MAC0B,KAAA;AAAA,EAC1B,GAAG,MAAA;AAAA,EACH;AAAA,IACE,KAAO,EAAA,iBAAA;AAAA,IACP,MAAQ,EAAA,CAAA,CAAA,KAAK,CAAC,CAAC,GAAG,MAAM,CAAA,CAAE,IAAK,CAAA,CAAC,EAAE,MAAA,EAAa,KAAA,MAAA,CAAO,CAAC,CAAC,CAAA;AAAA,GAC1D;AACF,CAAA,CAAA;AAKa,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA,qBAAA,GAAwB,YAAY,yBAAyB,CAAA,CAAA;AACnE,EAAM,MAAA;AAAA,IACJ,qBAAA;AAAA,IACA,MAAA,EAAQ,cAAc,EAAC;AAAA,IACvB,cAAA;AAAA,IACA,aAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,YAAY,YAAY,CAAA,CAAA;AAC3C,EAAM,MAAA,WAAA,GAAc,YAAY,eAAe,CAAA,CAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,YAAY,0BAA0B,CAAA,CAAA;AACxD,EAAM,MAAA,gBAAA,GAAmB,YAAY,mBAAmB,CAAA,CAAA;AACxD,EAAM,MAAA,aAAA,GAAgB,YAAY,wBAAwB,CAAA,CAAA;AAC1D,EAAA,MAAM,MAAM,MAAO,EAAA,CAAA;AAEnB,EAAA,MAAM,SAAS,WAAY,CAAA,MAAA,GACvB,sBAAsB,WAAW,CAAA,GACjC,CAAC,YAAY,CAAA,CAAA;AAEjB,EAAA,MAAM,8BAAiC,GAAA;AAAA,IACrC,eAAA,EACE,OAAO,WAAa,EAAA,MAAA,KAAW,QAC3B,MAAM,QAAA,CAAS,UAAW,EAAC,CAC3B,GAAA,KAAA,CAAA;AAAA,IACN,gBAAA,EACE,OAAO,WAAa,EAAA,OAAA,KAAY,QAC5B,MAAM,QAAA,CAAS,WAAY,EAAC,CAC5B,GAAA,KAAA,CAAA;AAAA,IACN,cAAA,EACE,OAAO,WAAa,EAAA,KAAA,KAAU,QAC1B,MAAM,QAAA,CAAS,SAAU,EAAC,CAC1B,GAAA,KAAA,CAAA;AAAA,GACR,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAAC,QAAoC,KAAA;AACnC,MAAA,MAAM,EAAE,IAAA,EAAM,SAAW,EAAA,IAAA,EAAS,GAAA,cAAA;AAAA,QAChC,mBAAmB,QAAQ,CAAA;AAAA,OAC7B,CAAA;AACA,MAAA,OAAO,QAAS,CAAA,QAAA,CAAS,WAAc,GAAA,2BAA2B,KAChE,gBACE,GAAA;AAAA,QACE;AAAA,UACE,IAAM,EAAA,GAAA,CAAI,aAAc,CAAA,MAAM,CAAK,IAAA,QAAA;AAAA,UACnC,IAAM,EAAA,eAAA;AAAA,UACN,KAAK,gBAAiB,CAAA,EAAE,IAAM,EAAA,SAAA,EAAW,MAAM,CAAA;AAAA,SACjD;AAAA,UAEF,EAAC,CAAA;AAAA,KACP;AAAA,IACA,CAAC,KAAK,gBAAgB,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,QAAoC,KAAA;AACnC,MAAA,MAAM,EAAE,SAAW,EAAA,IAAA,KAAS,cAAe,CAAA,kBAAA,CAAmB,QAAQ,CAAC,CAAA,CAAA;AAEvE,MAAA,QAAA,CAAS,cAAc,EAAE,SAAA,EAAW,YAAc,EAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAAA,KAC3D;AAAA,IACA,CAAC,UAAU,aAAa,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAkB,EAAA,wBAAA;AAAA,MAClB,KAAM,EAAA,wBAAA;AAAA,MACN,QAAS,EAAA,8EAAA;AAAA,MACR,GAAG,aAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,8BAAgC,EAAA,CAAA;AAAA,qBAEhE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,OAAM,qBACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,6BAAA;AAAA,MACN,EAAA,EAAI,yBAAyB,qBAAsB,EAAA;AAAA,KAAA;AAAA,GACrD,sCACC,aAAc,EAAA,IAAA,EAAA,6JAIf,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,2CACE,KAAA,CAAA,aAAA,CAAA,mBAAA,CAAoB,SAApB,IACC,kBAAA,KAAA,CAAA,aAAA,CAAC,qBAAgB,CACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAiB,aAAc,EAAA,UAAA,EAAW,MAAM,EAAA,IAAA,EAAC,CAClD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,KAAA;AAAA,MACd,gBAAA,EAAkB,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,KAAA;AAAA,GACrC,kBACC,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAuB,CACxB,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,IAAA,CACnB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBAAoB,CAAA,OAAA,EAApB,IACC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,cAAA;AAAA,MACA,qBAAA;AAAA,MACA,kBAAA;AAAA,MACA,wBAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/TemplateWizardPage/TemplateWizardPage.esm.js

@@ -26,9 +26,8 @@ const TemplateWizardPage = (props) => {
     name: templateName
   });
   const { value: editUrl } = useAsync(async () => {
-    var _a;
     const data = await catalogApi.getEntityByRef(templateRef);
-    return (_a = data == null ? void 0 : data.metadata.annotations) == null ? void 0 : _a[ANNOTATION_EDIT_URL];
+    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];
   }, [templateRef, catalogApi]);
   const onCreate = async (values) => {
     const { taskId } = await scaffolderApi.scaffold({

package/dist/next/TemplateWizardPage/TemplateWizardPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPage.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 React from 'react';\nimport { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport { Workflow } from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../routes';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (values: Record<string, JsonValue>) => {\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAmEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAM,MAAA,OAAA,GAAU,YAAY,YAAY,CAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAY,YAAY,sBAAsB,CAAA,CAAA;AACpD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,kBAAmB,EAAA,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,SAAA,EAAc,GAAA,iBAAA;AAAA,IAClC,wBAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAmB,CAAA;AAAA,IACrC,IAAM,EAAA,UAAA;AAAA,IACN,SAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,SAAS,YAAY;AApFlD,IAAA,IAAA,EAAA,CAAA;AAqFI,IAAA,MAAM,IAAO,GAAA,MAAM,UAAW,CAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AACxD,IAAO,OAAA,CAAA,EAAA,GAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,QAAS,CAAA,WAAA,KAAf,IAA6B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,CAAA;AAAA,GACnC,EAAA,CAAC,WAAa,EAAA,UAAU,CAAC,CAAA,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAW,OAAO,MAAsC,KAAA;AAC5D,IAAA,MAAM,EAAE,MAAA,EAAW,GAAA,MAAM,cAAc,QAAS,CAAA;AAAA,MAC9C,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,SAAU,CAAA,EAAE,MAAO,EAAC,CAAC,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,UAAU,sBAAM,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,SAAW,EAAA,CAAA,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,UAAA,EAAY,EAAE,SAAA,EAAW,aACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,SACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAkB,EAAA,wBAAA;AAAA,MAClB,KAAM,EAAA,wBAAA;AAAA,MACN,QAAS,EAAA,8EAAA;AAAA,MACR,GAAG,KAAM,CAAA,aAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,iCAA8B,OAAkB,EAAA,CAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,OAAA;AAAA,MACA,YAAY,KAAM,CAAA,qBAAA;AAAA,MAClB,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,SAAS,KAAM,CAAA,OAAA;AAAA,KAAA;AAAA,GAEnB,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPage.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 React from 'react';\nimport { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport { Workflow } from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../routes';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (values: Record<string, JsonValue>) => {\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAmEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAM,MAAA,OAAA,GAAU,YAAY,YAAY,CAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAY,YAAY,sBAAsB,CAAA,CAAA;AACpD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,kBAAmB,EAAA,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,SAAA,EAAc,GAAA,iBAAA;AAAA,IAClC,wBAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAmB,CAAA;AAAA,IACrC,IAAM,EAAA,UAAA;AAAA,IACN,SAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,SAAS,YAAY;AAC9C,IAAA,MAAM,IAAO,GAAA,MAAM,UAAW,CAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AACxD,IAAO,OAAA,IAAA,EAAM,QAAS,CAAA,WAAA,GAAc,mBAAmB,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,WAAa,EAAA,UAAU,CAAC,CAAA,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAW,OAAO,MAAsC,KAAA;AAC5D,IAAA,MAAM,EAAE,MAAA,EAAW,GAAA,MAAM,cAAc,QAAS,CAAA;AAAA,MAC9C,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,SAAU,CAAA,EAAE,MAAO,EAAC,CAAC,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,UAAU,sBAAM,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,SAAW,EAAA,CAAA,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,UAAA,EAAY,EAAE,SAAA,EAAW,aACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,SACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAkB,EAAA,wBAAA;AAAA,MAClB,KAAM,EAAA,wBAAA;AAAA,MACN,QAAS,EAAA,8EAAA;AAAA,MACR,GAAG,KAAM,CAAA,aAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,iCAA8B,OAAkB,EAAA,CAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,OAAA;AAAA,MACA,YAAY,KAAM,CAAA,qBAAA;AAAA,MAClB,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,SAAS,KAAM,CAAA,OAAA;AAAA,KAAA;AAAA,GAEnB,CACF,CAAA,CAAA;AAEJ;;;;"}