From 03019695a3e8f4c7931b989d4eda20e3edde4f24 Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Wed, 8 Jun 2022 16:52:48 +0200 Subject: [PATCH 1/6] Add special classes to identify entity page headers and tabs. Use that to make sure the sidebars in docs do not scroll beyond them Signed-off-by: Raghunandan --- .../src/components/TabbedLayout/RoutedTabs.tsx | 1 + .../src/layout/Header/Header.tsx | 4 +++- .../src/layout/HeaderTabs/HeaderTabs.tsx | 4 +++- .../components/EntityLayout/EntityLayout.tsx | 1 + .../TechDocsReaderPageContent/dom.tsx | 18 +++++++++++++++++- 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index 5debafd3f8..027d63e1a0 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -80,6 +80,7 @@ export function RoutedTabs(props: { routes: SubRoute[] }) { tabs={headerTabs} selectedIndex={index} onChange={onTabChange} + className="entity-page-tabs" /> diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index bb4d19b949..cb47550b6e 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -113,6 +113,7 @@ type Props = { tooltip?: string; type?: string; typeLink?: string; + className: string | ''; }; type TypeFragmentProps = { @@ -208,6 +209,7 @@ export function Header(props: PropsWithChildren) { tooltip, type, typeLink, + className, } = props; const classes = useStyles(); const configApi = useApi(configApiRef); @@ -220,7 +222,7 @@ export function Header(props: PropsWithChildren) { return ( <> -
+
void; selectedIndex?: number; + className: string | ''; }; /** @@ -76,7 +77,7 @@ type HeaderTabsProps = { * */ export function HeaderTabs(props: HeaderTabsProps) { - const { tabs, onChange, selectedIndex } = props; + const { tabs, onChange, selectedIndex, className } = props; const [selectedTab, setSelectedTab] = useState(selectedIndex ?? 0); const styles = useStyles(); @@ -104,6 +105,7 @@ export function HeaderTabs(props: HeaderTabsProps) { aria-label="scrollable auto tabs example" onChange={handleChange} value={selectedTab} + className={className} > {tabs.map((tab, index) => ( { title={} pageTitleOverride={headerTitle} type={headerType} + className="entity-page-header" > {entity && ( <> diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index 9f561bfcd3..497a3e1e5f 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -81,9 +81,25 @@ export const useTechDocsReaderDom = ( if (isMobileMedia) { element.style.top = '0px'; } else { - const domTop = dom.getBoundingClientRect().top ?? 0; + // Docs shown in entity pages should consider the entity tabs and multiple paddings at the top + const entityPageHeader = document.querySelector( + '.entity-page-header', + ); + const entityPageTabs = + document.querySelector('.entity-page-tabs'); + const entityPageHeaderTop = + entityPageHeader?.getBoundingClientRect().height ?? 0; + const entityPageTabsTop = + entityPageTabs?.getBoundingClientRect().height ?? 0; + + let domTop = dom.getBoundingClientRect().top ?? 0; const tabs = dom.querySelector('.md-container > .md-tabs'); const tabsHeight = tabs?.getBoundingClientRect().height ?? 0; + + // In entity pages the sidebars should stop at the tabs + if (domTop < entityPageHeaderTop + entityPageTabsTop) { + domTop = entityPageHeaderTop + entityPageTabsTop; + } element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`; } From b49cc12d957f8dc173303beb15a137e0f6305e97 Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Wed, 8 Jun 2022 16:58:20 +0200 Subject: [PATCH 2/6] reorder code + fix comments Signed-off-by: Raghunandan --- .../components/TechDocsReaderPageContent/dom.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index 497a3e1e5f..0503a91a3d 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -81,7 +81,12 @@ export const useTechDocsReaderDom = ( if (isMobileMedia) { element.style.top = '0px'; } else { - // Docs shown in entity pages should consider the entity tabs and multiple paddings at the top + let domTop = dom.getBoundingClientRect().top ?? 0; + const tabs = dom.querySelector('.md-container > .md-tabs'); + const tabsHeight = tabs?.getBoundingClientRect().height ?? 0; + + // When docs are shown in entity pages this method to reposition the sidebars on scroll + // do not consider the header and tabs. const entityPageHeader = document.querySelector( '.entity-page-header', ); @@ -92,11 +97,7 @@ export const useTechDocsReaderDom = ( const entityPageTabsTop = entityPageTabs?.getBoundingClientRect().height ?? 0; - let domTop = dom.getBoundingClientRect().top ?? 0; - const tabs = dom.querySelector('.md-container > .md-tabs'); - const tabsHeight = tabs?.getBoundingClientRect().height ?? 0; - - // In entity pages the sidebars should stop at the tabs + // the sidebars should not scroll beyond the total height of the header and tabs if (domTop < entityPageHeaderTop + entityPageTabsTop) { domTop = entityPageHeaderTop + entityPageTabsTop; } From 05e68b0b3f63f14601912dc3236d0771620173ab Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Wed, 8 Jun 2022 17:15:54 +0200 Subject: [PATCH 3/6] Header & HeaderTabs components: make className prop optional Signed-off-by: Raghunandan --- packages/core-components/src/layout/Header/Header.tsx | 2 +- packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index cb47550b6e..4b7d59d3c2 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -113,7 +113,7 @@ type Props = { tooltip?: string; type?: string; typeLink?: string; - className: string | ''; + className?: string | ''; }; type TypeFragmentProps = { diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx index 794f26d44f..2e6d6213fc 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx @@ -67,7 +67,7 @@ type HeaderTabsProps = { tabs: Tab[]; onChange?: (index: number) => void; selectedIndex?: number; - className: string | ''; + className?: string | ''; }; /** From 7739141ab2452ee8ca3a2198d981e12325f502dc Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Mon, 13 Jun 2022 23:26:05 +0200 Subject: [PATCH 4/6] Add changeset Signed-off-by: Raghunandan --- .changeset/techdocs-sixty-mugs-hug.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/techdocs-sixty-mugs-hug.md diff --git a/.changeset/techdocs-sixty-mugs-hug.md b/.changeset/techdocs-sixty-mugs-hug.md new file mode 100644 index 0000000000..05c03a0b98 --- /dev/null +++ b/.changeset/techdocs-sixty-mugs-hug.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-techdocs': patch +--- + +Fix: When docs are shown in an entity page under the docs tab the sidebars start overlapping with the header and tabs in the page when you scroll the documentation content. From 823ae416c5e29e6f7a9b259ef5fdf401f4911bcf Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Sun, 26 Jun 2022 10:56:32 +0200 Subject: [PATCH 5/6] Fix scroll issue within techdocs reader instead of adding special classes to entity page components Signed-off-by: Raghunandan --- .../components/TabbedLayout/RoutedTabs.tsx | 1 - .../src/layout/Header/Header.tsx | 4 +--- .../src/layout/HeaderTabs/HeaderTabs.tsx | 4 +--- .../components/EntityLayout/EntityLayout.tsx | 1 - .../TechDocsReaderPage/TechDocsReaderPage.tsx | 22 ++++++++++--------- .../TechDocsReaderPageContent/dom.tsx | 19 +++++----------- 6 files changed, 19 insertions(+), 32 deletions(-) diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index 027d63e1a0..5debafd3f8 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -80,7 +80,6 @@ export function RoutedTabs(props: { routes: SubRoute[] }) { tabs={headerTabs} selectedIndex={index} onChange={onTabChange} - className="entity-page-tabs" /> diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 4b7d59d3c2..bb4d19b949 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -113,7 +113,6 @@ type Props = { tooltip?: string; type?: string; typeLink?: string; - className?: string | ''; }; type TypeFragmentProps = { @@ -209,7 +208,6 @@ export function Header(props: PropsWithChildren) { tooltip, type, typeLink, - className, } = props; const classes = useStyles(); const configApi = useApi(configApiRef); @@ -222,7 +220,7 @@ export function Header(props: PropsWithChildren) { return ( <> -
+
void; selectedIndex?: number; - className?: string | ''; }; /** @@ -77,7 +76,7 @@ type HeaderTabsProps = { * */ export function HeaderTabs(props: HeaderTabsProps) { - const { tabs, onChange, selectedIndex, className } = props; + const { tabs, onChange, selectedIndex } = props; const [selectedTab, setSelectedTab] = useState(selectedIndex ?? 0); const styles = useStyles(); @@ -105,7 +104,6 @@ export function HeaderTabs(props: HeaderTabsProps) { aria-label="scrollable auto tabs example" onChange={handleChange} value={selectedTab} - className={className} > {tabs.map((tab, index) => ( { title={} pageTitleOverride={headerTitle} type={headerType} - className="entity-page-header" > {entity && ( <> diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 6885957002..9f69dcb8d8 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx @@ -106,16 +106,18 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { return ( {({ metadata, entityMetadata, onReady }) => ( - - {children instanceof Function - ? children({ - entityRef, - techdocsMetadataValue: metadata.value, - entityMetadataValue: entityMetadata.value, - onReady, - }) - : children} - +
+ + {children instanceof Function + ? children({ + entityRef, + techdocsMetadataValue: metadata.value, + entityMetadataValue: entityMetadata.value, + onReady, + }) + : children} + +
)} ); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index 0503a91a3d..76b07c9d32 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -81,25 +81,16 @@ export const useTechDocsReaderDom = ( if (isMobileMedia) { element.style.top = '0px'; } else { + const page = document?.querySelector('.techdocs-reader-page'); + const pageTop = page?.getBoundingClientRect().top ?? 0; let domTop = dom.getBoundingClientRect().top ?? 0; + const tabs = dom.querySelector('.md-container > .md-tabs'); const tabsHeight = tabs?.getBoundingClientRect().height ?? 0; - // When docs are shown in entity pages this method to reposition the sidebars on scroll - // do not consider the header and tabs. - const entityPageHeader = document.querySelector( - '.entity-page-header', - ); - const entityPageTabs = - document.querySelector('.entity-page-tabs'); - const entityPageHeaderTop = - entityPageHeader?.getBoundingClientRect().height ?? 0; - const entityPageTabsTop = - entityPageTabs?.getBoundingClientRect().height ?? 0; - // the sidebars should not scroll beyond the total height of the header and tabs - if (domTop < entityPageHeaderTop + entityPageTabsTop) { - domTop = entityPageHeaderTop + entityPageTabsTop; + if (domTop < pageTop) { + domTop = pageTop; } element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`; } From ec21ff386552d9d9ada70f37717bda1cb7c22ace Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 29 Jun 2022 13:53:05 +0200 Subject: [PATCH 6/6] chore: only need one changeset Signed-off-by: blam --- .changeset/techdocs-sixty-mugs-hug.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.changeset/techdocs-sixty-mugs-hug.md b/.changeset/techdocs-sixty-mugs-hug.md index 05c03a0b98..a1a9e815a1 100644 --- a/.changeset/techdocs-sixty-mugs-hug.md +++ b/.changeset/techdocs-sixty-mugs-hug.md @@ -1,6 +1,4 @@ --- -'@backstage/core-components': patch -'@backstage/plugin-catalog': patch '@backstage/plugin-techdocs': patch ---