@backstage/plugin-scaffolder 1.4.0 → 1.5.0-next.2

package/dist/esm/{Router-e14e5f4e.esm.js → Router-fa1fcf0c.esm.js}

@@ -3,7 +3,7 @@ import { useNavigate, Navigate, useOutlet, Routes, Route, useParams as useParams
 import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
 import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
 import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, l as legacySelectedTemplateRouteRef, j as SecretsContextProvider, k as TaskPage } from './index-a298f509.esm.js';
+import { s as selectedTemplateRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, l as legacySelectedTemplateRouteRef, j as SecretsContextProvider, k as TaskPage } from './index-3b171258.esm.js';
 import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
@@ -66,7 +66,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-ffab2851.esm.js';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-2a48fcb0.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -164,7 +164,10 @@ const TemplateCard = ({ template, deprecated }) => {
   const backstageTheme = useTheme();
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const templateProps = getTemplateCardProps(template);
-  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
+  const ownedByRelations = getEntityRelations(
+    template,
+    RELATION_OWNED_BY
+  );
   const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
   const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles$e({ backgroundImage: theme.backgroundImage });
@@ -522,17 +525,23 @@ const MultistepJsonForm = (props) => {
     const filteredStep = cloneDeep(step);
     const removedPropertyKeys = [];
     if (filteredStep.schema.properties) {
-      filteredStep.schema.properties = Object.fromEntries(Object.entries(filteredStep.schema.properties).filter(([key, value]) => {
-        if (value[featureFlagKey]) {
-          if (featureFlagApi.isActive(value[featureFlagKey])) {
+      filteredStep.schema.properties = Object.fromEntries(
+        Object.entries(filteredStep.schema.properties).filter(
+          ([key, value]) => {
+            if (value[featureFlagKey]) {
+              if (featureFlagApi.isActive(value[featureFlagKey])) {
+                return true;
+              }
+              removedPropertyKeys.push(key);
+              return false;
+            }
             return true;
           }
-          removedPropertyKeys.push(key);
-          return false;
-        }
-        return true;
-      }));
-      filteredStep.schema.required = Array.isArray(filteredStep.schema.required) ? (_a = filteredStep.schema.required) == null ? void 0 : _a.filter((r) => !removedPropertyKeys.includes(r)) : filteredStep.schema.required;
+        )
+      );
+      filteredStep.schema.required = Array.isArray(filteredStep.schema.required) ? (_a = filteredStep.schema.required) == null ? void 0 : _a.filter(
+        (r) => !removedPropertyKeys.includes(r)
+      ) : filteredStep.schema.required;
     }
     return filteredStep;
   };
@@ -638,13 +647,21 @@ const createValidator = (rootSchema, validators, context) => {
         if (isObject(propData)) {
           const propSchemaProps = schemaProps[key];
           if (isObject(propSchemaProps)) {
-            validate(propSchemaProps, propData, propValidation);
+            validate(
+              propSchemaProps,
+              propData,
+              propValidation
+            );
           }
         } else {
           const propSchema = schemaProps[key];
           const fieldName = isObject(propSchema) && propSchema["ui:field"];
           if (fieldName && typeof validators[fieldName] === "function") {
-            validators[fieldName](propData, propValidation, context);
+            validators[fieldName](
+              propData,
+              propValidation,
+              context
+            );
           }
         }
       }
@@ -663,7 +680,10 @@ const createValidator = (rootSchema, validators, context) => {
 
 const useTemplateParameterSchema = (templateRef) => {
   const scaffolderApi = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(() => scaffolderApi.getTemplateParameterSchema(templateRef), [scaffolderApi, templateRef]);
+  const { value, loading, error } = useAsync(
+    () => scaffolderApi.getTemplateParameterSchema(templateRef),
+    [scaffolderApi, templateRef]
+  );
   return { schema: value, loading, error };
 };
 const TemplatePage = ({
@@ -695,7 +715,10 @@ const TemplatePage = ({
     }
   });
   const handleFormReset = () => setFormState({});
-  const handleChange = useCallback((e) => setFormState(e.formData), [setFormState]);
+  const handleChange = useCallback(
+    (e) => setFormState(e.formData),
+    [setFormState]
+  );
   const handleCreate = async () => {
     var _a;
     const { taskId } = await scaffolderApi.scaffold({
@@ -703,7 +726,10 @@ const TemplatePage = ({
       values: formState,
       secrets: secretsContext == null ? void 0 : secretsContext.secrets
     });
-    const formParams = qs.stringify({ formData: formState }, { addQueryPrefix: true });
+    const formParams = qs.stringify(
+      { formData: formState },
+      { addQueryPrefix: true }
+    );
     const newUrl = `${window.location.pathname}${formParams}`;
     (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
     navigate(scaffolderTaskRoute({ taskId }));
@@ -720,8 +746,12 @@ const TemplatePage = ({
       to: rootRoute()
     });
   }
-  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({ name, component }) => [name, component]));
-  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({ name, validation }) => [name, validation]));
+  const customFieldComponents = Object.fromEntries(
+    customFieldExtensions.map(({ name, component }) => [name, component])
+  );
+  const customFieldValidators = Object.fromEntries(
+    customFieldExtensions.map(({ name, validation }) => [name, validation])
+  );
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -743,7 +773,11 @@ const TemplatePage = ({
     steps: schema.steps.map((step) => {
       return {
         ...step,
-        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
+        validate: createValidator(
+          step.schema,
+          customFieldValidators,
+          { apiHolder }
+        )
       };
     })
   }))));
