fix(Fullscreen): fix overlay and root (#2817)

Author: artemmufazalov

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -12,7 +12,10 @@ interface EnableFullscreenButtonProps {
     view?: ButtonView;
 }
 
-function EnableFullscreenButton({disabled, view = 'flat-secondary'}: EnableFullscreenButtonProps) {
+export function EnableFullscreenButton({
+    disabled,
+    view = 'flat-secondary',
+}: EnableFullscreenButtonProps) {
     const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
@@ -25,5 +28,3 @@ function EnableFullscreenButton({disabled, view = 'flat-secondary'}: EnableFulls
         </ActionTooltip>
     );
 }
-
-export default EnableFullscreenButton;

src/components/Fullscreen/Fullscreen.scss

@@ -1,20 +1,22 @@
 .ydb-fullscreen {
+    --ydb-fullscreen-z-index: 1000;
+
     overflow: hidden;
     flex-grow: 1;
 
     &_fullscreen {
         // should expand to fill the content area, keeping aside navigation visible
         // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
         position: absolute;
-        z-index: 10;
+        z-index: var(--ydb-fullscreen-z-index);
         inset: 0;
 
         background-color: var(--g-color-base-background);
     }
 
     &__close-button {
         position: fixed;
-        z-index: 11;
+        z-index: calc(var(--ydb-fullscreen-z-index) + 1);
         top: 8px;
         right: 20px;
 

src/components/Fullscreen/Fullscreen.tsx

@@ -7,6 +7,8 @@ import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {Portal} from '../Portal/Portal';
 
+import {useFullscreenContext} from './FullscreenContext';
+
 import disableFullscreenIcon from '../../assets/icons/disableFullscreen.svg';
 
 import './Fullscreen.scss';
@@ -18,11 +20,10 @@ interface FullscreenProps {
     className?: string;
 }
 
-const fullscreenRoot = document.getElementById('fullscreen-root') ?? undefined;
-
-function Fullscreen({children, className}: FullscreenProps) {
+export function Fullscreen({children, className}: FullscreenProps) {
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
+    const fullscreenRootRef = useFullscreenContext();
 
     const onDisableFullScreen = React.useCallback(() => {
         dispatch(disableFullscreen());
@@ -44,20 +45,20 @@ function Fullscreen({children, className}: FullscreenProps) {
     const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
     React.useEffect(() => {
         const div = document.createElement('div');
-        fullscreenRoot?.appendChild(div);
+        fullscreenRootRef.current?.appendChild(div);
         div.style.display = 'contents';
         setContainer(div);
         return () => {
             setContainer(null);
             div.remove();
         };
-    }, []);
+    }, [fullscreenRootRef]);
 
     const ref = React.useRef<HTMLDivElement>(null);
     React.useLayoutEffect(() => {
         if (container) {
             if (isFullscreen) {
-                fullscreenRoot?.appendChild(container);
+                fullscreenRootRef.current?.appendChild(container);
             } else {
                 ref.current?.appendChild(container);
             }
@@ -67,7 +68,7 @@ function Fullscreen({children, className}: FullscreenProps) {
                 window.dispatchEvent(new Event('resize'));
             });
         }
-    }, [container, isFullscreen]);
+    }, [container, fullscreenRootRef, isFullscreen]);
 
     if (!container) {
         return null;
@@ -90,5 +91,3 @@ function Fullscreen({children, className}: FullscreenProps) {
         </div>
     );
 }
-
-export default Fullscreen;

src/components/Fullscreen/FullscreenContext.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const FullscreenContext = React.createContext<React.RefObject<HTMLDivElement> | null>(null);
+
+export function useFullscreenContext() {
+    const context = React.useContext(FullscreenContext);
+    if (!context) {
+        throw new Error('useFullscreenContext must be used within a FullscreenProvider');
+    }
+    return context;
+}
+
+export function FullscreenProvider({
+    children,
+    fullscreenRootRef,
+}: {
+    children: React.ReactNode;
+    fullscreenRootRef: React.RefObject<HTMLDivElement>;
+}) {
+    return (
+        <FullscreenContext.Provider value={fullscreenRootRef}>
+            {children}
+        </FullscreenContext.Provider>
+    );
+}

src/containers/App/App.tsx

@@ -5,6 +5,7 @@ import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 
 import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
+import {FullscreenProvider} from '../../components/Fullscreen/FullscreenContext';
 import {useTypedSelector} from '../../utils/hooks';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
@@ -47,19 +48,22 @@ function AppContent({
 }) {
     const {appTitle} = useAppTitle();
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const fullscreenRootRef = React.useRef<HTMLDivElement>(null);
 
     return (
         <React.Fragment>
             <Helmet defaultTitle={appTitle} titleTemplate={`%s — ${appTitle}`} />
-            <ContentWrapper>
-                <NavigationWrapper
-                    singleClusterMode={singleClusterMode}
-                    userSettings={userSettings}
-                >
-                    <Content singleClusterMode={singleClusterMode}>{children}</Content>
-                    <div id="fullscreen-root"></div>
-                </NavigationWrapper>
-            </ContentWrapper>
+            <FullscreenProvider fullscreenRootRef={fullscreenRootRef}>
+                <ContentWrapper>
+                    <NavigationWrapper
+                        singleClusterMode={singleClusterMode}
+                        userSettings={userSettings}
+                    >
+                        <Content singleClusterMode={singleClusterMode}>{children}</Content>
+                        <div ref={fullscreenRootRef}></div>
+                    </NavigationWrapper>
+                </ContentWrapper>
+            </FullscreenProvider>
         </React.Fragment>
     );
 }

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -6,9 +6,9 @@ import {isNil} from 'lodash';
 
 import {DrawerWrapper} from '../../../../components/Drawer';
 import {EmptyFilter} from '../../../../components/EmptyFilter/EmptyFilter';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {EnableFullscreenButton} from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import {PageError} from '../../../../components/Errors/PageError/PageError';
-import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {Fullscreen} from '../../../../components/Fullscreen/Fullscreen';
 import {
     DEFAULT_TABLE_ROW_HEIGHT,
     ResizeablePaginatedTable,

src/containers/Tenant/Healthcheck/Healthcheck.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Flex, Icon} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
-import Fullscreen from '../../../components/Fullscreen/Fullscreen';
+import {Fullscreen} from '../../../components/Fullscreen/Fullscreen';
 import {HealthcheckStatus} from '../../../components/HealthcheckStatus/HealthcheckStatus';
 import {Illustration} from '../../../components/Illustration';
 import {Loader} from '../../../components/Loader';

src/containers/Tenant/Query/Preview/components/PreviewView.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {Xmark} from '@gravity-ui/icons';
 import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 
-import EnableFullscreenButton from '../../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import Fullscreen from '../../../../../components/Fullscreen/Fullscreen';
+import {EnableFullscreenButton} from '../../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {Fullscreen} from '../../../../../components/Fullscreen/Fullscreen';
 import {LoaderWrapper} from '../../../../../components/LoaderWrapper/LoaderWrapper';
 import {setShowPreview} from '../../../../../store/reducers/schema/schema';
 import {useTypedDispatch} from '../../../../../utils/hooks';

src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx

@@ -5,8 +5,8 @@ import type {Settings} from '@gravity-ui/react-data-table';
 import type {ControlGroupOption} from '@gravity-ui/uikit';
 import {ClipboardButton, Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
 
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {EnableFullscreenButton} from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {Fullscreen} from '../../../../components/Fullscreen/Fullscreen';
 import {Illustration} from '../../../../components/Illustration';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';

src/containers/Tenant/TenantDrawerHealthcheck.tsx

@@ -4,7 +4,7 @@ import {ArrowDownToLine} from '@gravity-ui/icons';
 import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {DrawerWrapper} from '../../components/Drawer';
-import EnableFullscreenButton from '../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {EnableFullscreenButton} from '../../components/EnableFullscreenButton/EnableFullscreenButton';
 import {
     selectAllHealthcheckInfo,
     selectCheckStatus,