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

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

@@ -1,93 +1,48 @@
-import { makeStyles } from '@material-ui/core/styles';
-import React, { useState } from 'react';
-import Paper from '@material-ui/core/Paper';
+import React, { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { editRouteRef } from '../../../routes.esm.js';
+import { useTemplateDirectory } from './useTemplateDirectory.esm.js';
 import { DirectoryEditorProvider } from './DirectoryEditorContext.esm.js';
+import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorLayoutBrowser, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutConsole } from './TemplateEditorLayout.esm.js';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar.esm.js';
+import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu.esm.js';
 import { TemplateEditorBrowser } from './TemplateEditorBrowser.esm.js';
-import { DryRunProvider } from './DryRunContext.esm.js';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea.esm.js';
 import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
+import { DryRunProvider } from './DryRunContext.esm.js';
 import { DryRunResults } from './DryRunResults/DryRunResults.esm.js';
 
-const useStyles = makeStyles(
-  (theme) => ({
-    // Reset and fix sizing to make sure scrolling behaves correctly
-    root: {
-      height: "100%",
-      gridArea: "pageContent",
-      display: "grid",
-      gridTemplateAreas: `
-      "toolbar toolbar toolbar"
-      "browser editor preview"
-      "results results results"
-    `,
-      gridTemplateColumns: "1fr 3fr 2fr",
-      gridTemplateRows: "auto 1fr auto"
-    },
-    toolbar: {
-      gridArea: "toolbar"
-    },
-    browser: {
-      gridArea: "browser",
-      overflow: "auto"
-    },
-    editor: {
-      gridArea: "editor",
-      overflow: "auto",
-      borderLeft: `1px solid ${theme.palette.divider}`
-    },
-    preview: {
-      gridArea: "preview",
-      position: "relative",
-      borderLeft: `1px solid ${theme.palette.divider}`,
-      backgroundColor: theme.palette.background.default
-    },
-    scroll: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      padding: theme.spacing(1),
-      overflow: "auto"
-    },
-    results: {
-      gridArea: "results"
-    }
-  }),
-  { name: "ScaffolderTemplateEditor" }
-);
 const TemplateEditor = (props) => {
-  const classes = useStyles();
+  const { layouts, formProps, fieldExtensions } = props;
   const [errorText, setErrorText] = useState();
-  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory: props.directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement(
-    Paper,
+  const navigate = useNavigate();
+  const editLink = useRouteRef(editRouteRef);
+  const {
+    directory,
+    openDirectory: handleOpenDirectory,
+    createDirectory: handleCreateDirectory,
+    closeDirectory
+  } = useTemplateDirectory();
+  const handleCloseDirectory = useCallback(() => {
+    closeDirectory().then(() => navigate(editLink()));
+  }, [closeDirectory, navigate, editLink]);
+  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement(TemplateEditorLayout, null, /* @__PURE__ */ React.createElement(TemplateEditorLayoutToolbar, null, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions }, /* @__PURE__ */ React.createElement(
+    TemplateEditorToolbarFileMenu,
     {
-      className: classes.root,
-      component: "main",
-      variant: "outlined",
-      square: true
-    },
-    /* @__PURE__ */ React.createElement("section", { className: classes.toolbar }, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions: props.fieldExtensions })),
-    /* @__PURE__ */ React.createElement("section", { className: classes.browser }, /* @__PURE__ */ React.createElement(TemplateEditorBrowser, { onClose: props.onClose })),
-    /* @__PURE__ */ React.createElement("section", { className: classes.editor }, /* @__PURE__ */ React.createElement(
-      TemplateEditorTextArea.DirectoryEditor,
-      {
-        errorText,
-        onLoad: props.onLoad
-      }
-    )),
-    /* @__PURE__ */ React.createElement("section", { className: classes.preview }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, /* @__PURE__ */ React.createElement(
-      TemplateEditorForm.DirectoryEditorDryRun,
-      {
-        setErrorText,
-        fieldExtensions: props.fieldExtensions,
-        layouts: props.layouts,
-        formProps: props.formProps
-      }
-    ))),
-    /* @__PURE__ */ React.createElement("section", { className: classes.results }, /* @__PURE__ */ React.createElement(DryRunResults, null))
-  )));
+      onOpenDirectory: handleOpenDirectory,
+      onCreateDirectory: handleCreateDirectory,
+      onCloseDirectory: handleCloseDirectory
+    }
+  ))), /* @__PURE__ */ React.createElement(TemplateEditorLayoutBrowser, null, /* @__PURE__ */ React.createElement(TemplateEditorBrowser, { onClose: closeDirectory })), /* @__PURE__ */ React.createElement(TemplateEditorLayoutFiles, null, /* @__PURE__ */ React.createElement(TemplateEditorTextArea.DirectoryEditor, { errorText })), /* @__PURE__ */ React.createElement(TemplateEditorLayoutPreview, null, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm.DirectoryEditorDryRun,
+    {
+      setErrorText,
+      fieldExtensions,
+      layouts,
+      formProps
+    }
+  )), /* @__PURE__ */ React.createElement(TemplateEditorLayoutConsole, null, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
 };
 
 export { TemplateEditor };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditor.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditor.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 { makeStyles } from '@material-ui/core/styles';\nimport React, { useState } from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport type {\n  FormProps,\n  LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { TemplateDirectoryAccess } from '../../../lib/filesystem';\nimport { DirectoryEditorProvider } from './DirectoryEditorContext';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorBrowser } from './TemplateEditorBrowser';\nimport { DryRunProvider } from './DryRunContext';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { DryRunResults } from './DryRunResults';\n\n/** @public */\nexport type ScaffolderTemplateEditorClassKey =\n  | 'root'\n  | 'browser'\n  | 'editor'\n  | 'preview'\n  | 'results';\n\nconst useStyles = makeStyles(\n  theme => ({\n    // Reset and fix sizing to make sure scrolling behaves correctly\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\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    toolbar: {\n      gridArea: 'toolbar',\n    },\n    browser: {\n      gridArea: 'browser',\n      overflow: 'auto',\n    },\n    editor: {\n      gridArea: 'editor',\n      overflow: 'auto',\n      borderLeft: `1px solid ${theme.palette.divider}`,\n    },\n    preview: {\n      gridArea: 'preview',\n      position: 'relative',\n      borderLeft: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.default,\n    },\n    scroll: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      padding: theme.spacing(1),\n      overflow: 'auto',\n    },\n    results: {\n      gridArea: 'results',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditor' },\n);\n\nexport const TemplateEditor = (props: {\n  directory?: TemplateDirectoryAccess;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  onClose?: () => void;\n  formProps?: FormProps;\n  onLoad?: () => void;\n}) => {\n  const classes = useStyles();\n  const [errorText, setErrorText] = useState<string>();\n\n  return (\n    <DirectoryEditorProvider directory={props.directory}>\n      <DryRunProvider>\n        <Paper\n          className={classes.root}\n          component=\"main\"\n          variant=\"outlined\"\n          square\n        >\n          <section className={classes.toolbar}>\n            <TemplateEditorToolbar fieldExtensions={props.fieldExtensions} />\n          </section>\n          <section className={classes.browser}>\n            <TemplateEditorBrowser onClose={props.onClose} />\n          </section>\n          <section className={classes.editor}>\n            <TemplateEditorTextArea.DirectoryEditor\n              errorText={errorText}\n              onLoad={props.onLoad}\n            />\n          </section>\n          <section className={classes.preview}>\n            <div className={classes.scroll}>\n              <TemplateEditorForm.DirectoryEditorDryRun\n                setErrorText={setErrorText}\n                fieldExtensions={props.fieldExtensions}\n                layouts={props.layouts}\n                formProps={props.formProps}\n              />\n            </div>\n          </section>\n          <section className={classes.results}>\n            <DryRunResults />\n          </section>\n        </Paper>\n      </DryRunProvider>\n    </DirectoryEditorProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditor.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditor.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, { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport type {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport { useTemplateDirectory } from './useTemplateDirectory';\nimport { DirectoryEditorProvider } from './DirectoryEditorContext';\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutBrowser,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n  TemplateEditorLayoutConsole,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport { TemplateEditorBrowser } from './TemplateEditorBrowser';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { DryRunProvider } from './DryRunContext';\nimport { DryRunResults } from './DryRunResults';\n\n/** @public */\nexport type ScaffolderTemplateEditorClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'browser'\n  | 'editor'\n  | 'preview'\n  | 'results';\n\nexport const TemplateEditor = (props: {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n  const { layouts, formProps, fieldExtensions } = props;\n  const [errorText, setErrorText] = useState<string>();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const {\n    directory,\n    openDirectory: handleOpenDirectory,\n    createDirectory: handleCreateDirectory,\n    closeDirectory,\n  } = useTemplateDirectory();\n\n  const handleCloseDirectory = useCallback(() => {\n    closeDirectory().then(() => navigate(editLink()));\n  }, [closeDirectory, navigate, editLink]);\n\n  return (\n    <DirectoryEditorProvider directory={directory}>\n      <DryRunProvider>\n        <TemplateEditorLayout>\n          <TemplateEditorLayoutToolbar>\n            <TemplateEditorToolbar fieldExtensions={fieldExtensions}>\n              <TemplateEditorToolbarFileMenu\n                onOpenDirectory={handleOpenDirectory}\n                onCreateDirectory={handleCreateDirectory}\n                onCloseDirectory={handleCloseDirectory}\n              />\n            </TemplateEditorToolbar>\n          </TemplateEditorLayoutToolbar>\n          <TemplateEditorLayoutBrowser>\n            <TemplateEditorBrowser onClose={closeDirectory} />\n          </TemplateEditorLayoutBrowser>\n          <TemplateEditorLayoutFiles>\n            <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />\n          </TemplateEditorLayoutFiles>\n          <TemplateEditorLayoutPreview>\n            <TemplateEditorForm.DirectoryEditorDryRun\n              setErrorText={setErrorText}\n              fieldExtensions={fieldExtensions}\n              layouts={layouts}\n              formProps={formProps}\n            />\n          </TemplateEditorLayoutPreview>\n          <TemplateEditorLayoutConsole>\n            <DryRunResults />\n          </TemplateEditorLayoutConsole>\n        </TemplateEditorLayout>\n      </DryRunProvider>\n    </DirectoryEditorProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsDa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,SAAW,EAAA,eAAA,EAAoB,GAAA,KAAA,CAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAiB,EAAA,CAAA;AACnD,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,aAAe,EAAA,mBAAA;AAAA,IACf,eAAiB,EAAA,qBAAA;AAAA,IACjB,cAAA;AAAA,MACE,oBAAqB,EAAA,CAAA;AAEzB,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,cAAA,GAAiB,IAAK,CAAA,MAAM,QAAS,CAAA,QAAA,EAAU,CAAC,CAAA,CAAA;AAAA,GAC/C,EAAA,CAAC,cAAgB,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA,CAAA;AAEvC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,uBAAwB,EAAA,EAAA,SAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,eACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,6BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,mBAAA;AAAA,MACjB,iBAAmB,EAAA,qBAAA;AAAA,MACnB,gBAAkB,EAAA,oBAAA;AAAA,KAAA;AAAA,GAEtB,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,mDACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,SAAS,cAAgB,EAAA,CAClD,mBACC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,IAAA,sCACE,sBAAuB,CAAA,eAAA,EAAvB,EAAuC,SAAsB,EAAA,CAChE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,2BACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAmB,CAAA,qBAAA;AAAA,IAAnB;AAAA,MACC,YAAA;AAAA,MACA,eAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,KAAA;AAAA,GAEJ,mBACC,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,sCACE,aAAc,EAAA,IAAA,CACjB,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -44,6 +44,9 @@ function TemplateEditorBrowser(props) {
     }
     props.onClose();
   };
+  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,
     {
@@ -53,8 +56,8 @@ function TemplateEditorBrowser(props) {
       IconButton,
       {
         size: "small",
-        disabled: directoryEditor?.files.every((file) => !file.dirty),
-        onClick: () => directoryEditor?.save()
+        disabled: directoryEditor.files.every((file) => !file.dirty),
+        onClick: () => directoryEditor.save()
       },
       /* @__PURE__ */ React.createElement(SaveIcon, null)
     )
@@ -65,7 +68,7 @@ function TemplateEditorBrowser(props) {
         "templateEditorPage.templateEditorBrowser.reloadIconTooltip"
       )
     },
-    /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => directoryEditor?.reload() }, /* @__PURE__ */ React.createElement(RefreshIcon, null))
+    /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => directoryEditor.reload() }, /* @__PURE__ */ React.createElement(RefreshIcon, null))
   ), /* @__PURE__ */ React.createElement(
     Tooltip,
     {
@@ -83,9 +86,9 @@ function TemplateEditorBrowser(props) {
   )), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
     FileBrowser,
     {
-      selected: directoryEditor?.selectedFile?.path ?? "",
-      onSelect: directoryEditor?.setSelectedFile,
-      filePaths: directoryEditor?.files.map((file) => file.path) ?? []
+      selected: directoryEditor.selectedFile?.path ?? "",
+      onSelect: directoryEditor.setSelectedFile,
+      filePaths: directoryEditor.files.map((file) => file.path) ?? []
     }
   ));
 }

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  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 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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"}

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

