@backstage/plugin-techdocs 1.10.1-next.1 → 1.10.1-next.2

package/dist/esm/{TechDocsReaderPage-b432d0c4.esm.js → TechDocsReaderPage-769fb741.esm.js}

@@ -1,13 +1,13 @@
 import React, { useReducer, useRef, useMemo, createContext, useContext, useState, useEffect, useCallback, Children } from 'react';
 import { useParams, useNavigate, useLocation, 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 { LogViewer, ErrorPage, useSidebarPinState, Content, HeaderLabel, Header, ErrorPanel, Page } from '@backstage/core-components';
+import { techdocsStorageApiRef, useTechDocsReaderPage, SHADOW_DOM_STYLE_LOAD_EVENT, useShadowDomStylesLoading, useTechDocsAddons, TechDocsAddonLocations, useShadowRootElements, TechDocsShadowDom, techdocsApiRef, 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 { useApi, configApiRef, useAnalytics, useRouteRef, useApp, 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';
@@ -24,7 +24,7 @@ import CodeIcon from '@material-ui/icons/Code';
 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 { r as rootRouteRef, b as rootDocsRouteRef } from './routes-100c0069.esm.js';
 import SettingsIcon from '@material-ui/icons/Settings';
 
 function calculateDisplayState({
@@ -1461,12 +1461,12 @@ const useTechDocsReaderDom = (entityRef) => {
   const { state, path, content: rawPage } = useTechDocsReader();
   const [dom, setDom] = useState(null);
   const isStyleLoading = useShadowDomStylesLoading(dom);
-  const updateSidebarPosition = useCallback(() => {
+  const updateSidebarPositionAndHeight = useCallback(() => {
     if (!dom)
       return;
     const sidebars = dom.querySelectorAll(".md-sidebar");
     sidebars.forEach((element) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (isMobileMedia) {
         element.style.top = "0px";
       } else {
@@ -1478,19 +1478,27 @@ const useTechDocsReaderDom = (entityRef) => {
         if (domTop < pageTop) {
           domTop = pageTop;
         }
-        element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`;
+        const scrollbarTopPx = Math.max(domTop, 0) + tabsHeight;
+        element.style.top = `${scrollbarTopPx}px`;
+        const footer = dom.querySelector(".md-container > .md-footer");
+        const scrollbarEndPx = (_d = footer == null ? void 0 : footer.getBoundingClientRect().top) != null ? _d : window.innerHeight;
+        element.style.height = `${scrollbarEndPx - scrollbarTopPx}px`;
       }
       element.style.setProperty("opacity", "1");
     });
   }, [dom, isMobileMedia]);
   useEffect(() => {
-    window.addEventListener("resize", updateSidebarPosition);
-    window.addEventListener("scroll", updateSidebarPosition, true);
+    window.addEventListener("resize", updateSidebarPositionAndHeight);
+    window.addEventListener("scroll", updateSidebarPositionAndHeight, true);
     return () => {
-      window.removeEventListener("resize", updateSidebarPosition);
-      window.removeEventListener("scroll", updateSidebarPosition, true);
+      window.removeEventListener("resize", updateSidebarPositionAndHeight);
+      window.removeEventListener(
+        "scroll",
+        updateSidebarPositionAndHeight,
+        true
+      );
     };
-  }, [dom, updateSidebarPosition]);
+  }, [dom, updateSidebarPositionAndHeight]);
   const updateFooterWidth = useCallback(() => {
     if (!dom)
       return;
@@ -1508,9 +1516,14 @@ const useTechDocsReaderDom = (entityRef) => {
   useEffect(() => {
     if (!isStyleLoading) {
       updateFooterWidth();
-      updateSidebarPosition();
+      updateSidebarPositionAndHeight();
     }
-  }, [state, isStyleLoading, updateFooterWidth, updateSidebarPosition]);
+  }, [
+    state,
+    isStyleLoading,
+    updateFooterWidth,
+    updateSidebarPositionAndHeight
+  ]);
   const preRender = useCallback(
     (rawContent, contentPath) => transform(rawContent, [
       sanitizerTransformer,
@@ -1881,6 +1894,60 @@ const TechDocsReaderPageSubheader = (props) => {
   ));
 };
 
+function useTechDocsCookie() {
+  const techdocsApi = useApi(techdocsApiRef);
+  const { retry, ...state } = useAsyncRetry(async () => {
+    return await techdocsApi.getCookie();
+  }, [techdocsApi]);
+  const refresh = useCallback(
+    (expiresAt) => {
+      const refreshingMargin = (1 + 3 * Math.random()) * 6e4;
+      const delay = Date.parse(expiresAt) - Date.now() - refreshingMargin;
+      const timeout = setTimeout(retry, delay);
+      return () => clearTimeout(timeout);
+    },
+    [retry]
+  );
+  return { ...state, retry, refresh };
+}
+function TechDocsAuthProvider({ children }) {
+  const app = useApp();
+  const { Progress } = app.getComponents();
+  const [channel] = useState(
+    () => new BroadcastChannel("techdocs-cookie-refresh")
+  );
+  const { loading, error, value, retry, refresh } = useTechDocsCookie();
+  useEffect(() => {
+    if (!value)
+      return () => {
+      };
+    channel.postMessage({
+      action: "TECHDOCS_COOKIE_REFRESHED",
+      payload: value
+    });
+    let cancel = refresh(value.expiresAt);
+    const handleMessage = (event) => {
+      const { action, payload } = event.data;
+      if (action === "TECHDOCS_COOKIE_REFRESHED") {
+        cancel();
+        cancel = refresh(payload.expiresAt);
+      }
+    };
+    channel.addEventListener("message", handleMessage);
+    return () => {
+      cancel();
+      channel.removeEventListener("message", handleMessage);
+    };
+  }, [value, refresh, channel]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error }, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", onClick: retry }, "Retry"));
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return children;
+}
+
 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 }));
@@ -1900,15 +1967,15 @@ const TechDocsReaderPage = (props) => {
     const page = grandChildren.find(
       (grandChild) => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && !getComponentData(grandChild, TECHDOCS_ADDONS_KEY)
     );
-    return /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null));
+    return /* @__PURE__ */ React.createElement(TechDocsAuthProvider, null, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null)));
   }
-  return /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ React.createElement("div", { className: "techdocs-reader-page" }, /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, children instanceof Function ? children({
+  return /* @__PURE__ */ React.createElement(TechDocsAuthProvider, null, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ React.createElement("div", { className: "techdocs-reader-page" }, /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, children instanceof Function ? children({
     entityRef,
     techdocsMetadataValue: metadata.value,
     entityMetadataValue: entityMetadata.value,
     onReady
-  }) : children)));
+  }) : children))));
 };
 
 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-b432d0c4.esm.js.map
+//# sourceMappingURL=TechDocsReaderPage-769fb741.esm.js.map