From 0e38704510ffaa05de212f0b64193ad06233eec0 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Mon, 28 Aug 2023 17:00:55 +0200 Subject: [PATCH] SONAR-19068 Fix scrolling issue --- .../design-system/src/components/TopBar.tsx | 1 - .../js/app/components/ComponentContainer.tsx | 12 ++++- .../js/app/components/GlobalContainer.tsx | 4 ++ .../js/app/components/SystemAnnouncement.css | 1 - .../indexation/IndexationNotification.css | 1 - .../components/nav/component/ComponentNav.tsx | 47 +++++++------------ .../UpdateNotification.css | 1 - 7 files changed, 31 insertions(+), 36 deletions(-) diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx index de789f4a228..36c2c6f024f 100644 --- a/server/sonar-web/design-system/src/components/TopBar.tsx +++ b/server/sonar-web/design-system/src/components/TopBar.tsx @@ -23,7 +23,6 @@ import { LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers'; import { themeColor, themeContrast, themeShadow } from '../helpers/theme'; export const TopBar = styled.nav` - ${tw`sw-z-top-navbar`} ${tw`sw-px-6 sw-pt-4`} ${tw`sw-box-border`}; ${tw`sw-w-full`}; diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx index bba0da8a471..25e731d7e2e 100644 --- a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx @@ -20,6 +20,7 @@ import { differenceBy } from 'lodash'; import * as React from 'react'; +import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; import { Outlet } from 'react-router-dom'; import { validateProjectAlmBinding } from '../../api/alm-settings'; @@ -63,10 +64,13 @@ export class ComponentContainer extends React.PureComponent { watchStatusTimer?: number; mounted = false; state: State = { isPending: false, loading: true }; + portalAnchor: Element | null = null; componentDidMount() { this.mounted = true; this.fetchComponent(); + + this.portalAnchor = document.querySelector('#component-nav-portal'); } componentDidUpdate(prevProps: Props) { @@ -335,14 +339,18 @@ export class ComponentContainer extends React.PureComponent { {component && !([ComponentQualifier.File, ComponentQualifier.TestFile] as string[]).includes( component.qualifier - ) && ( + ) && + this.portalAnchor && + /* Use a portal to fix positioning until we can fully review the layout */ + createPortal( + />, + this.portalAnchor )} {loading ? ( diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx index 5fba3cf935c..9ac12eddab3 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx @@ -84,6 +84,10 @@ export default function GlobalContainer() { + {/* The following is the portal anchor point for the component nav + * See ComponentContainer.tsx + */} +
diff --git a/server/sonar-web/src/main/js/app/components/SystemAnnouncement.css b/server/sonar-web/src/main/js/app/components/SystemAnnouncement.css index 38967552052..f23bb366800 100644 --- a/server/sonar-web/src/main/js/app/components/SystemAnnouncement.css +++ b/server/sonar-web/src/main/js/app/components/SystemAnnouncement.css @@ -22,7 +22,6 @@ } .system-announcement-banner { - position: fixed; width: 100%; z-index: var(--globalBannerZIndex); } diff --git a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotification.css b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotification.css index a460179eff4..80315d8ad6f 100644 --- a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotification.css +++ b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotification.css @@ -22,7 +22,6 @@ } .indexation-notification-banner { - position: fixed; width: 100%; z-index: var(--globalBannerZIndex); margin-bottom: 0 !important; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx index e25d86d2a97..151f5c72ab0 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx @@ -19,7 +19,6 @@ */ import { TopBar } from 'design-system'; import * as React from 'react'; -import ScreenPositionHelper from '../../../../components/common/ScreenPositionHelper'; import NCDAutoUpdateMessage from '../../../../components/new-code-definition/NCDAutoUpdateMessage'; import { translate } from '../../../../helpers/l10n'; import { ProjectAlmBindingConfigurationErrors } from '../../../../types/alm-settings'; @@ -57,36 +56,24 @@ export default function ComponentNav(props: ComponentNavProps) { } }, [component, component.key]); - let prDecoNotifComponent: JSX.Element; - if (projectBindingErrors !== undefined) { - prDecoNotifComponent = ; - } - return ( - - {({ top }) => ( - <> - -
-
- -
- - - - {prDecoNotifComponent} - + <> + +
+
+ +
+ + + + {projectBindingErrors !== undefined && ( + )} - + ); } diff --git a/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.css b/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.css index 8ed41dd50b8..da5494f86c7 100644 --- a/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.css +++ b/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.css @@ -23,7 +23,6 @@ .promote-update-notification .dismissable-alert-banner { margin-bottom: 0 !important; - position: fixed; width: 100%; z-index: var(--globalBannerZIndex); } -- 2.39.5