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';
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) {
{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(
<ComponentNav
component={component}
currentTask={currentTask}
isInProgress={isInProgress}
isPending={isPending}
projectBindingErrors={projectBindingErrors}
- />
+ />,
+ this.portalAnchor
)}
{loading ? (
*/
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';
}
}, [component, component.key]);
- let prDecoNotifComponent: JSX.Element;
- if (projectBindingErrors !== undefined) {
- prDecoNotifComponent = <ComponentNavProjectBindingErrorNotif component={component} />;
- }
-
return (
- <ScreenPositionHelper className="sw-inline">
- {({ top }) => (
- <>
- <TopBar
- className="sw-sticky"
- id="context-navigation"
- aria-label={translate('qualifier', component.qualifier)}
- style={{ top: `${top}px` }}
- >
- <div className="sw-min-h-10 sw-flex sw-justify-between">
- <Header component={component} />
- <HeaderMeta
- component={component}
- currentTask={currentTask}
- isInProgress={isInProgress}
- isPending={isPending}
- />
- </div>
- <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
- </TopBar>
- <NCDAutoUpdateMessage component={component} />
- {prDecoNotifComponent}
- </>
+ <>
+ <TopBar id="context-navigation" aria-label={translate('qualifier', component.qualifier)}>
+ <div className="sw-min-h-10 sw-flex sw-justify-between">
+ <Header component={component} />
+ <HeaderMeta
+ component={component}
+ currentTask={currentTask}
+ isInProgress={isInProgress}
+ isPending={isPending}
+ />
+ </div>
+ <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
+ </TopBar>
+ <NCDAutoUpdateMessage component={component} />
+ {projectBindingErrors !== undefined && (
+ <ComponentNavProjectBindingErrorNotif component={component} />
)}
- </ScreenPositionHelper>
+ </>
);
}