@@ -1092,11 +1126,16 @@ class DirectoryEditorManager {
     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;
-    }));
+    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);
@@ -1114,7 +1153,9 @@ _listeners = new WeakMap();
 _files = new WeakMap();
 _selectedFile = new WeakMap();
 _signalUpdate2 = new WeakMap();
-const DirectoryEditorContext = createContext(void 0);
+const DirectoryEditorContext = createContext(
+  void 0
+);
 function useDirectoryEditor() {
   const value = useContext(DirectoryEditorContext);
   const rerender = useRerender();
@@ -1126,15 +1167,17 @@ function useDirectoryEditor() {
 }
 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);
+  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;
     }
-    return manager;
-  });
+  );
   useEffect(() => {
     execute(directory);
   }, [execute, directory]);
@@ -1164,7 +1207,9 @@ function base64EncodeContent(content) {
     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)));
+      chunks.push(
+        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
+      );
     }
     return btoa(chunks.join(""));
   }
@@ -1203,38 +1248,44 @@ function DryRunProvider(props) {
       };
     });
   }, []);
-  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
+  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++
       };
-    });
-  }, [scaffolderApi]);
-  const dryRun = useMemo(() => ({
-    ...state,
-    selectResult,
-    deleteResult,
-    execute
-  }), [state, selectResult, deleteResult, execute]);
+      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);
@@ -1324,7 +1375,9 @@ function parseFileEntires(paths) {
             path: entryPath,
             children: []
           };
