refactor(Tablet): add and use ContentWithPopup (#401)

Author: artemmufazalov

src/components/ContentWithPopup/ContentWithPopup.tsx

@@ -0,0 +1,51 @@
+import {ReactNode, useRef, useState} from 'react';
+
+import {Popup, PopupProps} from '@gravity-ui/uikit';
+
+interface ContentWithPopupProps extends PopupProps {
+    content: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}
+
+export const ContentWithPopup = ({
+    children,
+    content,
+    className,
+    hasArrow = true,
+    placement = ['top', 'bottom'],
+    ...props
+}: ContentWithPopupProps) => {
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+    const anchor = useRef(null);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+
+    return (
+        <>
+            <Popup
+                anchorRef={anchor}
+                open={isPopupVisible}
+                placement={placement}
+                hasArrow={hasArrow}
+                {...props}
+            >
+                {content}
+            </Popup>
+            <span
+                className={className}
+                ref={anchor}
+                onMouseEnter={showPopup}
+                onMouseLeave={hidePopup}
+            >
+                {children}
+            </span>
+        </>
+    );
+};

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -7,7 +7,7 @@ import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
 
 import EntityStatus from '../EntityStatus/EntityStatus';
-import {NodeEndpointsTooltip} from '../Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {IconWrapper} from '../Icon';
 
 import './NodeHostWrapper.scss';
@@ -31,7 +31,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
         <div className={b()}>
             <Popover
                 disabled={!isNodeAvailable}
-                content={<NodeEndpointsTooltip data={node} />}
+                content={<NodeEndpointsTooltipContent data={node} />}
                 placement={['top', 'bottom']}
                 behavior={PopoverBehavior.Immediate}
             >

src/components/Tablet/Tablet.scss

@@ -22,6 +22,10 @@
         }
     }
 
+    &__popup-content {
+        padding: 10px;
+    }
+
     &__type {
         line-height: 17px;
 

src/components/Tablet/Tablet.tsx

@@ -1,59 +1,35 @@
-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 {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
 import {InternalLink} from '../InternalLink';
+import {TabletTooltipContent} from '../TooltipsContent';
 
 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();
-        }
-    };
-
+export const Tablet = ({tablet = {}}: TabletProps) => {
     const {TabletId: id} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
     return (
-        <InternalLink
-            onClick={_onTabletClick}
-            to={id && createHref(routes.tablet, {id})}
+        <ContentWithPopup
             className={b('wrapper')}
+            content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
-            <div
-                ref={ref}
-                className={b({status})}
-                onMouseEnter={_onTabletMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
-            </div>
-        </InternalLink>
+            <InternalLink to={id && createHref(routes.tablet, {id})}>
+                <div className={b({status})}>
+                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
+                </div>
+            </InternalLink>
+        </ContentWithPopup>
     );
 };

src/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.scss renamed to src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss

@@ -1,4 +1,4 @@
-.ydb-node-endpoints-tooltip {
+.ydb-node-endpoints-tooltip-content {
     .info-viewer__value {
         min-width: 70px;
     }

src/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.tsx renamed to src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx

@@ -4,15 +4,15 @@ import type {TSystemStateInfo} from '../../../types/api/nodes';
 
 import {InfoViewer, InfoViewerItem} from '../../InfoViewer';
 
-import './NodeEndpointsTooltip.scss';
+import './NodeEndpointsTooltipContent.scss';
 
-const b = block('ydb-node-endpoints-tooltip');
+const b = block('ydb-node-endpoints-tooltip-content');
 
 interface NodeEdpointsTooltipProps {
     data?: TSystemStateInfo;
 }
 
-export const NodeEndpointsTooltip = ({data}: NodeEdpointsTooltipProps) => {
+export const NodeEndpointsTooltipContent = ({data}: NodeEdpointsTooltipProps) => {
     const info: InfoViewerItem[] = [];
 
     if (data?.Rack) {

src/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx

@@ -0,0 +1,34 @@
+import type {TTabletStateInfo} from '../../../types/api/tablet';
+
+import {calcUptime} from '../../../utils';
+import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+
+const formatTablet = createInfoFormatter<TTabletStateInfo>({
+    values: {
+        ChangeTime: (value) => calcUptime(value),
+    },
+    labels: {
+        TabletId: 'Tablet',
+    },
+    defaultValueFormatter: (value) => value && String(value),
+});
+
+interface TabletTooltipContentProps {
+    data?: TTabletStateInfo;
+    className?: string;
+}
+
+export const TabletTooltipContent = ({data = {}, className}: TabletTooltipContentProps) => {
+    const {TabletId, NodeId, State, Type, ChangeTime, Generation} = data;
+
+    const info = formatObject(formatTablet, {
+        TabletId,
+        NodeId,
+        State,
+        Type,
+        ChangeTime,
+        Generation,
+    });
+
+    return <InfoViewer className={className} info={info} dots={false} size={'s'} />;
+};

src/components/TooltipsContent/index.ts

@@ -0,0 +1,2 @@
+export * from './NodeEndpointsTooltipContent/NodeEndpointsTooltipContent';
+export * from './TabletTooltipContent/TabletTooltipContent';

src/containers/ClusterInfo/ClusterInfo.tsx

@@ -16,7 +16,6 @@ import {Loader} from '../../components/Loader';
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import type {AdditionalVersionsProps} from '../../types/additionalProps';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
 import {backend, customBackend} from '../../store';
@@ -91,14 +90,6 @@ export const ClusterInfo = ({
         return parseNodesToVersionsValues(nodes, versionToColor);
     }, [nodes, versionToColor]);
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     const getInfo = () => {
         let link = backend + '/internal';
 
@@ -183,12 +174,7 @@ export const ClusterInfo = ({
                             {cluster?.SystemTablets &&
                                 cluster.SystemTablets.sort(compareTablets).map(
                                     (tablet, tabletIndex) => (
-                                        <Tablet
-                                            onMouseEnter={onShowTooltip}
-                                            onMouseLeave={onHideTooltip}
-                                            key={tabletIndex}
-                                            tablet={tablet}
-                                        />
+                                        <Tablet key={tabletIndex} tablet={tablet} />
                                     ),
                                 )}
                         </div>

src/containers/Tablets/Tablets.tsx

@@ -12,7 +12,6 @@ import {Loader} from '../../components/Loader';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {ETabletState, EType, TTabletStateInfo} from '../../types/api/tablet';
 
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {
     getTabletsInfo,
     clearWasLoadingFlag,
@@ -89,23 +88,8 @@ export const Tablets = ({path, nodeId, className}: TabletsProps) => {
         dispatch(setTypeFilter(value as EType[]));
     };
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     const renderTablet = (tabletIndex: number) => {
-        return (
-            <Tablet
-                onMouseLeave={onHideTooltip}
-                onMouseEnter={onShowTooltip}
-                tablet={tabletsToRender[tabletIndex]}
-                key={tabletIndex}
-            />
-        );
+        return <Tablet tablet={tabletsToRender[tabletIndex]} key={tabletIndex} />;
     };
 
     const renderContent = () => {