From 6baff76a86706874a10935b5eb9e798b2c2d1eb8 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Mon, 25 Aug 2025 19:15:00 +0300
Subject: [PATCH] feat: enable drawer on cluster page

---
 src/components/Drawer/Drawer.scss  |   3 +-
 src/containers/Cluster/Cluster.tsx | 226 +++++++++++++++--------------
 src/styles/drawer.scss             |   2 +-
 3 files changed, 121 insertions(+), 110 deletions(-)

diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
index d126aa0ae2..91fa5f8177 100644
--- a/src/components/Drawer/Drawer.scss
+++ b/src/components/Drawer/Drawer.scss
@@ -5,11 +5,12 @@
 
         overflow: hidden;
 
+        width: 100%;
         height: 100%;
     }
 
     &__item {
-        z-index: 4;
+        z-index: var(--gn-drawer-item-z-index);
 
         height: 100%;
     }
diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
index 1628166bec..03fbd6ab0f 100644
--- a/src/containers/Cluster/Cluster.tsx
+++ b/src/containers/Cluster/Cluster.tsx
@@ -6,6 +6,7 @@ import {Redirect, Route, Switch, useRouteMatch} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {DrawerContextProvider} from '../../components/Drawer/DrawerContext';
 import {EntityStatus} from '../../components/EntityStatusNew/EntityStatus';
 import {EFlagToDescription} from '../../components/EntityStatusNew/utils';
 import {InternalLink} from '../../components/InternalLink';
