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

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

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
@@ -6,7 +7,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
-import React from 'react';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
 import { FileBrowser } from '../../../components/FileBrowser/FileBrowser.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -47,50 +47,58 @@ function TemplateEditorBrowser(props) {
   if (!directoryEditor) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { className: classes.grid, container: true, spacing: 0, alignItems: "center" }, /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t("templateEditorPage.templateEditorBrowser.saveIconTooltip")
-    },
-    /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        size: "small",
-        disabled: directoryEditor.files.every((file) => !file.dirty),
-        onClick: () => directoryEditor.save()
-      },
-      /* @__PURE__ */ React.createElement(SaveIcon, null)
-    )
-  ), /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t(
-        "templateEditorPage.templateEditorBrowser.reloadIconTooltip"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Grid, { className: classes.grid, container: true, spacing: 0, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t("templateEditorPage.templateEditorBrowser.saveIconTooltip"),
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              disabled: directoryEditor.files.every((file) => !file.dirty),
+              onClick: () => directoryEditor.save(),
+              children: /* @__PURE__ */ jsx(SaveIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t(
+            "templateEditorPage.templateEditorBrowser.reloadIconTooltip"
+          ),
+          children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => directoryEditor.reload(), children: /* @__PURE__ */ jsx(RefreshIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t("templateEditorPage.templateEditorBrowser.closeIconTooltip"),
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              className: classes.closeButton,
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        }
       )
-    },
-    /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => directoryEditor.reload() }, /* @__PURE__ */ React.createElement(RefreshIcon, null))
-  ), /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t("templateEditorPage.templateEditorBrowser.closeIconTooltip")
-    },
-    /* @__PURE__ */ React.createElement(
-      IconButton,
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      FileBrowser,
       {
-        size: "small",
-        className: classes.closeButton,
-        onClick: handleClose
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null)
+        selected: directoryEditor.selectedFile?.path ?? "",
+        onSelect: directoryEditor.setSelectedFile,
+        filePaths: directoryEditor.files.map((file) => file.path) ?? []
+      }
     )
