feat: add showCopyCodeButton to CodeSnippet component

This allows to easiy copy the content of the code snippet.

packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx

@@ -86,3 +86,9 @@ export const Languages = () => (
     <CodeSnippet text={PYTHON} language="python" showLineNumbers />
   </InfoCard>
 );
+
+export const CopyCode = () => (
+  <InfoCard title="Copy Code">
+    <CodeSnippet text={JAVASCRIPT} language="javascript" showCopyCodeButton />
+  </InfoCard>
+);

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('<CodeSnippet />', () => {
     expect(queryByText(/2/)).toBeInTheDocument();
     expect(queryByText(/3/)).toBeInTheDocument();
   });
+
+  it('copy code using button', async () => {
+    document.execCommand = jest.fn();
+    const rendered = render(
+      wrapInTestApp(<CodeSnippet {...minProps} showCopyCodeButton />),
+    );
+    const button = rendered.getByTitle('Text copied to clipboard');
+    fireEvent.click(button);
+    expect(document.execCommand).toHaveBeenCalled();
+  });
 });

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> = props => {
-  const { text, language, showLineNumbers } = {
+  const { text, language, showLineNumbers, showCopyCodeButton } = {
     ...defaultProps,
     ...props,
   };
@@ -41,13 +44,20 @@ export const CodeSnippet: FC<Props> = props => {
   const mode = theme.palette.type === 'dark' ? dark : docco;
 
   return (
-    <SyntaxHighlighter
-      language={language}
-      style={mode}
-      showLineNumbers={showLineNumbers}
-    >
-      {text}
-    </SyntaxHighlighter>
+    <div style={{ position: 'relative' }}>
+      <SyntaxHighlighter
+        language={language}
+        style={mode}
+        showLineNumbers={showLineNumbers}
+      >
+        {text}
+      </SyntaxHighlighter>
+      {showCopyCodeButton && (
+        <div style={{ position: 'absolute', top: 0, right: 0 }}>
+          <CopyTextButton text={text} />
+        </div>
+      )}
+    </div>
   );
 };
 
@@ -56,4 +66,5 @@ CodeSnippet.propTypes = {
   text: PropTypes.string.isRequired,
   language: PropTypes.string.isRequired,
   showLineNumbers: PropTypes.bool,
+  showCopyCodeButton: PropTypes.bool,
 };

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('<CopyTextButton />', () => {
       ),
     );
     const button = rendered.getByTitle('mockTooltip');
-    button.click();
+    fireEvent.click(button);
     expect(document.execCommand).toHaveBeenCalled();
     rendered.getByText('mockTooltip');
   });