@backstage/plugin-scaffolder 1.11.0 → 1.11.1-next.0

package/dist/esm/alpha/alpha-d9ed6c0a.esm.js

@@ -0,0 +1,3664 @@
+import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
+import { scaffolderApiRef, useTemplateSecrets, createScaffolderFieldExtension } from '@backstage/plugin-scaffolder-react';
+import { parseEntityRef, KubernetesValidatorFunctions, RELATION_OWNED_BY, makeValidator } from '@backstage/catalog-model';
+import { ResponseError } from '@backstage/errors';
+import qs from 'qs';
+import ObservableImpl from 'zen-observable';
+import { useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, useRouteRef, useApiHolder, useApp, useRouteRefParams, alertApiRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
+import { catalogApiRef, humanizeEntityRef, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { TextField, FormControl as FormControl$1, makeStyles as makeStyles$1, CircularProgress, Typography, Stepper, Step, StepButton, StepLabel, Box, LinearProgress, IconButton as IconButton$1, Popover as Popover$1, MenuList as MenuList$1, MenuItem as MenuItem$1, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, Paper, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Chip, Card, List as List$1, InputLabel as InputLabel$1, Select as Select$1, CardHeader, CardContent, Button, Tooltip, Divider as Divider$1 } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import React, { useCallback, useEffect, useState, useMemo, Fragment, createContext, useRef, useContext, Component, memo, Children } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import { Select, Progress, LogViewer, Page, Header, Content, ErrorPanel, ErrorPage, MarkdownContent, CodeSnippet, DismissableBanner, Link } from '@backstage/core-components';
+import useDebounce from 'react-use/lib/useDebounce';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
+import { useNavigate, useParams } from 'react-router-dom';
+import 'lodash/capitalize';
+import '@material-ui/icons/CheckBox';
+import '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import '@material-ui/core/useMediaQuery';
+import '@material-ui/icons/AddCircleOutline';
+import '@backstage/plugin-catalog-common/alpha';
+import '@backstage/plugin-permission-react';
+import { DefaultTemplateOutputs, Stepper as Stepper$1, Form } from '@backstage/plugin-scaffolder-react/alpha';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Description from '@material-ui/icons/Description';
+import Edit from '@material-ui/icons/Edit';
+import List from '@material-ui/icons/List';
+import MoreVert from '@material-ui/icons/MoreVert';
+import { useImmerReducer } from 'use-immer';
+import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
+import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
+import classNames from 'classnames';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import useInterval from 'react-use/lib/useInterval';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration$1 from 'humanize-duration';
+import { useMountEffect, useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
+import Retry from '@material-ui/icons/Repeat';
+import Toc from '@material-ui/icons/Toc';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AllIcon from '@material-ui/icons/FontDownload';
+import Typography$1 from '@material-ui/core/Typography';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import CloseIcon from '@material-ui/icons/Close';
+import CodeMirror from '@uiw/react-codemirror';
+import yaml from 'yaml';
+import validator from '@rjsf/validator-ajv8';
+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 ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
+import List$2 from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import CancelIcon from '@material-ui/icons/Cancel';
+import CheckIcon from '@material-ui/icons/Check';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Box$1 from '@material-ui/core/Box';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import Grid$1 from '@material-ui/core/Grid';
+import Step$1 from '@material-ui/core/Step';
+import StepLabel$1 from '@material-ui/core/StepLabel';
+import Stepper$2 from '@material-ui/core/Stepper';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import LanguageIcon from '@material-ui/icons/Language';
+import TreeView from '@material-ui/lab/TreeView';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import { showPanel } from '@codemirror/view';
+import Card$1 from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent$1 from '@material-ui/core/CardContent';
+import Tooltip$1 from '@material-ui/core/Tooltip';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+
+class ScaffolderClient {
+  constructor(options) {
+    var _a, _b;
+    this.discoveryApi = options.discoveryApi;
+    this.fetchApi = (_a = options.fetchApi) != null ? _a : { fetch };
+    this.scmIntegrationsApi = options.scmIntegrationsApi;
+    this.useLongPollingLogs = (_b = options.useLongPollingLogs) != null ? _b : false;
+    this.identityApi = options.identityApi;
+  }
+  async listTasks(options) {
+    if (!this.identityApi) {
+      throw new Error(
+        "IdentityApi is not available in the ScaffolderClient, please pass through the IdentityApi to the ScaffolderClient constructor in order to use the listTasks method"
+      );
+    }
+    const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
+    const { userEntityRef } = await this.identityApi.getBackstageIdentity();
+    const query = qs.stringify(
+      options.filterByOwnership === "owned" ? { createdBy: userEntityRef } : {}
+    );
+    const response = await this.fetchApi.fetch(`${baseUrl}/v2/tasks?${query}`);
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return await response.json();
+  }
+  async getIntegrationsList(options) {
+    const integrations = [
+      ...this.scmIntegrationsApi.azure.list(),
+      ...this.scmIntegrationsApi.bitbucket.list().filter(
+        (item) => !this.scmIntegrationsApi.bitbucketCloud.byHost(item.config.host) && !this.scmIntegrationsApi.bitbucketServer.byHost(item.config.host)
+      ),
+      ...this.scmIntegrationsApi.bitbucketCloud.list(),
+      ...this.scmIntegrationsApi.bitbucketServer.list(),
+      ...this.scmIntegrationsApi.gerrit.list(),
+      ...this.scmIntegrationsApi.github.list(),
+      ...this.scmIntegrationsApi.gitlab.list()
+    ].map((c) => ({ type: c.type, title: c.title, host: c.config.host })).filter((c) => options.allowedHosts.includes(c.host));
+    return {
+      integrations
+    };
+  }
+  async getTemplateParameterSchema(templateRef) {
+    const { namespace, kind, name } = parseEntityRef(templateRef, {
+      defaultKind: "template"
+    });
+    const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
+    const templatePath = [namespace, kind, name].map((s) => encodeURIComponent(s)).join("/");
+    const url = `${baseUrl}/v2/templates/${templatePath}/parameter-schema`;
+    const response = await this.fetchApi.fetch(url);
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    const schema = await response.json();
+    return schema;
+  }
+  async scaffold(options) {
+    const { templateRef, values, secrets = {} } = options;
+    const url = `${await this.discoveryApi.getBaseUrl("scaffolder")}/v2/tasks`;
+    const response = await this.fetchApi.fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        templateRef,
+        values: { ...values },
+        secrets
+      })
+    });
+    if (response.status !== 201) {
+      const status = `${response.status} ${response.statusText}`;
+      const body = await response.text();
+      throw new Error(`Backend request failed, ${status} ${body.trim()}`);
+    }
+    const { id } = await response.json();
+    return { taskId: id };
+  }
+  async getTask(taskId) {
+    const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
+    const url = `${baseUrl}/v2/tasks/${encodeURIComponent(taskId)}`;
+    const response = await this.fetchApi.fetch(url);
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return await response.json();
+  }
+  streamLogs(options) {
+    if (this.useLongPollingLogs) {
+      return this.streamLogsPolling(options);
+    }
+    return this.streamLogsEventStream(options);
+  }
+  async dryRun(options) {
+    const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
+    const response = await this.fetchApi.fetch(`${baseUrl}/v2/dry-run`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        template: options.template,
+        values: options.values,
+        secrets: options.secrets,
+        directoryContents: options.directoryContents
+      })
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return response.json();
+  }
+  streamLogsEventStream({
+    taskId,
+    after
+  }) {
+    return new ObservableImpl((subscriber) => {
+      const params = new URLSearchParams();
+      if (after !== void 0) {
+        params.set("after", String(Number(after)));
+      }
+      this.discoveryApi.getBaseUrl("scaffolder").then(
+        (baseUrl) => {
+          const url = `${baseUrl}/v2/tasks/${encodeURIComponent(
+            taskId
+          )}/eventstream`;
+          const eventSource = new EventSource(url, { withCredentials: true });
+          eventSource.addEventListener("log", (event) => {
+            if (event.data) {
+              try {
+                subscriber.next(JSON.parse(event.data));
+              } catch (ex) {
+                subscriber.error(ex);
+              }
+            }
+          });
+          eventSource.addEventListener("completion", (event) => {
+            if (event.data) {
+              try {
+                subscriber.next(JSON.parse(event.data));
+              } catch (ex) {
+                subscriber.error(ex);
+              }
+            }
+            eventSource.close();
+            subscriber.complete();
+          });
+          eventSource.addEventListener("error", (event) => {
+            subscriber.error(event);
+          });
+        },
+        (error) => {
+          subscriber.error(error);
+        }
+      );
+    });
+  }
+  streamLogsPolling({
+    taskId,
+    after: inputAfter
+  }) {
+    let after = inputAfter;
+    return new ObservableImpl((subscriber) => {
+      this.discoveryApi.getBaseUrl("scaffolder").then(async (baseUrl) => {
+        while (!subscriber.closed) {
+          const url = `${baseUrl}/v2/tasks/${encodeURIComponent(
+            taskId
+          )}/events?${qs.stringify({ after })}`;
+          const response = await this.fetchApi.fetch(url);
+          if (!response.ok) {
+            await new Promise((resolve) => setTimeout(resolve, 1e3));
+            continue;
+          }
+          const logs = await response.json();
+          for (const event of logs) {
+            after = Number(event.id);
+            subscriber.next(event);
+            if (event.type === "completion") {
+              subscriber.complete();
+              return;
+            }
+          }
+        }
+      });
+    });
+  }
+  async listActions() {
+    const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
+    const response = await this.fetchApi.fetch(`${baseUrl}/v2/actions`);
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return await response.json();
+  }
+}
+
+function makeFieldSchemaFromZod(returnSchema, uiOptionsSchema) {
+  return {
+    schema: {
+      returnValue: zodToJsonSchema(returnSchema),
+      uiOptions: uiOptionsSchema ? zodToJsonSchema(uiOptionsSchema) : void 0
+    },
+    type: null,
+    uiOptionsType: null
+  };
+}
+
+const entityQueryFilterExpressionSchema = z.record(
+  z.string().or(z.array(z.string()))
+);
+const EntityPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    /**
+     * @deprecated Use `catalogFilter` instead.
+     */
+    allowedKinds: z.array(z.string()).optional().describe(
+      "DEPRECATED: Use `catalogFilter` instead. List of kinds of entities to derive options from"
+    ),
+    defaultKind: z.string().optional().describe(
+      "The default entity kind. Options of this kind will not be prefixed."
+    ),
+    allowArbitraryValues: z.boolean().optional().describe("Whether to allow arbitrary user input. Defaults to true"),
+    defaultNamespace: z.union([z.string(), z.literal(false)]).optional().describe(
+      "The default namespace. Options with this namespace will not be prefixed."
+    ),
+    catalogFilter: z.array(entityQueryFilterExpressionSchema).or(entityQueryFilterExpressionSchema).optional().describe("List of key-value filter expression for entities")
+  })
+);
+const EntityPickerSchema = EntityPickerFieldSchema.schema;
+
+const EntityPicker = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    onChange,
+    schema: { title = "Entity", description = "An entity from the catalog" },
+    required,
+    uiSchema,
+    rawErrors,
+    formData,
+    idSchema
+  } = props;
+  const allowedKinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowedKinds;
+  const catalogFilter = ((_b = uiSchema["ui:options"]) == null ? void 0 : _b.catalogFilter) || allowedKinds && { kind: allowedKinds };
+  const defaultKind = (_c = uiSchema["ui:options"]) == null ? void 0 : _c.defaultKind;
+  const defaultNamespace = (_d = uiSchema["ui:options"]) == null ? void 0 : _d.defaultNamespace;
+  const catalogApi = useApi(catalogApiRef);
+  const { value: entities, loading } = useAsync(
+    () => catalogApi.getEntities(
+      catalogFilter ? { filter: catalogFilter } : void 0
+    )
+  );
+  const entityRefs = entities == null ? void 0 : entities.items.map(
+    (e) => humanizeEntityRef(e, { defaultKind, defaultNamespace })
+  );
+  const onSelect = useCallback(
+    (_, value) => {
+      onChange(value != null ? value : void 0);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    if ((entityRefs == null ? void 0 : entityRefs.length) === 1) {
+      onChange(entityRefs[0]);
+    }
+  }, [entityRefs, onChange]);
+  return /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData
+    },
+    /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        disabled: (entityRefs == null ? void 0 : entityRefs.length) === 1,
+        id: idSchema == null ? void 0 : idSchema.$id,
+        value: formData || "",
+        loading,
+        onChange: onSelect,
+        options: entityRefs || [],
+        autoSelect: true,
+        freeSolo: (_f = (_e = uiSchema["ui:options"]) == null ? void 0 : _e.allowArbitraryValues) != null ? _f : true,
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: title,
+            margin: "dense",
+            helperText: description,
+            FormHelperTextProps: { margin: "dense", style: { marginLeft: 0 } },
+            variant: "outlined",
+            required,
+            InputProps: params.InputProps
+          }
+        )
+      }
+    )
+  );
+};
+
+const entityNamePickerValidation = (value, validation) => {
+  if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
+    validation.addError(
+      "Must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters."
+    );
+  }
+};
+
+const EntityNamePickerFieldSchema = makeFieldSchemaFromZod(z.string());
+const EntityNamePickerSchema = EntityNamePickerFieldSchema.schema;
+
+const EntityNamePicker = (props) => {
+  const {
+    onChange,
+    required,
+    schema: { title = "Name", description = "Unique name of the component" },
+    rawErrors,
+    formData,
+    uiSchema: { "ui:autofocus": autoFocus },
+    idSchema,
+    placeholder
+  } = props;
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      id: idSchema == null ? void 0 : idSchema.$id,
+      label: title,
+      placeholder,
+      helperText: description,
+      required,
+      value: formData != null ? formData : "",
+      onChange: ({ target: { value } }) => onChange(value),
+      margin: "normal",
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData,
+      inputProps: { autoFocus }
+    }
+  );
+};
+
+const OwnerPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    /**
+     * @deprecated Use `catalogFilter` instead.
+     */
+    allowedKinds: z.array(z.string()).default(["Group", "User"]).optional().describe(
+      "DEPRECATED: Use `catalogFilter` instead. List of kinds of entities to derive options from. Defaults to Group and User"
+    ),
+    allowArbitraryValues: z.boolean().optional().describe("Whether to allow arbitrary user input. Defaults to true"),
+    defaultNamespace: z.union([z.string(), z.literal(false)]).optional().describe(
+      "The default namespace. Options with this namespace will not be prefixed."
+    ),
+    catalogFilter: z.array(entityQueryFilterExpressionSchema).or(entityQueryFilterExpressionSchema).optional().describe("List of key-value filter expression for entities")
+  })
+);
+const OwnerPickerSchema = OwnerPickerFieldSchema.schema;
+
+const OwnerPicker = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    schema: { title = "Owner", description = "The owner of the component" },
+    uiSchema,
+    ...restProps
+  } = props;
+  const defaultNamespace = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.defaultNamespace;
+  const allowedKinds = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.allowedKinds;
+  const catalogFilter = ((_c = uiSchema["ui:options"]) == null ? void 0 : _c.catalogFilter) || {
+    kind: allowedKinds || ["Group", "User"]
+  };
+  const ownerUiSchema = {
+    ...uiSchema,
+    "ui:options": {
+      catalogFilter,
+      defaultKind: "Group",
+      allowArbitraryValues: (_e = (_d = uiSchema["ui:options"]) == null ? void 0 : _d.allowArbitraryValues) != null ? _e : true,
+      ...defaultNamespace !== void 0 ? { defaultNamespace } : {}
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    EntityPicker,
+    {
+      ...restProps,
+      schema: { title, description },
+      uiSchema: ownerUiSchema
+    }
+  );
+};
+
+const RepoUrlPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    allowedHosts: z.array(z.string()).optional().describe("List of allowed SCM platform hosts"),
+    allowedOrganizations: z.array(z.string()).optional().describe("List of allowed organizations in the given SCM platform"),
+    allowedOwners: z.array(z.string()).optional().describe("List of allowed owners in the given SCM platform"),
+    allowedProjects: z.array(z.string()).optional().describe("List of allowed projects in the given SCM platform"),
+    allowedRepos: z.array(z.string()).optional().describe("List of allowed repos in the given SCM platform"),
+    requestUserCredentials: z.object({
+      secretsKey: z.string().describe(
+        "Key used within the template secrets context to store the credential"
+      ),
+      additionalScopes: z.object({
+        gerrit: z.array(z.string()).optional().describe("Additional Gerrit scopes to request"),
+        github: z.array(z.string()).optional().describe("Additional GitHub scopes to request"),
+        gitlab: z.array(z.string()).optional().describe("Additional GitLab scopes to request"),
+        bitbucket: z.array(z.string()).optional().describe("Additional BitBucket scopes to request"),
+        azure: z.array(z.string()).optional().describe("Additional Azure scopes to request")
+      }).optional().describe("Additional permission scopes to request")
+    }).optional().describe(
+      "If defined will request user credentials to auth against the given SCM platform"
+    )
+  })
+);
+const RepoUrlPickerSchema = RepoUrlPickerFieldSchema.schema;
+
+const repoPickerValidation = (value, validation, context) => {
+  var _a, _b;
+  try {
+    const { host, searchParams } = new URL(`https://${value}`);
+    const integrationApi = context.apiHolder.get(scmIntegrationsApiRef);
+    if (!host) {
+      validation.addError(
+        "Incomplete repository location provided, host not provided"
+      );
+    } else {
+      if (((_a = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _a.type) === "bitbucket") {
+        if (host === "bitbucket.org" && !searchParams.get("workspace")) {
+          validation.addError(
+            "Incomplete repository location provided, workspace not provided"
+          );
+        }
+        if (!searchParams.get("project")) {
+          validation.addError(
+            "Incomplete repository location provided, project not provided"
+          );
+        }
+      } else if (((_b = integrationApi == null ? void 0 : integrationApi.byHost(host)) == null ? void 0 : _b.type) !== "gerrit") {
+        if (!searchParams.get("owner")) {
+          validation.addError(
+            "Incomplete repository location provided, owner not provided"
+          );
+        }
+      }
+      if (!searchParams.get("repo")) {
+        validation.addError(
+          "Incomplete repository location provided, repo not provided"
+        );
+      }
+    }
+  } catch {
+    validation.addError("Unable to parse the Repository URL");
+  }
+};
+
+const GithubRepoPicker = (props) => {
+  const { allowedOwners = [], rawErrors, state, onChange } = props;
+  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
+  const { owner } = state;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !owner
+    },
+    (allowedOwners == null ? void 0 : allowedOwners.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Owner Available",
+        onChange: (s) => onChange({ owner: String(Array.isArray(s) ? s[0] : s) }),
+        disabled: allowedOwners.length === 1,
+        selected: owner,
+        items: ownerItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "ownerInput",
+        onChange: (e) => onChange({ owner: e.target.value }),
+        value: owner
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The organization, user or project that this repo will belong to")
+  ));
+};
+
+const GitlabRepoPicker = (props) => {
+  const { allowedOwners = [], state, onChange, rawErrors } = props;
+  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
+  const { owner } = state;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !owner
+    },
+    (allowedOwners == null ? void 0 : allowedOwners.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Owner Available",
+        onChange: (selected) => onChange({
+          owner: String(Array.isArray(selected) ? selected[0] : selected)
+        }),
+        disabled: allowedOwners.length === 1,
+        selected: owner,
+        items: ownerItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "ownerInput",
+        onChange: (e) => onChange({ owner: e.target.value }),
+        value: owner
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "GitLab namespace where this repository will belong to. It can be the name of organization, group, subgroup, user, or the project.")
+  ));
+};
+
+const AzureRepoPicker = (props) => {
+  const {
+    allowedOrganizations = [],
+    allowedOwners = [],
+    rawErrors,
+    state,
+    onChange
+  } = props;
+  const organizationItems = allowedOrganizations ? allowedOrganizations.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
+  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
+  const { organization, owner } = state;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !organization
+    },
+    (allowedOrganizations == null ? void 0 : allowedOrganizations.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Organization",
+        onChange: (s) => onChange({ organization: String(Array.isArray(s) ? s[0] : s) }),
+        disabled: allowedOrganizations.length === 1,
+        selected: organization,
+        items: organizationItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "orgInput" }, "Organization"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "orgInput",
+        onChange: (e) => onChange({ organization: e.target.value }),
+        value: organization
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Organization that this repo will belong to")
+  ), /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !owner
+    },
+    (allowedOwners == null ? void 0 : allowedOwners.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Owner",
+        onChange: (s) => onChange({ owner: String(Array.isArray(s) ? s[0] : s) }),
+        disabled: allowedOwners.length === 1,
+        selected: owner,
+        items: ownerItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Project"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "ownerInput",
+        onChange: (e) => onChange({ owner: e.target.value }),
+        value: owner
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Project that this repo will belong to")
+  ));
+};
+
+const BitbucketRepoPicker = (props) => {
+  const {
+    allowedOwners = [],
+    allowedProjects = [],
+    onChange,
+    rawErrors,
+    state
+  } = props;
+  const { host, workspace, project } = state;
+  const ownerItems = allowedOwners ? allowedOwners == null ? void 0 : allowedOwners.map((i) => ({ label: i, value: i })) : [];
+  const projectItems = allowedProjects ? allowedProjects == null ? void 0 : allowedProjects.map((i) => ({ label: i, value: i })) : [];
+  useEffect(() => {
+    if (host === "bitbucket.org" && allowedOwners.length) {
+      onChange({ workspace: allowedOwners[0] });
+    }
+  }, [allowedOwners, host, onChange]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, host === "bitbucket.org" && /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !workspace
+    },
+    (allowedOwners == null ? void 0 : allowedOwners.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Allowed Workspaces",
+        onChange: (s) => onChange({ workspace: String(Array.isArray(s) ? s[0] : s) }),
+        disabled: allowedOwners.length === 1,
+        selected: workspace,
+        items: ownerItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "workspaceInput" }, "Workspace"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "workspaceInput",
+        onChange: (e) => onChange({ workspace: e.target.value }),
+        value: workspace
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Workspace that this repo will belong to")
+  ), /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !project
+    },
+    (allowedProjects == null ? void 0 : allowedProjects.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Allowed Projects",
+        onChange: (s) => onChange({ project: String(Array.isArray(s) ? s[0] : s) }),
+        disabled: allowedProjects.length === 1,
+        selected: project,
+        items: projectItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "projectInput" }, "Project"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "projectInput",
+        onChange: (e) => onChange({ project: e.target.value }),
+        value: project
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Project that this repo will belong to")
+  ));
+};
+
+const GerritRepoPicker = (props) => {
+  const { onChange, rawErrors, state } = props;
+  const { workspace, owner } = state;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, { margin: "normal", error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !workspace }, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      id: "ownerInput",
+      onChange: (e) => onChange({ owner: e.target.value }),
+      value: owner
+    }
+  ), /* @__PURE__ */ React.createElement(FormHelperText, null, "The owner of the project (optional)")), /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !workspace
+    },
+    /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "parentInput" }, "Parent"),
+    /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "parentInput",
+        onChange: (e) => onChange({ workspace: e.target.value }),
+        value: workspace
+      }
+    ),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The project parent that the repo will belong to")
+  ));
+};
+
+const RepoUrlPickerHost = (props) => {
+  const { host, hosts, onChange, rawErrors } = props;
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const { value: { integrations } = { integrations: [] }, loading } = useAsync(
+    async () => {
+      return await scaffolderApi.getIntegrationsList({
+        allowedHosts: hosts != null ? hosts : []
+      });
+    }
+  );
+  useEffect(() => {
+    if (!host) {
+      if (hosts == null ? void 0 : hosts.length) {
+        onChange(hosts[0]);
+      } else if (integrations == null ? void 0 : integrations.length) {
+        onChange(integrations[0].host);
+      }
+    }
+  }, [hosts, host, onChange, integrations]);
+  const hostsOptions = integrations ? integrations.filter((i) => (hosts == null ? void 0 : hosts.length) ? hosts == null ? void 0 : hosts.includes(i.host) : true).map((i) => ({ label: i.title, value: i.host })) : [{ label: "Loading...", value: "loading" }];
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !host
+    },
+    /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        disabled: (hosts == null ? void 0 : hosts.length) === 1,
+        label: "Host",
+        onChange: (s) => onChange(String(Array.isArray(s) ? s[0] : s)),
+        selected: host,
+        items: hostsOptions,
+        "data-testid": "host-select"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The host where the repository will be created")
+  ));
+};
+
+const RepoUrlPickerRepoName = (props) => {
+  const { repoName, allowedRepos, onChange, rawErrors } = props;
+  useEffect(() => {
+    if (!repoName) {
+      if (allowedRepos == null ? void 0 : allowedRepos.length) {
+        onChange(allowedRepos[0]);
+      }
+    }
+  }, [allowedRepos, repoName, onChange]);
+  const repoItems = allowedRepos ? allowedRepos.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required: true,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !repoName
+    },
+    (allowedRepos == null ? void 0 : allowedRepos.length) ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        native: true,
+        label: "Repositories Available",
+        onChange: (selected) => String(Array.isArray(selected) ? selected[0] : selected),
+        disabled: allowedRepos.length === 1,
+        selected: repoName,
+        items: repoItems
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "repoNameInput" }, "Repository"), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        id: "repoNameInput",
+        onChange: (e) => onChange(String(e.target.value)),
+        value: repoName
+      }
+    )),
+    /* @__PURE__ */ React.createElement(FormHelperText, null, "The name of the repository")
+  ));
+};
+
+function serializeRepoPickerUrl(data) {
+  if (!data.host) {
+    return void 0;
+  }
+  const params = new URLSearchParams();
+  if (data.owner) {
+    params.set("owner", data.owner);
+  }
+  if (data.repoName) {
+    params.set("repo", data.repoName);
+  }
+  if (data.organization) {
+    params.set("organization", data.organization);
+  }
+  if (data.workspace) {
+    params.set("workspace", data.workspace);
+  }
+  if (data.project) {
+    params.set("project", data.project);
+  }
+  return `${data.host}?${params.toString()}`;
+}
+function parseRepoPickerUrl(url) {
+  let host = "";
+  let owner = "";
+  let repoName = "";
+  let organization = "";
+  let workspace = "";
+  let project = "";
+  try {
+    if (url) {
+      const parsed = new URL(`https://${url}`);
+      host = parsed.host;
+      owner = parsed.searchParams.get("owner") || "";
+      repoName = parsed.searchParams.get("repo") || "";
+      organization = parsed.searchParams.get("organization") || "";
+      workspace = parsed.searchParams.get("workspace") || "";
+      project = parsed.searchParams.get("project") || "";
+    }
+  } catch {
+  }
+  return { host, owner, repoName, organization, workspace, project };
+}
+
+const RepoUrlPicker = (props) => {
+  var _a, _b;
+  const { uiSchema, onChange, rawErrors, formData } = props;
+  const [state, setState] = useState(
+    parseRepoPickerUrl(formData)
+  );
+  const integrationApi = useApi(scmIntegrationsApiRef);
+  const scmAuthApi = useApi(scmAuthApiRef);
+  const { setSecrets } = useTemplateSecrets();
+  const allowedHosts = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedHosts) != null ? _b2 : [];
+    },
+    [uiSchema]
+  );
+  const allowedOrganizations = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedOrganizations) != null ? _b2 : [];
+    },
+    [uiSchema]
+  );
+  const allowedOwners = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedOwners) != null ? _b2 : [];
+    },
+    [uiSchema]
+  );
+  const allowedProjects = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedProjects) != null ? _b2 : [];
+    },
+    [uiSchema]
+  );
+  const allowedRepos = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedRepos) != null ? _b2 : [];
+    },
+    [uiSchema]
+  );
+  const { owner, organization, project, repoName } = state;
+  useEffect(() => {
+    onChange(serializeRepoPickerUrl(state));
+  }, [state, onChange]);
+  useEffect(() => {
+    if (allowedOrganizations.length > 0 && !organization) {
+      setState((prevState) => ({
+        ...prevState,
+        organization: allowedOrganizations[0]
+      }));
+    }
+  }, [setState, allowedOrganizations, organization]);
+  useEffect(() => {
+    if (allowedOwners.length > 0 && !owner) {
+      setState((prevState) => ({
+        ...prevState,
+        owner: allowedOwners[0]
+      }));
+    }
+  }, [setState, allowedOwners, owner]);
+  useEffect(() => {
+    if (allowedProjects.length > 0 && !project) {
+      setState((prevState) => ({
+        ...prevState,
+        project: allowedProjects[0]
+      }));
+    }
+  }, [setState, allowedProjects, project]);
+  useEffect(() => {
+    if (allowedRepos.length > 0 && !repoName) {
+      setState((prevState) => ({ ...prevState, repoName: allowedRepos[0] }));
+    }
+  }, [setState, allowedRepos, repoName]);
+  const updateLocalState = useCallback(
+    (newState) => {
+      setState((prevState) => ({ ...prevState, ...newState }));
+    },
+    [setState]
+  );
+  useDebounce(
+    async () => {
+      var _a2;
+      const { requestUserCredentials } = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) != null ? _a2 : {};
+      if (!requestUserCredentials || !(state.host && state.owner && state.repoName)) {
+        return;
+      }
+      const [encodedHost, encodedOwner, encodedRepoName] = [
+        state.host,
+        state.owner,
+        state.repoName
+      ].map(encodeURIComponent);
+      const { token } = await scmAuthApi.getCredentials({
+        url: `https://${encodedHost}/${encodedOwner}/${encodedRepoName}`,
+        additionalScope: {
+          repoWrite: true,
+          customScopes: requestUserCredentials.additionalScopes
+        }
+      });
+      setSecrets({ [requestUserCredentials.secretsKey]: token });
+    },
+    500,
+    [state, uiSchema]
+  );
+  const hostType = (_b = state.host && ((_a = integrationApi.byHost(state.host)) == null ? void 0 : _a.type)) != null ? _b : null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    RepoUrlPickerHost,
+    {
+      host: state.host,
+      hosts: allowedHosts,
+      onChange: (host) => setState((prevState) => ({ ...prevState, host })),
+      rawErrors
+    }
+  ), hostType === "github" && /* @__PURE__ */ React.createElement(
+    GithubRepoPicker,
+    {
+      allowedOwners,
+      onChange: updateLocalState,
+      rawErrors,
+      state
+    }
+  ), hostType === "gitlab" && /* @__PURE__ */ React.createElement(
+    GitlabRepoPicker,
+    {
+      allowedOwners,
+      rawErrors,
+      state,
+      onChange: updateLocalState
+    }
+  ), hostType === "bitbucket" && /* @__PURE__ */ React.createElement(
+    BitbucketRepoPicker,
+    {
+      allowedOwners,
+      allowedProjects,
+      rawErrors,
+      state,
+      onChange: updateLocalState
+    }
+  ), hostType === "azure" && /* @__PURE__ */ React.createElement(
+    AzureRepoPicker,
+    {
+      allowedOrganizations,
+      allowedOwners,
+      rawErrors,
+      state,
+      onChange: updateLocalState
+    }
+  ), hostType === "gerrit" && /* @__PURE__ */ React.createElement(
+    GerritRepoPicker,
+    {
+      rawErrors,
+      state,
+      onChange: updateLocalState
+    }
+  ), /* @__PURE__ */ React.createElement(
+    RepoUrlPickerRepoName,
+    {
+      repoName: state.repoName,
+      allowedRepos,
+      onChange: (repo) => setState((prevState) => ({ ...prevState, repoName: repo })),
+      rawErrors
+    }
+  ));
+};
+
+const OwnedEntityPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    allowedKinds: z.array(z.string()).optional().describe("List of kinds of entities to derive options from"),
+    defaultKind: z.string().optional().describe(
+      "The default entity kind. Options of this kind will not be prefixed."
+    ),
+    allowArbitraryValues: z.boolean().optional().describe("Whether to allow arbitrary user input. Defaults to true"),
+    defaultNamespace: z.union([z.string(), z.literal(false)]).optional().describe(
+      "The default namespace. Options with this namespace will not be prefixed."
+    )
+  })
+);
+const OwnedEntityPickerSchema = OwnedEntityPickerFieldSchema.schema;
+
+const OwnedEntityPicker = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    onChange,
+    schema: { title = "Entity", description = "An entity from the catalog" },
+    required,
+    uiSchema,
+    rawErrors,
+    formData,
+    idSchema
+  } = props;
+  const allowedKinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.allowedKinds;
+  const defaultKind = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.defaultKind;
+  const defaultNamespace = (_c = uiSchema["ui:options"]) == null ? void 0 : _c.defaultNamespace;
+  const allowArbitraryValues = (_e = (_d = uiSchema["ui:options"]) == null ? void 0 : _d.allowArbitraryValues) != null ? _e : true;
+  const { ownedEntities, loading } = useOwnedEntities(allowedKinds);
+  const entityRefs = ownedEntities == null ? void 0 : ownedEntities.items.map((e) => humanizeEntityRef(e, { defaultKind, defaultNamespace })).filter((n) => n);
+  const onSelect = (_, value) => {
+    onChange(value || "");
+  };
+  return /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      margin: "normal",
+      required,
+      error: (rawErrors == null ? void 0 : rawErrors.length) > 0 && !formData
+    },
+    /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        id: idSchema == null ? void 0 : idSchema.$id,
+        value: formData || "",
+        loading,
+        onChange: onSelect,
+        options: entityRefs || [],
+        autoSelect: true,
+        freeSolo: allowArbitraryValues,
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: title,
+            margin: "normal",
+            helperText: description,
+            variant: "outlined",
+            required,
+            InputProps: params.InputProps
+          }
+        )
+      }
+    )
+  );
+};
+function useOwnedEntities(allowedKinds) {
+  const identityApi = useApi(identityApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const { loading, value: refs } = useAsync(async () => {
+    const identity = await identityApi.getBackstageIdentity();
+    const identityRefs = identity.ownershipEntityRefs;
+    const catalogs = await catalogApi.getEntities(
+      allowedKinds ? {
+        filter: {
+          kind: allowedKinds,
+          [`relations.${RELATION_OWNED_BY}`]: identityRefs || []
+        }
+      } : {
+        filter: {
+          [`relations.${RELATION_OWNED_BY}`]: identityRefs || []
+        }
+      }
+    );
+    return catalogs;
+  }, []);
+  const ownedEntities = useMemo(() => {
+    return refs;
+  }, [refs]);
+  return useMemo(() => ({ loading, ownedEntities }), [loading, ownedEntities]);
+}
+
+const EntityTagsPickerFieldSchema = makeFieldSchemaFromZod(
+  z.array(z.string()),
+  z.object({
+    kinds: z.array(z.string()).optional().describe("List of kinds of entities to derive tags from"),
+    showCounts: z.boolean().optional().describe("Whether to show usage counts per tag"),
+    helperText: z.string().optional().describe("Helper text to display")
+  })
+);
+const EntityTagsPickerSchema = EntityTagsPickerFieldSchema.schema;
+
+const EntityTagsPicker = (props) => {
+  var _a, _b, _c;
+  const { formData, onChange, uiSchema } = props;
+  const catalogApi = useApi(catalogApiRef);
+  const [tagOptions, setTagOptions] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [inputError, setInputError] = useState(false);
+  const tagValidator = makeValidator().isValidTag;
+  const kinds = (_a = uiSchema["ui:options"]) == null ? void 0 : _a.kinds;
+  const showCounts = (_b = uiSchema["ui:options"]) == null ? void 0 : _b.showCounts;
+  const helperText = (_c = uiSchema["ui:options"]) == null ? void 0 : _c.helperText;
+  const { loading, value: existingTags } = useAsync(async () => {
+    const facet = "metadata.tags";
+    const tagsRequest = { facets: [facet] };
+    if (kinds) {
+      tagsRequest.filter = { kind: kinds };
+    }
+    const { facets } = await catalogApi.getEntityFacets(tagsRequest);
+    const tagFacets = Object.fromEntries(
+      facets[facet].map(({ value, count }) => [value, count])
+    );
+    setTagOptions(
+      Object.keys(tagFacets).sort(
+        (a, b) => showCounts ? tagFacets[b] - tagFacets[a] : a.localeCompare(b)
+      )
+    );
+    return tagFacets;
+  });
+  const setTags = (_, values) => {
+    let hasError = false;
+    let addDuplicate = false;
+    const currentTags = formData || [];
+    if ((values == null ? void 0 : values.length) && currentTags.length < values.length) {
+      const newTag = values[values.length - 1] = values[values.length - 1].toLocaleLowerCase("en-US").trim();
+      hasError = !tagValidator(newTag);
+      addDuplicate = currentTags.indexOf(newTag) !== -1;
+    }
+    setInputError(hasError);
+    setInputValue(!hasError ? "" : inputValue);
+    if (!hasError && !addDuplicate) {
+      onChange(values || []);
+    }
+  };
+  useEffectOnce(() => onChange(formData || []));
+  return /* @__PURE__ */ React.createElement(FormControl$1, { margin: "normal" }, /* @__PURE__ */ React.createElement(
+    Autocomplete$1,
+    {
+      multiple: true,
+      freeSolo: true,
+      filterSelectedOptions: true,
+      onChange: setTags,
+      value: formData || [],
+      inputValue,
+      loading,
+      options: tagOptions,
+      ChipProps: { size: "small" },
+      renderOption: (option) => showCounts ? `${option} (${existingTags == null ? void 0 : existingTags[option]})` : option,
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          label: "Tags",
+          onChange: (e) => setInputValue(e.target.value),
+          error: inputError,
+          helperText: helperText != null ? helperText : "Add any relevant tags, hit 'Enter' to add new tags. Valid format: [a-z0-9+#] separated by [-], at most 63 characters"
+        }
+      )
+    }
+  ));
+};
+
+const registerComponentRouteRef = createExternalRouteRef({
+  id: "register-component",
+  optional: true
+});
+const viewTechDocRouteRef = createExternalRouteRef({
+  id: "view-techdoc",
+  optional: true,
+  params: ["namespace", "kind", "name"]
+});
+const rootRouteRef = createRouteRef({
+  id: "scaffolder"
+});
+const legacySelectedTemplateRouteRef = createSubRouteRef({
+  id: "scaffolder/legacy/selected-template",
+  parent: rootRouteRef,
+  path: "/templates/:templateName"
+});
+const selectedTemplateRouteRef = createSubRouteRef({
+  id: "scaffolder/selected-template",
+  parent: rootRouteRef,
+  path: "/templates/:namespace/:templateName"
+});
+const scaffolderTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/task",
+  parent: rootRouteRef,
+  path: "/tasks/:taskId"
+});
+const scaffolderListTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/list-tasks",
+  parent: rootRouteRef,
+  path: "/tasks"
+});
+const actionsRouteRef = createSubRouteRef({
+  id: "scaffolder/actions",
+  parent: rootRouteRef,
+  path: "/actions"
+});
+const editRouteRef = createSubRouteRef({
+  id: "scaffolder/edit",
+  parent: rootRouteRef,
+  path: "/edit"
+});
+
+const nextRouteRef = createRouteRef({
+  id: "scaffolder/next"
+});
+const nextSelectedTemplateRouteRef = createSubRouteRef({
+  id: "scaffolder/next/selected-template",
+  parent: nextRouteRef,
+  path: "/templates/:namespace/:templateName"
+});
+const nextScaffolderTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/next/task",
+  parent: nextRouteRef,
+  path: "/tasks/:taskId"
+});
+const nextScaffolderListTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/next/list-tasks",
+  parent: nextRouteRef,
+  path: "/tasks"
+});
+const nextActionsRouteRef = createSubRouteRef({
+  id: "scaffolder/next/actions",
+  parent: nextRouteRef,
+  path: "/actions"
+});
+const nextEditRouteRef = createSubRouteRef({
+  id: "scaffolder/next/edit",
+  parent: nextRouteRef,
+  path: "/edit"
+});
+
+const useStyles$k = makeStyles({
+  button: {
+    color: "white"
+  }
+});
+function ContextMenu$1(props) {
+  const classes = useStyles$k();
+  const [anchorEl, setAnchorEl] = useState();
+  const editLink = useRouteRef(nextEditRouteRef);
+  const actionsLink = useRouteRef(nextActionsRouteRef);
+  const tasksLink = useRouteRef(nextScaffolderListTaskRouteRef);
+  const navigate = useNavigate();
+  const showEditor = props.editor !== false;
+  const showActions = props.actions !== false;
+  const showTasks = props.tasks !== false;
+  if (!showEditor && !showActions) {
+    return null;
+  }
+  const onOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const onClose = () => {
+    setAnchorEl(void 0);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: onOpen,
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(editLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), showActions && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(actionsLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(tasksLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
+  ));
+}
+
+function reducer(draft, action) {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "INIT": {
+      draft.steps = action.data.spec.steps.reduce((current, next) => {
+        current[next.id] = { status: "open", id: next.id };
+        return current;
+      }, {});
+      draft.stepLogs = action.data.spec.steps.reduce((current, next) => {
+        current[next.id] = [];
+        return current;
+      }, {});
+      draft.loading = false;
+      draft.error = void 0;
+      draft.completed = false;
+      draft.task = action.data;
+      return;
+    }
+    case "LOGS": {
+      const entries = action.data;
+      for (const entry of entries) {
+        const logLine = `${entry.createdAt} ${entry.body.message}`;
+        if (!entry.body.stepId || !((_a = draft.steps) == null ? void 0 : _a[entry.body.stepId])) {
+          continue;
+        }
+        const currentStepLog = (_b = draft.stepLogs) == null ? void 0 : _b[entry.body.stepId];
+        const currentStep = (_c = draft.steps) == null ? void 0 : _c[entry.body.stepId];
+        if (entry.body.status && entry.body.status !== currentStep.status) {
+          currentStep.status = entry.body.status;
+          if (currentStep.status === "processing") {
+            currentStep.startedAt = entry.createdAt;
+          }
+          if (["cancelled", "failed", "completed"].includes(currentStep.status)) {
+            currentStep.endedAt = entry.createdAt;
+          }
+        }
+        currentStepLog == null ? void 0 : currentStepLog.push(logLine);
+      }
+      return;
+    }
+    case "COMPLETED": {
+      draft.completed = true;
+      draft.output = action.data.body.output;
+      draft.error = action.data.body.error;
+      return;
+    }
+    case "ERROR": {
+      draft.error = action.data;
+      draft.loading = false;
+      draft.completed = true;
+      return;
+    }
+    default:
+      return;
+  }
+}
+const useTaskEventStream = (taskId) => {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [state, dispatch] = useImmerReducer(reducer, {
+    loading: true,
+    completed: false,
+    stepLogs: {},
+    steps: {}
+  });
+  useEffect(() => {
+    let didCancel = false;
+    let subscription;
+    let logPusher;
+    scaffolderApi.getTask(taskId).then(
+      (task) => {
+        if (didCancel) {
+          return;
+        }
+        dispatch({ type: "INIT", data: task });
+        const observable = scaffolderApi.streamLogs({ taskId });
+        const collectedLogEvents = new Array();
+        function emitLogs() {
+          if (collectedLogEvents.length) {
+            const logs = collectedLogEvents.splice(
+              0,
+              collectedLogEvents.length
+            );
+            dispatch({ type: "LOGS", data: logs });
+          }
+        }
+        logPusher = setInterval(emitLogs, 500);
+        subscription = observable.subscribe({
+          next: (event) => {
+            switch (event.type) {
+              case "log":
+                return collectedLogEvents.push(event);
+              case "completion":
+                emitLogs();
+                dispatch({ type: "COMPLETED", data: event });
+                return void 0;
+              default:
+                throw new Error(
+                  `Unhandled event type ${event.type} in observer`
+                );
+            }
+          },
+          error: (error) => {
+            emitLogs();
+            dispatch({ type: "ERROR", data: error });
+          }
+        });
+      },
+      (error) => {
+        if (!didCancel) {
+          dispatch({ type: "ERROR", data: error });
+        }
+      }
+    );
+    return () => {
+      didCancel = true;
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+      if (logPusher) {
+        clearInterval(logPusher);
+      }
+    };
+  }, [scaffolderApi, dispatch, taskId]);
+  return state;
+};
+
+const useStepIconStyles$1 = makeStyles$1((theme) => ({
+  root: {
+    color: theme.palette.text.disabled
+  },
+  completed: {
+    color: theme.palette.status.ok
+  },
+  error: {
+    color: theme.palette.status.error
+  }
+}));
+const StepIcon = (props) => {
+  const classes = useStepIconStyles$1();
+  const { active, completed, error, skipped } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "20px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(CheckCircleOutline, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(ErrorOutline, null);
+    }
+    if (skipped) {
+      return /* @__PURE__ */ React.createElement(RemoveCircleOutline, null);
+    }
+    return /* @__PURE__ */ React.createElement(PanoramaFishEyeIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+};
+
+const StepTime = (props) => {
+  const [time, setTime] = useState("");
+  const { step } = props;
+  const calculate = useCallback(() => {
+    if (!step.startedAt) {
+      setTime("");
+      return;
+    }
+    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
+    setTime(humanizeDuration$1(formatted, { round: true }));
+  }, [step.endedAt, step.startedAt]);
+  useMountEffect(() => calculate());
+  useInterval(() => !step.endedAt && calculate(), 1e3);
+  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
+};
+
+const TaskSteps = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Stepper,
+    {
+      activeStep: props.activeStep,
+      alternativeLabel: true,
+      variant: "elevation"
+    },
+    props.steps.map((step, index) => {
+      const isCompleted = step.status === "completed";
+      const isFailed = step.status === "failed";
+      const isActive = step.status === "processing";
+      const isSkipped = step.status === "skipped";
+      const stepIconProps = {
+        completed: isCompleted,
+        error: isFailed,
+        active: isActive,
+        skipped: isSkipped
+      };
+      return /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepButton, null, /* @__PURE__ */ React.createElement(
+        StepLabel,
+        {
+          StepIconProps: stepIconProps,
+          StepIconComponent: StepIcon
+        },
+        /* @__PURE__ */ React.createElement(Box, null, step.name),
+        /* @__PURE__ */ React.createElement(StepTime, { step })
+      )));
+    })
+  );
+};
+
+const useStyles$j = makeStyles$1((theme) => ({
+  failed: {
+    backgroundColor: theme.palette.error.main
+  },
+  success: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+const TaskBorder = (props) => {
+  const styles = useStyles$j();
+  if (!props.isComplete) {
+    return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
+  }
+  return /* @__PURE__ */ React.createElement(
+    LinearProgress,
+    {
+      variant: "determinate",
+      classes: { bar: props.isError ? styles.failed : styles.success },
+      value: 100
+    }
+  );
+};
+
+const useStyles$i = makeStyles({
+  root: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  }
+});
+const TaskLogStream = (props) => {
+  const styles = useStyles$i();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
+    LogViewer,
+    {
+      text: Object.values(props.logs).map((l) => l.join("\n")).filter(Boolean).join("\n")
+    }
+  ));
+};
+
+const useStyles$h = makeStyles$1((theme) => ({
+  button: {
+    color: theme.palette.common.white
+  }
+}));
+const ContextMenu = (props) => {
+  const { logsVisible, onToggleLogs, onStartOver } = props;
+  const classes = useStyles$h();
+  const [anchorEl, setAnchorEl] = useState();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: (event) => {
+        setAnchorEl(event.currentTarget);
+      },
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover$1,
+    {
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(void 0),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList$1, null, /* @__PURE__ */ React.createElement(MenuItem$1, { onClick: () => onToggleLogs == null ? void 0 : onToggleLogs(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: logsVisible ? "Hide Logs" : "Show Logs" })), /* @__PURE__ */ React.createElement(MenuItem$1, { onClick: onStartOver }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Retry, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Start Over" })))
+  ));
+};
+
+const useStyles$g = makeStyles$1({
+  contentWrapper: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+const OngoingTask = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { taskId } = useParams();
+  const templateRouteRef = useRouteRef(nextSelectedTemplateRouteRef);
+  const navigate = useNavigate();
+  const taskStream = useTaskEventStream(taskId);
+  const classes = useStyles$g();
+  const steps = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.steps.map((step) => {
+        var _a3;
+        return {
+          ...step,
+          ...(_a3 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a3[step.id]
+        };
+      })) != null ? _b2 : [];
+    },
+    [taskStream]
+  );
+  const [logsVisible, setLogVisibleState] = useState(false);
+  useEffect(() => {
+    if (taskStream.error) {
+      setLogVisibleState(true);
+    }
+  }, [taskStream.error]);
+  const activeStep = useMemo(() => {
+    for (let i = steps.length - 1; i >= 0; i--) {
+      if (steps[i].status !== "open") {
+        return i;
+      }
+    }
+    return 0;
+  }, [steps]);
+  const startOver = useCallback(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    const { namespace, name } = (_d2 = (_c2 = (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.templateInfo) == null ? void 0 : _b2.entity) == null ? void 0 : _c2.metadata) != null ? _d2 : {};
+    const formData = (_f2 = (_e2 = taskStream.task) == null ? void 0 : _e2.spec.parameters) != null ? _f2 : {};
+    if (!namespace || !name) {
+      return;
+    }
+    navigate({
+      pathname: templateRouteRef({
+        namespace,
+        templateName: name
+      }),
+      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`
+    });
+  }, [
+    navigate,
+    (_a = taskStream.task) == null ? void 0 : _a.spec.parameters,
+    (_d = (_c = (_b = taskStream.task) == null ? void 0 : _b.spec.templateInfo) == null ? void 0 : _c.entity) == null ? void 0 : _d.metadata,
+    templateRouteRef
+  ]);
+  const Outputs = (_e = props.TemplateOutputsComponent) != null ? _e : DefaultTemplateOutputs;
+  const templateName = (_h = (_g = (_f = taskStream.task) == null ? void 0 : _f.spec.templateInfo) == null ? void 0 : _g.entity) == null ? void 0 : _h.metadata.name;
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: `Run of ${templateName}`,
+      title: /* @__PURE__ */ React.createElement("div", null, "Run of ", /* @__PURE__ */ React.createElement("code", null, templateName)),
+      subtitle: `Task ${taskId}`
+    },
+    /* @__PURE__ */ React.createElement(
+      ContextMenu,
+      {
+        onToggleLogs: setLogVisibleState,
+        onStartOver: startOver,
+        logsVisible
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(Content, { className: classes.contentWrapper }, taskStream.error ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
+    ErrorPanel,
+    {
+      error: taskStream.error,
+      title: taskStream.error.message
+    }
+  )) : null, /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(Paper, { style: { position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
+    TaskBorder,
+    {
+      isComplete: taskStream.completed,
+      isError: Boolean(taskStream.error)
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(TaskSteps, { steps, activeStep })))), /* @__PURE__ */ React.createElement(Outputs, { output: taskStream.output }), logsVisible ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2, height: "100%" }, /* @__PURE__ */ React.createElement(Paper, { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(TaskLogStream, { logs: taskStream.stepLogs })))) : null));
+};
+
+const useStyles$f = makeStyles$1((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$f();
+  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$e = makeStyles$1(
+  (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$e();
+  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$1, { disablePadding: true, dense: true }, group.items.map((item) => /* @__PURE__ */ React.createElement(
+    MenuItem$1,
+    {
+      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$1, { className: classes.listIcon }, /* @__PURE__ */ React.createElement(item.icon, { fontSize: "small" })),
+    /* @__PURE__ */ React.createElement(ListItemText$1, 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$d = 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);
+    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$d();
+  const apiHolder = useApiHolder();
+  const [steps, setSteps] = useState();
+  useDebounce(
+    () => {
+      try {
+        if (!content) {
+          setSteps(void 0);
+          return;
+        }
+        const parsed = yaml.parse(content);
+        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;
+        }
+        setErrorText();
+        setSteps(
+          parameters.flatMap(
+            (param) => isJsonObject(param) ? [
+              {
+                title: String(param.title),
+                schema: param
+              }
+            ] : []
+          )
+        );
+      } 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$1,
+    {
+      manifest: { steps, title: "Template Editor" },
+      extensions: fieldExtensions,
+      onCreate: async (data) => {
+        await (onDryRun == null ? void 0 : onDryRun(data));
+      },
+      layouts,
+      components: { createButtonText: onDryRun && "Try It" }
+    }
+  ))));
+}
+function TemplateEditorFormDirectoryEditorDryRun(props) {
+  const { setErrorText, fieldExtensions = [], layouts } = props;
+  const dryRun = useDryRun();
+  const directoryEditor = useDirectoryEditor();
+  const { selectedFile } = directoryEditor;
+  const handleDryRun = async (values) => {
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await dryRun.execute({
+        templateContent: selectedFile.content,
+        values,
+        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;
+
+const useStyles$c = makeStyles$1((theme) => ({
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "controls controls"
+      "fieldForm preview"
+    `,
+    gridTemplateRows: "auto 1fr",
+    gridTemplateColumns: "1fr 1fr"
+  },
+  controls: {
+    gridArea: "controls",
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    margin: theme.spacing(1)
+  },
+  fieldForm: {
+    gridArea: "fieldForm"
+  },
+  preview: {
+    gridArea: "preview"
+  }
+}));
+const CustomFieldExplorer = ({
+  customFieldExtensions = [],
+  onClose
+}) => {
+  var _a, _b;
+  const classes = useStyles$c();
+  const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
+  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
+  const [fieldFormState, setFieldFormState] = useState({});
+  const [refreshKey, setRefreshKey] = useState(Date.now());
+  const sampleFieldTemplate = useMemo(
+    () => {
+      var _a2, _b2;
+      return yaml.stringify({
+        parameters: [
+          {
+            title: `${selectedField.name} Example`,
+            properties: {
+              [selectedField.name]: {
+                type: (_b2 = (_a2 = selectedField.schema) == null ? void 0 : _a2.returnValue) == null ? void 0 : _b2.type,
+                "ui:field": selectedField.name,
+                "ui:options": fieldFormState
+              }
+            }
+          }
+        ]
+      });
+    },
+    [fieldFormState, selectedField]
+  );
+  const fieldComponents = useMemo(() => {
+    return Object.fromEntries(
+      customFieldExtensions.map(({ name, component }) => [name, component])
+    );
+  }, [customFieldExtensions]);
+  const handleSelectionChange = useCallback(
+    (selection) => {
+      setSelectedField(selection);
+      setFieldFormState({});
+    },
+    [setFieldFormState, setSelectedField]
+  );
+  const handleFieldConfigChange = useCallback(
+    (state) => {
+      setFieldFormState(state);
+      setRefreshKey(Date.now());
+    },
+    [setFieldFormState, setRefreshKey]
+  );
+  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl$1, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel$1, { id: "select-field-label" }, "Choose Custom Field Extension"), /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      value: selectedField,
+      label: "Choose Custom Field Extension",
+      labelId: "select-field-label",
+      onChange: (e) => handleSelectionChange(e.target.value)
+    },
+    fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem$1, { key: idx, value: option }, option.name))
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Field Options" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+    Form,
+    {
+      showErrorList: false,
+      fields: { ...fieldComponents },
+      noHtml5Validate: true,
+      formData: fieldFormState,
+      formContext: { fieldFormState },
+      onSubmit: (e) => handleFieldConfigChange(e.formData),
+      validator,
+      schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {}
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        type: "submit",
+        disabled: !((_b = selectedField.schema) == null ? void 0 : _b.uiOptions)
+      },
+      "Apply"
+    )
+  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Example Template Spec" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+    CodeMirror,
+    {
+      readOnly: true,
+      theme: "dark",
+      height: "100%",
+      extensions: [StreamLanguage.define(yaml$1)],
+      value: sampleFieldTemplate
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      key: refreshKey,
+      content: sampleFieldTemplate,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      setErrorText: () => null
+    }
+  )));
+};
+
+const useStyles$b = makeStyles((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$b();
+  const dryRun = useDryRun();
+  return /* @__PURE__ */ React.createElement(List$2, { 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,
+        {
+          className: failed ? classes.iconFailure : classes.iconSuccess
+        },
+        failed ? /* @__PURE__ */ React.createElement(CancelIcon, null) : /* @__PURE__ */ React.createElement(CheckIcon, null)
+      ),
+      /* @__PURE__ */ React.createElement(ListItemText, { 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 TaskErrors = ({ error }) => {
+  const id = useRef("");
+  useEffect(() => {
+    id.current = String(Math.random());
+  }, [error]);
+  return error ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    DismissableBanner,
+    {
+      id: id.current,
+      variant: "warning",
+      message: error.message
+    }
+  )) : null;
+};
+
+const useStyles$a = makeStyles$1({
+  svgIcon: {
+    display: "inline-block",
+    "& svg": {
+      display: "inline-block",
+      fontSize: "inherit",
+      verticalAlign: "baseline"
+    }
+  }
+});
+const IconLink = (props) => {
+  const { href, text, Icon, ...linkProps } = props;
+  const classes = useStyles$a();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.svgIcon }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Link, { to: href, ...linkProps }, text || href)));
+};
+
+const TaskPageLinks = ({ output }) => {
+  const { links = [] } = output;
+  const app = useApp();
+  const entityRoute = useRouteRef(entityRouteRef);
+  const iconResolver = (key) => {
+    var _a;
+    return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
+  };
+  return /* @__PURE__ */ React.createElement(Box, { px: 3, pb: 3 }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
+    if (entityRef) {
+      const entityName = parseEntityRef(entityRef, {
+        defaultKind: "<unknown>",
+        defaultNamespace: "<unknown>"
+      });
+      const target = entityRoute(entityName);
+      return { title, icon, url: target };
+    }
+    return { title, icon, url };
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(
+    IconLink,
+    {
+      key: `output-link-${i}`,
+      href: url,
+      text: title != null ? title : url,
+      Icon: iconResolver(icon),
+      target: "_blank"
+    }
+  )));
+};
+
+const humanizeDuration = require("humanize-duration");
+const useStyles$9 = makeStyles(
+  (theme) => createStyles({
+    root: {
+      width: "100%"
+    },
+    button: {
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(2)
+    },
+    actionsContainer: {
+      marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+      padding: theme.spacing(3)
+    },
+    labelWrapper: {
+      display: "flex",
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    stepWrapper: {
+      width: "100%"
+    }
+  })
+);
+const StepTimeTicker = ({ step }) => {
+  const [time, setTime] = useState("");
+  useInterval(() => {
+    if (!step.startedAt) {
+      setTime("");
+      return;
+    }
+    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
+    setTime(humanizeDuration(formatted, { round: true }));
+  }, 1e3);
+  return /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, time);
+};
+const useStepIconStyles = makeStyles(
+  (theme) => createStyles({
+    root: {
+      color: theme.palette.text.disabled,
+      display: "flex",
+      height: 22,
+      alignItems: "center"
+    },
+    completed: {
+      color: theme.palette.status.ok
+    },
+    error: {
+      color: theme.palette.status.error
+    }
+  })
+);
+function TaskStepIconComponent(props) {
+  const classes = useStepIconStyles();
+  const { active, completed, error } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "24px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(CheckIcon, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(CancelIcon, null);
+    }
+    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+}
+const TaskStatusStepper = memo(
+  (props) => {
+    const { steps, currentStepId, onUserStepChange } = props;
+    const classes = useStyles$9(props);
+    return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
+      Stepper$2,
+      {
+        activeStep: steps.findIndex((s) => s.id === currentStepId),
+        orientation: "vertical",
+        nonLinear: true
+      },
+      steps.map((step, index) => {
+        const isCompleted = step.status === "completed";
+        const isFailed = step.status === "failed";
+        const isActive = step.status === "processing";
+        const isSkipped = step.status === "skipped";
+        return /* @__PURE__ */ React.createElement(Step$1, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
+          StepLabel$1,
+          {
+            StepIconProps: {
+              completed: isCompleted,
+              error: isFailed,
+              active: isActive
+            },
+            StepIconComponent: TaskStepIconComponent,
+            className: classes.stepWrapper
+          },
+          /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle2" }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, "Skipped") : /* @__PURE__ */ React.createElement(StepTimeTicker, { step }))
+        )));
+      })
+    ));
+  }
+);
+const hasLinks = ({ links = [] }) => links.length > 0;
+const TaskPage = ({ loadingText }) => {
+  const classes = useStyles$9();
+  const navigate = useNavigate();
+  const rootPath = useRouteRef(rootRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
+  const [lastActiveStepId, setLastActiveStepId] = useState(
+    void 0
+  );
+  const { taskId } = useRouteRefParams(scaffolderTaskRouteRef);
+  const taskStream = useTaskEventStream(taskId);
+  const completed = taskStream.completed;
+  const steps = useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = taskStream.task) == null ? void 0 : _a.spec.steps.map((step) => {
+        var _a2;
+        return {
+          ...step,
+          ...(_a2 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a2[step.id]
+        };
+      })) != null ? _b : [];
+    },
+    [taskStream]
+  );
+  useEffect(() => {
+    var _a;
+    const mostRecentFailedOrActiveStep = steps.find(
+      (step) => ["failed", "processing"].includes(step.status)
+    );
+    if (completed && !mostRecentFailedOrActiveStep) {
+      setLastActiveStepId((_a = steps[steps.length - 1]) == null ? void 0 : _a.id);
+      return;
+    }
+    setLastActiveStepId(mostRecentFailedOrActiveStep == null ? void 0 : mostRecentFailedOrActiveStep.id);
+  }, [steps, completed]);
+  const currentStepId = userSelectedStepId != null ? userSelectedStepId : lastActiveStepId;
+  const logAsString = useMemo(() => {
+    if (!currentStepId) {
+      return loadingText ? loadingText : "Loading...";
+    }
+    const log = taskStream.stepLogs[currentStepId];
+    if (!(log == null ? void 0 : log.length)) {
+      return "Waiting for logs...";
+    }
+    return log.join("\n");
+  }, [taskStream.stepLogs, currentStepId, loadingText]);
+  const taskNotFound = taskStream.completed === true && taskStream.loading === false && !taskStream.task;
+  const { output } = taskStream;
+  const handleStartOver = () => {
+    var _a, _b, _c;
+    if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.templateInfo) == null ? void 0 : _b.entityRef)) {
+      navigate(rootPath());
+      return;
+    }
+    const formData = taskStream.task.spec.parameters;
+    const { name, namespace } = parseEntityRef(
+      (_c = taskStream.task.spec.templateInfo) == null ? void 0 : _c.entityRef
+    );
+    navigate(
+      `${templateRoute({ templateName: name, namespace })}?${qs.stringify({
+        formData: JSON.stringify(formData)
+      })}`
+    );
+  };
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: `Task ${taskId}`,
+      title: "Task Activity",
+      subtitle: `Activity for task: ${taskId}`
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, taskNotFound ? /* @__PURE__ */ React.createElement(
+    ErrorPage,
+    {
+      status: "404",
+      statusMessage: "Task not found",
+      additionalInfo: "No task found with this ID"
+    }
+  ) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid$1, { container: true }, /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(
+    TaskStatusStepper,
+    {
+      steps,
+      currentStepId,
+      onUserStepChange: setUserSelectedStepId
+    }
+  ), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, { output }), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: classes.button,
+      onClick: handleStartOver,
+      disabled: !completed,
+      variant: "contained",
+      color: "primary"
+    },
+    "Start Over"
+  ))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 9 }, !currentStepId && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement("div", { style: { height: "80vh" } }, /* @__PURE__ */ React.createElement(TaskErrors, { error: taskStream.error }), /* @__PURE__ */ React.createElement(LogViewer, { text: logAsString })))))));
+};
+
+const useStyles$8 = makeStyles({
+  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$8();
+  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$7 = makeStyles((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$7();
+  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$6 = makeStyles({
+  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$6();
+  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$6();
+  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$6();
+  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$5 = makeStyles((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$5();
+  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$4 = makeStyles$1((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$4();
+  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$3 = makeStyles$1((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$3();
+  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$2 = makeStyles$1({
+  // Reset and fix sizing to make sure scrolling behaves correctly
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "browser editor preview"
+      "results results results"
+    `,
+    gridTemplateColumns: "1fr 3fr 2fr",
+    gridTemplateRows: "1fr auto"
+  },
+  browser: {
+    gridArea: "browser",
+    overflow: "auto"
+  },
+  editor: {
+    gridArea: "editor",
+    overflow: "auto"
+  },
+  preview: {
+    gridArea: "preview",
+    overflow: "auto"
+  },
+  results: {
+    gridArea: "results"
+  }
+});
+const TemplateEditor = (props) => {
+  const classes = useStyles$2();
+  const [errorText, setErrorText] = useState();
+  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory: props.directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__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 })), /* @__PURE__ */ React.createElement("section", { className: classes.preview }, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm.DirectoryEditorDryRun,
+    {
+      setErrorText,
+      fieldExtensions: props.fieldExtensions,
+      layouts: props.layouts
+    }
+  )), /* @__PURE__ */ React.createElement("section", { className: classes.results }, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
+};
+
+const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+  - title: Fill in some steps
+    required:
+      - name
+    properties:
+      name:
+        title: Name
+        type: string
+        description: Unique name of the component
+      owner:
+        title: Owner
+        type: string
+        description: Owner of the component
+        ui:field: OwnerPicker
+        ui:options:
+          catalogFilter:
+            kind: Group
+  - title: Choose a location
+    required:
+      - repoUrl
+    properties:
+      repoUrl:
+        title: Repository Location
+        type: string
+        ui:field: RepoUrlPicker
+        ui:options:
+          allowedHosts:
+            - github.com
+steps:
+  - id: fetch-base
+    name: Fetch Base
+    action: fetch:template
+    input:
+      url: ./template
+      values:
+        name: \${{parameters.name}}
+`;
+const useStyles$1 = makeStyles$1((theme) => ({
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "controls controls"
+      "textArea preview"
+    `,
+    gridTemplateRows: "auto 1fr",
+    gridTemplateColumns: "1fr 1fr"
+  },
+  controls: {
+    gridArea: "controls",
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    margin: theme.spacing(1)
+  },
+  textArea: {
+    gridArea: "textArea"
+  },
+  preview: {
+    gridArea: "preview"
+  }
+}));
+const TemplateFormPreviewer = ({
+  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
+  customFieldExtensions = [],
+  onClose,
+  layouts = []
+}) => {
+  const classes = useStyles$1();
+  const alertApi = useApi(alertApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [errorText, setErrorText] = useState();
+  const [templateOptions, setTemplateOptions] = useState([]);
+  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+  const { loading } = useAsync(
+    () => catalogApi.getEntities({
+      filter: { kind: "template" },
+      fields: [
+        "kind",
+        "metadata.namespace",
+        "metadata.name",
+        "metadata.title",
+        "spec.parameters",
+        "spec.steps",
+        "spec.output"
+      ]
+    }).then(
+      ({ items }) => setTemplateOptions(
+        items.map((template) => {
+          var _a;
+          return {
+            label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
+            value: template
+          };
+        })
+      )
+    ).catch(
+      (e) => alertApi.post({
+        message: `Error loading exisiting templates: ${e.message}`,
+        severity: "error"
+      })
+    ),
+    [catalogApi]
+  );
+  const handleSelectChange = useCallback(
+    (selected) => {
+      setSelectedTemplate(selected);
+      setTemplateYaml(yaml.stringify(selected.spec));
+    },
+    [setTemplateYaml]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl$1, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel$1, { id: "select-template-label" }, "Load Existing Template"), /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      value: selectedTemplate,
+      label: "Load Existing Template",
+      labelId: "select-template-label",
+      onChange: (e) => handleSelectChange(e.target.value)
+    },
+    templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem$1, { key: idx, value: option.value }, option.label))
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
+    TemplateEditorTextArea,
+    {
+      content: templateYaml,
+      onUpdate: setTemplateYaml,
+      errorText
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      content: templateYaml,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      setErrorText,
+      layouts
+    }
+  ))));
+};
+
+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$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$1, 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$1, 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$1, 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
+  ));
+}
+
+const scaffolderPlugin = createPlugin({
+  id: "scaffolder",
+  apis: [
+    createApiFactory({
+      api: scaffolderApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        scmIntegrationsApi: scmIntegrationsApiRef,
+        fetchApi: fetchApiRef,
+        identityApi: identityApiRef
+      },
+      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) => new ScaffolderClient({
+        discoveryApi,
+        scmIntegrationsApi,
+        fetchApi,
+        identityApi
+      })
+    })
+  ],
+  routes: {
+    root: rootRouteRef,
+    selectedTemplate: selectedTemplateRouteRef,
+    ongoingTask: scaffolderTaskRouteRef
+  },
+  externalRoutes: {
+    registerComponent: registerComponentRouteRef,
+    viewTechDoc: viewTechDocRouteRef
+  }
+});
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: EntityPicker,
+    name: "EntityPicker",
+    schema: EntityPickerSchema
+  })
+);
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: EntityNamePicker,
+    name: "EntityNamePicker",
+    validation: entityNamePickerValidation,
+    schema: EntityNamePickerSchema
+  })
+);
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: RepoUrlPicker,
+    name: "RepoUrlPicker",
+    validation: repoPickerValidation,
+    schema: RepoUrlPickerSchema
+  })
+);
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: OwnerPicker,
+    name: "OwnerPicker",
+    schema: OwnerPickerSchema
+  })
+);
+scaffolderPlugin.provide(
+  createRoutableExtension({
+    name: "ScaffolderPage",
+    component: () => import('./Router-0b12a83d.esm.js').then((m) => m.Router),
+    mountPoint: rootRouteRef
+  })
+);
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: OwnedEntityPicker,
+    name: "OwnedEntityPicker",
+    schema: OwnedEntityPickerSchema
+  })
+);
+scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: EntityTagsPicker,
+    name: "EntityTagsPicker",
+    schema: EntityTagsPickerSchema
+  })
+);
+const NextScaffolderPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    name: "NextScaffolderPage",
+    component: () => import('./index-9804fdae.esm.js').then((m) => m.Router),
+    mountPoint: nextRouteRef
+  })
+);
+
+export { ActionsPage as A, OwnedEntityPickerSchema as B, OwnerListPicker as C, DirectoryEditorProvider as D, EntityPicker as E, nextSelectedTemplateRouteRef as F, ContextMenu$1 as G, nextRouteRef as H, nextScaffolderTaskRouteRef as I, TemplateEditor as J, TemplateFormPreviewer as K, CustomFieldExplorer as L, nextEditRouteRef as M, nextActionsRouteRef as N, OwnerPicker as O, nextScaffolderListTaskRouteRef as P, OngoingTask as Q, RepoUrlPicker as R, NextScaffolderPage as S, TemplateEditorBrowser as T, WebFileSystemAccess as W, actionsRouteRef as a, scaffolderListTaskRouteRef as b, scaffolderTaskRouteRef as c, rootRouteRef as d, editRouteRef as e, useDirectoryEditor as f, DryRunProvider as g, TemplateEditorTextArea as h, DryRunResults as i, TemplateEditorIntro as j, TaskPage as k, legacySelectedTemplateRouteRef as l, EntityPickerSchema as m, EntityNamePicker as n, entityNamePickerValidation as o, EntityNamePickerSchema as p, EntityTagsPicker as q, registerComponentRouteRef as r, selectedTemplateRouteRef as s, EntityTagsPickerSchema as t, useDryRun as u, viewTechDocRouteRef as v, repoPickerValidation as w, RepoUrlPickerSchema as x, OwnerPickerSchema as y, OwnedEntityPicker as z };
+//# sourceMappingURL=alpha-d9ed6c0a.esm.js.map