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

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

@@ -4,6 +4,7 @@ import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
 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';
@@ -23,13 +24,13 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "center"
   },
   cardGrid: {
-    display: "grid",
     maxWidth: 1e3,
-    gridTemplateColumns: "1fr 1fr",
-    gridAutoRows: "1fr 1fr",
-    gap: "1rem",
-    [theme.breakpoints.down("sm")]: {
-      gridAutoFlow: "row"
+    display: "grid",
+    gridGap: theme.spacing(2),
+    gridAutoFlow: "row",
+    [theme.breakpoints.up("md")]: {
+      gridTemplateRows: "1fr 1fr",
+      gridTemplateColumns: "1fr 1fr"
     }
   },
   card: {
@@ -120,24 +121,24 @@ function TemplateEditorIntro(props) {
   ), /* @__PURE__ */ React.createElement(
     ActionCard,
     {
-      title: t(
-        "templateEditorPage.templateEditorIntro.fieldExplorer.title"
-      ),
+      title: t("templateEditorPage.templateEditorIntro.formEditor.title"),
       description: t(
-        "templateEditorPage.templateEditorIntro.fieldExplorer.description"
+        "templateEditorPage.templateEditorIntro.formEditor.description"
       ),
-      Icon: FormatListBulletedIcon,
-      action: () => props.onSelect?.("field-explorer")
+      Icon: ListAltIcon,
+      action: () => props.onSelect?.("form")
     }
   ), /* @__PURE__ */ React.createElement(
     ActionCard,
     {
-      title: t("templateEditorPage.templateEditorIntro.formEditor.title"),
+      title: t(
+        "templateEditorPage.templateEditorIntro.fieldExplorer.title"
+      ),
       description: t(
-        "templateEditorPage.templateEditorIntro.formEditor.description"
+        "templateEditorPage.templateEditorIntro.fieldExplorer.description"
       ),
-      Icon: ListAltIcon,
-      action: () => props.onSelect?.("form")
+      Icon: FormatListBulletedIcon,
+      action: () => props.onSelect?.("field-explorer")
     }
   ))));
 }

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    display: 'grid',\n    maxWidth: 1000,\n    gridTemplateColumns: '1fr 1fr',\n    gridAutoRows: '1fr 1fr',\n    gap: '1rem',\n    [theme.breakpoints.down('sm')]: {\n      gridAutoFlow: 'row',\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(\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\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        </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 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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"}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const TemplateEditorLayout = withStyles(
+  (theme) => ({
+    root: {
+      height: "100%",
+      gridArea: "pageContent",
+      display: "grid",
+      gridTemplateAreas: `
+      "toolbar"
+      "browser"
+      "editor"
+      "preview"
+      "results"
+    `,
+      [theme.breakpoints.up("md")]: {
+        gridTemplateAreas: `
+      "toolbar toolbar toolbar"
+      "browser editor preview"
+      "results results results"
+    `,
+        gridTemplateColumns: "1fr 3fr 2fr",
+        gridTemplateRows: "auto 1fr auto"
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayout" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("main", { className: classes.root }, children));
+const TemplateEditorLayoutToolbar = withStyles(
+  {
+    root: {
+      gridArea: "toolbar"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutToolbar" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutBrowser = withStyles(
+  (theme) => ({
+    root: {
+      gridArea: "browser",
+      overflow: "auto",
+      [theme.breakpoints.up("md")]: {
+        borderRight: `1px solid ${theme.palette.divider}`
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayoutBrowser" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutFiles = withStyles(
+  {
+    root: {
+      gridArea: "editor",
+      overflow: "auto"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutFiles" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutPreview = withStyles(
+  (theme) => ({
+    root: {
+      gridArea: "preview",
+      position: "relative",
+      backgroundColor: theme.palette.background.default,
+      [theme.breakpoints.up("md")]: {
+        borderLeft: `1px solid ${theme.palette.divider}`
+      }
+    },
+    scroll: {
+      height: "100%",
+      padding: theme.spacing(1),
+      [theme.breakpoints.up("md")]: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: "auto"
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayoutPreview" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, children)));
+const TemplateEditorLayoutConsole = withStyles(
+  {
+    root: {
+      gridArea: "results"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutConsole" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("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

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