Do existence check on navigator.clipboard.

learningequality · Sep 29, 2022 · 2e2cb2d · 2e2cb2d
1 parent 796b011
commit 2e2cb2d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 26 deletions.
diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -6,7 +6,14 @@
         {{ value }}
       </div>
     </VChip>
-    <VBtn icon small right data-test="copy" @click="copyToClipboard">
+    <VBtn
+      v-if="clipboardAvailable"
+      icon
+      small
+      right
+      data-test="copy"
+      @click="copyToClipboard"
+    >
       <Icon small>
         content_copy
       </Icon>
@@ -30,11 +37,18 @@
         type: String,
       },
     },
+    computed: {
+      clipboardAvailable() {
+        return Boolean(navigator.clipboard);
+      },
+    },
     methods: {
       copyToClipboard() {
-        navigator.clipboard.writeText(this.value).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.successMessage);
-        });
+        if (this.clipboardAvailable) {
+          navigator.clipboard.writeText(this.value).then(() => {
+            this.$store.dispatch('showSnackbarSimple', this.successMessage);
+          });
+        }
       },
     },
   };

diff --git a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
@@ -3,8 +3,8 @@
   <VTextField
     v-if="token"
     v-model="displayToken"
-    :title="$tr('copyPrompt')"
-    appendIcon="content_copy"
+    :title="clipboardAvailable ? $tr('copyPrompt') : ''"
+    :appendIcon="clipboardAvailable ? 'content_copy' : null"
     readonly
     color="primary"
     :hideDetails="true"
@@ -46,20 +46,25 @@
       displayToken() {
         return this.hyphenate ? this.token.slice(0, 5) + '-' + this.token.slice(5) : this.token;
       },
+      clipboardAvailable() {
+        return Boolean(navigator.clipboard);
+      },
     },
     methods: {
       copyToken() {
-        navigator.clipboard
-          .writeText(this.displayToken)
-          .then(() => {
-            let text = this.successText || this.$tr('copiedTokenId');
-            this.$store.dispatch('showSnackbar', { text });
-            this.$analytics.trackEvent('copy_token');
-            this.$emit('copied');
-          })
-          .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('copyFailed') });
-          });
+        if (this.clipboardAvailable) {
+          navigator.clipboard
+            .writeText(this.displayToken)
+            .then(() => {
+              let text = this.successText || this.$tr('copiedTokenId');
+              this.$store.dispatch('showSnackbar', { text });
+              this.$analytics.trackEvent('copy_token');
+              this.$emit('copied');
+            })
+            .catch(() => {
+              this.$store.dispatch('showSnackbar', { text: this.$tr('copyFailed') });
+            });
+        }
       },
     },
     $trs: {

diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
@@ -18,6 +18,7 @@
     <pre ref="textBox" class="hidden-screen-only">{{ text }}</pre>
     <div>
       <KButton
+        v-if="clipboardAvailable"
         ref="copyButton"
         :style="{ marginTop: '8px', marginBottom: '8px' }"
         :primary="false"
@@ -60,19 +61,24 @@
           minHeight: `${this.minHeight}px`,
         };
       },
+      clipboardAvailable() {
+        return Boolean(navigator.clipboard);
+      },
     },
     methods: {
       copyError() {
-        navigator.clipboard
-          .writeText(this.formattedText)
-          .then(() => {
-            this.$store.dispatch('showSnackbar', {
-              text: this.$tr('copiedToClipboardConfirmation'),
+        if (this.clipboardAvailable) {
+          navigator.clipboard
+            .writeText(this.formattedText)
+            .then(() => {
+              this.$store.dispatch('showSnackbar', {
+                text: this.$tr('copiedToClipboardConfirmation'),
+              });
+            })
+            .catch(() => {
+              this.$store.dispatch('showSnackbar', { text: this.$tr('copiedToClipboardFailure') });
             });
-          })
-          .catch(() => {
-            this.$store.dispatch('showSnackbar', { text: this.$tr('copiedToClipboardFailure') });
-          });
+        }
       },
     },
     $trs: {