@backstage/plugin-scaffolder 1.19.3 → 1.19.4-next.1

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

@@ -0,0 +1,174 @@
+import { useApiHolder } from '@backstage/core-plugin-api';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useState, useMemo, Component } from 'react';
+import useDebounce from 'react-use/esm/useDebounce';
+import yaml from 'yaml';
+import { createAsyncValidators, Stepper } from '@backstage/plugin-scaffolder-react/alpha';
+import { useDryRun } from './DryRunContext.esm.js';
+import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, key + "" , value);
+  return value;
+};
+const useStyles = makeStyles({
+  containerWrapper: {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  container: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "auto"
+  }
+});
+class ErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      shouldRender: true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.invalidator !== this.props.invalidator) {
+      this.setState({ shouldRender: true });
+    }
+  }
+  componentDidCatch(error) {
+    this.props.setErrorText(error.message);
+    this.setState({ shouldRender: false });
+  }
+  render() {
+    return this.state.shouldRender ? this.props.children : null;
+  }
+}
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function TemplateEditorForm(props) {
+  const {
+    content,
+    contentIsSpec,
+    onDryRun,
+    setErrorText,
+    fieldExtensions = [],
+    layouts = []
+  } = props;
+  const classes = useStyles();
+  const apiHolder = useApiHolder();
+  const [steps, setSteps] = useState();
+  const fields = useMemo(() => {
+    return Object.fromEntries(
+      fieldExtensions.map(({ name, component }) => [name, component])
+    );
+  }, [fieldExtensions]);
+  useDebounce(
+    () => {
+      try {
+        if (!content) {
+          setSteps(void 0);
+          return;
+        }
+        const parsed = yaml.parseAllDocuments(content).filter((c) => c).map((c) => c.toJSON())[0];
+        if (!isJsonObject(parsed)) {
+          setSteps(void 0);
+          return;
+        }
+        let rootObj = parsed;
+        if (!contentIsSpec) {
+          const isTemplate = String(parsed.kind).toLocaleLowerCase("en-US") === "template";
+          if (!isTemplate) {
+            setSteps(void 0);
+            return;
+          }
+          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
+        }
+        const { parameters } = rootObj;
+        if (!Array.isArray(parameters)) {
+          setErrorText("Template parameters must be an array");
+          setSteps(void 0);
+          return;
+        }
+        const fieldValidators = Object.fromEntries(
+          fieldExtensions.map(({ name, validation }) => [name, validation])
+        );
+        setErrorText();
+        setSteps(
+          parameters.flatMap(
+            (param) => isJsonObject(param) ? [
+              {
+                title: String(param.title),
+                schema: param,
+                validate: createAsyncValidators(param, fieldValidators, {
+                  apiHolder
+                })
+              }
+            ] : []
+          )
+        );
+      } catch (e) {
+        setErrorText(e.message);
+      }
+    },
+    250,
+    [contentIsSpec, content, apiHolder]
+  );
+  if (!steps) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: classes.containerWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(ErrorBoundary, { invalidator: steps, setErrorText }, /* @__PURE__ */ React.createElement(
+    Stepper,
+    {
+      manifest: { steps, title: "Template Editor" },
+      extensions: fieldExtensions,
+      components: fields,
+      onCreate: async (options) => {
+        await (onDryRun == null ? void 0 : onDryRun(options));
+      },
+      layouts
+    }
+  ))));
+}
+function TemplateEditorFormDirectoryEditorDryRun(props) {
+  const { setErrorText, fieldExtensions = [], layouts } = props;
+  const dryRun = useDryRun();
+  const directoryEditor = useDirectoryEditor();
+  const { selectedFile } = directoryEditor;
+  const handleDryRun = async (data) => {
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await dryRun.execute({
+        templateContent: selectedFile.content,
+        values: data,
+        files: directoryEditor.files
+      });
+      setErrorText();
+    } catch (e) {
+      setErrorText(String(e.cause || e));
+      throw e;
+    }
+  };
+  const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
+  return /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      onDryRun: handleDryRun,
+      fieldExtensions,
+      setErrorText,
+      content,
+      layouts
+    }
+  );
+}
+TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
+
+export { TemplateEditorForm, TemplateEditorFormDirectoryEditorDryRun };
+//# sourceMappingURL=TemplateEditorForm.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorForm.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorForm.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonObject, JsonValue } from '@backstage/types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { Component, ReactNode, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  TemplateParameterSchema,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport {\n  Stepper,\n  createAsyncValidators,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useDryRun } from './DryRunContext';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles({\n  containerWrapper: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  container: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    overflow: 'auto',\n  },\n});\n\ninterface ErrorBoundaryProps {\n  invalidator: unknown;\n  setErrorText(errorText: string | undefined): void;\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  shouldRender: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state = {\n    shouldRender: true,\n  };\n\n  componentDidUpdate(prevProps: { invalidator: unknown }) {\n    if (prevProps.invalidator !== this.props.invalidator) {\n      this.setState({ shouldRender: true });\n    }\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.setErrorText(error.message);\n    this.setState({ shouldRender: false });\n  }\n\n  render() {\n    return this.state.shouldRender ? this.props.children : null;\n  }\n}\n\ninterface TemplateEditorFormProps {\n  content?: string;\n  /** Setting this to true will cause the content to be parsed as if it is the template entity spec */\n  contentIsSpec?: boolean;\n  setErrorText: (errorText?: string) => void;\n\n  onDryRun?: (data: JsonObject) => Promise<void>;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nfunction isJsonObject(value: JsonValue | undefined): value is JsonObject {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/** Shows the a template form that is parsed from the provided content */\nexport function TemplateEditorForm(props: TemplateEditorFormProps) {\n  const {\n    content,\n    contentIsSpec,\n    onDryRun,\n    setErrorText,\n    fieldExtensions = [],\n    layouts = [],\n  } = props;\n  const classes = useStyles();\n  const apiHolder = useApiHolder();\n\n  const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();\n\n  const fields = useMemo(() => {\n    return Object.fromEntries(\n      fieldExtensions.map(({ name, component }) => [name, component]),\n    );\n  }, [fieldExtensions]);\n\n  useDebounce(\n    () => {\n      try {\n        if (!content) {\n          setSteps(undefined);\n          return;\n        }\n        const parsed: JsonValue = yaml\n          .parseAllDocuments(content)\n          .filter(c => c)\n          .map(c => c.toJSON())[0];\n\n        if (!isJsonObject(parsed)) {\n          setSteps(undefined);\n          return;\n        }\n\n        let rootObj = parsed;\n        if (!contentIsSpec) {\n          const isTemplate =\n            String(parsed.kind).toLocaleLowerCase('en-US') === 'template';\n          if (!isTemplate) {\n            setSteps(undefined);\n            return;\n          }\n\n          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};\n        }\n\n        const { parameters } = rootObj;\n\n        if (!Array.isArray(parameters)) {\n          setErrorText('Template parameters must be an array');\n          setSteps(undefined);\n          return;\n        }\n\n        const fieldValidators = Object.fromEntries(\n          fieldExtensions.map(({ name, validation }) => [name, validation]),\n        );\n\n        setErrorText();\n        setSteps(\n          parameters.flatMap(param =>\n            isJsonObject(param)\n              ? [\n                  {\n                    title: String(param.title),\n                    schema: param,\n                    validate: createAsyncValidators(param, fieldValidators, {\n                      apiHolder,\n                    }),\n                  },\n                ]\n              : [],\n          ),\n        );\n      } catch (e) {\n        setErrorText(e.message);\n      }\n    },\n    250,\n    [contentIsSpec, content, apiHolder],\n  );\n\n  if (!steps) {\n    return null;\n  }\n\n  return (\n    <div className={classes.containerWrapper}>\n      <div className={classes.container}>\n        <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>\n          <Stepper\n            manifest={{ steps, title: 'Template Editor' }}\n            extensions={fieldExtensions}\n            components={fields}\n            onCreate={async options => {\n              await onDryRun?.(options);\n            }}\n            layouts={layouts}\n          />\n        </ErrorBoundary>\n      </div>\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */\nexport function TemplateEditorFormDirectoryEditorDryRun(\n  props: Pick<\n    TemplateEditorFormProps,\n    'setErrorText' | 'fieldExtensions' | 'layouts'\n  >,\n) {\n  const { setErrorText, fieldExtensions = [], layouts } = props;\n  const dryRun = useDryRun();\n\n  const directoryEditor = useDirectoryEditor();\n  const { selectedFile } = directoryEditor;\n\n  const handleDryRun = async (data: JsonObject) => {\n    if (!selectedFile) {\n      return;\n    }\n\n    try {\n      await dryRun.execute({\n        templateContent: selectedFile.content,\n        values: data,\n        files: directoryEditor.files,\n      });\n      setErrorText();\n    } catch (e) {\n      setErrorText(String(e.cause || e));\n      throw e;\n    }\n  };\n\n  const content =\n    selectedFile && selectedFile.path.match(/\\.ya?ml$/)\n      ? selectedFile.content\n      : undefined;\n\n  return (\n    <TemplateEditorForm\n      onDryRun={handleDryRun}\n      fieldExtensions={fieldExtensions}\n      setErrorText={setErrorText}\n      content={content}\n      layouts={layouts}\n    />\n  );\n}\n\nTemplateEditorForm.DirectoryEditorDryRun =\n  TemplateEditorFormDirectoryEditorDryRun;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+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 { WebFileSystemAccess } from '../../lib/filesystem/WebFileSystemAccess.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  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)
+  }
+}));
+function TemplateEditorIntro(props) {
+  const classes = useStyles();
+  const supportsLoad = WebFileSystemAccess.isSupported();
+  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
+    CardActionArea,
+    {
+      disabled: !supportsLoad,
+      onClick: () => {
+        var _a;
+        return (_a = props.onSelect) == null ? void 0 : _a.call(props, "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" }
+      },
+      "Load Template Directory"
+    ), /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body1",
+        color: supportsLoad ? void 0 : "textSecondary"
+      },
+      "Load a local template directory, allowing you to both edit and try executing your own template."
+    ))
+  ), !supportsLoad && /* @__PURE__ */ React.createElement("div", { className: classes.infoIcon }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      placement: "top",
+      title: "Only supported in some Chromium-based browsers"
+    },
+    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
+  )));
+  const cardFormEditor = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
+    var _a;
+    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "form");
+  } }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
+  const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
+    var _a;
+    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "field-explorer");
+  } }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h3", gutterBottom: true }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "View and play around with available installed custom field extensions."))));
+  return /* @__PURE__ */ React.createElement("div", { style: props.style }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", component: "h2", className: classes.introText }, "Get started by choosing one of the options below"), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexFlow: "row wrap",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        alignContent: "flex-start"
+      }
+    },
+    supportsLoad && cardLoadLocal,
+    cardFormEditor,
+    !supportsLoad && cardLoadLocal,
+    cardFieldExplorer
+  ));
+}
+
+export { TemplateEditorIntro };
+//# sourceMappingURL=TemplateEditorIntro.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorIntro.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../lib/filesystem';\n\nconst useStyles = makeStyles(theme => ({\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  card: {\n    position: 'relative',\n    maxWidth: 340,\n    marginTop: theme.spacing(4),\n    margin: theme.spacing(0, 2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (option: 'local' | 'form' | 'field-explorer') => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\n\n  const cardLoadLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('local')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            Load Template Directory\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            Load a local template directory, allowing you to both edit and try\n            executing your own template.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title=\"Only supported in some Chromium-based browsers\"\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardFormEditor = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('form')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Edit Template Form\n          </Typography>\n          <Typography variant=\"body1\">\n            Preview and edit a template form, either using a sample template or\n            by loading a template from the catalog.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  const cardFieldExplorer = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            Custom Field Explorer\n          </Typography>\n          <Typography variant=\"body1\">\n            View and play around with available installed custom field\n            extensions.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        Get started by choosing one of the options below\n      </Typography>\n      <div\n        style={{\n          display: 'flex',\n          flexFlow: 'row wrap',\n          alignItems: 'flex-start',\n          justifyContent: 'center',\n          alignContent: 'flex-start',\n        }}\n      >\n        {supportsLoad && cardLoadLocal}\n        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Page, Header, Content } from '@backstage/core-components';
+import { WebFileSystemAccess } from '../../lib/filesystem/WebFileSystemAccess.esm.js';
+import { CustomFieldExplorer } from './CustomFieldExplorer.esm.js';
+import { TemplateEditor } from './TemplateEditor.esm.js';
+import { TemplateFormPreviewer } from './TemplateFormPreviewer.esm.js';
+import { TemplateEditorIntro } from './TemplateEditorIntro.esm.js';
+import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { actionsRouteRef, scaffolderListTaskRouteRef, rootRouteRef } from '../../routes.esm.js';
+
+function TemplateEditorPage(props) {
+  const [selection, setSelection] = useState();
+  const navigate = useNavigate();
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: void 0,
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink())
+  };
+  let content = null;
+  if ((selection == null ? void 0 : selection.type) === "local") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateEditor,
+      {
+        directory: selection.directory,
+        fieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0),
+        layouts: props.layouts
+      }
+    );
+  } else if ((selection == null ? void 0 : selection.type) === "form") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateFormPreviewer,
+      {
+        defaultPreviewTemplate: props.defaultPreviewTemplate,
+        customFieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0),
+        layouts: props.layouts
+      }
+    );
+  } else if ((selection == null ? void 0 : selection.type) === "field-explorer") {
+    content = /* @__PURE__ */ React.createElement(
+      CustomFieldExplorer,
+      {
+        customFieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0)
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+      TemplateEditorIntro,
+      {
+        onSelect: (option) => {
+          if (option === "local") {
+            WebFileSystemAccess.requestDirectoryAccess().then((directory) => setSelection({ type: "local", directory })).catch(() => {
+            });
+          } else if (option === "form") {
+            setSelection({ type: "form" });
+          } else if (option === "field-explorer") {
+            setSelection({ type: "field-explorer" });
+          }
+        }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Template Editor",
+      subtitle: "Edit, preview, and try out templates and template forms"
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), content);
+}
+
+export { TemplateEditorPage };
+//# sourceMappingURL=TemplateEditorPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useState } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport {\n  TemplateDirectoryAccess,\n  WebFileSystemAccess,\n} from '../../lib/filesystem';\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\nimport { TemplateEditor } from './TemplateEditor';\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\nimport {\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  actionsRouteRef,\n  rootRouteRef,\n  scaffolderListTaskRouteRef,\n} from '../../routes';\n\ntype Selection =\n  | {\n      type: 'local';\n      directory: TemplateDirectoryAccess;\n    }\n  | {\n      type: 'form';\n    }\n  | {\n      type: 'field-explorer';\n    };\n\ninterface TemplateEditorPageProps {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nexport function TemplateEditorPage(props: TemplateEditorPageProps) {\n  const [selection, setSelection] = useState<Selection>();\n  const navigate = useNavigate();\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: undefined,\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: () => navigate(tasksLink()),\n    onCreateClicked: () => navigate(createLink()),\n  };\n\n  let content: JSX.Element | null = null;\n  if (selection?.type === 'local') {\n    content = (\n      <TemplateEditor\n        directory={selection.directory}\n        fieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'form') {\n    content = (\n      <TemplateFormPreviewer\n        defaultPreviewTemplate={props.defaultPreviewTemplate}\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'field-explorer') {\n    content = (\n      <CustomFieldExplorer\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n      />\n    );\n  } else {\n    content = (\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => setSelection({ type: 'local', directory }))\n                .catch(() => {});\n            } else if (option === 'form') {\n              setSelection({ type: 'form' });\n            } else if (option === 'field-explorer') {\n              setSelection({ type: 'field-explorer' });\n            }\n          }}\n        />\n      </Content>\n    );\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Template Editor\"\n        subtitle=\"Edit, preview, and try out templates and template forms\"\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      {content}\n    </Page>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+import { StreamLanguage } from '@codemirror/language';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { showPanel } from '@codemirror/view';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles } from '@material-ui/core/styles';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import { useKeyboardEvent } from '@react-hookz/web';
+import CodeMirror from '@uiw/react-codemirror';
+import React, { useMemo } from 'react';
+import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  codeMirror: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  errorPanel: {
+    color: theme.palette.error.main,
+    lineHeight: 2,
+    margin: theme.spacing(0, 1)
+  },
+  floatingButtons: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: theme.spacing(3)
+  },
+  floatingButton: {
+    padding: theme.spacing(1)
+  }
+}));
+function TemplateEditorTextArea(props) {
+  const { errorText } = props;
+  const classes = useStyles();
+  const panelExtension = useMemo(() => {
+    if (!errorText) {
+      return showPanel.of(null);
+    }
+    const dom = document.createElement("div");
+    dom.classList.add(classes.errorPanel);
+    dom.textContent = errorText;
+    return showPanel.of(() => ({ dom, bottom: true }));
+  }, [classes, errorText]);
+  useKeyboardEvent(
+    (e) => e.key === "s" && (e.ctrlKey || e.metaKey),
+    (e) => {
+      e.preventDefault();
+      if (props.onSave) {
+        props.onSave();
+      }
+    }
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
+    CodeMirror,
+    {
+      className: classes.codeMirror,
+      theme: "dark",
+      height: "100%",
+      extensions: [StreamLanguage.define(yaml), panelExtension],
+      value: props.content,
+      onChange: props.onUpdate
+    }
+  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip, { title: "Save file" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      className: classes.floatingButton,
+      onClick: () => {
+        var _a;
+        return (_a = props.onSave) == null ? void 0 : _a.call(props);
+      }
+    },
+    /* @__PURE__ */ React.createElement(SaveIcon, null)
+  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      className: classes.floatingButton,
+      onClick: () => {
+        var _a;
+        return (_a = props.onReload) == null ? void 0 : _a.call(props);
+      }
+    },
+    /* @__PURE__ */ React.createElement(RefreshIcon, null)
+  )))));
+}
+function TemplateEditorDirectoryEditorTextArea(props) {
+  var _a, _b;
+  const directoryEditor = useDirectoryEditor();
+  const actions = ((_a = directoryEditor.selectedFile) == null ? void 0 : _a.dirty) ? {
+    onSave: () => directoryEditor.save(),
+    onReload: () => directoryEditor.reload()
+  } : {
+    onReload: () => directoryEditor.reload()
+  };
+  return /* @__PURE__ */ React.createElement(
+    TemplateEditorTextArea,
+    {
+      errorText: props.errorText,
+      content: (_b = directoryEditor.selectedFile) == null ? void 0 : _b.content,
+      onUpdate: (content) => {
+        var _a2;
+        return (_a2 = directoryEditor.selectedFile) == null ? void 0 : _a2.updateContent(content);
+      },
+      ...actions
+    }
+  );
+}
+TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
+
+export { TemplateEditorDirectoryEditorTextArea, TemplateEditorTextArea };
+//# sourceMappingURL=TemplateEditorTextArea.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateEditorTextArea.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  codeMirror: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip title=\"Save file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip title=\"Reload file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const directoryEditor = useDirectoryEditor();\n\n  const actions = directoryEditor.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content => directoryEditor.selectedFile?.updateContent(content)}\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport","_a"],"mappings":"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"}