-          const firstFileIndex = current.children.findIndex((child) => child.type === "file");
+          const firstFileIndex = current.children.findIndex(
+            (child) => child.type === "file"
+          );
           current.children.splice(firstFileIndex, 0, newEntry);
           current = newEntry;
         } else {
@@ -1356,7 +1409,10 @@ function FileTreeItem({ entry }) {
 }
 function FileBrowser(props) {
   const classes = useStyles$9();
-  const fileTree = useMemo(() => parseFileEntires(props.filePaths), [props.filePaths]);
+  const fileTree = useMemo(
+    () => parseFileEntires(props.filePaths),
+    [props.filePaths]
+  );
   return /* @__PURE__ */ React.createElement(TreeView, {
     selected: props.selected,
     className: classes.root,
@@ -1434,7 +1490,9 @@ function FilesContent() {
   const classes = useStyles$7();
   const { selectedResult } = useDryRun();
   const [selectedPath, setSelectedPath] = useState("");
-  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find((f) => f.path === selectedPath);
+  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
+    (f) => f.path === selectedPath
+  );
   useEffect(() => {
     if (selectedResult) {
       const [firstFile] = selectedResult.directoryContents;
@@ -1473,7 +1531,9 @@ function LogContent() {
     }
     return (_a2 = selectedResult.steps.map((step) => {
       var _a3, _b2;
-      const stepLog = selectedResult.log.filter((l) => l.body.stepId === step.id);
+      const stepLog = selectedResult.log.filter(
+        (l) => l.body.stepId === step.id
+      );
       return {
         id: step.id,
         name: step.name,
@@ -1516,7 +1576,9 @@ function OutputContent() {
 }
 function DryRunResultsView() {
   const classes = useStyles$7();
-  const [selectedTab, setSelectedTab] = useState("files");
+  const [selectedTab, setSelectedTab] = useState(
+    "files"
+  );
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
   }, /* @__PURE__ */ React.createElement(Tabs, {
@@ -1616,7 +1678,9 @@ function TemplateEditorBrowser(props) {
       return;
     }
     if (changedFiles.length > 0) {
-      const accepted = window.confirm("Are you sure? Unsaved changes will be lost");
+      const accepted = window.confirm(
+        "Are you sure? Unsaved changes will be lost"
+      );
       if (!accepted) {
         return;
       }
@@ -1704,49 +1768,61 @@ function TemplateEditorForm(props) {
   const apiHolder = useApiHolder();
   const [steps, setSteps] = useState();
   const fields = useMemo(() => {
-    return Object.fromEntries(fieldExtensions.map(({ name, component }) => [name, component]));
+    return Object.fromEntries(
+      fieldExtensions.map(({ name, component }) => [name, component])
+    );
   }, [fieldExtensions]);
-  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) {
+  useDebounce(
+    () => {
+      try {
+        if (!content) {
           setSteps(void 0);
           return;
         }
-        rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
-      }
-      const { parameters } = rootObj;
-      if (!Array.isArray(parameters)) {
-        setErrorText("Template parameters must be an array");
-        setSteps(void 0);
-        return;
-      }
-      const fieldValidators = Object.fromEntries(fieldExtensions.map(({ name, validation }) => [name, validation]));
-      setErrorText();
-      setSteps(parameters.flatMap((param) => isJsonObject(param) ? [
-        {
-          title: String(param.title),
-          schema: param,
-          validate: createValidator(param, fieldValidators, {
-            apiHolder
-          })
+        const parsed = yaml.parse(content);
+        if (!isJsonObject(parsed)) {
+          setSteps(void 0);
+          return;
         }
-      ] : []));
-    } catch (e) {
-      setErrorText(e.message);
-    }
-  }, 250, [contentIsSpec, content, apiHolder]);
+        let rootObj = parsed;
+        if (!contentIsSpec) {
+          const isTemplate = String(parsed.kind).toLocaleLowerCase("en-US") === "template";
+          if (!isTemplate) {
+            setSteps(void 0);
+            return;
+          }
+          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
+        }
+        const { parameters } = rootObj;
+        if (!Array.isArray(parameters)) {
+          setErrorText("Template parameters must be an array");
+          setSteps(void 0);
+          return;
+        }
+        const fieldValidators = Object.fromEntries(
+          fieldExtensions.map(({ name, validation }) => [name, validation])
+        );
+        setErrorText();
+        setSteps(
+          parameters.flatMap(
+            (param) => isJsonObject(param) ? [
+              {
+                title: String(param.title),
+                schema: param,
+                validate: createValidator(param, fieldValidators, {
+                  apiHolder
+                })
+              }
+            ] : []
+          )
+        );
+      } catch (e) {
+        setErrorText(e.message);
+      }
+    },
+    250,
+    [contentIsSpec, content, apiHolder]
+  );
   if (!steps) {
     return null;
   }
@@ -1840,12 +1916,15 @@ function TemplateEditorTextArea(props) {
     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();
+  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, {
@@ -2024,31 +2103,43 @@ const TemplateFormPreviewer = ({
   const [templateOptions, setTemplateOptions] = useState([]);
   const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
   const [formState, setFormState] = useState({});
-  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]);
+  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", {
@@ -2123,31 +2214,34 @@ function TemplateEditorPage(props) {
   }), content);
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    backgroundColor: "rgba(0, 0, 0, .11)",
-    boxShadow: "none",
-    margin: theme.spacing(1, 0, 1, 0)
-  },
-  title: {
-    margin: theme.spacing(1, 0, 0, 1),
-    textTransform: "uppercase",
-    fontSize: 12,
-    fontWeight: "bold"
-  },
-  listIcon: {
-    minWidth: 30,
-    color: theme.palette.text.primary
-  },
-  menuItem: {
-    minHeight: theme.spacing(6)
-  },
-  groupWrapper: {
-    margin: theme.spacing(1, 1, 2, 1)
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      backgroundColor: "rgba(0, 0, 0, .11)",
+      boxShadow: "none",
+      margin: theme.spacing(1, 0, 1, 0)
+    },
+    title: {
+      margin: theme.spacing(1, 0, 0, 1),
+      textTransform: "uppercase",
+      fontSize: 12,
+      fontWeight: "bold"
+    },
+    listIcon: {
+      minWidth: 30,
+      color: theme.palette.text.primary
+    },
+    menuItem: {
+      minHeight: theme.spacing(6)
+    },
+    groupWrapper: {
+      margin: theme.spacing(1, 1, 2, 1)
+    }
+  }),
+  {
+    name: "ScaffolderReactOwnerListPicker"
   }
-}), {
-  name: "ScaffolderReactOwnerListPicker"
-});
+);
 function getFilterGroups() {
   return [
     {
@@ -2209,7 +2303,10 @@ const CreatedAtColumn = ({ createdAt }) => {
 const OwnerEntityColumn = ({ entityRef }) => {
   var _a, _b, _c;
   const catalogApi = useApi(catalogApiRef);
-  const { value, loading, error } = useAsync(() => catalogApi.getEntityByRef(entityRef || ""), [catalogApi, entityRef]);
+  const { value, loading, error } = useAsync(
+    () => catalogApi.getEntityByRef(entityRef || ""),
+    [catalogApi, entityRef]
+  );
   if (!entityRef) {
     return /* @__PURE__ */ React.createElement("p", null, "Unknown");
   }
@@ -2236,7 +2333,10 @@ const TaskStatusColumn = ({ status }) => {
 
 const TemplateTitleColumn = ({ entityRef }) => {
   const scaffolder = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(() => scaffolder.getTemplateParameterSchema(entityRef || ""), [scaffolder, entityRef]);
+  const { value, loading, error } = useAsync(
+    () => scaffolder.getTemplateParameterSchema(entityRef || ""),
+    [scaffolder, entityRef]
+  );
   if (loading || error || !entityRef) {
     return null;
   }
@@ -2257,7 +2357,9 @@ const ListTaskPageContent = (props) => {
     if (scaffolderApi.listTasks) {
       return (_a2 = scaffolderApi.listTasks) == null ? void 0 : _a2.call(scaffolderApi, { filterByOwnership: ownerFilter });
     }
-    console.warn("listTasks is not implemented in the scaffolderApi, please make sure to implement this method.");
+    console.warn(
+      "listTasks is not implemented in the scaffolderApi, please make sure to implement this method."
+    );
     return Promise.resolve({ tasks: [] });
   }, [scaffolderApi, ownerFilter]);
   if (loading) {
@@ -2342,19 +2444,31 @@ const Router = (props) => {
   const { TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
   const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
-  const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
-    key: FIELD_EXTENSION_WRAPPER_KEY
-  }).findComponentData({
-    key: FIELD_EXTENSION_KEY
-  }));
+  const customFieldExtensions = useElementFilter(
+    outlet,
+    (elements) => elements.selectByComponentData({
+      key: FIELD_EXTENSION_WRAPPER_KEY
+    }).findComponentData({
+      key: FIELD_EXTENSION_KEY
+    })
+  );
   const fieldExtensions = [
     ...customFieldExtensions,
-    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({ name }) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
+      ({ name }) => !customFieldExtensions.some(
+        (customFieldExtension) => customFieldExtension.name === name
+      )
+    )
   ];
   const RedirectingComponent = () => {
     const { templateName } = useParams$1();
     const newLink = useRouteRef(selectedTemplateRouteRef);
-    useEffect(() => console.warn("The route /template/:templateName is deprecated, please use the new /template/:namespace/:templateName route instead"), []);
+    useEffect(
+      () => console.warn(
+        "The route /template/:templateName is deprecated, please use the new /template/:namespace/:templateName route instead"
+      ),
+      []
+    );
     return /* @__PURE__ */ React.createElement(Navigate, {
       to: newLink({ namespace: "default", templateName })
     });
@@ -2396,4 +2510,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-e14e5f4e.esm.js.map
+//# sourceMappingURL=Router-fa1fcf0c.esm.js.map