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>
  );
  }