Make Safari happy

Source/SelfService/Web/backup/listView.tsx

@@ -17,8 +17,10 @@ import { ShortInfo } from '../api/api';
 import { HttpResponseApplication } from '../api/application';
 
 
+import { useSnackbar } from 'notistack';
 import { BackupLink, getLink, BackupsForApplication, getBackupsByApplication, BackupLinkShareInput } from '../api/backups';
-import { useGlobalContext } from '../stores/notifications';
+import { copyToClipboard } from '../utils/clipboard';
+
 
 type BackupsDetailsList = {
     environment: string;
@@ -35,9 +37,10 @@ type Props = {
 
 export const ListView: React.FunctionComponent<Props> = (props) => {
     const _props = props!;
+    const { enqueueSnackbar } = useSnackbar();
     const application = _props.application;
     const environment = _props.environment;
-    const { setNotification } = useGlobalContext();
+
 
     const [data, setData] = useState({} as BackupsForApplication);
     const [loaded, setLoaded] = useState(false);
@@ -115,8 +118,8 @@ export const ListView: React.FunctionComponent<Props> = (props) => {
                                     };
 
                                     const share: BackupLink = await getLink(input);
-                                    await navigator.clipboard.writeText(share.url);
-                                    setNotification('The download link is now in your clipboard', 'info');
+                                    copyToClipboard(share.url);
+                                    enqueueSnackbar('The download link is now in your clipboard', { variant: 'info' });
                                 }} /></TableCell>
                             </TableRow>
                         ))}

Source/SelfService/Web/documentation/cicd/setupAzurePipelines.tsx

@@ -4,11 +4,12 @@
 import React from 'react';
 import { useSnackbar } from 'notistack';
 import Input from '@mui/material/Input';
-
+import copy from 'copy-to-clipboard';
 
 import { ButtonText } from '../../theme/buttonText';
 import { getAzureDevopsKubernetesServiceAccount, getContainerRegistry } from '../../api/cicd';
 import { Info } from '../../stores/documentationInfo';
