@backstage/plugin-techdocs 1.7.1-next.2 → 1.8.1-next.0

package/dist/esm/{index-683d6465.esm.js → TechDocsReaderPage-89ab8b88.esm.js}

@@ -1,22 +1,19 @@
-import { createApiRef, useApi, configApiRef, useAnalytics, createRouteRef, useRouteRef, useRouteRefParams, getComponentData, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
-import { ResponseError, NotFoundError } from '@backstage/errors';
-import { EventSourcePolyfill } from 'event-source-polyfill';
 import React, { useReducer, useRef, useMemo, createContext, useContext, useState, useEffect, useCallback, Children } from 'react';
-import { useParams, useNavigate, useOutlet, Routes, Route, useRoutes } from 'react-router-dom';
-import { techdocsStorageApiRef as techdocsStorageApiRef$1, useTechDocsReaderPage, SHADOW_DOM_STYLE_LOAD_EVENT, useShadowDomStylesLoading, useTechDocsAddons, TechDocsAddonLocations, TechDocsShadowDom, TECHDOCS_ADDONS_WRAPPER_KEY, TECHDOCS_ADDONS_KEY, TechDocsReaderPageProvider, techdocsApiRef as techdocsApiRef$1 } from '@backstage/plugin-techdocs-react';
-import useAsync from 'react-use/lib/useAsync';
-import useAsyncRetry from 'react-use/lib/useAsyncRetry';
-import { LogViewer, ErrorPage, useSidebarPinState, Content, HeaderLabel, Header, Page, ItemCardGrid, ItemCardHeader, LinkButton, WarningPanel, CodeSnippet, Progress, Link, ContentHeader, SubvalueCell, Table, EmptyState, PageWithHeader, SupportButton, MissingAnnotationEmptyState } from '@backstage/core-components';
-import { makeStyles, createStyles, Button, Drawer, Grid, Typography, IconButton, CircularProgress, lighten, alpha, useTheme, withStyles, Tooltip, ThemeProvider, SvgIcon, useMediaQuery, Portal, Toolbar, Box, Menu, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
-import { SearchContextProvider, useSearch, SearchAutocomplete, createSearchResultListItemExtension } from '@backstage/plugin-search-react';
-import { TechDocsSearchResultListItem as TechDocsSearchResultListItem$1 } from './TechDocsSearchResultListItem-4736f829.esm.js';
+import { useParams, useNavigate, useOutlet } from 'react-router-dom';
+import { LogViewer, ErrorPage, useSidebarPinState, Content, HeaderLabel, Header, Page } from '@backstage/core-components';
+import { techdocsStorageApiRef, useTechDocsReaderPage, SHADOW_DOM_STYLE_LOAD_EVENT, useShadowDomStylesLoading, useTechDocsAddons, TechDocsAddonLocations, useShadowRootElements, TechDocsShadowDom, TECHDOCS_ADDONS_WRAPPER_KEY, TECHDOCS_ADDONS_KEY, TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
+import { makeStyles, createStyles, Button, Drawer, Grid, Typography, IconButton, CircularProgress, lighten, alpha, useTheme, withStyles, Tooltip, ThemeProvider, SvgIcon, useMediaQuery, Portal, Toolbar, Box, Menu } from '@material-ui/core';
+import { SearchContextProvider, useSearch, SearchAutocomplete } from '@backstage/plugin-search-react';
+import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem-4736f829.esm.js';
 import { Alert, Skeleton } from '@material-ui/lab';
 import Close from '@material-ui/icons/Close';
+import { useApi, configApiRef, useAnalytics, useRouteRef, useRouteRefParams, getComponentData } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/lib/useAsync';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import DOMPurify from 'dompurify';
 import { replaceGithubUrlType } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
-import ReactDOM from 'react-dom';
 import parseGitUrl from 'git-url-parse';
 import MenuIcon from '@material-ui/icons/Menu';
 import IconButton$1 from '@material-ui/core/IconButton';
@@ -24,182 +21,11 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 import Helmet from 'react-helmet';
 import { useTheme as useTheme$1 } from '@material-ui/core/styles';
 import CodeIcon from '@material-ui/icons/Code';
-import { getEntityRelations, EntityRefLink, EntityRefLinks, useEntityList, useEntityOwnership, humanizeEntityRef, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, CatalogFilterLayout, UserListPicker, EntityOwnerPicker, EntityTagPicker, useEntity } from '@backstage/plugin-catalog-react';
-import { RELATION_OWNED_BY, getCompoundEntityRef, parseEntityRef } from '@backstage/catalog-model';
+import { getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { capitalize } from 'lodash';
+import { r as rootRouteRef, b as rootDocsRouteRef } from './routes-691e552c.esm.js';
 import SettingsIcon from '@material-ui/icons/Settings';
-import ShareIcon from '@material-ui/icons/Share';
-import { withStyles as withStyles$1 } from '@material-ui/styles';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
-
-const techdocsStorageApiRef = createApiRef({
-  id: "plugin.techdocs.storageservice"
-});
-const techdocsApiRef = createApiRef({
-  id: "plugin.techdocs.service"
-});
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class TechDocsClient {
-  constructor(options) {
-    __publicField(this, "configApi");
-    __publicField(this, "discoveryApi");
-    __publicField(this, "fetchApi");
-    this.configApi = options.configApi;
-    this.discoveryApi = options.discoveryApi;
-    this.fetchApi = options.fetchApi;
-  }
-  async getApiOrigin() {
-    return await this.discoveryApi.getBaseUrl("techdocs");
-  }
-  /**
-   * Retrieve TechDocs metadata.
-   *
-   * When docs are built, we generate a techdocs_metadata.json and store it along with the generated
-   * static files. It includes necessary data about the docs site. This method requests techdocs-backend
-   * which retrieves the TechDocs metadata.
-   *
-   * @param entityId - Object containing entity data like name, namespace, etc.
-   */
-  async getTechDocsMetadata(entityId) {
-    const { kind, namespace, name } = entityId;
-    const apiOrigin = await this.getApiOrigin();
-    const requestUrl = `${apiOrigin}/metadata/techdocs/${namespace}/${kind}/${name}`;
-    const request = await this.fetchApi.fetch(`${requestUrl}`);
-    if (!request.ok) {
-      throw await ResponseError.fromResponse(request);
-    }
-    return await request.json();
-  }
-  /**
-   * Retrieve metadata about an entity.
-   *
-   * This method requests techdocs-backend which uses the catalog APIs to respond with filtered
-   * information required here.
-   *
-   * @param entityId - Object containing entity data like name, namespace, etc.
-   */
-  async getEntityMetadata(entityId) {
-    const { kind, namespace, name } = entityId;
-    const apiOrigin = await this.getApiOrigin();
-    const requestUrl = `${apiOrigin}/metadata/entity/${namespace}/${kind}/${name}`;
-    const request = await this.fetchApi.fetch(`${requestUrl}`);
-    if (!request.ok) {
-      throw await ResponseError.fromResponse(request);
-    }
-    return await request.json();
-  }
-}
-class TechDocsStorageClient {
-  constructor(options) {
-    __publicField(this, "configApi");
-    __publicField(this, "discoveryApi");
-    __publicField(this, "identityApi");
-    __publicField(this, "fetchApi");
-    this.configApi = options.configApi;
-    this.discoveryApi = options.discoveryApi;
-    this.identityApi = options.identityApi;
-    this.fetchApi = options.fetchApi;
-  }
-  async getApiOrigin() {
-    return await this.discoveryApi.getBaseUrl("techdocs");
-  }
-  async getStorageUrl() {
-    var _a;
-    return (_a = this.configApi.getOptionalString("techdocs.storageUrl")) != null ? _a : `${await this.discoveryApi.getBaseUrl("techdocs")}/static/docs`;
-  }
-  async getBuilder() {
-    return this.configApi.getString("techdocs.builder");
-  }
-  /**
-   * Fetch HTML content as text for an individual docs page in an entity's docs site.
-   *
-   * @param entityId - Object containing entity data like name, namespace, etc.
-   * @param path - The unique path to an individual docs page e.g. overview/what-is-new
-   * @returns HTML content of the docs page as string
-   * @throws Throws error when the page is not found.
-   */
-  async getEntityDocs(entityId, path) {
-    const { kind, namespace, name } = entityId;
-    const storageUrl = await this.getStorageUrl();
-    const url = `${storageUrl}/${namespace}/${kind}/${name}/${path}`;
-    const request = await this.fetchApi.fetch(
-      `${url.endsWith("/") ? url : `${url}/`}index.html`
-    );
-    let errorMessage = "";
-    switch (request.status) {
-      case 404:
-        errorMessage = "Page not found. ";
-        if (!path) {
-          errorMessage += "This could be because there is no index.md file in the root of the docs directory of this repository.";
-        }
-        throw new NotFoundError(errorMessage);
-      case 500:
-        errorMessage = "Could not generate documentation or an error in the TechDocs backend. ";
-        throw new Error(errorMessage);
-    }
-    return request.text();
-  }
-  /**
-   * Check if docs are on the latest version and trigger rebuild if not
-   *
-   * @param entityId - Object containing entity data like name, namespace, etc.
-   * @param logHandler - Callback to receive log messages from the build process
-   * @returns Whether documents are currently synchronized to newest version
-   * @throws Throws error on error from sync endpoint in TechDocs Backend
-   */
-  async syncEntityDocs(entityId, logHandler = () => {
-  }) {
-    const { kind, namespace, name } = entityId;
-    const apiOrigin = await this.getApiOrigin();
-    const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
-    const { token } = await this.identityApi.getCredentials();
-    return new Promise((resolve, reject) => {
-      const source = new EventSourcePolyfill(url, {
-        withCredentials: true,
-        headers: token ? { Authorization: `Bearer ${token}` } : {}
-      });
-      source.addEventListener("log", (e) => {
-        if (e.data) {
-          logHandler(JSON.parse(e.data));
-        }
-      });
-      source.addEventListener("finish", (e) => {
-        let updated = false;
-        if (e.data) {
-          ({ updated } = JSON.parse(e.data));
-        }
-        resolve(updated ? "updated" : "cached");
-      });
-      source.onerror = (e) => {
-        source.close();
-        switch (e.status) {
-          case 404:
-            reject(new NotFoundError(e.message));
-            return;
-          default:
-            reject(new Error(e.data));
-            return;
-        }
-      };
-    });
-  }
-  async getBaseUrl(oldBaseUrl, entityId, path) {
-    const { kind, namespace, name } = entityId;
-    const apiOrigin = await this.getApiOrigin();
-    const newBaseUrl = `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`;
-    return new URL(
-      oldBaseUrl,
-      newBaseUrl.endsWith("/") ? newBaseUrl : `${newBaseUrl}/`
-    ).toString();
-  }
-}
 
 function calculateDisplayState({
   contentLoading,
@@ -274,7 +100,7 @@ function useReaderState(kind, namespace, name, path) {
     contentLoading: true,
     buildLog: []
   });
-  const techdocsStorageApi = useApi(techdocsStorageApiRef$1);
+  const techdocsStorageApi = useApi(techdocsStorageApiRef);
   const { retry: contentReload } = useAsyncRetry(async () => {
     dispatch({ type: "contentLoading" });
     try {
@@ -429,7 +255,7 @@ const TechDocsSearchBar = (props) => {
       value: null,
       options,
       renderOption: ({ document, highlight }) => /* @__PURE__ */ React.createElement(
-        TechDocsSearchResultListItem$1,
+        TechDocsSearchResultListItem,
         {
           result: document,
           lineClamp: 3,
@@ -1312,6 +1138,22 @@ const addBaseUrl = ({
   };
 };
 
+let ReactDOMPromise;
+if (process.env.HAS_REACT_DOM_CLIENT) {
+  ReactDOMPromise = import('react-dom/client');
+} else {
+  ReactDOMPromise = import('react-dom');
+}
+function renderReactElement(element, root) {
+  ReactDOMPromise.then((ReactDOM) => {
+    if ("createRoot" in ReactDOM) {
+      ReactDOM.createRoot(root).render(element);
+    } else {
+      ReactDOM.render(element, root);
+    }
+  });
+}
+
 const addGitFeedbackLink = (scmIntegrationsApi) => {
   return (dom) => {
     var _a;
@@ -1348,7 +1190,7 @@ Feedback:`
       default:
         return dom;
     }
-    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
+    renderReactElement(React.createElement(FeedbackOutlinedIcon), feedbackLink);
     feedbackLink.style.paddingLeft = "5px";
     feedbackLink.title = "Leave feedback for this page";
     feedbackLink.id = "git-feedback-link";
@@ -1367,7 +1209,7 @@ const addSidebarToggle = () => {
       return dom;
     }
     const toggleSidebar = mkdocsToggleSidebar.cloneNode();
-    ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
+    renderReactElement(React.createElement(MenuIcon), toggleSidebar);
     toggleSidebar.id = "toggle-sidebar";
     toggleSidebar.title = "Toggle Sidebar";
     toggleSidebar.classList.add("md-content__button");
@@ -1483,7 +1325,7 @@ const copyToClipboard = (theme) => {
       const text = code.textContent || "";
       const container = document.createElement("div");
       (_a = code == null ? void 0 : code.parentElement) == null ? void 0 : _a.prepend(container);
-      ReactDOM.render(
+      renderReactElement(
         /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(CopyToClipboardButton, { text })),
         container
       );
@@ -1529,26 +1371,6 @@ const onCssReady = ({
   };
 };
 
-const scrollIntoAnchor = () => {
-  return (dom) => {
-    dom.addEventListener(
-      SHADOW_DOM_STYLE_LOAD_EVENT,
-      function handleShadowDomStyleLoad() {
-        var _a;
-        if (window.location.hash) {
-          const hash = window.location.hash.slice(1);
-          (_a = dom == null ? void 0 : dom.querySelector(`[id="${hash}"]`)) == null ? void 0 : _a.scrollIntoView();
-        }
-        dom.removeEventListener(
-          SHADOW_DOM_STYLE_LOAD_EVENT,
-          handleShadowDomStyleLoad
-        );
-      }
-    );
-    return dom;
-  };
-};
-
 const scrollIntoNavigation = () => {
   return (dom) => {
     setTimeout(() => {
@@ -1621,7 +1443,7 @@ const useTechDocsReaderDom = (entityRef) => {
   const sanitizerTransformer = useSanitizerTransformer();
   const stylesTransformer = useStylesTransformer();
   const analytics = useAnalytics();
-  const techdocsStorageApi = useApi(techdocsStorageApiRef$1);
+  const techdocsStorageApi = useApi(techdocsStorageApiRef);
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const { state, path, content: rawPage } = useTechDocsReader();
   const [dom, setDom] = useState(null);
@@ -1702,7 +1524,6 @@ const useTechDocsReaderDom = (entityRef) => {
   );
   const postRender = useCallback(
     async (transformedElement) => transform(transformedElement, [
-      scrollIntoAnchor(),
       scrollIntoNavigation(),
       copyToClipboard(theme),
       addLinkClickListener({
@@ -1840,6 +1661,22 @@ const TechDocsReaderPageContent = withTechDocsReaderProvider(
       setShadowRoot
     } = useTechDocsReaderPage();
     const dom = useTechDocsReaderDom(entityRef);
+    const path = window.location.pathname;
+    const hash = window.location.hash;
+    const isStyleLoading = useShadowDomStylesLoading(dom);
+    const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
+    useEffect(() => {
+      var _a2;
+      if (isStyleLoading)
+        return;
+      if (hash) {
+        if (hashElement) {
+          hashElement.scrollIntoView();
+        }
+      } else {
+        (_a2 = document == null ? void 0 : document.querySelector("header")) == null ? void 0 : _a2.scrollIntoView();
+      }
+    }, [path, hash, hashElement, isStyleLoading]);
     const handleAppend = useCallback(
       (newShadowRoot) => {
         setShadowRoot(newShadowRoot);
@@ -1865,17 +1702,6 @@ const TechDocsReaderPageContent = withTechDocsReaderProvider(
 );
 const Reader = TechDocsReaderPageContent;
 
-const rootRouteRef = createRouteRef({
-  id: "techdocs:index-page"
-});
-const rootDocsRouteRef = createRouteRef({
-  id: "techdocs:reader-page",
-  params: ["namespace", "kind", "name"]
-});
-const rootCatalogDocsRouteRef = createRouteRef({
-  id: "techdocs:catalog-reader-view"
-});
-
 const skeleton = /* @__PURE__ */ React.createElement(Skeleton, { animation: "wave", variant: "text", height: 40 });
 const TechDocsReaderPageHeader = (props) => {
   const {
@@ -1940,7 +1766,7 @@ const TechDocsReaderPageHeader = (props) => {
         }
       )
     }
-  ), lifecycle ? /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: lifecycle }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React.createElement(
+  ), lifecycle ? /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: String(lifecycle) }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React.createElement(
     HeaderLabel,
     {
       label: "",
@@ -2046,7 +1872,7 @@ const TechDocsReaderLayout = (props) => {
   const { withSearch, withHeader = true } = props;
   return /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, withHeader && /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageSubheader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageContent, { withSearch }));
 };
-const TechDocsReaderPage$1 = (props) => {
+const TechDocsReaderPage = (props) => {
   const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
   const { children, entityRef = { kind, name, namespace } } = props;
   const outlet = useOutlet();
@@ -2071,487 +1897,5 @@ const TechDocsReaderPage$1 = (props) => {
   }) : children)));
 };
 
-function toLowerMaybe(str, config) {
-  return config.getOptionalBoolean(
-    "techdocs.legacyUseCaseSensitiveTripletPaths"
-  ) ? str : str.toLocaleLowerCase("en-US");
-}
-
-const DocsCardGrid = (props) => {
-  const { entities } = props;
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  return /* @__PURE__ */ React.createElement(ItemCardGrid, { "data-testid": "docs-explore" }, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
-    var _a, _b;
-    return /* @__PURE__ */ React.createElement(Card, { key: index }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(
-      ItemCardHeader,
-      {
-        title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
-      }
-    )), /* @__PURE__ */ React.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(
-      LinkButton,
-      {
-        to: getRouteToReaderPageFor({
-          namespace: toLowerMaybe(
-            (_b = entity.metadata.namespace) != null ? _b : "default",
-            config
-          ),
-          kind: toLowerMaybe(entity.kind, config),
-          name: toLowerMaybe(entity.metadata.name, config)
-        }),
-        color: "primary",
-        "data-testid": "read_docs"
-      },
-      "Read Docs"
-    )));
-  }));
-};
-
-const allEntitiesGroup = {
-  title: "All Documentation",
-  filterPredicate: () => true
-};
-const EntityListDocsGridGroup = (props) => {
-  const { entities, group } = props;
-  const { loading: loadingOwnership, isOwnedEntity } = useEntityOwnership();
-  const shownEntities = entities.filter((entity) => {
-    if (group.filterPredicate === "ownedByUser") {
-      if (loadingOwnership) {
-        return false;
-      }
-      return isOwnedEntity(entity);
-    }
-    return typeof group.filterPredicate === "function" && group.filterPredicate(entity);
-  });
-  const titleComponent = (() => {
-    return typeof group.title === "string" ? /* @__PURE__ */ React.createElement(ContentHeader, { title: group.title }) : group.title;
-  })();
-  if (shownEntities.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(DocsCardGrid, { entities: shownEntities }));
-};
-const EntityListDocsGrid = (props) => {
-  const { loading, error, entities } = useEntityList();
-  if (error) {
-    return /* @__PURE__ */ React.createElement(
-      WarningPanel,
-      {
-        severity: "error",
-        title: "Could not load available documentation."
-      },
-      /* @__PURE__ */ React.createElement(CodeSnippet, { language: "text", text: error.toString() })
-    );
-  }
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (entities.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { "data-testid": "doc-not-found" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No documentation found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/techdocs/creating-and-publishing" }, "publishing documentation"), "."));
-  }
-  entities.sort(
-    (a, b) => {
-      var _a, _b;
-      return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare(
-        (_b = b.metadata.title) != null ? _b : b.metadata.name
-      );
-    }
-  );
-  return /* @__PURE__ */ React.createElement(Content, null, (props.groups || [allEntitiesGroup]).map((group, index) => /* @__PURE__ */ React.createElement(
-    EntityListDocsGridGroup,
-    {
-      entities,
-      group,
-      key: `${group.title}-${index}`
-    }
-  )));
-};
-
-const YellowStar = withStyles$1({
-  root: {
-    color: "#f3ba37"
-  }
-})(Star);
-const actionFactories = {
-  createCopyDocsUrlAction(copyToClipboard) {
-    return (row) => {
-      return {
-        icon: () => /* @__PURE__ */ React.createElement(ShareIcon, { fontSize: "small" }),
-        tooltip: "Click to copy documentation link to clipboard",
-        onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
-      };
-    };
-  },
-  createStarEntityAction(isStarredEntity, toggleStarredEntity) {
-    return (row) => {
-      const entity = row.entity;
-      const isStarred = isStarredEntity(entity);
-      return {
-        cellStyle: { paddingLeft: "1em" },
-        icon: () => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null),
-        tooltip: isStarred ? "Remove from favorites" : "Add to favorites",
-        onClick: () => toggleStarredEntity(entity)
-      };
-    };
-  }
-};
-
-function customTitle(entity) {
-  return entity.metadata.title || entity.metadata.name;
-}
-const columnFactories = {
-  createNameColumn() {
-    return {
-      title: "Document",
-      field: "entity.metadata.name",
-      highlight: true,
-      render: (row) => /* @__PURE__ */ React.createElement(
-        SubvalueCell,
-        {
-          value: /* @__PURE__ */ React.createElement(Link, { to: row.resolved.docsUrl }, customTitle(row.entity)),
-          subvalue: row.entity.metadata.description
-        }
-      )
-    };
-  },
-  createOwnerColumn() {
-    return {
-      title: "Owner",
-      field: "resolved.ownedByRelationsTitle",
-      render: ({ resolved }) => /* @__PURE__ */ React.createElement(
-        EntityRefLinks,
-        {
-          entityRefs: resolved.ownedByRelations,
-          defaultKind: "group"
-        }
-      )
-    };
-  },
-  createKindColumn() {
-    return {
-      title: "Kind",
-      field: "entity.kind"
-    };
-  },
-  createTypeColumn() {
-    return {
-      title: "Type",
-      field: "entity.spec.type"
-    };
-  }
-};
-
-const DocsTable = (props) => {
-  const { entities, title, loading, columns, actions, options } = props;
-  const [, copyToClipboard] = useCopyToClipboard();
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  const documents = entities.map((entity) => {
-    var _a;
-    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
-    return {
-      entity,
-      resolved: {
-        docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe(
-            (_a = entity.metadata.namespace) != null ? _a : "default",
-            config
-          ),
-          kind: toLowerMaybe(entity.kind, config),
-          name: toLowerMaybe(entity.metadata.name, config)
-        }),
-        ownedByRelations,
-        ownedByRelationsTitle: ownedByRelations.map((r) => humanizeEntityRef(r, { defaultKind: "group" })).join(", ")
-      }
-    };
-  });
-  const defaultColumns = [
-    columnFactories.createNameColumn(),
-    columnFactories.createOwnerColumn(),
-    columnFactories.createKindColumn(),
-    columnFactories.createTypeColumn()
-  ];
-  const defaultActions = [
-    actionFactories.createCopyDocsUrlAction(copyToClipboard)
-  ];
-  const pageSize = 20;
-  const paging = documents && documents.length > pageSize;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      isLoading: loading,
-      options: {
-        paging,
-        pageSize,
-        search: true,
-        actionsColumnIndex: -1,
-        ...options
-      },
-      data: documents,
-      columns: columns || defaultColumns,
-      actions: actions || defaultActions,
-      title: title ? `${title} (${documents.length})` : `All (${documents.length})`
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    EmptyState,
-    {
-      missing: "data",
-      title: "No documents to show",
-      description: "Create your own document. Check out our Getting Started Information",
-      action: /* @__PURE__ */ React.createElement(
-        LinkButton,
-        {
-          color: "primary",
-          to: "https://backstage.io/docs/features/techdocs/getting-started",
-          variant: "contained"
-        },
-        "DOCS"
-      )
-    }
-  ));
-};
-DocsTable.columns = columnFactories;
-DocsTable.actions = actionFactories;
-
-const EntityListDocsTable = (props) => {
-  var _a, _b;
-  const { columns, actions, options } = props;
-  const { loading, error, entities, filters } = useEntityList();
-  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
-  const [, copyToClipboard] = useCopyToClipboard();
-  const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
-  const defaultActions = [
-    actionFactories.createCopyDocsUrlAction(copyToClipboard),
-    actionFactories.createStarEntityAction(
-      isStarredEntity,
-      toggleStarredEntity
-    )
-  ];
-  if (error) {
-    return /* @__PURE__ */ React.createElement(
-      WarningPanel,
-      {
-        severity: "error",
-        title: "Could not load available documentation."
-      },
-      /* @__PURE__ */ React.createElement(CodeSnippet, { language: "text", text: error.toString() })
-    );
-  }
-  return /* @__PURE__ */ React.createElement(
-    DocsTable,
-    {
-      title,
-      entities,
-      loading,
-      actions: actions || defaultActions,
-      columns,
-      options
-    }
-  );
-};
-EntityListDocsTable.columns = columnFactories;
-EntityListDocsTable.actions = actionFactories;
-
-const TechDocsPageWrapper = (props) => {
-  var _a;
-  const { children } = props;
-  const configApi = useApi(configApiRef);
-  const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
-  return /* @__PURE__ */ React.createElement(
-    PageWithHeader,
-    {
-      title: "Documentation",
-      subtitle: generatedSubtitle,
-      themeId: "documentation"
-    },
-    children
-  );
-};
-
-class TechDocsFilter {
-  getCatalogFilters() {
-    return {
-      "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
-    };
-  }
-}
-const TechDocsPicker = () => {
-  const { updateFilters } = useEntityList();
-  useEffect(() => {
-    updateFilters({
-      techdocs: new TechDocsFilter()
-    });
-  }, [updateFilters]);
-  return null;
-};
-
-const DefaultTechDocsHome = (props) => {
-  const { initialFilter = "owned", columns, actions } = props;
-  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, { initialFilter }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, { actions, columns }))))));
-};
-
-const techdocsPlugin = createPlugin({
-  id: "techdocs",
-  apis: [
-    createApiFactory({
-      api: techdocsStorageApiRef$1,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        identityApi: identityApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
-        configApi,
-        discoveryApi,
-        identityApi,
-        fetchApi
-      })
-    }),
-    createApiFactory({
-      api: techdocsApiRef$1,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
-        configApi,
-        discoveryApi,
-        fetchApi
-      })
-    })
-  ],
-  routes: {
-    root: rootRouteRef,
-    docRoot: rootDocsRouteRef,
-    entityContent: rootCatalogDocsRouteRef
-  }
-});
-const TechdocsPage = techdocsPlugin.provide(
-  createRoutableExtension({
-    name: "TechdocsPage",
-    component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router),
-    mountPoint: rootRouteRef
-  })
-);
-const EntityTechdocsContent = techdocsPlugin.provide(
-  createRoutableExtension({
-    name: "EntityTechdocsContent",
-    component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.EmbeddedDocsRouter),
-    mountPoint: rootCatalogDocsRouteRef
-  })
-);
-const TechDocsCustomHome = techdocsPlugin.provide(
-  createRoutableExtension({
-    name: "TechDocsCustomHome",
-    component: () => import('./TechDocsCustomHome-453580db.esm.js').then(
-      (m) => m.TechDocsCustomHome
-    ),
-    mountPoint: rootRouteRef
-  })
-);
-const TechDocsIndexPage$2 = techdocsPlugin.provide(
-  createRoutableExtension({
-    name: "TechDocsIndexPage",
-    component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then(
-      (m) => m.TechDocsIndexPage
-    ),
-    mountPoint: rootRouteRef
-  })
-);
-const TechDocsReaderPage = techdocsPlugin.provide(
-  createRoutableExtension({
-    name: "TechDocsReaderPage",
-    component: () => import('./index-715820dc.esm.js').then(
-      (m) => m.TechDocsReaderPage
-    ),
-    mountPoint: rootDocsRouteRef
-  })
-);
-const TechDocsSearchResultListItem = techdocsPlugin.provide(
-  createSearchResultListItemExtension({
-    name: "TechDocsSearchResultListItem",
-    component: () => import('./TechDocsSearchResultListItem-4736f829.esm.js').then(
-      (m) => m.TechDocsSearchResultListItem
-    ),
-    predicate: (result) => result.type === "techdocs"
-  })
-);
-
-const TECHDOCS_EXTERNAL_ANNOTATION$1 = "backstage.io/techdocs-entity";
-const EntityPageDocs = ({ entity }) => {
-  var _a, _b;
-  let entityRef = getCompoundEntityRef(entity);
-  if ((_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_EXTERNAL_ANNOTATION$1]) {
-    try {
-      entityRef = parseEntityRef(
-        (_b = entity.metadata.annotations) == null ? void 0 : _b[TECHDOCS_EXTERNAL_ANNOTATION$1]
-      );
-    } catch {
-    }
-  }
-  return /* @__PURE__ */ React.createElement(TechDocsReaderPage, { entityRef }, /* @__PURE__ */ React.createElement(TechDocsReaderPageSubheader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageContent, { withSearch: false }));
-};
-
-const TechDocsIndexPage = (props) => {
-  const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React.createElement(DefaultTechDocsHome, { ...props });
-};
-
-var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsIndexPage: TechDocsIndexPage
-});
-
-const TECHDOCS_ANNOTATION = "backstage.io/techdocs-ref";
-const TECHDOCS_EXTERNAL_ANNOTATION = "backstage.io/techdocs-entity";
-const isTechDocsAvailable = (entity) => {
-  var _a, _b, _c, _d;
-  return Boolean((_b = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.annotations) == null ? void 0 : _b[TECHDOCS_ANNOTATION]) || Boolean((_d = (_c = entity == null ? void 0 : entity.metadata) == null ? void 0 : _c.annotations) == null ? void 0 : _d[TECHDOCS_EXTERNAL_ANNOTATION]);
-};
-const Router = () => {
-  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: "/", element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null) }), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: "/:namespace/:kind/:name/*",
-      element: /* @__PURE__ */ React.createElement(TechDocsReaderPage$1, null)
-    }
-  ));
-};
-const EmbeddedDocsRouter = (props) => {
-  var _a, _b;
-  const { children } = props;
-  const { entity } = useEntity();
-  const element = useRoutes([
-    {
-      path: "/*",
-      element: /* @__PURE__ */ React.createElement(EntityPageDocs, { entity }),
-      children: [
-        {
-          path: "*",
-          element: children
-        }
-      ]
-    }
-  ]);
-  const projectId = ((_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION]) || ((_b = entity.metadata.annotations) == null ? void 0 : _b[TECHDOCS_EXTERNAL_ANNOTATION]);
-  if (!projectId) {
-    return /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, { annotation: [TECHDOCS_ANNOTATION] });
-  }
-  return element;
-};
-
-var Router$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  isTechDocsAvailable: isTechDocsAvailable,
-  Router: Router,
-  EmbeddedDocsRouter: EmbeddedDocsRouter
-});
-
-export { DocsTable as D, EntityTechdocsContent as E, Reader as R, TechDocsPageWrapper as T, DocsCardGrid as a, TechDocsReaderPage$1 as b, TechDocsReaderLayout as c, TechDocsCustomHome as d, TechDocsIndexPage$2 as e, TechdocsPage as f, TechDocsReaderPage as g, TechDocsSearchResultListItem as h, techdocsStorageApiRef as i, techdocsApiRef as j, TechDocsClient as k, TechDocsStorageClient as l, TechDocsReaderProvider as m, TechDocsReaderPageHeader as n, TechDocsReaderPageContent as o, TechDocsReaderPageSubheader as p, TechDocsSearch as q, EntityListDocsGrid as r, EntityListDocsTable as s, techdocsPlugin as t, DefaultTechDocsHome as u, TechDocsPicker as v, isTechDocsAvailable as w, Router as x, EmbeddedDocsRouter as y };
-//# sourceMappingURL=index-683d6465.esm.js.map
+export { Reader as R, TechDocsReaderProvider as T, TechDocsReaderLayout as a, TechDocsReaderPageHeader as b, TechDocsReaderPageContent as c, TechDocsReaderPageSubheader as d, TechDocsSearch as e, TechDocsReaderPage as f };
+//# sourceMappingURL=TechDocsReaderPage-89ab8b88.esm.js.map