@@ -141,7 +141,10 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
     }
   };
   const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
-  return directoryEditor ? /* @__PURE__ */ React.createElement(
+  if (!directoryEditor) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
     TemplateEditorForm,
     {
       onDryRun: handleDryRun,
@@ -151,7 +154,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
       layouts,
       formProps: props.formProps
     }
-  ) : null;
+  );
 }
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 

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  return directoryEditor ? (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n      formProps={props.formProps}\n    />\n  ) : null;\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 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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"}

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

@@ -2,60 +2,70 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
-import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import { makeStyles } from '@material-ui/core/styles';
+import 'idb-keyval';
 import { WebFileSystemAccess } from '../../../lib/filesystem/WebFileSystemAccess.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
+import ListAltIcon from '@material-ui/icons/ListAlt';
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import CardMedia from '@material-ui/core/CardMedia';
+import PublishIcon from '@material-ui/icons/Publish';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const useStyles = makeStyles((theme) => ({
+  gridRoot: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cardGrid: {
+    maxWidth: 1e3,
+    display: "grid",
+    gridGap: theme.spacing(2),
+    gridAutoFlow: "row",
+    [theme.breakpoints.up("md")]: {
+      gridTemplateRows: "1fr 1fr",
+      gridTemplateColumns: "1fr 1fr"
+    }
+  },
+  card: {
+    display: "grid",
+    gridTemplateColumns: "auto 1fr",
+    gridTemplateRows: "1fr",
+    alignItems: "center",
+    margin: theme.spacing(0, 1),
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(2)
+  },
+  icon: {
+    justifySelf: "center",
+    paddingTop: theme.spacing(1),
+    fontSize: 48
+  },
   introText: {
     textAlign: "center",
     marginTop: theme.spacing(2)
   },
-  card: {
-    position: "relative",
-    maxWidth: 340,
-    marginTop: theme.spacing(4),
-    margin: theme.spacing(0, 2)
-  },
   infoIcon: {
     position: "absolute",
     top: theme.spacing(1),
     right: theme.spacing(1)
+  },
+  cardContent: {
+    padding: theme.spacing(1)
   }
 }));
