@backstage/plugin-techdocs 0.12.8 → 0.12.12

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { createApiRef, createRouteRef, useRouteRef, useApi, configApiRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import React, { useEffect, useState, Suspense, useReducer, useRef, useMemo, useContext, createContext, useCallback } from 'react';
+import React, { useEffect, useState, useReducer, useRef, useMemo, createContext, useContext, useCallback } from 'react';
 import { makeStyles, ListItemText, ListItem, Divider, Card, CardMedia, CardContent, CardActions, Grid, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button as Button$1, Drawer, Typography, useTheme } from '@material-ui/core';
-import { Link, SubvalueCell, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ItemCardGrid, ItemCardHeader, Progress, ErrorPage, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { Link, SubvalueCell, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ItemCardGrid, ItemCardHeader, Progress, LogViewer, ErrorPage, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
 import TextTruncate from 'react-text-truncate';
 import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
 import { favoriteEntityIcon, favoriteEntityTooltip, EntityRefLinks, getEntityRelations, formatEntityRefTitle, useEntityListProvider, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, EntityRefLink, catalogApiRef, useOwnUser, isOwnerOf, useEntity } from '@backstage/plugin-catalog-react';
@@ -27,12 +27,10 @@ import Close from '@material-ui/icons/Close';
 import CodeIcon from '@material-ui/icons/Code';
 
 const techdocsStorageApiRef = createApiRef({
-  id: "plugin.techdocs.storageservice",
-  description: "Used to make requests towards the techdocs storage"
+  id: "plugin.techdocs.storageservice"
 });
 const techdocsApiRef = createApiRef({
-  id: "plugin.techdocs.service",
-  description: "Used to make requests towards techdocs API"
+  id: "plugin.techdocs.service"
 });
 
 class TechDocsClient {
@@ -50,12 +48,12 @@ class TechDocsClient {
     return (_a = this.configApi.getOptionalString("techdocs.requestUrl")) != null ? _a : await this.discoveryApi.getBaseUrl("techdocs");
   }
   async getTechDocsMetadata(entityId) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const requestUrl = `${apiOrigin}/metadata/techdocs/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${requestUrl}`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!request.ok) {
       throw await ResponseError.fromResponse(request);
@@ -63,12 +61,12 @@ class TechDocsClient {
     return await request.json();
   }
   async getEntityMetadata(entityId) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const requestUrl = `${apiOrigin}/metadata/entity/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${requestUrl}`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!request.ok) {
       throw await ResponseError.fromResponse(request);
@@ -98,12 +96,12 @@ class TechDocsStorageClient {
     return this.configApi.getString("techdocs.builder");
   }
   async getEntityDocs(entityId, path) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const storageUrl = await this.getStorageUrl();
     const url = `${storageUrl}/${namespace}/${kind}/${name}/${path}`;
     const token = await this.identityApi.getIdToken();
     const request = await fetch(`${url.endsWith("/") ? url : `${url}/`}index.html`, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     let errorMessage = "";
     switch (request.status) {
@@ -121,14 +119,14 @@ class TechDocsStorageClient {
   }
   async syncEntityDocs(entityId, logHandler = () => {
   }) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
     const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
     const token = await this.identityApi.getIdToken();
     return new Promise((resolve, reject) => {
       const source = new EventSourcePolyfill(url, {
         withCredentials: true,
-        headers: token ? {Authorization: `Bearer ${token}`} : {}
+        headers: token ? { Authorization: `Bearer ${token}` } : {}
       });
       source.addEventListener("log", (e) => {
         if (e.data) {
@@ -138,7 +136,7 @@ class TechDocsStorageClient {
       source.addEventListener("finish", (e) => {
         let updated = false;
         if (e.data) {
-          ({updated} = JSON.parse(e.data));
+          ({ updated } = JSON.parse(e.data));
         }
         resolve(updated ? "updated" : "cached");
       });
@@ -156,9 +154,10 @@ class TechDocsStorageClient {
     });
   }
   async getBaseUrl(oldBaseUrl, entityId, path) {
-    const {kind, namespace, name} = entityId;
+    const { kind, namespace, name } = entityId;
     const apiOrigin = await this.getApiOrigin();
-    return new URL(oldBaseUrl, `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`).toString();
+    const newBaseUrl = `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`;
+    return new URL(oldBaseUrl, newBaseUrl.endsWith("/") ? newBaseUrl : `${newBaseUrl}/`).toString();
   }
 }
 
@@ -183,7 +182,7 @@ const DocsResultListItem = ({
     var _a;
     return /* @__PURE__ */ React.createElement(ListItemText, {
       className: classes.itemText,
-      primaryTypographyProps: {variant: "h6"},
+      primaryTypographyProps: { variant: "h6" },
       primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
       secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
         line: lineClamp,
@@ -193,10 +192,10 @@ const DocsResultListItem = ({
       })
     });
   };
-  const LinkWrapper = ({children}) => asLink ? /* @__PURE__ */ React.createElement(Link, {
+  const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
     to: result.location
   }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  const ListItemWrapper = ({children}) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
+  const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
     alignItems: "flex-start",
     className: classes.flexContainer
   }, children), /* @__PURE__ */ React.createElement(Divider, {
@@ -228,10 +227,10 @@ function createCopyDocsUrlAction(copyToClipboard) {
   };
 }
 function createStarEntityAction(isStarredEntity, toggleStarredEntity) {
-  return ({entity}) => {
+  return ({ entity }) => {
     const isStarred = isStarredEntity(entity);
     return {
-      cellStyle: {paddingLeft: "1em"},
+      cellStyle: { paddingLeft: "1em" },
       icon: () => favoriteEntityIcon(isStarred),
       tooltip: favoriteEntityTooltip(isStarred),
       onClick: () => toggleStarredEntity(entity)
@@ -265,7 +264,7 @@ function createOwnerColumn() {
   return {
     title: "Owner",
     field: "resolved.ownedByRelationsTitle",
-    render: ({resolved}) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
+    render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
       entityRefs: resolved.ownedByRelations,
       defaultKind: "group"
     })
@@ -285,6 +284,10 @@ var columnFactories = /*#__PURE__*/Object.freeze({
   createTypeColumn: createTypeColumn
 });
 
+function toLowerMaybe(str, config) {
+  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
+}
+
 const DocsTable$1 = ({
   entities,
   title,
@@ -294,7 +297,7 @@ const DocsTable$1 = ({
 }) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase("en-US");
+  const config = useApi(configApiRef);
   if (!entities)
     return null;
   const documents = entities.map((entity) => {
@@ -304,12 +307,12 @@ const DocsTable$1 = ({
       entity,
       resolved: {
         docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default"),
-          kind: toLowerMaybe(entity.kind),
-          name: toLowerMaybe(entity.metadata.name)
+          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) => formatEntityRefTitle(r, {defaultKind: "group"})).join(", ")
+        ownedByRelationsTitle: ownedByRelations.map((r) => formatEntityRefTitle(r, { defaultKind: "group" })).join(", ")
       }
     };
   });
@@ -355,8 +358,8 @@ const EntityListDocsTable = ({
   actions
 }) => {
   var _a, _b;
-  const {loading, error, entities, filters} = useEntityListProvider();
-  const {isStarredEntity, toggleStarredEntity} = useStarredEntities();
+  const { loading, error, entities, filters } = useEntityListProvider();
+  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const [, copyToClipboard] = useCopyToClipboard();
   const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
   const defaultActions = [
@@ -383,7 +386,7 @@ const EntityListDocsTable = ({
 EntityListDocsTable.columns = columnFactories;
 EntityListDocsTable.actions = actionFactories;
 
-const TechDocsPageWrapper = ({children}) => {
+const TechDocsPageWrapper = ({ children }) => {
   var _a;
   const configApi = useApi(configApiRef);
   const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
@@ -402,7 +405,7 @@ class TechDocsFilter {
   }
 }
 const TechDocsPicker = () => {
-  const {updateFilters} = useEntityListProvider();
+  const { updateFilters } = useEntityListProvider();
   useEffect(() => {
     updateFilters({
       techdocs: new TechDocsFilter()
@@ -430,7 +433,7 @@ const DocsCardGrid$1 = ({
   entities
 }) => {
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? (str) => str : (str) => str.toLocaleLowerCase("en-US");
+  const config = useApi(configApiRef);
   if (!entities)
     return null;
   return /* @__PURE__ */ React.createElement(ItemCardGrid, {
@@ -443,9 +446,9 @@ const DocsCardGrid$1 = ({
       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(Button, {
       to: getRouteToReaderPageFor({
-        namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default"),
-        kind: toLowerMaybe(entity.kind),
-        name: toLowerMaybe(entity.metadata.name)
+        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"
@@ -459,7 +462,7 @@ var DocsCardGrid$2 = /*#__PURE__*/Object.freeze({
 });
 
 const EntityListDocsGrid = () => {
-  const {loading, error, entities} = useEntityListProvider();
+  const { loading, error, entities } = useEntityListProvider();
   if (error) {
     return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
@@ -491,7 +494,7 @@ const techdocsPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({configApi, discoveryApi, identityApi}) => new TechDocsStorageClient({
+      factory: ({ configApi, discoveryApi, identityApi }) => new TechDocsStorageClient({
         configApi,
         discoveryApi,
         identityApi
@@ -504,7 +507,7 @@ const techdocsPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({configApi, discoveryApi, identityApi}) => new TechDocsClient({
+      factory: ({ configApi, discoveryApi, identityApi }) => new TechDocsClient({
         configApi,
         discoveryApi,
         identityApi
@@ -577,7 +580,7 @@ const addBaseUrl = ({
           const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
           if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
             try {
-              const svg = await fetch(newValue, {credentials: "include"});
+              const svg = await fetch(newValue, { credentials: "include" });
               const svgContent = await svg.text();
               elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(svgContent)}`);
             } catch (e) {
@@ -748,11 +751,37 @@ const safeLinksHook = (node) => {
   }
   return node;
 };
-const sanitizeDOM = () => {
+const filterIframeHook = (allowedIframeHosts) => (node) => {
+  if (node.nodeName === "IFRAME") {
+    const src = node.getAttribute("src");
+    if (!src) {
+      node.remove();
+      return node;
+    }
+    try {
+      const srcUrl = new URL(src);
+      const isMatch = allowedIframeHosts.some((host) => srcUrl.host === host);
+      if (!isMatch) {
+        node.remove();
+      }
+    } catch (error) {
+      console.warn(`Invalid iframe src, ${error}`);
+      node.remove();
+    }
+  }
+  return node;
+};
+const sanitizeDOM = (config) => {
+  const allowedIframeHosts = (config == null ? void 0 : config.getOptionalStringArray("allowedIframeHosts")) || [];
   return (dom) => {
     DOMPurify.addHook("afterSanitizeAttributes", safeLinksHook);
+    const addTags = ["link"];
+    if (allowedIframeHosts.length > 0) {
+      DOMPurify.addHook("beforeSanitizeElements", filterIframeHook(allowedIframeHosts));
+      addTags.push("iframe");
+    }
     return DOMPurify.sanitize(dom.innerHTML, {
-      ADD_TAGS: ["link"],
+      ADD_TAGS: addTags,
       FORBID_TAGS: ["style"],
       WHOLE_DOCUMENT: true,
       RETURN_DOM: true
@@ -760,7 +789,7 @@ const sanitizeDOM = () => {
   };
 };
 
-const injectCss = ({css}) => {
+const injectCss = ({ css }) => {
   return (dom) => {
     dom.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", `<style>${css}</style>`);
     return dom;
@@ -804,7 +833,7 @@ const TechDocsSearchBar = ({
   const {
     term,
     setTerm,
-    result: {loading, value: searchVal}
+    result: { loading, value: searchVal }
   } = useSearch();
   const [options, setOptions] = useState([]);
   useEffect(() => {
@@ -827,7 +856,7 @@ const TechDocsSearchBar = ({
   };
   const handleSelection = (_, selection) => {
     if (selection == null ? void 0 : selection.document) {
-      const {location} = selection.document;
+      const { location } = selection.document;
       navigate(location);
     }
   };
@@ -853,7 +882,7 @@ const TechDocsSearchBar = ({
     noOptionsText: "No results found",
     value: null,
     options,
-    renderOption: ({document}) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
+    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
       result: document,
       lineClamp: 3,
       asListItem: false,
@@ -899,7 +928,6 @@ const TechDocsSearch = (props) => {
   }));
 };
 
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const useDrawerStyles = makeStyles((theme) => createStyles({
   paper: {
     width: "100%",
@@ -914,6 +942,9 @@ const useDrawerStyles = makeStyles((theme) => createStyles({
   root: {
     height: "100%",
     overflow: "hidden"
+  },
+  logs: {
+    background: theme.palette.background.default
   }
 }));
 const TechDocsBuildLogsDrawerContent = ({
@@ -921,6 +952,7 @@ const TechDocsBuildLogsDrawerContent = ({
   onClose
 }) => {
   const classes = useDrawerStyles();
+  const logText = buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n");
   return /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     direction: "column",
@@ -941,24 +973,19 @@ const TechDocsBuildLogsDrawerContent = ({
     title: "Close the drawer",
     onClick: onClose,
     color: "inherit"
-  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(Suspense, {
-    fallback: /* @__PURE__ */ React.createElement(Progress, null)
-  }, /* @__PURE__ */ React.createElement(LazyLog, {
-    text: buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n"),
-    extraLines: 1,
-    follow: true,
-    selectableLines: true,
-    enableSearch: true
-  })));
+  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LogViewer, {
+    text: logText,
+    classes: { root: classes.logs }
+  }));
 };
-const TechDocsBuildLogs = ({buildLog}) => {
+const TechDocsBuildLogs = ({ buildLog }) => {
   const classes = useDrawerStyles();
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
     color: "inherit",
     onClick: () => setOpen(true)
   }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
-    classes: {paper: classes.paper},
+    classes: { paper: classes.paper },
     anchor: "right",
     open,
     onClose: () => setOpen(false)
@@ -968,7 +995,7 @@ const TechDocsBuildLogs = ({buildLog}) => {
   })));
 };
 
-const TechDocsNotFound = ({errorMessage}) => {
+const TechDocsNotFound = ({ errorMessage }) => {
   const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
   let additionalInfo = "";
   if (techdocsBuilder !== "local") {
@@ -1039,7 +1066,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: {message: classes.message}
+      classes: { message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
   }
   if (state === "CONTENT_NOT_FOUND") {
@@ -1049,7 +1076,7 @@ const TechDocsStateIndicator = () => {
       action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
         buildLog
       }),
-      classes: {message: classes.message}
+      classes: { message: classes.message }
     }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React.createElement(TechDocsNotFound, {
       errorMessage: contentErrorMessage
     }));
@@ -1089,7 +1116,7 @@ function calculateDisplayState({
   return "CONTENT_FRESH";
 }
 function reducer(oldState, action) {
-  const newState = {...oldState};
+  const newState = { ...oldState };
   switch (action.type) {
     case "sync":
       if (action.state === "CHECKING") {
@@ -1131,14 +1158,14 @@ function useReaderState(kind, namespace, name, path) {
     buildLog: []
   });
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
-  const {retry: contentReload} = useAsyncRetry(async () => {
-    dispatch({type: "contentLoading"});
+  const { retry: contentReload } = useAsyncRetry(async () => {
+    dispatch({ type: "contentLoading" });
     try {
-      const entityDocs = await techdocsStorageApi.getEntityDocs({kind, namespace, name}, path);
-      dispatch({type: "content", content: entityDocs, path});
+      const entityDocs = await techdocsStorageApi.getEntityDocs({ kind, namespace, name }, path);
+      dispatch({ type: "content", content: entityDocs, path });
       return entityDocs;
     } catch (e) {
-      dispatch({type: "content", contentError: e, path});
+      dispatch({ type: "content", contentError: e, path });
     }
     return void 0;
   }, [techdocsStorageApi, kind, namespace, name, path]);
@@ -1147,11 +1174,11 @@ function useReaderState(kind, namespace, name, path) {
     reload: () => {
     }
   });
-  contentRef.current = {content: state.content, reload: contentReload};
+  contentRef.current = { content: state.content, reload: contentReload };
   useAsync(async () => {
-    dispatch({type: "sync", state: "CHECKING"});
+    dispatch({ type: "sync", state: "CHECKING" });
     const buildingTimeout = setTimeout(() => {
-      dispatch({type: "sync", state: "BUILDING"});
+      dispatch({ type: "sync", state: "BUILDING" });
     }, 1e3);
     try {
       const result = await techdocsStorageApi.syncEntityDocs({
@@ -1159,19 +1186,19 @@ function useReaderState(kind, namespace, name, path) {
         namespace,
         name
       }, (log) => {
-        dispatch({type: "buildLog", log});
+        dispatch({ type: "buildLog", log });
       });
       switch (result) {
         case "updated":
           if (!contentRef.current.content) {
             contentRef.current.reload();
-            dispatch({type: "sync", state: "BUILD_READY_RELOAD"});
+            dispatch({ type: "sync", state: "BUILD_READY_RELOAD" });
           } else {
-            dispatch({type: "sync", state: "BUILD_READY"});
+            dispatch({ type: "sync", state: "BUILD_READY" });
           }
           break;
         case "cached":
-          dispatch({type: "sync", state: "UP_TO_DATE"});
+          dispatch({ type: "sync", state: "UP_TO_DATE" });
           break;
         default:
           dispatch({
@@ -1182,7 +1209,7 @@ function useReaderState(kind, namespace, name, path) {
           break;
       }
     } catch (e) {
-      dispatch({type: "sync", state: "ERROR", syncError: e});
+      dispatch({ type: "sync", state: "ERROR", syncError: e });
     } finally {
       clearTimeout(buildingTimeout);
     }
@@ -1219,8 +1246,8 @@ const TechDocsReaderProvider = ({
   children,
   entityRef
 }) => {
-  const {"*": path} = useParams();
-  const {kind, namespace, name} = entityRef;
+  const { "*": path } = useParams();
+  const { kind, namespace, name } = entityRef;
   const value = useReaderState(kind, namespace, name, path);
   return /* @__PURE__ */ React.createElement(TechDocsReaderContext.Provider, {
     value
@@ -1237,8 +1264,9 @@ const useTechDocsReaderDom = (entityRef) => {
   const theme = useTheme();
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
-  const {namespace = "", kind = "", name = ""} = entityRef;
-  const {state, path, content: rawPage} = useTechDocsReader();
+  const techdocsSanitizer = useApi(configApiRef);
+  const { namespace = "", kind = "", name = "" } = entityRef;
+  const { state, path, content: rawPage } = useTechDocsReader();
   const [sidebars, setSidebars] = useState();
   const [dom, setDom] = useState(null);
   const updateSidebarPosition = useCallback(() => {
@@ -1260,7 +1288,7 @@ const useTechDocsReaderDom = (entityRef) => {
     };
   }, [updateSidebarPosition, state]);
   const preRender = useCallback((rawContent, contentPath) => transform(rawContent, [
-    sanitizeDOM(),
+    sanitizeDOM(techdocsSanitizer.getOptionalConfig("techdocs.sanitizer")),
     addBaseUrl({
       techdocsStorageApi,
       entityId: {
@@ -1395,6 +1423,7 @@ const useTechDocsReaderDom = (entityRef) => {
     namespace,
     scmIntegrationsApi,
     techdocsStorageApi,
+    techdocsSanitizer,
     theme.palette.action.disabledBackground,
     theme.palette.background.default,
     theme.palette.background.paper,
@@ -1444,7 +1473,7 @@ const useTechDocsReaderDom = (entityRef) => {
       if (!shouldReplaceContent) {
         return;
       }
-      window.scroll({top: 0});
+      window.scroll({ top: 0 });
       const postTransformedDomElement = await postRender(preTransformedDomElement);
       setDom(postTransformedDomElement);
     });
@@ -1472,7 +1501,7 @@ const TheReader = ({
     if (!dom || !shadowDomRef.current)
       return;
     const shadowDiv = shadowDomRef.current;
-    const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({mode: "open"});
+    const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({ mode: "open" });
     Array.from(shadowRoot.children).forEach((child) => shadowRoot.removeChild(child));
     shadowRoot.appendChild(dom);
     onReadyRef.current();
@@ -1505,9 +1534,9 @@ const TechDocsPageHeader = ({
   entityMetadata,
   techDocsMetadata
 }) => {
-  const {name} = entityRef;
-  const {site_name: siteName, site_description: siteDescription} = techDocsMetadata || {};
-  const {locationMetadata, spec} = entityMetadata || {};
+  const { name } = entityRef;
+  const { site_name: siteName, site_description: siteDescription } = techDocsMetadata || {};
+  const { locationMetadata, spec } = entityMetadata || {};
   const lifecycle = spec == null ? void 0 : spec.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
   const docsRootLink = useRouteRef(rootRouteRef)();
@@ -1535,7 +1564,7 @@ const TechDocsPageHeader = ({
       target: "_blank",
       rel: "noopener noreferrer"
     }, /* @__PURE__ */ React.createElement(CodeIcon, {
-      style: {marginTop: "-25px", fill: "#fff"}
+      style: { marginTop: "-25px", fill: "#fff" }
     }))
   }) : null);
   return /* @__PURE__ */ React.createElement(Header, {
@@ -1549,16 +1578,16 @@ const TechDocsPageHeader = ({
 
 const LegacyTechDocsPage = () => {
   const [documentReady, setDocumentReady] = useState(false);
-  const {namespace, kind, name} = useParams();
+  const { namespace, kind, name } = useParams();
   const techdocsApi = useApi(techdocsApiRef);
-  const {value: techdocsMetadataValue} = useAsync(() => {
+  const { value: techdocsMetadataValue } = useAsync(() => {
     if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
     }
     return Promise.resolve(void 0);
   }, [kind, namespace, name, techdocsApi, documentReady]);
-  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
-    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
+    return techdocsApi.getEntityMetadata({ kind, namespace, name });
   }, [kind, namespace, name, techdocsApi]);
   const onReady = useCallback(() => {
     setDocumentReady(true);
@@ -1590,19 +1619,19 @@ const LegacyTechDocsPage = () => {
   })));
 };
 
-const TechDocsPage = ({children}) => {
+const TechDocsPage = ({ children }) => {
   const outlet = useOutlet();
   const [documentReady, setDocumentReady] = useState(false);
-  const {namespace, kind, name} = useParams();
+  const { namespace, kind, name } = useParams();
   const techdocsApi = useApi(techdocsApiRef);
-  const {value: techdocsMetadataValue} = useAsync(() => {
+  const { value: techdocsMetadataValue } = useAsync(() => {
     if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
     }
     return Promise.resolve(void 0);
   }, [kind, namespace, name, techdocsApi, documentReady]);
-  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
-    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
+    return techdocsApi.getEntityMetadata({ kind, namespace, name });
   }, [kind, namespace, name, techdocsApi]);
   const onReady = useCallback(() => {
     setDocumentReady(true);
@@ -1619,7 +1648,7 @@ const TechDocsPage = ({children}) => {
   }, children instanceof Function ? children({
     techdocsMetadataValue,
     entityMetadataValue,
-    entityRef: {kind, namespace, name},
+    entityRef: { kind, namespace, name },
     onReady
   }) : children);
 };
@@ -1645,7 +1674,7 @@ const CustomPanel = ({
     }
   });
   const classes = useStyles();
-  const {value: user} = useOwnUser();
+  const { value: user } = useOwnUser();
   const Panel = panels[config.panelType];
   const shownEntities = entities.filter((entity) => {
     if (config.filterPredicate === "ownedByUser") {
@@ -1710,7 +1739,7 @@ const TechDocsCustomHome = ({
   return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(HeaderTabs, {
     selectedIndex: selectedTab,
     onChange: (index) => setSelectedTab(index),
-    tabs: tabsConfig.map(({label}, index) => ({
+    tabs: tabsConfig.map(({ label }, index) => ({
       id: index.toString(),
       label
     }))
@@ -1769,14 +1798,15 @@ var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
   TechDocsIndexPage: TechDocsIndexPage
 });
 
-const EntityPageDocs = ({entity}) => {
+const EntityPageDocs = ({ entity }) => {
   var _a;
+  const config = useApi(configApiRef);
   return /* @__PURE__ */ React.createElement(Reader, {
     withSearch: false,
     entityRef: {
-      kind: entity.kind,
-      namespace: (_a = entity.metadata.namespace) != null ? _a : "default",
-      name: entity.metadata.name
+      namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
+      kind: toLowerMaybe(entity.kind, config),
+      name: toLowerMaybe(entity.metadata.name, config)
     }
   });
 };
@@ -1797,7 +1827,7 @@ const Router = () => {
 };
 const EmbeddedDocsRouter = (_props) => {
   var _a;
-  const {entity} = useEntity();
+  const { entity } = useEntity();
   const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
   if (!projectId) {
     return /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, {