From ec8c143bce70a6e68967bab8fc7471b6352996f8 Mon Sep 17 00:00:00 2001
From: Zubair Imtiaz <106450046+ZubairImtiaz3@users.noreply.github.com>
Date: Mon, 29 Jul 2024 00:01:33 +0500
Subject: [PATCH] [MM-59329] Migrate tooltips of
 "components/analytics/table_chart.tsx" to WithTooltip (#27649)

---
 .../__snapshots__/table_chart.test.tsx.snap   | 50 +++++--------------
 .../src/components/analytics/table_chart.tsx  | 25 +++-------
 2 files changed, 19 insertions(+), 56 deletions(-)

diff --git a/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap b/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap
index ac05438e2d..ee7d600f03 100644
--- a/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap
+++ b/webapp/channels/src/components/analytics/__snapshots__/table_chart.test.tsx.snap
@@ -21,28 +21,15 @@ exports[`components/analytics/table_chart.tsx should match snapshot, loaded with
             key="table-entry-test1"
           >
             <td>
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="tip-table-entry-test1"
-                  >
-                    test-tip1
-                  </Tooltip>
-                }
+              <WithTooltip
+                id="tip-table-entry-test1"
                 placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
+                title="test-tip1"
               >
-                <time>
+                <span>
                   test1
-                </time>
-              </OverlayTrigger>
+                </span>
+              </WithTooltip>
             </td>
             <td>
               <p>
@@ -54,28 +41,15 @@ exports[`components/analytics/table_chart.tsx should match snapshot, loaded with
             key="table-entry-test2"
           >
             <td>
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="tip-table-entry-test2"
-                  >
-                    test-tip2
-                  </Tooltip>
-                }
+              <WithTooltip
+                id="tip-table-entry-test2"
                 placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
+                title="test-tip2"
               >
-                <time>
+                <span>
                   test2
-                </time>
-              </OverlayTrigger>
+                </span>
+              </WithTooltip>
             </td>
             <td>
               <p>
diff --git a/webapp/channels/src/components/analytics/table_chart.tsx b/webapp/channels/src/components/analytics/table_chart.tsx
index c0c7ac1319..d82abb3037 100644
--- a/webapp/channels/src/components/analytics/table_chart.tsx
+++ b/webapp/channels/src/components/analytics/table_chart.tsx
@@ -3,10 +3,7 @@
 
 import React, {memo} from 'react';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 export type TableItem = {
     name: string;
@@ -34,23 +31,15 @@ const TableChart = ({
                             data.map((item) => (
                                 <tr key={'table-entry-' + item.name}>
                                     <td>
-                                        <OverlayTrigger
-                                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                                        <WithTooltip
+                                            id={'tip-table-entry-' + item.name}
                                             placement='top'
-                                            overlay={(
-                                                <Tooltip id={'tip-table-entry-' + item.name}>
-                                                    {item.tip}
-                                                </Tooltip>
-                                            )}
+                                            title={item.tip}
                                         >
-                                            <time>
-                                                {item.name}
-                                            </time>
-                                        </OverlayTrigger>
-                                    </td>
-                                    <td>
-                                        {item.value}
+                                            <span>{item.name}</span>
+                                        </WithTooltip>
                                     </td>
+                                    <td>{item.value}</td>
                                 </tr>
                             ))
                         }