refactor(Tablet): migrate to ts

Author: artemmufazalov

src/components/ClusterInfo/ClusterInfo.tsx

@@ -10,8 +10,7 @@ import ProgressViewer from '../ProgressViewer/ProgressViewer';
 //@ts-ignore
 import InfoViewer from '../InfoViewer/InfoViewer';
 import {Tags} from '../Tags';
-//@ts-ignore
-import Tablet from '../Tablet/Tablet';
+import {Tablet} from '../Tablet';
 
 //@ts-ignore
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';

src/components/Tablet/Tablet.js

@@ -0,0 +1,59 @@
+import {useRef} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {TTabletStateInfo} from '../../types/api/tablet';
+import type {ShowTooltipFunction} from '../../types/store/tooltip';
+import {getTabletLabel} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+
+import {InternalLink} from '../InternalLink';
+
+import './Tablet.scss';
+
+const b = cn('tablet');
+
+interface TabletProps {
+    tablet?: TTabletStateInfo;
+    onMouseEnter?: (...args: Parameters<ShowTooltipFunction>) => void;
+    onMouseLeave?: VoidFunction;
+}
+
+export const Tablet = ({
+    tablet = {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+}: TabletProps) => {
+    const ref = useRef(null);
+
+    const _onTabletMouseEnter = () => {
+        onMouseEnter(ref.current, tablet, 'tablet');
+    };
+
+    const _onTabletClick = () => {
+        const {TabletId: id} = tablet;
+
+        if (id) {
+            onMouseLeave();
+        }
+    };
+
+    const {TabletId: id} = tablet;
+    const status = tablet.Overall?.toLowerCase();
+
+    return (
+        <InternalLink
+            onClick={_onTabletClick}
+            to={id && createHref(routes.tablet, {id})}
+            className={b('wrapper')}
+        >
+            <div
+                ref={ref}
+                className={b({status})}
+                onMouseEnter={_onTabletMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
+                <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
+            </div>
+        </InternalLink>
+    );
+};

src/components/Tablet/Tablet.tsx

@@ -0,0 +1 @@
+export * from './Tablet';

src/components/Tablet/index.ts

@@ -27,10 +27,6 @@
         max-width: 180px;
     }
 
-    &__tablet {
-        margin-bottom: 2px;
-    }
-
     .tablet {
         display: inline-block;
 

src/containers/Tablets/Tablets.scss

@@ -5,7 +5,7 @@ import ReactList from 'react-list';
 
 import {Select} from '@gravity-ui/uikit';
 
-import Tablet from '../../components/Tablet/Tablet';
+import {Tablet} from '../../components/Tablet';
 import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
 import {Loader} from '../../components/Loader';
 
@@ -104,7 +104,6 @@ export const Tablets = ({path, nodeId, className}: TabletsProps) => {
                 onMouseEnter={onShowTooltip}
                 tablet={tabletsToRender[tabletIndex]}
                 key={tabletIndex}
-                className={b('tablet')}
             />
         );
     };

src/containers/Tablets/Tablets.tsx

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
-import Tablet from '../../components/Tablet/Tablet';
+import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';

src/containers/TabletsFilters/TabletsFilters.js

@@ -7,7 +7,7 @@ import {Loader} from '@gravity-ui/uikit';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
-import Tablet from '../../../../components/Tablet/Tablet';
+import {Tablet} from '../../../../components/Tablet';
 
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {getTenantInfo} from '../../../../store/reducers/tenant';

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -18,7 +18,9 @@ export interface ITooltipState {
     additionalData?: any;
 }
 
-export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<typeof showTooltip>;
+export type ShowTooltipFunction = typeof showTooltip;
+
+export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<ShowTooltipFunction>;
 
 export interface ITooltipRootStateSlice {
     tooltip: ITooltipState;