@backstage/plugin-scaffolder 1.12.0 → 1.13.0-next.1

package/dist/esm/TemplateEditorIntro-644bad26.esm.js

@@ -0,0 +1,1128 @@
+import React, { Fragment, createContext, useState, useRef, useCallback, useMemo, useContext, useEffect, Children } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
+import { makeStyles, Box, Typography, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Chip, Card, List, MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton as IconButton$1, Divider as Divider$1 } from '@material-ui/core';
+import classNames from 'classnames';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useApi } from '@backstage/core-plugin-api';
+import { Progress, ErrorPage, MarkdownContent, Page, Header, Content, CodeSnippet, ErrorPanel, LogViewer } from '@backstage/core-components';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AllIcon from '@material-ui/icons/FontDownload';
+import Accordion$1 from '@material-ui/core/Accordion';
+import AccordionDetails$1 from '@material-ui/core/AccordionDetails';
+import AccordionSummary$1 from '@material-ui/core/AccordionSummary';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import Typography$1 from '@material-ui/core/Typography';
+import ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
+import { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
+import yaml from 'yaml';
+import IconButton from '@material-ui/core/IconButton';
+import List$1 from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon$1 from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText$1 from '@material-ui/core/ListItemText';
+import Cancel from '@material-ui/icons/Cancel';
+import Check from '@material-ui/icons/Check';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import Box$1 from '@material-ui/core/Box';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import CodeMirror from '@uiw/react-codemirror';
+import { l as TaskStatusStepper, n as TaskPageLinks } from './TaskPage-589238dc.esm.js';
+import CloseIcon from '@material-ui/icons/Close';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import TreeView from '@material-ui/lab/TreeView';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+import { showPanel } from '@codemirror/view';
+import Card$1 from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import Tooltip$1 from '@material-ui/core/Tooltip';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+
+const useStyles$9 = makeStyles((theme) => ({
+  code: {
+    fontFamily: "Menlo, monospace",
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
+    display: "inline-block",
+    borderRadius: 5,
+    border: `1px solid ${theme.palette.grey[500]}`,
+    position: "relative"
+  },
+  codeRequired: {
+    "&::after": {
+      position: "absolute",
+      content: '"*"',
+      top: 0,
+      right: theme.spacing(0.5),
+      fontWeight: "bolder",
+      color: theme.palette.error.light
+    }
+  }
+}));
+const ExamplesTable = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, props.examples.map((example, index) => {
+    return /* @__PURE__ */ React.createElement(Fragment, { key: `example-${index}` }, /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 3 }, /* @__PURE__ */ React.createElement(Box, { padding: 4 }, /* @__PURE__ */ React.createElement(Typography, null, example.description))), /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 9 }, /* @__PURE__ */ React.createElement(Box, { padding: 1 }, /* @__PURE__ */ React.createElement(
+      CodeSnippet,
+      {
+        text: example.example,
+        showLineNumbers: true,
+        showCopyCodeButton: true,
+        language: "yaml"
+      }
+    ))));
+  }));
+};
+const ActionsPage = () => {
+  const api = useApi(scaffolderApiRef);
+  const classes = useStyles$9();
+  const { loading, value, error } = useAsync(async () => {
+    return api.listActions();
+  });
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(
+      ErrorPage,
+      {
+        statusMessage: "Failed to load installed actions",
+        status: "500"
+      }
+    );
+  }
+  const formatRows = (input) => {
+    const properties = input.properties;
+    if (!properties) {
+      return void 0;
+    }
+    return Object.entries(properties).map((entry) => {
+      var _a;
+      const [key] = entry;
+      const props = entry[1];
+      const codeClassname = classNames(classes.code, {
+        [classes.codeRequired]: (_a = input.required) == null ? void 0 : _a.includes(key)
+      });
+      return /* @__PURE__ */ React.createElement(TableRow, { key }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", { className: codeClassname }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(React.Fragment, null, [props.type].flat().map((type) => /* @__PURE__ */ React.createElement(Chip, { label: type, key: type })))));
+    });
+  };
+  const renderTable = (input) => {
+    if (!input.properties) {
+      return void 0;
+    }
+    return /* @__PURE__ */ React.createElement(TableContainer, { component: Paper }, /* @__PURE__ */ React.createElement(Table, { size: "small" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Name"), /* @__PURE__ */ React.createElement(TableCell, null, "Title"), /* @__PURE__ */ React.createElement(TableCell, null, "Description"), /* @__PURE__ */ React.createElement(TableCell, null, "Type"))), /* @__PURE__ */ React.createElement(TableBody, null, formatRows(input))));
+  };
+  const renderTables = (name, input) => {
+    if (!input) {
+      return void 0;
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, name), input.map((i, index) => /* @__PURE__ */ React.createElement("div", { key: index }, renderTable(i))));
+  };
+  const items = value == null ? void 0 : value.map((action) => {
+    var _a, _b, _c, _d;
+    if (action.id.startsWith("legacy:")) {
+      return void 0;
+    }
+    const oneOf = renderTables("oneOf", (_b = (_a = action.schema) == null ? void 0 : _a.input) == null ? void 0 : _b.oneOf);
+    return /* @__PURE__ */ React.createElement(Box, { pb: 4, key: action.id }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", className: classes.code }, action.id), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: action.description }), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Output"), renderTable(action.schema.output)), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Examples")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
+  });
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a New Component",
+      title: "Installed actions",
+      subtitle: "This is the collection of all installed actions"
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, items));
+};
+
+const useStyles$8 = makeStyles(
+  (theme) => ({
+    root: {
+      backgroundColor: "rgba(0, 0, 0, .11)",
+      boxShadow: "none",
+      margin: theme.spacing(1, 0, 1, 0)
+    },
+    title: {
+      margin: theme.spacing(1, 0, 0, 1),
+      textTransform: "uppercase",
+      fontSize: 12,
+      fontWeight: "bold"
+    },
+    listIcon: {
+      minWidth: 30,
+      color: theme.palette.text.primary
+    },
+    menuItem: {
+      minHeight: theme.spacing(6)
+    },
+    groupWrapper: {
+      margin: theme.spacing(1, 1, 2, 1)
+    }
+  }),
+  {
+    name: "ScaffolderReactOwnerListPicker"
+  }
+);
+function getFilterGroups() {
+  return [
+    {
+      name: "Task Owner",
+      items: [
+        {
+          id: "owned",
+          label: "Owned",
+          icon: SettingsIcon
+        },
+        {
+          id: "all",
+          label: "All",
+          icon: AllIcon
+        }
+      ]
+    }
+  ];
+}
+const OwnerListPicker = (props) => {
+  const { filter, onSelectOwner } = props;
+  const classes = useStyles$8();
+  const filterGroups = getFilterGroups();
+  return /* @__PURE__ */ React.createElement(Card, { className: classes.root }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, { key: group.name }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.title }, group.name), /* @__PURE__ */ React.createElement(Card, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List, { disablePadding: true, dense: true }, group.items.map((item) => /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      key: item.id,
+      button: true,
+      divider: true,
+      onClick: () => onSelectOwner(item.id),
+      selected: item.id === filter,
+      className: classes.menuItem,
+      "data-testid": `owner-picker-${item.id}`
+    },
+    item.icon && /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listIcon }, /* @__PURE__ */ React.createElement(item.icon, { fontSize: "small" })),
+    /* @__PURE__ */ React.createElement(ListItemText, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, item.label))
+  )))))));
+};
+
+const showDirectoryPicker = window.showDirectoryPicker;
+class WebFileAccess {
+  constructor(path, handle) {
+    this.path = path;
+    this.handle = handle;
+  }
+  file() {
+    return this.handle.getFile();
+  }
+  async save(data) {
+    const writable = await this.handle.createWritable();
+    await writable.write(data);
+    await writable.close();
+  }
+}
+class WebDirectoryAccess {
+  constructor(handle) {
+    this.handle = handle;
+  }
+  async listFiles() {
+    const content = [];
+    for await (const entry of this.listDirectoryContents(this.handle)) {
+      content.push(entry);
+    }
+    return content;
+  }
+  async *listDirectoryContents(dirHandle, basePath = []) {
+    for await (const handle of dirHandle.values()) {
+      if (handle.kind === "file") {
+        yield new WebFileAccess([...basePath, handle.name].join("/"), handle);
+      } else if (handle.kind === "directory") {
+        if (handle.name === ".git") {
+          continue;
+        }
+        yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
+      }
+    }
+  }
+}
+class WebFileSystemAccess {
+  static isSupported() {
+    return Boolean(showDirectoryPicker);
+  }
+  static async requestDirectoryAccess() {
+    if (!showDirectoryPicker) {
+      throw new Error("File system access is not supported");
+    }
+    const handle = await showDirectoryPicker();
+    return new WebDirectoryAccess(handle);
+  }
+  constructor() {
+  }
+}
+
+const MAX_CONTENT_SIZE = 64 * 1024;
+const CHUNK_SIZE = 32 * 1024;
+const DryRunContext = createContext(void 0);
+function base64EncodeContent(content) {
+  if (content.length > MAX_CONTENT_SIZE) {
+    return window.btoa("<file too large>");
+  }
+  try {
+    return window.btoa(content);
+  } catch {
+    const decoder = new TextEncoder();
+    const buffer = decoder.encode(content);
+    const chunks = new Array();
+    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
+      chunks.push(
+        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
+      );
+    }
+    return window.btoa(chunks.join(""));
+  }
+}
+function DryRunProvider(props) {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [state, setState] = useState({
+    results: [],
+    selectedResult: void 0
+  });
+  const idRef = useRef(1);
+  const selectResult = useCallback((id) => {
+    setState((prevState) => {
+      const result = prevState.results.find((r) => r.id === id);
+      if (result === prevState.selectedResult) {
+        return prevState;
+      }
+      return {
+        results: prevState.results,
+        selectedResult: result
+      };
+    });
+  }, []);
+  const deleteResult = useCallback((id) => {
+    setState((prevState) => {
+      var _a;
+      const index = prevState.results.findIndex((r) => r.id === id);
+      if (index === -1) {
+        return prevState;
+      }
+      const newResults = prevState.results.slice();
+      const [deleted] = newResults.splice(index, 1);
+      return {
+        results: newResults,
+        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
+      };
+    });
+  }, []);
+  const execute = useCallback(
+    async (options) => {
+      if (!scaffolderApi.dryRun) {
+        throw new Error("Scaffolder API does not support dry-run");
+      }
+      const parsed = yaml.parse(options.templateContent);
+      const response = await scaffolderApi.dryRun({
+        template: parsed,
+        values: options.values,
+        secrets: {},
+        directoryContents: options.files.map((file) => ({
+          path: file.path,
+          base64Content: base64EncodeContent(file.content)
+        }))
+      });
+      const result = {
+        ...response,
+        id: idRef.current++
+      };
+      setState((prevState) => {
+        var _a;
+        return {
+          results: [...prevState.results, result],
+          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
+        };
+      });
+    },
+    [scaffolderApi]
+  );
+  const dryRun = useMemo(
+    () => ({
+      ...state,
+      selectResult,
+      deleteResult,
+      execute
+    }),
+    [state, selectResult, deleteResult, execute]
+  );
+  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
+}
+function useDryRun() {
+  const value = useContext(DryRunContext);
+  if (!value) {
+    throw new Error("must be used within a DryRunProvider");
+  }
+  return value;
+}
+
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _access, _signalUpdate, _content, _savedContent, _access2, _listeners, _files, _selectedFile, _signalUpdate2;
+const MAX_SIZE = 1024 * 1024;
+const MAX_SIZE_MESSAGE = "This file is too large to be displayed";
+class DirectoryEditorFileManager {
+  constructor(access, signalUpdate) {
+    __privateAdd(this, _access, void 0);
+    __privateAdd(this, _signalUpdate, void 0);
+    __privateAdd(this, _content, void 0);
+    __privateAdd(this, _savedContent, void 0);
+    __privateSet(this, _access, access);
+    __privateSet(this, _signalUpdate, signalUpdate);
+  }
+  get path() {
+    return __privateGet(this, _access).path;
+  }
+  get content() {
+    var _a;
+    return (_a = __privateGet(this, _content)) != null ? _a : MAX_SIZE_MESSAGE;
+  }
+  updateContent(content) {
+    if (__privateGet(this, _content) === void 0) {
+      return;
+    }
+    __privateSet(this, _content, content);
+    __privateGet(this, _signalUpdate).call(this);
+  }
+  get dirty() {
+    return __privateGet(this, _content) !== __privateGet(this, _savedContent);
+  }
+  async save() {
+    if (__privateGet(this, _content) !== void 0) {
+      await __privateGet(this, _access).save(__privateGet(this, _content));
+      __privateSet(this, _savedContent, __privateGet(this, _content));
+      __privateGet(this, _signalUpdate).call(this);
+    }
+  }
+  async reload() {
+    const file = await __privateGet(this, _access).file();
+    if (file.size > MAX_SIZE) {
+      if (__privateGet(this, _content) !== void 0) {
+        __privateSet(this, _content, void 0);
+        __privateSet(this, _savedContent, void 0);
+        __privateGet(this, _signalUpdate).call(this);
+      }
+      return;
+    }
+    const content = await file.text();
+    if (__privateGet(this, _content) !== content) {
+      __privateSet(this, _content, content);
+      __privateSet(this, _savedContent, content);
+      __privateGet(this, _signalUpdate).call(this);
+    }
+  }
+}
+_access = new WeakMap();
+_signalUpdate = new WeakMap();
+_content = new WeakMap();
+_savedContent = new WeakMap();
+class DirectoryEditorManager {
+  constructor(access) {
+    __privateAdd(this, _access2, void 0);
+    __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
+    __privateAdd(this, _files, []);
+    __privateAdd(this, _selectedFile, void 0);
+    this.setSelectedFile = (path) => {
+      const prev = __privateGet(this, _selectedFile);
+      const next = __privateGet(this, _files).find((file) => file.path === path);
+      if (prev !== next) {
+        __privateSet(this, _selectedFile, next);
+        __privateGet(this, _signalUpdate2).call(this);
+      }
+    };
+    __privateAdd(this, _signalUpdate2, () => {
+      __privateGet(this, _listeners).forEach((listener) => listener());
+    });
+    __privateSet(this, _access2, access);
+  }
+  get files() {
+    return __privateGet(this, _files);
+  }
+  get selectedFile() {
+    return __privateGet(this, _selectedFile);
+  }
+  get dirty() {
+    return __privateGet(this, _files).some((file) => file.dirty);
+  }
+  async save() {
+    await Promise.all(__privateGet(this, _files).map((file) => file.save()));
+  }
+  async reload() {
+    var _a;
+    const selectedPath = (_a = __privateGet(this, _selectedFile)) == null ? void 0 : _a.path;
+    const files = await __privateGet(this, _access2).listFiles();
+    const fileManagers = await Promise.all(
+      files.map(async (file) => {
+        const manager = new DirectoryEditorFileManager(
+          file,
+          __privateGet(this, _signalUpdate2)
+        );
+        await manager.reload();
+        return manager;
+      })
+    );
+    __privateGet(this, _files).length = 0;
+    __privateGet(this, _files).push(...fileManagers);
+    this.setSelectedFile(selectedPath);
+    __privateGet(this, _signalUpdate2).call(this);
+  }
+  subscribe(listener) {
+    __privateGet(this, _listeners).add(listener);
+    return () => {
+      __privateGet(this, _listeners).delete(listener);
+    };
+  }
+}
+_access2 = new WeakMap();
+_listeners = new WeakMap();
+_files = new WeakMap();
+_selectedFile = new WeakMap();
+_signalUpdate2 = new WeakMap();
+const DirectoryEditorContext = createContext(
+  void 0
+);
+function useDirectoryEditor() {
+  const value = useContext(DirectoryEditorContext);
+  const rerender = useRerender();
+  useEffect(() => value == null ? void 0 : value.subscribe(rerender), [value, rerender]);
+  if (!value) {
+    throw new Error("must be used within a DirectoryEditorProvider");
+  }
+  return value;
+}
+function DirectoryEditorProvider(props) {
+  const { directory } = props;
+  const [{ result, error }, { execute }] = useAsync$1(
+    async (dir) => {
+      const manager = new DirectoryEditorManager(dir);
+      await manager.reload();
+      const firstYaml = manager.files.find((file) => file.path.match(/\.ya?ml$/));
+      if (firstYaml) {
+        manager.setSelectedFile(firstYaml.path);
+      }
+      return manager;
+    }
+  );
+  useEffect(() => {
+    execute(directory);
+  }, [execute, directory]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
+  } else if (!result) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
+}
+
+const useStyles$7 = makeStyles$1((theme) => ({
+  root: {
+    overflowY: "auto",
+    background: theme.palette.background.default
+  },
+  iconSuccess: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.ok
+  },
+  iconFailure: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.error
+  }
+}));
+function DryRunResultsList() {
+  const classes = useStyles$7();
+  const dryRun = useDryRun();
+  return /* @__PURE__ */ React.createElement(List$1, { className: classes.root, dense: true }, dryRun.results.map((result) => {
+    var _a;
+    const failed = result.log.some((l) => l.body.status === "failed");
+    return /* @__PURE__ */ React.createElement(
+      ListItem,
+      {
+        button: true,
+        key: result.id,
+        selected: ((_a = dryRun.selectedResult) == null ? void 0 : _a.id) === result.id,
+        onClick: () => dryRun.selectResult(result.id)
+      },
+      /* @__PURE__ */ React.createElement(
+        ListItemIcon$1,
+        {
+          className: failed ? classes.iconFailure : classes.iconSuccess
+        },
+        failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)
+      ),
+      /* @__PURE__ */ React.createElement(ListItemText$1, { primary: `Result ${result.id}` }),
+      /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          edge: "end",
+          "aria-label": "delete",
+          onClick: () => dryRun.deleteResult(result.id)
+        },
+        /* @__PURE__ */ React.createElement(DeleteIcon, null)
+      ))
+    );
+  }));
+}
+
+const useStyles$6 = makeStyles$1({
+  root: {
+    whiteSpace: "nowrap",
+    overflowY: "auto"
+  }
+});
+function parseFileEntires(paths) {
+  const root = {
+    type: "directory",
+    name: "",
+    path: "",
+    children: []
+  };
+  for (const path of paths.slice().sort()) {
+    const parts = path.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (part === "") {
+        throw new Error(`Invalid path part: ''`);
+      }
+      const entryPath = parts.slice(0, i + 1).join("/");
+      const existing = current.children.find((child) => child.name === part);
+      if ((existing == null ? void 0 : existing.type) === "file") {
+        throw new Error(`Duplicate filename at '${entryPath}'`);
+      } else if (existing) {
+        current = existing;
+      } else {
+        if (i < parts.length - 1) {
+          const newEntry = {
+            type: "directory",
+            name: part,
+            path: entryPath,
+            children: []
+          };
+          const firstFileIndex = current.children.findIndex(
+            (child) => child.type === "file"
+          );
+          current.children.splice(firstFileIndex, 0, newEntry);
+          current = newEntry;
+        } else {
+          current.children.push({
+            type: "file",
+            name: part,
+            path: entryPath
+          });
+        }
+      }
+    }
+  }
+  return root.children;
+}
+function FileTreeItem({ entry }) {
+  if (entry.type === "file") {
+    return /* @__PURE__ */ React.createElement(TreeItem, { nodeId: entry.path, label: entry.name });
+  }
+  return /* @__PURE__ */ React.createElement(TreeItem, { nodeId: entry.path, label: entry.name }, entry.children.map((child) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: child.path, entry: child })));
+}
+function FileBrowser(props) {
+  const classes = useStyles$6();
+  const fileTree = useMemo(
+    () => parseFileEntires(props.filePaths),
+    [props.filePaths]
+  );
+  return /* @__PURE__ */ React.createElement(
+    TreeView,
+    {
+      selected: props.selected,
+      className: classes.root,
+      defaultCollapseIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+      defaultExpandIcon: /* @__PURE__ */ React.createElement(ChevronRightIcon, null),
+      onNodeSelect: (_e, nodeId) => {
+        if (props.onSelect && props.filePaths.includes(nodeId)) {
+          props.onSelect(nodeId);
+        }
+      }
+    },
+    fileTree.map((entry) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: entry.path, entry }))
+  );
+}
+
+const useStyles$5 = makeStyles$1((theme) => ({
+  root: {
+    display: "grid",
+    gridTemplateColumns: "280px auto 3fr",
+    gridTemplateRows: "1fr"
+  },
+  child: {
+    overflowY: "auto",
+    height: "100%",
+    minHeight: 0
+  },
+  firstChild: {
+    background: theme.palette.background.paper
+  }
+}));
+function DryRunResultsSplitView(props) {
+  const classes = useStyles$5();
+  const childArray = Children.toArray(props.children);
+  if (childArray.length !== 2) {
+    throw new Error("must have exactly 2 children");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
+}
+
+const useStyles$4 = makeStyles$1({
+  root: {
+    display: "flex",
+    flexFlow: "column nowrap"
+  },
+  contentWrapper: {
+    flex: 1,
+    position: "relative"
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    "& > *": {
+      flex: 1
+    }
+  },
+  codeMirror: {
+    height: "100%",
+    overflowY: "auto"
+  }
+});
+function FilesContent() {
+  const classes = useStyles$4();
+  const { selectedResult } = useDryRun();
+  const [selectedPath, setSelectedPath] = useState("");
+  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
+    (f) => f.path === selectedPath
+  );
+  useEffect(() => {
+    if (selectedResult) {
+      const [firstFile] = selectedResult.directoryContents;
+      if (firstFile) {
+        setSelectedPath(firstFile.path);
+      } else {
+        setSelectedPath("");
+      }
+    }
+    return void 0;
+  }, [selectedResult]);
+  if (!selectedResult) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
+    FileBrowser,
+    {
+      selected: selectedPath,
+      onSelect: setSelectedPath,
+      filePaths: selectedResult.directoryContents.map((file) => file.path)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    CodeMirror,
+    {
+      className: classes.codeMirror,
+      theme: "dark",
+      height: "100%",
+      extensions: [StreamLanguage.define(yaml$1)],
+      readOnly: true,
+      value: (selectedFile == null ? void 0 : selectedFile.base64Content) ? atob(selectedFile.base64Content) : ""
+    }
+  ));
+}
+function LogContent() {
+  var _a, _b;
+  const { selectedResult } = useDryRun();
+  const [currentStepId, setUserSelectedStepId] = useState();
+  const steps = useMemo(() => {
+    var _a2;
+    if (!selectedResult) {
+      return [];
+    }
+    return (_a2 = selectedResult.steps.map((step) => {
+      var _a3, _b2;
+      const stepLog = selectedResult.log.filter(
+        (l) => l.body.stepId === step.id
+      );
+      return {
+        id: step.id,
+        name: step.name,
+        logString: stepLog.map((l) => l.body.message).join("\n"),
+        status: (_b2 = (_a3 = stepLog[stepLog.length - 1]) == null ? void 0 : _a3.body.status) != null ? _b2 : "completed"
+      };
+    })) != null ? _a2 : [];
+  }, [selectedResult]);
+  if (!selectedResult) {
+    return null;
+  }
+  const selectedStep = (_a = steps.find((s) => s.id === currentStepId)) != null ? _a : steps[0];
+  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
+    TaskStatusStepper,
+    {
+      steps,
+      currentStepId: selectedStep.id,
+      onUserStepChange: setUserSelectedStepId
+    }
+  ), /* @__PURE__ */ React.createElement(LogViewer, { text: (_b = selectedStep == null ? void 0 : selectedStep.logString) != null ? _b : "" }));
+}
+function OutputContent() {
+  var _a, _b;
+  const classes = useStyles$4();
+  const { selectedResult } = useDryRun();
+  if (!selectedResult) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(Box$1, { pt: 2 }, ((_b = (_a = selectedResult.output) == null ? void 0 : _a.links) == null ? void 0 : _b.length) && /* @__PURE__ */ React.createElement(TaskPageLinks, { output: selectedResult.output })), /* @__PURE__ */ React.createElement(
+    CodeMirror,
+    {
+      className: classes.codeMirror,
+      theme: "dark",
+      height: "100%",
+      extensions: [StreamLanguage.define(yaml$1)],
+      readOnly: true,
+      value: JSON.stringify(selectedResult.output, null, 2)
+    }
+  ));
+}
+function DryRunResultsView() {
+  const classes = useStyles$4();
+  const [selectedTab, setSelectedTab] = useState(
+    "files"
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tabs, { value: selectedTab, onChange: (_, v) => setSelectedTab(v) }, /* @__PURE__ */ React.createElement(Tab, { value: "files", label: "Files" }), /* @__PURE__ */ React.createElement(Tab, { value: "log", label: "Log" }), /* @__PURE__ */ React.createElement(Tab, { value: "output", label: "Output" })), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
+}
+
+const useStyles$3 = makeStyles$1((theme) => ({
+  header: {
+    height: 48,
+    minHeight: 0,
+    "&.Mui-expanded": {
+      height: 48,
+      minHeight: 0
+    }
+  },
+  content: {
+    display: "grid",
+    background: theme.palette.background.default,
+    gridTemplateColumns: "180px auto 1fr",
+    gridTemplateRows: "1fr",
+    padding: 0,
+    height: 400
+  }
+}));
+function DryRunResults() {
+  const classes = useStyles$3();
+  const dryRun = useDryRun();
+  const [expanded, setExpanded] = useState(false);
+  const [hidden, setHidden] = useState(true);
+  const resultsLength = dryRun.results.length;
+  const prevResultsLength = usePrevious(resultsLength);
+  useEffect(() => {
+    if (prevResultsLength === 0 && resultsLength === 1) {
+      setHidden(false);
+      setExpanded(true);
+    } else if (prevResultsLength === 1 && resultsLength === 0) {
+      setExpanded(false);
+    }
+  }, [prevResultsLength, resultsLength]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Accordion$1,
+    {
+      variant: "outlined",
+      expanded,
+      hidden: resultsLength === 0 && hidden,
+      onChange: (_, exp) => setExpanded(exp),
+      onTransitionEnd: () => resultsLength === 0 && setHidden(true)
+    },
+    /* @__PURE__ */ React.createElement(
+      AccordionSummary$1,
+      {
+        className: classes.header,
+        expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon$1, null)
+      },
+      /* @__PURE__ */ React.createElement(Typography$1, null, "Dry-run results")
+    ),
+    /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }),
+    /* @__PURE__ */ React.createElement(AccordionDetails$1, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
+  ));
+}
+
+const useStyles$2 = makeStyles((theme) => ({
+  button: {
+    padding: theme.spacing(1)
+  },
+  buttons: {
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+  buttonsGap: {
+    flex: "1 1 auto"
+  },
+  buttonsDivider: {
+    marginBottom: theme.spacing(1)
+  }
+}));
+function TemplateEditorBrowser(props) {
+  var _a, _b;
+  const classes = useStyles$2();
+  const directoryEditor = useDirectoryEditor();
+  const changedFiles = directoryEditor.files.filter((file) => file.dirty);
+  const handleClose = () => {
+    if (!props.onClose) {
+      return;
+    }
+    if (changedFiles.length > 0) {
+      const accepted = window.confirm(
+        "Are you sure? Unsaved changes will be lost"
+      );
+      if (!accepted) {
+        return;
+      }
+    }
+    props.onClose();
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      className: classes.button,
+      disabled: directoryEditor.files.every((file) => !file.dirty),
+      onClick: () => directoryEditor.save()
+    },
+    /* @__PURE__ */ React.createElement(SaveIcon, null)
+  )), /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      className: classes.button,
+      onClick: () => directoryEditor.reload()
+    },
+    /* @__PURE__ */ React.createElement(RefreshIcon, null)
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton$1, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)))), /* @__PURE__ */ React.createElement(Divider$1, { className: classes.buttonsDivider }), /* @__PURE__ */ React.createElement(
+    FileBrowser,
+    {
+      selected: (_b = (_a = directoryEditor.selectedFile) == null ? void 0 : _a.path) != null ? _b : "",
+      onSelect: directoryEditor.setSelectedFile,
+      filePaths: directoryEditor.files.map((file) => file.path)
+    }
+  ));
+}
+
+const useStyles$1 = 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$1();
+  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$1), 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$1,
+    {
+      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$1,
+    {
+      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;
+
+const useStyles = makeStyles$1((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$1, { 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$1,
+      {
+        variant: "h5",
+        gutterBottom: true,
+        color: supportsLoad ? void 0 : "textSecondary",
+        style: { display: "flex", flexFlow: "row nowrap" }
+      },
+      "Load Template Directory"
+    ), /* @__PURE__ */ React.createElement(
+      Typography$1,
+      {
+        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$1,
+    {
+      placement: "top",
+      title: "Only supported in some Chromium-based browsers"
+    },
+    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
+  )));
+  const cardFormEditor = /* @__PURE__ */ React.createElement(Card$1, { 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$1, { variant: "h5", gutterBottom: true }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography$1, { 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$1, { 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$1, { variant: "h5", gutterBottom: true }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, "View and play around with available installed custom field extensions."))));
+  return /* @__PURE__ */ React.createElement("div", { style: props.style }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6", 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 { ActionsPage as A, DirectoryEditorProvider as D, OwnerListPicker as O, TemplateEditorBrowser as T, WebFileSystemAccess as W, useDirectoryEditor as a, DryRunProvider as b, TemplateEditorTextArea as c, DryRunResults as d, TemplateEditorIntro as e, useDryRun as u };
+//# sourceMappingURL=TemplateEditorIntro-644bad26.esm.js.map