From 91236a5225d23b3d7b44c3c93cfdf5a41251e6cc Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Fri, 18 Feb 2022 18:22:21 -0500
Subject: [PATCH] fix(sqllab): Removed the tooltip from CopyToClipboard button
 in sqllab (#18749)

* fix(15849): Removed the tooltip from CopyToClipboard button in sqllab

* chore(sqllab): added props for tooltip in CopyToClipboard component

* fix(sqllab): Added arg to storybook and refactor the component

* fix(sqllab): added a test case for hideTooltip
---
 .../src/SqlLab/components/ResultSet/index.tsx |  1 +
 .../CopyToClipboard.stories.tsx               |  1 +
 .../CopyToClipboard/CopyToClipboard.test.tsx  | 10 +++++
 .../src/components/CopyToClipboard/index.jsx  | 41 +++++++++++--------
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index 6fe38b61cd..c052a6f89c 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -550,6 +550,7 @@ export default class ResultSet extends React.PureComponent<
                   <i className="fa fa-clipboard" /> {t('Copy to Clipboard')}
                 </Button>
               }
+              hideTooltip
             />
           </ResultSetButtons>
           {this.props.search && (
diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
index adb44a36f6..3a52af5991 100644
--- a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
@@ -49,6 +49,7 @@ InteractiveCopyToClipboard.args = {
   text: 'http://superset.apache.org/',
   wrapped: true,
   tooltipText: 'Copy to clipboard',
+  hideTooltip: false,
 };
 
 InteractiveCopyToClipboard.argTypes = {
diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx
index 81103a8a08..87dbca404b 100644
--- a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx
@@ -58,6 +58,16 @@ test('renders tooltip on hover', async () => {
   expect(tooltip).toHaveTextContent(tooltipText);
 });
 
+test('not renders tooltip on hover with hideTooltip props', async () => {
+  const tooltipText = 'Tooltip';
+  render(<CopyToClipboard tooltipText={tooltipText} hideTooltip />, {
+    useRedux: true,
+  });
+  userEvent.hover(screen.getByText('Copy'));
+  const tooltip = screen.queryByRole('tooltip');
+  expect(tooltip).toBe(null);
+});
+
 test('triggers onCopyEnd', async () => {
   const onCopyEnd = jest.fn();
   render(<CopyToClipboard onCopyEnd={onCopyEnd} />, {
diff --git a/superset-frontend/src/components/CopyToClipboard/index.jsx b/superset-frontend/src/components/CopyToClipboard/index.jsx
index cfd607bdef..00a23b1662 100644
--- a/superset-frontend/src/components/CopyToClipboard/index.jsx
+++ b/superset-frontend/src/components/CopyToClipboard/index.jsx
@@ -33,6 +33,7 @@ const propTypes = {
   tooltipText: PropTypes.string,
   addDangerToast: PropTypes.func.isRequired,
   addSuccessToast: PropTypes.func.isRequired,
+  hideTooltip: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,6 +42,7 @@ const defaultProps = {
   shouldShowText: true,
   wrapped: true,
   tooltipText: t('Copy to clipboard'),
+  hideTooltip: false,
 };
 
 class CopyToClipboard extends React.Component {
@@ -86,20 +88,30 @@ class CopyToClipboard extends React.Component {
       });
   }
 
-  renderNotWrapped() {
+  renderTooltip(cursor) {
     return (
-      <Tooltip
-        id="copy-to-clipboard-tooltip"
-        placement="top"
-        style={{ cursor: 'pointer' }}
-        title={this.props.tooltipText}
-        trigger={['hover']}
-      >
-        {this.getDecoratedCopyNode()}
-      </Tooltip>
+      <>
+        {!this.props.hideTooltip ? (
+          <Tooltip
+            id="copy-to-clipboard-tooltip"
+            placement="top"
+            style={{ cursor }}
+            title={this.props.tooltipText}
+            trigger={['hover']}
+          >
+            {this.getDecoratedCopyNode()}
+          </Tooltip>
+        ) : (
+          this.getDecoratedCopyNode()
+        )}
+      </>
     );
   }
 
+  renderNotWrapped() {
+    return this.renderTooltip('pointer');
+  }
+
   renderLink() {
     return (
       <span css={{ display: 'inline-flex', alignItems: 'center' }}>
@@ -108,14 +120,7 @@ class CopyToClipboard extends React.Component {
             {this.props.text}
           </span>
         )}
-        <Tooltip
-          id="copy-to-clipboard-tooltip"
-          placement="top"
-          title={this.props.tooltipText}
-          trigger={['hover']}
-        >
-          {this.getDecoratedCopyNode()}
-        </Tooltip>
+        {this.renderTooltip()}
       </span>
     );
   }