fix(Fullscreen): fix overlay and root

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

@@ -18,12 +18,15 @@ 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 fullscreenRoot = React.useMemo(
+        () => document.getElementById('fullscreen-root') ?? undefined,
+        [],
+    );
+
     const onDisableFullScreen = React.useCallback(() => {
         dispatch(disableFullscreen());
     }, [dispatch]);
@@ -51,7 +54,7 @@ function Fullscreen({children, className}: FullscreenProps) {
             setContainer(null);
             div.remove();
         };
-    }, []);
+    }, [fullscreenRoot]);
 
     const ref = React.useRef<HTMLDivElement>(null);
     React.useLayoutEffect(() => {
@@ -62,7 +65,7 @@ function Fullscreen({children, className}: FullscreenProps) {
                 ref.current?.appendChild(container);
             }
         }
-    }, [container, isFullscreen]);
+    }, [container, fullscreenRoot, isFullscreen]);
 
     if (!container) {
         return null;
@@ -85,5 +88,3 @@ function Fullscreen({children, className}: FullscreenProps) {
         </div>
     );
 }
-
-export default Fullscreen;

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,