-function TemplateEditorIntro(props) {
-  const classes = useStyles();
-  const supportsLoad = WebFileSystemAccess.isSupported();
+function ActionCard(props) {
+  const supportsLoad = props.requireLoad ? WebFileSystemAccess.isSupported() : true;
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
-    CardActionArea,
-    {
-      disabled: !supportsLoad,
-      onClick: () => props.onSelect?.("local")
-    },
-    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "h4",
-        component: "h3",
-        gutterBottom: true,
-        color: supportsLoad ? void 0 : "textSecondary",
-        style: { display: "flex", flexFlow: "row nowrap" }
-      },
-      t("templateEditorPage.templateEditorIntro.loadLocal.title")
-    ), /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "body1",
-        color: supportsLoad ? void 0 : "textSecondary"
-      },
-      t("templateEditorPage.templateEditorIntro.loadLocal.description")
-    ))
-  ), !supportsLoad && /* @__PURE__ */ React.createElement("div", { className: classes.infoIcon }, /* @__PURE__ */ React.createElement(
+  const classes = useStyles();
+  const { Icon, title, description, action } = props;
+  return /* @__PURE__ */ React.createElement(Card, { className: classes.card }, !supportsLoad && /* @__PURE__ */ React.createElement(
     Tooltip,
     {
       placement: "top",
@@ -64,64 +74,73 @@ function TemplateEditorIntro(props) {
       )
     },
     /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
-  )));
-  const cardCreateLocal = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
-    CardActionArea,
+  ), /* @__PURE__ */ React.createElement(CardActionArea, { onClick: action }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(
+    Icon,
     {
-      disabled: !supportsLoad,
-      onClick: () => props.onSelect?.("create-template")
+      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"
     },
-    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "h4",
-        component: "h3",
-        gutterBottom: true,
-        color: supportsLoad ? void 0 : "textSecondary",
-        style: { display: "flex", flexFlow: "row nowrap" }
-      },
-      t("templateEditorPage.templateEditorIntro.createLocal.title")
-    ), /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "body1",
-        color: supportsLoad ? void 0 : "textSecondary"
-      },
-      t(
-        "templateEditorPage.templateEditorIntro.createLocal.description"
-      )
-    ))
-  ), !supportsLoad && /* @__PURE__ */ React.createElement("div", { className: classes.infoIcon }, /* @__PURE__ */ React.createElement(
-    Tooltip,
+    title
+  ), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary", component: "p" }, 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,
     {
-      placement: "top",
       title: t(
-        "templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip"
-      )
-    },
-    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
-  )));
-  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 }, t("templateEditorPage.templateEditorIntro.formEditor.title")), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t("templateEditorPage.templateEditorIntro.formEditor.description")))));
-  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 }, t("templateEditorPage.templateEditorIntro.fieldExplorer.title")), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t(
-    "templateEditorPage.templateEditorIntro.fieldExplorer.description"
-  )))));
-  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",
+        "templateEditorPage.templateEditorIntro.createLocal.title"
+      ),
+      description: t(
+        "templateEditorPage.templateEditorIntro.createLocal.description"
+      ),
+      requireLoad: true,
+      action: () => props.onSelect?.("create-template"),
+      Icon: CreateNewFolderIcon
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ActionCard,
     {
-      style: {
-        display: "flex",
-        flexFlow: "row wrap",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        alignContent: "flex-start"
-      }
-    },
-    supportsLoad && cardLoadLocal,
-    supportsLoad && cardCreateLocal,
-    cardFormEditor,
-    !supportsLoad && cardLoadLocal,
-    cardFieldExplorer
-  ));
+      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"
+      ),
+      description: t(
+        "templateEditorPage.templateEditorIntro.fieldExplorer.description"
+      ),
+      Icon: FormatListBulletedIcon,
+      action: () => props.onSelect?.("field-explorer")
+    }
+  ))));
 }
 
 export { TemplateEditorIntro };