fix(Cluster): side paddings (#2301)

Author: Raubzeug

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -20,7 +20,7 @@
     &__controls {
         z-index: 3;
 
-        width: 100%;
+        width: max-content;
         height: 62px;
 
         @include mixins.controls();

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -1,3 +1,5 @@
+import {Flex} from '@gravity-ui/uikit';
+
 import {cn} from '../../utils/cn';
 import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
@@ -7,6 +9,7 @@ const b = cn('ydb-table-with-controls-layout');
 
 interface TableWithControlsLayoutItemProps {
     children: React.ReactNode;
+    renderExtraControls?: () => React.ReactNode;
     className?: string;
 }
 
@@ -23,12 +26,19 @@ export const TableWithControlsLayout = ({
 
 TableWithControlsLayout.Controls = function TableControls({
     children,
+    renderExtraControls,
     className,
 }: TableWithControlsLayoutItemProps) {
     return (
-        <div className={b('controls-wrapper')}>
+        <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            className={b('controls-wrapper')}
+            gap={2}
+        >
             <div className={b('controls', className)}>{children}</div>
-        </div>
+            {renderExtraControls?.()}
+        </Flex>
     );
 };
 

src/containers/Cluster/Cluster.scss

@@ -8,13 +8,29 @@
 
     width: 100%;
     height: 100%;
-    padding: 0 var(--cluster-side-padding);
+
+    &__sticky-wrapper {
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__dashboard {
+        position: sticky;
+        left: 0;
+
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__content {
+        width: calc(100% - var(--cluster-side-padding));
+        //allows controls of TableWithControlsLayout to stick properly
+        transform: translateX(var(--cluster-side-padding));
+    }
 
     &__header {
         position: sticky;
         left: 0;
 
-        padding: 20px 0;
+        padding: var(--g-spacing-5) var(--cluster-side-padding);
     }
 
     &__title {
@@ -32,11 +48,7 @@
         z-index: 3;
 
         margin-top: 20px;
-        margin-right: calc(var(--cluster-side-padding) * -2);
-        padding-right: calc(var(--cluster-side-padding) * 2);
-        padding-left: var(--cluster-side-padding);
-
-        transform: translateX(calc(var(--cluster-side-padding) * -1));
+        padding: 0 var(--cluster-side-padding);
         @include mixins.sticky-top();
     }
     &__tabs {

src/containers/Cluster/Cluster.tsx

@@ -123,13 +123,15 @@ export function Cluster({
                 <AutoRefreshControl className={b('auto-refresh-control')} />
             </div>
             {isClusterDashboardAvailable && (
-                <ClusterOverview
-                    cluster={cluster ?? {}}
-                    groupStats={groupsStats}
-                    loading={infoLoading}
-                    error={clusterError || cluster?.error}
-                    additionalClusterProps={additionalClusterProps}
-                />
+                <div className={b('dashboard')}>
+                    <ClusterOverview
+                        cluster={cluster ?? {}}
+                        groupStats={groupsStats}
+                        loading={infoLoading}
+                        error={clusterError || cluster?.error}
+                        additionalClusterProps={additionalClusterProps}
+                    />
+                </div>
             )}
             <div className={b('tabs-sticky-wrapper')}>
                 <Tabs
@@ -153,46 +155,54 @@ export function Cluster({
                     }}
                 />
             </div>
-            <Switch>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets)).pathname
-                    }
-                >
-                    <TabletsTable loading={infoLoading} tablets={clusterTablets} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants)).pathname
-                    }
-                >
-                    <Tenants additionalTenantsProps={additionalTenantsProps} />
-                </Route>
-                <Route
-                    path={getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname}
-                >
-                    <Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname
-                    }
-                >
-                    <PaginatedStorage parentRef={container} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname
-                    }
-                >
-                    <VersionsContainer cluster={cluster} loading={infoLoading} />
-                </Route>
-                <Route
-                    render={() => (
-                        <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
-                    )}
-                />
-            </Switch>
+            <div className={b('content')}>
+                <Switch>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
+                                .pathname
+                        }
+                    >
+                        <TabletsTable loading={infoLoading} tablets={clusterTablets} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
+                                .pathname
+                        }
+                    >
+                        <Tenants additionalTenantsProps={additionalTenantsProps} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
+                        }
+                    >
+                        <Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
+                                .pathname
+                        }
+                    >
+                        <PaginatedStorage parentRef={container} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
+                                .pathname
+                        }
+                    >
+                        <VersionsContainer cluster={cluster} loading={infoLoading} />
+                    </Route>
+                    <Route
+                        render={() => (
+                            <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                        )}
+                    />
+                </Switch>
+            </div>
         </div>
     );
 }

src/containers/Cluster/ClusterOverview/ClusterOverview.scss

@@ -30,8 +30,6 @@
     &__overview-wrapper {
         --g-button-background-color-hover: var(--g-color-base-background);
         --g-button-padding: 0;
-        position: sticky;
-        left: 0;
 
         padding: var(--g-spacing-4);
 

src/containers/Nodes/Nodes.scss

@@ -15,8 +15,4 @@
     &__node_unavailable {
         opacity: 0.6;
     }
-
-    &__groups-wrapper {
-        padding-right: 20px;
-    }
 }

src/containers/Storage/Storage.scss

@@ -15,8 +15,4 @@
     .entity-status {
         justify-content: center;
     }
-
-    &__groups-wrapper {
-        padding-right: 20px;
-    }
 }

src/containers/Tenants/Tenants.scss

@@ -59,7 +59,7 @@
 
     &__create-database {
         position: sticky;
-        right: 0;
+        right: calc(var(--cluster-side-padding) * 2);
 
         margin: 0 0 0 auto;
     }

src/containers/Tenants/Tenants.tsx

@@ -123,7 +123,6 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                     label={'Databases'}
                     loading={loading}
                 />
-                {renderCreateDBButton()}
             </React.Fragment>
         );
     };
@@ -268,7 +267,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     return (
         <div className={b('table-wrapper')}>
             <TableWithControlsLayout>
-                <TableWithControlsLayout.Controls>
+                <TableWithControlsLayout.Controls renderExtraControls={renderCreateDBButton}>
                     {renderControls()}
                 </TableWithControlsLayout.Controls>
                 {error ? <ResponseError error={error} /> : null}