feat(Clusters): redesign table (#2495)

Author: artemmufazalov

src/components/Search/Search.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
+import type {TextInputProps} from '@gravity-ui/uikit';
+
 import {cn} from '../../utils/cn';
 import {DebouncedInput} from '../DebouncedInput/DebouncedTextInput';
 
 import './Search.scss';
 
 const b = cn('ydb-search');
 
-interface SearchProps {
+interface SearchProps extends Omit<TextInputProps, 'onUpdate' | 'onChange'> {
     onChange: (value: string) => void;
     value?: string;
     width?: React.CSSProperties['width'];
-    className?: string;
     debounce?: number;
-    placeholder?: string;
     inputRef?: React.RefObject<HTMLInputElement>;
 }
 
@@ -23,8 +23,8 @@ export const Search = ({
     width,
     className,
     debounce,
-    placeholder,
     inputRef,
+    ...props
 }: SearchProps) => {
     return (
         <DebouncedInput
@@ -34,9 +34,9 @@ export const Search = ({
             controlRef={inputRef}
             style={{width}}
             className={b(null, className)}
-            placeholder={placeholder}
             value={value}
             onUpdate={onChange}
+            {...props}
         />
     );
 };

src/containers/Clusters/Clusters.scss

@@ -17,37 +17,6 @@
     &__autorefresh {
         margin-left: auto;
     }
-    &__cluster-status {
-        width: 18px;
-        height: 18px;
-        margin-right: 8px;
-
-        border-radius: 3px;
-
-        & span {
-            display: flex;
-            align-items: center;
-        }
-
-        &_type_green {
-            background-color: var(--ydb-color-status-green);
-        }
-        &_type_yellow {
-            background-color: var(--ydb-color-status-yellow);
-        }
-        &_type_blue {
-            background-color: var(--ydb-color-status-blue);
-        }
-        &_type_red {
-            background: var(--ydb-color-status-red);
-        }
-        &_type_grey {
-            background: var(--ydb-color-status-grey);
-        }
-        &_type_orange {
-            background: var(--ydb-color-status-orange);
-        }
-    }
     &__cluster-name {
         white-space: normal;
         text-decoration: none;
@@ -71,29 +40,17 @@
         margin-right: 15px;
 
         &_wide {
-            width: 300px;
+            width: 320px;
         }
     }
     &__empty-cell {
         color: var(--g-color-text-secondary);
     }
-    &__tooltip-content {
-        word-break: break-all;
-    }
 
     & .g-progress__item {
         transition: none;
     }
 
-    &__text {
-        color: var(--g-color-text-primary);
-        @include mixins.body-2-typography();
-
-        &::first-letter {
-            color: var(--g-color-text-danger);
-        }
-    }
-
     &__description {
         max-width: 200px;
 
@@ -113,36 +70,25 @@
     }
 
     &__table {
+        --data-table-cell-align: top;
+        --data-table-cell-vertical-padding: var(--g-spacing-3);
         @include mixins.freeze-nth-column(1);
     }
 
-    &__balancer-cell {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    &__balancer-text {
-        display: inline-block;
-        overflow: hidden;
-
-        max-width: 92%;
-        margin-right: 5px;
-
-        text-overflow: ellipsis;
-        overflow-wrap: break-word !important;
-    }
-    &__balancer-icon {
-        display: flex;
-        align-items: center;
+    &__balancer-copy-icon {
+        color: var(--g-color-text-secondary);
     }
+    &__search-icon {
+        margin: 0 var(--g-spacing-1);
 
-    &__error {
-        margin-left: 15px;
-        @include mixins.body-2-typography();
+        color: var(--g-color-text-secondary);
     }
 
     &__remove-cluster {
         color: var(--ydb-color-status-red);
     }
+
+    &__progress {
+        --g-progress-filled-background-color: var(--ydb-color-status-green);
+    }
 }

src/containers/Clusters/Clusters.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
+import {Magnifier} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {Flex, Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
+import {Flex, Icon, Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
@@ -129,12 +130,7 @@ export function Clusters() {
     const renderPageTitle = () => {
         return (
             <Flex justifyContent="space-between" className={b('title-wrapper')}>
-                <Flex gap={2}>
-                    <Text variant="header-1">{i18n('page_title')}</Text>
-                    <Text variant="header-1" color="secondary">
-                        {clusters?.length}
-                    </Text>
-                </Flex>
+                <Text variant="header-1">{uiFactory.clustersPageTitle ?? i18n('page_title')}</Text>
                 <AutoRefreshControl className={b('autorefresh')} />
             </Flex>
         );
@@ -152,6 +148,7 @@ export function Clusters() {
                 <div className={b('control', {wide: true})}>
                     <Search
                         placeholder={i18n('controls_search-placeholder')}
+                        endContent={<Icon data={Magnifier} className={b('search-icon')} />}
                         onChange={changeClusterName}
                         value={clusterName}
                     />
@@ -206,7 +203,12 @@ export function Clusters() {
                     />
                 </div>
             </Flex>
-            {query.isError ? <ResponseError error={query.error} className={b('error')} /> : null}
+            {clusters?.length ? (
+                <Text color="secondary">
+                    {i18n('clusters-count', {count: filteredClusters?.length})}
+                </Text>
+            ) : null}
+            {query.isError ? <ResponseError error={query.error} /> : null}
             {query.isLoading ? <Loader size="l" /> : null}
             {query.fulfilledTimeStamp ? (
                 <div className={b('table-wrapper')}>