@@ -144,134 +145,143 @@ export function Cluster({
     const {appTitle} = useAppTitle();
 
     return (
-        <div className={b()} ref={container}>
-            <Helmet
-                defaultTitle={`${clusterTitle} — ${appTitle}`}
-                titleTemplate={`%s — ${clusterTitle} — ${appTitle}`}
-            >
-                {activeTab ? <title>{activeTab.title}</title> : null}
-            </Helmet>
-            <div className={b('header')}>{getClusterTitle()}</div>
-            <div className={b('sticky-wrapper')}>
-                <AutoRefreshControl className={b('auto-refresh-control')} />
-            </div>
-            {isClusterDashboardAvailable && (
-                <div className={b('dashboard')}>
-                    <ClusterOverview
-                        cluster={cluster ?? {}}
-                        groupStats={groupsStats}
-                        loading={infoLoading}
-                        error={clusterError || cluster?.error}
-                        additionalClusterProps={additionalClusterProps}
-                    />
+        <DrawerContextProvider>
+            <div className={b()} ref={container}>
+                <Helmet
+                    defaultTitle={`${clusterTitle} — ${appTitle}`}
+                    titleTemplate={`%s — ${clusterTitle} — ${appTitle}`}
+                >
+                    {activeTab ? <title>{activeTab.title}</title> : null}
+                </Helmet>
+                <div className={b('header')}>{getClusterTitle()}</div>
+                <div className={b('sticky-wrapper')}>
+                    <AutoRefreshControl className={b('auto-refresh-control')} />
                 </div>
-            )}
-            <div className={b('tabs-sticky-wrapper')}>
-                <TabProvider value={activeTabId}>
-                    <TabList size="l">
-                        {actualClusterTabs.map(({id, title}) => {
-                            const path = getClusterPath(id as ClusterTab, {clusterName, backend});
-                            return (
-                                <Tab key={id} value={id}>
-                                    <InternalLink
-                                        view="primary"
-                                        as="tab"
-                                        to={path}
-                                        onClick={() => {
-                                            dispatch(updateDefaultClusterTab(id));
-                                        }}
-                                    >
-                                        {title}
-                                    </InternalLink>
-                                </Tab>
-                            );
-                        })}
-                    </TabList>
-                </TabProvider>
-            </div>
-            <div className={b('content')}>
-                <Switch>
-                    <Route
-                        path={
-                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
-                                .pathname
-                        }
-                    >
-                        <TabletsTable
+                {isClusterDashboardAvailable && (
+                    <div className={b('dashboard')}>
+                        <ClusterOverview
+                            cluster={cluster ?? {}}
+                            groupStats={groupsStats}
                             loading={infoLoading}
-                            tablets={clusterTablets}
-                            scrollContainerRef={container}
-                        />
-                    </Route>
-                    <Route
-                        path={
-                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
-                                .pathname
-                        }
-                    >
-                        <Tenants
-                            additionalTenantsProps={additionalTenantsProps}
-                            scrollContainerRef={container}
+                            error={clusterError || cluster?.error}
+                            additionalClusterProps={additionalClusterProps}
                         />
-                    </Route>
-                    <Route
-                        path={
-                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
-                        }
-                    >
-                        <Nodes
-                            scrollContainerRef={container}
-                            additionalNodesProps={additionalNodesProps}
-                        />
-                    </Route>
-                    <Route
-                        path={
-                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
-                                .pathname
-                        }
-                    >
-                        <PaginatedStorage scrollContainerRef={container} />
-                    </Route>
-                    {shouldShowNetworkTable && (
+                    </div>
+                )}
+                <div className={b('tabs-sticky-wrapper')}>
+                    <TabProvider value={activeTabId}>
+                        <TabList size="l">
+                            {actualClusterTabs.map(({id, title}) => {
+                                const path = getClusterPath(id as ClusterTab, {
+                                    clusterName,
+                                    backend,
+                                });
+                                return (
+                                    <Tab key={id} value={id}>
+                                        <InternalLink
+                                            view="primary"
+                                            as="tab"
+                                            to={path}
+                                            onClick={() => {
+                                                dispatch(updateDefaultClusterTab(id));
+                                            }}
+                                        >
+                                            {title}
+                                        </InternalLink>
+                                    </Tab>
+                                );
+                            })}
+                        </TabList>
+                    </TabProvider>
+                </div>
+                <div className={b('content')}>
+                    <Switch>
                         <Route
                             path={
-                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.network))
+                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
                                     .pathname
                             }
                         >
-                            <NetworkTable
+                            <TabletsTable
+                                loading={infoLoading}
+                                tablets={clusterTablets}
+                                scrollContainerRef={container}
+                            />
+                        </Route>
+                        <Route
+                            path={
+                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
+                                    .pathname
+                            }
+                        >
+                            <Tenants
+                                additionalTenantsProps={additionalTenantsProps}
+                                scrollContainerRef={container}
+                            />
+                        </Route>
+                        <Route
+                            path={
+                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes))
+                                    .pathname
+                            }
+                        >
+                            <Nodes
                                 scrollContainerRef={container}
                                 additionalNodesProps={additionalNodesProps}
                             />
                         </Route>
-                    )}
-                    <Route
-                        path={
-                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
-                                .pathname
-                        }
-                    >
-                        <VersionsContainer cluster={cluster} loading={infoLoading} />
-                    </Route>
-                    {shouldShowEventsTab && (
                         <Route
                             path={
-                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
+                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
                                     .pathname
                             }
                         >
-                            {uiFactory.renderEvents?.()}
+                            <PaginatedStorage scrollContainerRef={container} />
                         </Route>
-                    )}
-
-                    <Route
-                        render={() => (
-                            <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                        {shouldShowNetworkTable && (
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath(clusterTabsIds.network),
+                                    ).pathname
+                                }
+                            >
+                                <NetworkTable
+                                    scrollContainerRef={container}
+                                    additionalNodesProps={additionalNodesProps}
+                                />
+                            </Route>
+                        )}
+                        <Route
+                            path={
+                                getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
+                                    .pathname
+                            }
+                        >
+                            <VersionsContainer cluster={cluster} loading={infoLoading} />
+                        </Route>
+                        {shouldShowEventsTab && (
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
+                                        .pathname
+                                }
+                            >
+                                {uiFactory.renderEvents?.()}
+                            </Route>
                         )}
-                    />
-                </Switch>
+
+                        <Route
+                            render={() => (
+                                <Redirect
+                                    to={getLocationObjectFromHref(getClusterPath(activeTabId))}
+                                />
+                            )}
+                        />
+                    </Switch>
+                </div>
             </div>
-        </div>
+        </DrawerContextProvider>
     );
 }
 
diff --git a/src/styles/drawer.scss b/src/styles/drawer.scss
index 925d02af99..64e4b83ce7 100644
--- a/src/styles/drawer.scss
+++ b/src/styles/drawer.scss
@@ -1,5 +1,5 @@
 .g-root {
-    --ydb-drawer-veil-z-index: 2;
+    --ydb-drawer-veil-z-index: 10;
     --gn-drawer-item-z-index: calc(var(--ydb-drawer-veil-z-index) + 1);
 
     --gn-drawer-veil-z-index: var(--ydb-drawer-veil-z-index);