+import { copyToClipboard } from '../../utils/clipboard';
 
 const styles = {
     '& .MuiInput-input.Mui-disabled': {
@@ -31,9 +32,9 @@ export const Doc: React.FunctionComponent<Props> = (props) => {
         onClick={async (event: React.MouseEvent<HTMLElement>) => {
             try {
                 const data = await getAzureDevopsKubernetesServiceAccount(applicationID);
-                await navigator.clipboard.writeText(JSON.stringify(data));
+                copyToClipboard(JSON.stringify(data));
                 enqueueSnackbar('Kubernetes service account copied to clipboard.');
-            } catch {
+            } catch (e) {
                 enqueueSnackbar('Failed to get data.', { variant: 'error' });
             }
         }}
@@ -47,7 +48,7 @@ export const Doc: React.FunctionComponent<Props> = (props) => {
         onClick={async (event: React.MouseEvent<HTMLElement>) => {
             try {
                 const data = await getContainerRegistry(applicationID);
-                await navigator.clipboard.writeText(JSON.stringify(data));
+                copyToClipboard(JSON.stringify(data));
                 enqueueSnackbar('Container registry copied to clipboard.');
             } catch {
                 enqueueSnackbar('Failed to get data.', { variant: 'error' });
@@ -89,4 +90,3 @@ export const Doc: React.FunctionComponent<Props> = (props) => {
         </>
     );
 };
-

Source/SelfService/Web/microservice/purchaseOrder/configuration.tsx

@@ -23,6 +23,7 @@ import { Button } from '../../theme/button';
 import { ButtonText } from '../../theme/buttonText';
 import { TextField } from '../../theme/textField';
 import { ErpIcon } from './erpIcon';
+import { copyToClipboard } from '../../utils/clipboard';
 
 type Props = {
     onSave: (microservice: MicroservicePurchaseOrder) => any;
@@ -99,18 +100,18 @@ export const Configuration: React.FunctionComponent<Props> = (props) => {
     const webhookPoHead = 'm3/pohead';
     const webhookPoLine = 'm3/poline';
 
-    const copyPOHeadUrl = async (event: React.MouseEvent<HTMLElement>) => {
+    const copyPOHeadUrl = (event: React.MouseEvent<HTMLElement>) => {
         try {
-            await navigator.clipboard.writeText(`${webhookPrefix}/${webhookPoHead}`);
+            copyToClipboard(`${webhookPrefix}/${webhookPoHead}`);
             enqueueSnackbar('POHEAD URL copied to clipboard.');
         } catch {
             enqueueSnackbar('Failed to copy POHEAD URL to clipboard.', { variant: 'error' });
         }
     };
 
-    const copyPOLineUrl = async (event: React.MouseEvent<HTMLElement>) => {
+    const copyPOLineUrl = (event: React.MouseEvent<HTMLElement>) => {
         try {
-            await navigator.clipboard.writeText(`${webhookPrefix}/${webhookPoLine}`);
+            copyToClipboard(`${webhookPrefix}/${webhookPoLine}`);
             enqueueSnackbar('POLINE URL copied to clipboard.');
         } catch {
             enqueueSnackbar('Failed to copy POLINE URL to clipboard.', { variant: 'error' });

Source/SelfService/Web/microservice/purchaseOrder/generatePassword.tsx

@@ -5,7 +5,7 @@ import { useSnackbar } from 'notistack';
 
 import { generate } from 'generate-password-browser';
 import { ButtonText } from '../../theme/buttonText';
-
+import { copyToClipboard } from '../../utils/clipboard';
 
 type Props = {
     password: string;
@@ -18,27 +18,27 @@ export const GeneratePassword: React.FunctionComponent<Props> = (props) => {
     const setPassword = props!.setPassword;
     // Using setPassword does not instantly update the password
     let _password = password;
-    const copyToClipboard = async () => {
+    const _copyToClipboard = () => {
         if (_password === '') {
             enqueueSnackbar('Password is empty, nothing to copy to clipboard.', { variant: 'error' });
             return;
         }
 
         try {
-            await navigator.clipboard.writeText(`${_password}`);
+            copyToClipboard(`${_password}`);
             enqueueSnackbar('Password copied to clipboard.');
         } catch {
             enqueueSnackbar('Failed to copy password to clipboard.', { variant: 'error' });
         }
     };
 
-    const generatePasswordAndCopyToClipboard = async () => {
+    const generatePasswordAndCopyToClipboard = () => {
         _password = generate({
             length: 10,
             numbers: true
         });
         setPassword(_password);
-        await copyToClipboard();
+        _copyToClipboard();
     };
 
     return (

Source/SelfService/Web/microservice/purchaseOrder/viewConfiguration.tsx

@@ -12,6 +12,7 @@ import { EditWebhookCredentials } from './editWebhookCredentials';
 import { ButtonText } from '../../theme/buttonText';
 import { RowWithLink } from './rowWithLink';
 import { HeaderDataRow } from '../components/headDataRow';
+import { copyToClipboard } from '../../utils/clipboard';
 
 type Props = {
     onSave: (microservice: MicroservicePurchaseOrder) => any;
@@ -33,18 +34,18 @@ export const ViewConfiguration: React.FunctionComponent<Props> = (props) => {
     const webhookPoLine = 'm3/poline';
     const msName = ms.name;
 
-    const copyPOHeadUrl = async (event: React.MouseEvent<HTMLElement>) => {
+    const copyPOHeadUrl = (event: React.MouseEvent<HTMLElement>) => {
         try {
-            await navigator.clipboard.writeText(`${webhookPrefix}/${webhookPoHead}`);
+            copyToClipboard(`${webhookPrefix}/${webhookPoHead}`);
             enqueueSnackbar('POHEAD URL copied to clipboard.');
         } catch {
             enqueueSnackbar('Failed to copy POHEAD URL to clipboard.', { variant: 'error' });
         }
     };
 
-    const copyPOLineUrl = async (event: React.MouseEvent<HTMLElement>) => {
+    const copyPOLineUrl = (event: React.MouseEvent<HTMLElement>) => {
         try {
-            await navigator.clipboard.writeText(`${webhookPrefix}/${webhookPoLine}`);
+            copyToClipboard(`${webhookPrefix}/${webhookPoLine}`);
             enqueueSnackbar('POLINE URL copied to clipboard.');
         } catch {
             enqueueSnackbar('Failed to copy POLINE URL to clipboard.', { variant: 'error' });

Source/SelfService/Web/package.json

@@ -26,6 +26,7 @@
         "@mui/material": "5.6.2",
         "@mui/styles": "5.6.2",
         "@shared/web": "1.0.1",
+        "copy-to-clipboard": "^3.3.1",
         "generate-password-browser": "^1.1.0",
         "notistack": "2.0.4",
         "react-markdown": "^7.1.0",

Source/SelfService/Web/utils/clipboard.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import copy from 'copy-to-clipboard';
+
+
+
+export const copyToClipboard = (text: string) => {
+    copy(text, {
+        debug: false,
+    });
+};

yarn.lock

@@ -1866,6 +1866,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz#b71d21991599f61a4ee00ba79087b8ba279bbb59"
@@ -6560,6 +6567,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"