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
apache · Feb 18, 2022 · 91236a5 · 91236a5
1 parent e7ff4a5
commit 91236a5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     );
   }