-  )), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-    FileBrowser,
-    {
-      selected: directoryEditor.selectedFile?.path ?? "",
-      onSelect: directoryEditor.setSelectedFile,
-      filePaths: directoryEditor.files.map((file) => file.path) ?? []
-    }
-  ));
+  ] });
 }
 
 export { TemplateEditorBrowser };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorBrowser.esm.js","sources":["../../../../src/alpha/components/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 Grid from '@material-ui/core/Grid';\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';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(\n  theme => ({\n    grid: {\n      '& svg': {\n        margin: theme.spacing(1),\n      },\n    },\n    closeButton: {\n      marginLeft: 'auto',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorBrowser' },\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  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = () => {\n    if (!props.onClose) {\n      return;\n    }\n    if (changedFiles?.length) {\n      // eslint-disable-next-line no-alert\n      const accepted = window.confirm(\n        t('templateEditorPage.templateEditorBrowser.closeConfirmMessage'),\n      );\n      if (!accepted) {\n        return;\n      }\n    }\n    props.onClose();\n  };\n\n  if (!directoryEditor) {\n    return null;\n  }\n\n  return (\n    <>\n      <Grid className={classes.grid} container spacing={0} alignItems=\"center\">\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.saveIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            disabled={directoryEditor.files.every(file => !file.dirty)}\n            onClick={() => directoryEditor.save()}\n          >\n            <SaveIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t(\n            'templateEditorPage.templateEditorBrowser.reloadIconTooltip',\n          )}\n        >\n          <IconButton size=\"small\" onClick={() => directoryEditor.reload()}>\n            <RefreshIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.closeIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            className={classes.closeButton}\n            onClick={handleClose}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n      <Divider />\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/alpha/components/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 Grid from '@material-ui/core/Grid';\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 { useDirectoryEditor } from './DirectoryEditorContext';\nimport { FileBrowser } from '../../../components/FileBrowser';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(\n  theme => ({\n    grid: {\n      '& svg': {\n        margin: theme.spacing(1),\n      },\n    },\n    closeButton: {\n      marginLeft: 'auto',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorBrowser' },\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  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = () => {\n    if (!props.onClose) {\n      return;\n    }\n    if (changedFiles?.length) {\n      // eslint-disable-next-line no-alert\n      const accepted = window.confirm(\n        t('templateEditorPage.templateEditorBrowser.closeConfirmMessage'),\n      );\n      if (!accepted) {\n        return;\n      }\n    }\n    props.onClose();\n  };\n\n  if (!directoryEditor) {\n    return null;\n  }\n\n  return (\n    <>\n      <Grid className={classes.grid} container spacing={0} alignItems=\"center\">\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.saveIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            disabled={directoryEditor.files.every(file => !file.dirty)}\n            onClick={() => directoryEditor.save()}\n          >\n            <SaveIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t(\n            'templateEditorPage.templateEditorBrowser.reloadIconTooltip',\n          )}\n        >\n          <IconButton size=\"small\" onClick={() => directoryEditor.reload()}>\n            <RefreshIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip\n          title={t('templateEditorPage.templateEditorBrowser.closeIconTooltip')}\n        >\n          <IconButton\n            size=\"small\"\n            className={classes.closeButton}\n            onClick={handleClose}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n      <Divider />\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/alpha/components/TemplateEditorPage/TemplateEditorForm.esm.js

@@ -1,8 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
 import { useApiHolder } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-import React, { useState, useMemo, Component } from 'react';
+import { useState, useMemo, Component } from 'react';
 import useDebounce from 'react-use/esm/useDebounce';
 import yaml from 'yaml';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
@@ -105,7 +106,7 @@ function TemplateEditorForm(props) {
     250,
     [contentIsSpec, content, apiHolder]
   );
-  return /* @__PURE__ */ React.createElement("div", { className: classes.containerWrapper }, steps ? /* @__PURE__ */ React.createElement(Paper, { variant: "outlined" }, /* @__PURE__ */ React.createElement(ErrorBoundary, { invalidator: steps, setErrorText }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: classes.containerWrapper, children: steps ? /* @__PURE__ */ jsx(Paper, { variant: "outlined", children: /* @__PURE__ */ jsx(ErrorBoundary, { invalidator: steps, setErrorText, children: /* @__PURE__ */ jsx(
     Stepper,
     {
       manifest: { steps, title: "Template Editor" },
@@ -117,7 +118,7 @@ function TemplateEditorForm(props) {
       layouts,
       formProps: props.formProps
     }
-  ))) : /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, t("templateEditorForm.stepper.emptyText")));
+  ) }) }) : /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", children: t("templateEditorForm.stepper.emptyText") }) });
 }
 function TemplateEditorFormDirectoryEditorDryRun(props) {
   const { setErrorText, fieldExtensions = [], layouts } = props;
@@ -144,7 +145,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
   if (!directoryEditor) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     TemplateEditorForm,
     {
       onDryRun: handleDryRun,

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../../src/alpha/components/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 Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport React, { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n  FormProps,\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\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    width: '100%',\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  formProps?: FormProps;\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  const { t } = useTranslationRef(scaffolderTranslationRef);\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  return (\n    <div className={classes.containerWrapper}>\n      {steps ? (\n        <Paper variant=\"outlined\">\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              formProps={props.formProps}\n            />\n          </ErrorBoundary>\n        </Paper>\n      ) : (\n        <Typography variant=\"body1\" color=\"textSecondary\">\n          {t('templateEditorForm.stepper.emptyText')}\n        </Typography>\n      )}\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' | 'formProps'\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  if (!directoryEditor) {\n    return null;\n  }\n\n  return (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n      formProps={props.formProps}\n    />\n  );\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../../src/alpha/components/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 Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n  FormProps,\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\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    width: '100%',\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  formProps?: FormProps;\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  const { t } = useTranslationRef(scaffolderTranslationRef);\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  return (\n    <div className={classes.containerWrapper}>\n      {steps ? (\n        <Paper variant=\"outlined\">\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              formProps={props.formProps}\n            />\n          </ErrorBoundary>\n        </Paper>\n      ) : (\n        <Typography variant=\"body1\" color=\"textSecondary\">\n          {t('templateEditorForm.stepper.emptyText')}\n        </Typography>\n      )}\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' | 'formProps'\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  if (!directoryEditor) {\n    return null;\n  }\n\n  return (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n      formProps={props.formProps}\n    />\n  );\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
@@ -65,82 +65,99 @@ function ActionCard(props) {
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const classes = useStyles();
   const { Icon, title, description, action } = props;
-  return /* @__PURE__ */ React.createElement(Card, { className: classes.card }, !supportsLoad && /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      placement: "top",
-      title: t(
-        "templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip"
-      )
-    },
-    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
-  ), /* @__PURE__ */ React.createElement(CardActionArea, { onClick: action }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(
-    Icon,
-    {
-      className: classes.icon,
-      color: supportsLoad ? void 0 : "disabled"
-    }
-  )), /* @__PURE__ */ React.createElement(CardContent, { className: classes.cardContent }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      gutterBottom: true,
-      variant: "h5",
-      component: "h2",
-      color: supportsLoad ? void 0 : "textSecondary"
-    },
-    title
-  ), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary", component: "p" }, description))));
+  return /* @__PURE__ */ jsxs(Card, { className: classes.card, children: [
+    !supportsLoad && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        placement: "top",
+        title: t(
+          "templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip"
+        ),
+        children: /* @__PURE__ */ jsx(InfoOutlinedIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardActionArea, { onClick: action, children: [
+      /* @__PURE__ */ jsx(CardMedia, { children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: classes.icon,
+          color: supportsLoad ? void 0 : "disabled"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: classes.cardContent, children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            gutterBottom: true,
+            variant: "h5",
+            component: "h2",
+            color: supportsLoad ? void 0 : "textSecondary",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", component: "p", children: description })
+      ] })
+    ] })
+  ] });
 }
 function TemplateEditorIntro(props) {
   const classes = useStyles();
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  return /* @__PURE__ */ React.createElement("div", { style: props.style }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h2", className: classes.introText }, t("templateEditorPage.templateEditorIntro.title")), /* @__PURE__ */ React.createElement("div", { className: classes.gridRoot }, /* @__PURE__ */ React.createElement("div", { className: classes.cardGrid }, /* @__PURE__ */ React.createElement(
-    ActionCard,
-    {
-      title: t("templateEditorPage.templateEditorIntro.loadLocal.title"),
-      description: t(
-        "templateEditorPage.templateEditorIntro.loadLocal.description"
-      ),
-      requireLoad: true,
-      Icon: PublishIcon,
-      action: () => props.onSelect?.("local")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ActionCard,
-    {
-      title: t(
-        "templateEditorPage.templateEditorIntro.createLocal.title"
-      ),
-      description: t(
-        "templateEditorPage.templateEditorIntro.createLocal.description"
+  return /* @__PURE__ */ jsxs("div", { style: props.style, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", className: classes.introText, children: t("templateEditorPage.templateEditorIntro.title") }),
+    /* @__PURE__ */ jsx("div", { className: classes.gridRoot, children: /* @__PURE__ */ jsxs("div", { className: classes.cardGrid, children: [
+      /* @__PURE__ */ jsx(
+        ActionCard,
+        {
+          title: t("templateEditorPage.templateEditorIntro.loadLocal.title"),
+          description: t(
+            "templateEditorPage.templateEditorIntro.loadLocal.description"
+          ),
+          requireLoad: true,
+          Icon: PublishIcon,
+          action: () => props.onSelect?.("local")
+        }
       ),
-      requireLoad: true,
-      action: () => props.onSelect?.("create-template"),
-      Icon: CreateNewFolderIcon
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ActionCard,
-    {
-      title: t("templateEditorPage.templateEditorIntro.formEditor.title"),
-      description: t(
-        "templateEditorPage.templateEditorIntro.formEditor.description"
-      ),
-      Icon: ListAltIcon,
-      action: () => props.onSelect?.("form")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ActionCard,
-    {
-      title: t(
-        "templateEditorPage.templateEditorIntro.fieldExplorer.title"
+      /* @__PURE__ */ jsx(
+        ActionCard,
+        {
+          title: t(
+            "templateEditorPage.templateEditorIntro.createLocal.title"
+          ),
+          description: t(
+            "templateEditorPage.templateEditorIntro.createLocal.description"
+          ),
+          requireLoad: true,
+          action: () => props.onSelect?.("create-template"),
+          Icon: CreateNewFolderIcon
+        }
       ),
-      description: t(
-        "templateEditorPage.templateEditorIntro.fieldExplorer.description"
+      /* @__PURE__ */ jsx(
+        ActionCard,
+        {
+          title: t("templateEditorPage.templateEditorIntro.formEditor.title"),
+          description: t(
+            "templateEditorPage.templateEditorIntro.formEditor.description"
+          ),
+          Icon: ListAltIcon,
+          action: () => props.onSelect?.("form")
+        }
       ),
-      Icon: FormatListBulletedIcon,
-      action: () => props.onSelect?.("field-explorer")
-    }
-  ))));
+      /* @__PURE__ */ jsx(
+        ActionCard,
+        {
+          title: t(
+            "templateEditorPage.templateEditorIntro.fieldExplorer.title"
+          ),
+          description: t(
+            "templateEditorPage.templateEditorIntro.fieldExplorer.description"
+          ),
+          Icon: FormatListBulletedIcon,
+          action: () => props.onSelect?.("field-explorer")
+        }
+      )
+    ] }) })
+  ] });
 }
 
 export { TemplateEditorIntro };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../../src/alpha/components/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 Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';\nimport ListAltIcon from '@material-ui/icons/ListAlt';\nimport FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport PublishIcon from '@material-ui/icons/Publish';\nimport SvgIcon from '@material-ui/core/SvgIcon';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles(theme => ({\n  gridRoot: {\n    display: 'flex',\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  cardGrid: {\n    maxWidth: 1000,\n    display: 'grid',\n    gridGap: theme.spacing(2),\n    gridAutoFlow: 'row',\n    [theme.breakpoints.up('md')]: {\n      gridTemplateRows: '1fr 1fr',\n      gridTemplateColumns: '1fr 1fr',\n    },\n  },\n  card: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateRows: '1fr',\n    alignItems: 'center',\n    margin: theme.spacing(0, 1),\n    marginTop: theme.spacing(2),\n    padding: theme.spacing(2),\n  },\n  icon: {\n    justifySelf: 'center',\n    paddingTop: theme.spacing(1),\n    fontSize: 48,\n  },\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n  cardContent: {\n    padding: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (\n    option: 'create-template' | 'local' | 'form' | 'field-explorer',\n  ) => void;\n}\n\nfunction ActionCard(props: {\n  title: string;\n  description: string;\n  Icon: typeof SvgIcon;\n  action?: React.MouseEventHandler;\n  requireLoad?: boolean;\n}) {\n  const supportsLoad = props.requireLoad\n    ? WebFileSystemAccess.isSupported()\n    : true;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const classes = useStyles();\n  const { Icon, title, description, action } = props;\n  return (\n    <Card className={classes.card}>\n      {!supportsLoad && (\n        <Tooltip\n          placement=\"top\"\n          title={t(\n            'templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip',\n          )}\n        >\n          <InfoOutlinedIcon />\n        </Tooltip>\n      )}\n\n      <CardActionArea onClick={action}>\n        <CardMedia>\n          <Icon\n            className={classes.icon}\n            color={supportsLoad ? undefined : 'disabled'}\n          />\n        </CardMedia>\n        <CardContent className={classes.cardContent}>\n          <Typography\n            gutterBottom\n            variant=\"h5\"\n            component=\"h2\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" component=\"p\">\n            {description}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n}\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        {t('templateEditorPage.templateEditorIntro.title')}\n      </Typography>\n      <div className={classes.gridRoot}>\n        <div className={classes.cardGrid}>\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.loadLocal.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.loadLocal.description',\n            )}\n            requireLoad\n            Icon={PublishIcon}\n            action={() => props.onSelect?.('local')}\n          />\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.createLocal.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.createLocal.description',\n            )}\n            requireLoad\n            action={() => props.onSelect?.('create-template')}\n            Icon={CreateNewFolderIcon}\n          />\n\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.formEditor.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.formEditor.description',\n            )}\n            Icon={ListAltIcon}\n            action={() => props.onSelect?.('form')}\n          />\n\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.description',\n            )}\n            Icon={FormatListBulletedIcon}\n            action={() => props.onSelect?.('field-explorer')}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../../src/alpha/components/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 { MouseEventHandler } from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';\nimport ListAltIcon from '@material-ui/icons/ListAlt';\nimport FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport PublishIcon from '@material-ui/icons/Publish';\nimport SvgIcon from '@material-ui/core/SvgIcon';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles(theme => ({\n  gridRoot: {\n    display: 'flex',\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  cardGrid: {\n    maxWidth: 1000,\n    display: 'grid',\n    gridGap: theme.spacing(2),\n    gridAutoFlow: 'row',\n    [theme.breakpoints.up('md')]: {\n      gridTemplateRows: '1fr 1fr',\n      gridTemplateColumns: '1fr 1fr',\n    },\n  },\n  card: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateRows: '1fr',\n    alignItems: 'center',\n    margin: theme.spacing(0, 1),\n    marginTop: theme.spacing(2),\n    padding: theme.spacing(2),\n  },\n  icon: {\n    justifySelf: 'center',\n    paddingTop: theme.spacing(1),\n    fontSize: 48,\n  },\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n  cardContent: {\n    padding: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (\n    option: 'create-template' | 'local' | 'form' | 'field-explorer',\n  ) => void;\n}\n\nfunction ActionCard(props: {\n  title: string;\n  description: string;\n  Icon: typeof SvgIcon;\n  action?: MouseEventHandler;\n  requireLoad?: boolean;\n}) {\n  const supportsLoad = props.requireLoad\n    ? WebFileSystemAccess.isSupported()\n    : true;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const classes = useStyles();\n  const { Icon, title, description, action } = props;\n  return (\n    <Card className={classes.card}>\n      {!supportsLoad && (\n        <Tooltip\n          placement=\"top\"\n          title={t(\n            'templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip',\n          )}\n        >\n          <InfoOutlinedIcon />\n        </Tooltip>\n      )}\n\n      <CardActionArea onClick={action}>\n        <CardMedia>\n          <Icon\n            className={classes.icon}\n            color={supportsLoad ? undefined : 'disabled'}\n          />\n        </CardMedia>\n        <CardContent className={classes.cardContent}>\n          <Typography\n            gutterBottom\n            variant=\"h5\"\n            component=\"h2\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" component=\"p\">\n            {description}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n}\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        {t('templateEditorPage.templateEditorIntro.title')}\n      </Typography>\n      <div className={classes.gridRoot}>\n        <div className={classes.cardGrid}>\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.loadLocal.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.loadLocal.description',\n            )}\n            requireLoad\n            Icon={PublishIcon}\n            action={() => props.onSelect?.('local')}\n          />\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.createLocal.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.createLocal.description',\n            )}\n            requireLoad\n            action={() => props.onSelect?.('create-template')}\n            Icon={CreateNewFolderIcon}\n          />\n\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.formEditor.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.formEditor.description',\n            )}\n            Icon={ListAltIcon}\n            action={() => props.onSelect?.('form')}\n          />\n\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.description',\n            )}\n            Icon={FormatListBulletedIcon}\n            action={() => props.onSelect?.('field-explorer')}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { withStyles } from '@material-ui/core/styles';
 
 const TemplateEditorLayout = withStyles(
@@ -26,7 +26,7 @@ const TemplateEditorLayout = withStyles(
     }
   }),
   { name: "ScaffolderTemplateEditorLayout" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("main", { className: classes.root }, children));
+)(({ children, classes }) => /* @__PURE__ */ jsx("main", { className: classes.root, children }));
 const TemplateEditorLayoutToolbar = withStyles(
   {
     root: {
@@ -34,7 +34,7 @@ const TemplateEditorLayoutToolbar = withStyles(
     }
   },
   { name: "ScaffolderTemplateEditorLayoutToolbar" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+)(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 const TemplateEditorLayoutBrowser = withStyles(
   (theme) => ({
     root: {
@@ -46,7 +46,7 @@ const TemplateEditorLayoutBrowser = withStyles(
     }
   }),
   { name: "ScaffolderTemplateEditorLayoutBrowser" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+)(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 const TemplateEditorLayoutFiles = withStyles(
   {
     root: {
@@ -55,7 +55,7 @@ const TemplateEditorLayoutFiles = withStyles(
     }
   },
   { name: "ScaffolderTemplateEditorLayoutFiles" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+)(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 const TemplateEditorLayoutPreview = withStyles(
   (theme) => ({
     root: {
@@ -80,7 +80,7 @@ const TemplateEditorLayoutPreview = withStyles(
     }
   }),
   { name: "ScaffolderTemplateEditorLayoutPreview" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, children)));
+)(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.scroll, children }) }));
 const TemplateEditorLayoutConsole = withStyles(
   {
     root: {
@@ -88,7 +88,7 @@ const TemplateEditorLayoutConsole = withStyles(
     }
   },
   { name: "ScaffolderTemplateEditorLayoutConsole" }
-)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+)(({ children, classes }) => /* @__PURE__ */ jsx("section", { className: classes.root, children }));
 
 export { TemplateEditorLayout, TemplateEditorLayoutBrowser, TemplateEditorLayoutConsole, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutToolbar };
 //# sourceMappingURL=TemplateEditorLayout.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorLayout.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport { WithStyles, withStyles } from '@material-ui/core/styles';\n\nexport const TemplateEditorLayout = withStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"browser\"\n      \"editor\"\n      \"preview\"\n      \"results\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar toolbar\"\n      \"browser editor preview\"\n      \"results results results\"\n    `,\n        gridTemplateColumns: '1fr 3fr 2fr',\n        gridTemplateRows: 'auto 1fr auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayout' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <main className={classes.root}>{children}</main>\n));\n\nexport const TemplateEditorLayoutToolbar = withStyles(\n  {\n    root: {\n      gridArea: 'toolbar',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutToolbar' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutBrowser = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'browser',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutBrowser' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutFiles = withStyles(\n  {\n    root: {\n      gridArea: 'editor',\n      overflow: 'auto',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutFiles' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutPreview = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'preview',\n      position: 'relative',\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('md')]: {\n        borderLeft: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    scroll: {\n      height: '100%',\n      padding: theme.spacing(1),\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        overflow: 'auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutPreview' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>\n    <div className={classes.scroll}>{children}</div>\n  </section>\n));\n\nexport const TemplateEditorLayoutConsole = withStyles(\n  {\n    root: {\n      gridArea: 'results',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutConsole' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorLayout.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren } from 'react';\nimport { WithStyles, withStyles } from '@material-ui/core/styles';\n\nexport const TemplateEditorLayout = withStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"browser\"\n      \"editor\"\n      \"preview\"\n      \"results\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar toolbar\"\n      \"browser editor preview\"\n      \"results results results\"\n    `,\n        gridTemplateColumns: '1fr 3fr 2fr',\n        gridTemplateRows: 'auto 1fr auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayout' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <main className={classes.root}>{children}</main>\n));\n\nexport const TemplateEditorLayoutToolbar = withStyles(\n  {\n    root: {\n      gridArea: 'toolbar',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutToolbar' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutBrowser = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'browser',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutBrowser' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutFiles = withStyles(\n  {\n    root: {\n      gridArea: 'editor',\n      overflow: 'auto',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutFiles' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutPreview = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'preview',\n      position: 'relative',\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('md')]: {\n        borderLeft: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    scroll: {\n      height: '100%',\n      padding: theme.spacing(1),\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        overflow: 'auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutPreview' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>\n    <div className={classes.scroll}>{children}</div>\n  </section>\n));\n\nexport const TemplateEditorLayoutConsole = withStyles(\n  {\n    root: {\n      gridArea: 'results',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutConsole' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
 import { Page, Header, Content } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
@@ -19,22 +19,25 @@ function TemplateEditorPage(props) {
   const classes = useStyles();
   const editLink = useRouteRef(editRouteRef);
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      title: t("templateEditorPage.title"),
-      subtitle: t("templateEditorPage.subtitle"),
-      type: t("templateIntroPage.title"),
-      typeLink: editLink()
-    }
-  ), /* @__PURE__ */ React.createElement(Content, { className: classes.content }, /* @__PURE__ */ React.createElement(
-    TemplateEditor,
-    {
-      layouts: props.layouts,
-      formProps: props.formProps,
-      fieldExtensions: props.fieldExtensions
-    }
-  )));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: t("templateEditorPage.title"),
+        subtitle: t("templateEditorPage.subtitle"),
+        type: t("templateIntroPage.title"),
+        typeLink: editLink()
+      }
+    ),
+    /* @__PURE__ */ jsx(Content, { className: classes.content, children: /* @__PURE__ */ jsx(
+      TemplateEditor,
+      {
+        layouts: props.layouts,
+        formProps: props.formProps,
+        fieldExtensions: props.fieldExtensions
+      }
+    ) })
+  ] });
 }
 
 export { TemplateEditorPage };