feat(Healthcheck): redesign (#2348)

Author: Raubzeug

src/components/Drawer/Drawer.tsx

@@ -32,6 +32,7 @@ interface DrawerPaneContentWrapperProps {
     detectClickOutside?: boolean;
     defaultWidth?: number;
     isPercentageWidth?: boolean;
+    hideVeil?: boolean;
 }
 
 const DrawerPaneContentWrapper = ({
@@ -45,6 +46,7 @@ const DrawerPaneContentWrapper = ({
     className,
     detectClickOutside = false,
     isPercentageWidth,
+    hideVeil = true,
 }: DrawerPaneContentWrapperProps) => {
     const [drawerWidth, setDrawerWidth] = React.useState(() => {
         const savedWidth = localStorage.getItem(storageKey);
@@ -113,7 +115,7 @@ const DrawerPaneContentWrapper = ({
             <GravityDrawer
                 onEscape={onClose}
                 onVeilClick={onClose}
-                hideVeil
+                hideVeil={hideVeil}
                 className={b('container', className)}
             >
                 <DrawerItem
@@ -156,6 +158,7 @@ interface DrawerPaneProps {
     drawerControls?: DrawerControl[];
     title?: React.ReactNode;
     headerClassName?: string;
+    hideVeil?: boolean;
 }
 
 export const DrawerWrapper = ({
@@ -173,6 +176,7 @@ export const DrawerWrapper = ({
     drawerControls = [],
     title,
     headerClassName,
+    hideVeil,
 }: DrawerPaneProps) => {
     React.useEffect(() => {
         return () => {
@@ -220,6 +224,7 @@ export const DrawerWrapper = ({
         <React.Fragment>
             {children}
             <DrawerPaneContentWrapper
+                hideVeil={hideVeil}
                 isVisible={isDrawerVisible}
                 onClose={onCloseDrawer}
                 drawerId={drawerId}

src/containers/Storage/EmptyFilter/EmptyFilter.tsx renamed to src/components/EmptyFilter/EmptyFilter.tsx

@@ -1,7 +1,7 @@
 import {Button} from '@gravity-ui/uikit';
 
-import {EmptyState} from '../../../components/EmptyState';
-import {Illustration} from '../../../components/Illustration';
+import {EmptyState} from '../EmptyState';
+import {Illustration} from '../Illustration';
 
 import i18n from './i18n';
 

src/containers/Storage/EmptyFilter/i18n/en.json renamed to src/components/EmptyFilter/i18n/en.json

@@ -1,4 +1,4 @@
-import {registerKeysets} from '../../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
 import ru from './ru.json';

src/containers/Storage/EmptyFilter/i18n/index.ts renamed to src/components/EmptyFilter/i18n/index.ts

@@ -1,6 +1,7 @@
 @use '../../styles/mixins.scss';
 
 .empty-state {
+    $block: &;
     padding: 20px;
 
     &_size_m {
@@ -13,6 +14,14 @@
             'image title'
             'image description'
             'image actions';
+
+        &_size_xs {
+            width: 321px;
+            height: 100px;
+            #{$block}__image {
+                margin-right: var(--g-spacing-5);
+            }
+        }
         &_size_s {
             width: 460px;
             height: 120px;

src/containers/Storage/EmptyFilter/i18n/ru.json renamed to src/components/EmptyFilter/i18n/ru.json

@@ -9,6 +9,7 @@ import './EmptyState.scss';
 const block = cn('empty-state');
 
 const sizes = {
+    xs: 100,
     s: 150,
     m: 250,
     l: 350,

src/components/EmptyState/EmptyState.scss

@@ -1,10 +1,12 @@
 import {SquareDashed} from '@gravity-ui/icons';
 import type {ButtonView} from '@gravity-ui/uikit';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
 
 import {enableFullscreen} from '../../store/reducers/fullscreen';
 import {useTypedDispatch} from '../../utils/hooks';
 
+import i18n from './i18n';
+
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
     view?: ButtonView;
@@ -16,9 +18,11 @@ function EnableFullscreenButton({disabled, view = 'flat-secondary'}: EnableFulls
         dispatch(enableFullscreen());
     };
     return (
-        <Button onClick={onEnableFullscreen} view={view} disabled={disabled} title="Fullscreen">
-            <Icon data={SquareDashed} />
-        </Button>
+        <ActionTooltip title={i18n('title_fullscreen')}>
+            <Button onClick={onEnableFullscreen} view={view} disabled={disabled}>
+                <Icon data={SquareDashed} />
+            </Button>
+        </ActionTooltip>
     );
 }
 

src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,3 @@
+{
+  "title_fullscreen": "Fullscreen"
+}

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-fullscreen-button';
+
+export default registerKeysets(COMPONENT, {en});