chore: uikit update and enchance Diclosure usage (#2898)

Author: Raubzeug

package-lock.json

@@ -24,7 +24,7 @@
     "@gravity-ui/paranoid": "^3.0.0",
     "@gravity-ui/react-data-table": "^2.2.1",
     "@gravity-ui/table": "^1.10.1",
-    "@gravity-ui/uikit": "^7.16.2",
+    "@gravity-ui/uikit": "^7.22.0",
     "@gravity-ui/unipika": "^5.2.1",
     "@gravity-ui/websql-autocomplete": "^13.7.0",
     "@hookform/resolvers": "^3.10.0",

package.json

@@ -3,8 +3,6 @@
 .ydb-cluster-dashboard {
     &__dashboard-wrapper {
         gap: var(--g-spacing-6);
-
-        padding-top: var(--g-spacing-4);
     }
 
     &__dashboard-wrapper_collapsed {
@@ -28,39 +26,25 @@
         height: 100%;
     }
     &__overview-wrapper {
-        --g-button-background-color-hover: var(--g-color-base-background);
-        --g-button-padding: 0;
-
-        padding: var(--g-spacing-4);
-
         border: 1px solid var(--g-color-line-generic);
         border-radius: 5px;
 
-        .g-button:active {
-            transform: unset;
+        .g-disclosure__trigger {
+            width: 100%;
+            height: 60px;
+            padding: var(--g-spacing-4);
         }
     }
+    &__disclosure-content {
+        padding: 0 var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4);
+    }
 
     &__overview-wrapper_collapsed {
         &:hover {
             border-color: var(--g-color-line-generic-hover);
         }
     }
 
-    &__disclosure-summary {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        width: 100%;
-        height: 28px;
-
-        cursor: pointer;
-        .g-button__text {
-            width: 100%;
-        }
-    }
-
     &__card {
         min-width: 280px;
         height: 132px;

src/containers/Cluster/ClusterOverview/ClusterOverview.scss

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArrowToggle, Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {
@@ -56,35 +56,34 @@ export function ClusterOverview(props: ClusterOverviewProps) {
     }
 
     return (
-        <Flex direction="column" className={b('overview-wrapper', {collapsed: !expandDashboard})}>
-            <Disclosure
-                arrowPosition="end"
-                expanded={expandDashboard}
-                onUpdate={() => setExpandDashboard(!expandDashboard)}
-            >
-                <Disclosure.Summary>
-                    {(disclosureProps) => (
-                        <div {...disclosureProps} className={b('disclosure-summary')}>
-                            <Flex alignItems="center" justifyContent="space-between" width={'100%'}>
-                                <Flex gap={2} alignItems="center">
-                                    <Icon data={overviewIcon} size={16} />
-                                    <Text variant="body-2" color="primary" className={b('title')}>
-                                        {i18n('label_overview')}
-                                    </Text>
-                                </Flex>
-                                {!expandDashboard && <ClusterDashboard {...props} collapsed />}
-                            </Flex>
-                            <ArrowToggle
-                                size={16}
-                                direction={disclosureProps.expanded ? 'top' : 'bottom'}
-                            />
-                        </div>
-                    )}
-                </Disclosure.Summary>
+        <Disclosure
+            arrowPosition="end"
+            size="l"
+            expanded={expandDashboard}
+            onUpdate={() => setExpandDashboard(!expandDashboard)}
+            className={b('overview-wrapper', {collapsed: !expandDashboard})}
+            summary={
+                <Flex
+                    alignItems="center"
+                    justifyContent="space-between"
+                    width={'100%'}
+                    className={b('disclosure-summary')}
+                >
+                    <Flex gap={2} alignItems="center">
+                        <Icon data={overviewIcon} size={16} />
+                        <Text variant="body-2" color="primary" className={b('title')}>
+                            {i18n('label_overview')}
+                        </Text>
+                    </Flex>
+                    {!expandDashboard && <ClusterDashboard {...props} collapsed />}
+                </Flex>
+            }
+        >
+            <div className={b('disclosure-content')}>
                 <ClusterDashboard {...props} />
                 <ClusterInfo {...props} bridgePiles={bridgePiles} />
-            </Disclosure>
-        </Flex>
+            </div>
+        </Disclosure>
     );
 }