mirror of https://github.com/apache/superset.git
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
This commit is contained in:
parent
e7ff4a58e6
commit
91236a5225
|
@ -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 && (
|
||||
|
|
|
@ -49,6 +49,7 @@ InteractiveCopyToClipboard.args = {
|
|||
text: 'http://superset.apache.org/',
|
||||
wrapped: true,
|
||||
tooltipText: 'Copy to clipboard',
|
||||
hideTooltip: false,
|
||||
};
|
||||
|
||||
InteractiveCopyToClipboard.argTypes = {
|
||||
|
|
|
@ -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} />, {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue