diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx index c0f57d6330..77f3ca51cc 100644 --- a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx +++ b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx @@ -86,3 +86,9 @@ export const Languages = () => ( ); + +export const CopyCode = () => ( + + + +); diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx index 42efbf14af..1a76f84f44 100644 --- a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx +++ b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { CodeSnippet } from './CodeSnippet'; @@ -55,4 +55,14 @@ describe('', () => { expect(queryByText(/2/)).toBeInTheDocument(); expect(queryByText(/3/)).toBeInTheDocument(); }); + + it('copy code using button', async () => { + document.execCommand = jest.fn(); + const rendered = render( + wrapInTestApp(), + ); + const button = rendered.getByTitle('Text copied to clipboard'); + fireEvent.click(button); + expect(document.execCommand).toHaveBeenCalled(); + }); }); diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.tsx index 324d71e936..b6d9b3a5aa 100644 --- a/packages/core/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core/src/components/CodeSnippet/CodeSnippet.tsx @@ -20,19 +20,22 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { docco, dark } from 'react-syntax-highlighter/dist/cjs/styles/hljs'; import { useTheme } from '@material-ui/core'; import { BackstageTheme } from '@backstage/theme'; +import { CopyTextButton } from '../CopyTextButton'; type Props = { text: string; language: string; showLineNumbers?: boolean; + showCopyCodeButton?: boolean; }; const defaultProps = { showLineNumbers: false, + showCopyCodeButton: false, }; export const CodeSnippet: FC = props => { - const { text, language, showLineNumbers } = { + const { text, language, showLineNumbers, showCopyCodeButton } = { ...defaultProps, ...props, }; @@ -41,13 +44,20 @@ export const CodeSnippet: FC = props => { const mode = theme.palette.type === 'dark' ? dark : docco; return ( - - {text} - +
+ + {text} + + {showCopyCodeButton && ( +
+ +
+ )} +
); }; @@ -56,4 +66,5 @@ CodeSnippet.propTypes = { text: PropTypes.string.isRequired, language: PropTypes.string.isRequired, showLineNumbers: PropTypes.bool, + showCopyCodeButton: PropTypes.bool, }; diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx index e789035b44..cab992e11a 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { CopyTextButton } from './CopyTextButton'; import { @@ -76,7 +76,7 @@ describe('', () => { ), ); const button = rendered.getByTitle('mockTooltip'); - button.click(); + fireEvent.click(button); expect(document.execCommand).toHaveBeenCalled(); rendered.getByText('mockTooltip'); });