fix(techdocs): copy to clipboard works in usecure context

Signed-off-by: Antonio Musolino <antoniomusolino007@gmail.com>

.changeset/spotty-turtles-reply.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Copy to clipboard now works in a not secure context.

plugins/techdocs/src/reader/transformers/copyToClipboard.test.ts

@@ -18,6 +18,7 @@ import { createTestShadowDom } from '../../test-utils';
 import { copyToClipboard } from './copyToClipboard';
 import { lightTheme } from '@backstage/theme';
 import { waitFor } from '@testing-library/react';
+import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 
 const clipboardSpy = jest.fn();
 Object.defineProperty(window.navigator, 'clipboard', {
@@ -26,8 +27,21 @@ Object.defineProperty(window.navigator, 'clipboard', {
   },
 });
 
+jest.mock('react-use/lib/useCopyToClipboard', () => {
+  const original = jest.requireActual('react-use/lib/useCopyToClipboard');
+
+  return {
+    __esModule: true,
+    default: jest.fn().mockImplementation(original.default),
+  };
+});
+
 describe('copyToClipboard', () => {
   it('calls navigator.clipboard.writeText when clipboard button has been clicked', async () => {
+    const spy = useCopyToClipboard as jest.Mock;
+    const copy = jest.fn();
+    spy.mockReturnValue([{}, copy]);
+
     const expectedClipboard = 'function foo() {return "bar";}';
     const shadowDom = await createTestShadowDom(
       `
@@ -51,7 +65,7 @@ describe('copyToClipboard', () => {
       expect(tooltip).toHaveTextContent('Copied to clipboard');
     });
 
-    expect(clipboardSpy).toHaveBeenCalledWith(expectedClipboard);
+    expect(copy).toHaveBeenCalledWith(expectedClipboard);
   });
 
   it('only gets applied to code blocks', async () => {

plugins/techdocs/src/reader/transformers/copyToClipboard.tsx

@@ -25,6 +25,7 @@ import {
 } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import type { Transformer } from './transformer';
+import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 
 const CopyToClipboardTooltip = withStyles(theme => ({
   tooltip: {
@@ -49,11 +50,12 @@ type CopyToClipboardButtonProps = {
 
 const CopyToClipboardButton = ({ text }: CopyToClipboardButtonProps) => {
   const [open, setOpen] = useState(false);
+  const [, copyToClipboard] = useCopyToClipboard();
 
   const handleClick = useCallback(() => {
-    window.navigator.clipboard.writeText(text);
+    copyToClipboard(text);
     setOpen(true);
-  }, [text]);
+  }, [text, copyToClipboard]);
 
   const handleClose = useCallback(() => {
     setOpen(false);