[INT] Replaced vue-clipboard2 library with clipboard-polyfill (ranche…

…r#10072)

* [INT] Replaced vue-clipboard2 library with clipboard-polyfill

package.json

@@ -108,7 +108,7 @@
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
     "vue-client-only": "2.1.0",
-    "vue-clipboard2": "0.3.1",
+    "clipboard-polyfill": "4.0.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-meta": "2.4.0",

shell/components/CopyCode.vue

@@ -1,5 +1,7 @@
 <script>
 import { isArray } from '@shell/utils/array';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 
 function flatten(node) {
   if ( node.text ) {
@@ -27,14 +29,16 @@ export default {
 
       const content = flatten(this.$slots.default).trim();
 
-      this.$copyText(content).then(() => {
+      copyTextToClipboard(content).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+        this.$emit('copied');
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
-      this.$emit('copied');
     },
   },
 

shell/components/CopyToClipboard.vue

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { AsyncButton },
@@ -18,7 +19,7 @@ export default {
 
   methods: {
     clicked(buttonCb) {
-      this.$copyText(this.text).then(() => {
+      copyTextToClipboard(this.text).then(() => {
         buttonCb(true);
       }).catch(() => {
         buttonCb(false);

shell/components/CopyToClipboardText.vue

@@ -1,4 +1,6 @@
 <script>
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   props: {
     text: {
@@ -20,17 +22,20 @@ export default {
     clicked(event) {
       if (!this.copied) {
         event.preventDefault();
-        this.$copyText(this.text);
-        this.copied = true;
+        copyTextToClipboard(this.text).then(() => {
+          this.copied = true;
 
-        let t = event.target;
+          let t = event.target;
 
-        if (t.tagName === 'I') {
-          t = t.parentElement || t;
-        }
-        setTimeout(() => {
-          this.copied = false;
-        }, 500);
+          if (t.tagName === 'I') {
+            t = t.parentElement || t;
+          }
+          setTimeout(() => {
+            this.copied = false;
+          }, 500);
+        }).catch((e) => {
+          this.$emit('error', exceptionToErrorsArray(e));
+        });
       }
     },
   }

shell/components/StatusTable.vue

@@ -3,6 +3,8 @@ import {
   LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
 } from '@shell/config/table-headers';
 import SortableTable from '@shell/components/SortableTable';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   components: { SortableTable },
   props:      {
@@ -31,12 +33,14 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      this.$copyText(this.$slots.default[0].text).then(() => {
+      copyTextToClipboard(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }

shell/components/__tests__/CopyCode.test.ts

@@ -1,12 +1,13 @@
 import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
-    const wrapper = mount(CopyCode, {
-      mocks: { $copyText: () => new Promise(() => undefined) },
-      slots: { default: '<div></div>' }
-    });
+    const wrapper = mount(CopyCode, { slots: { default: '<div></div>' } });
 
     await wrapper.find('code').trigger('click');
 

shell/components/form/Password.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { CHARSET, randomStr } from '@shell/utils/string';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { LabeledInput },
@@ -75,6 +76,7 @@ export default {
     }
   },
   methods: {
+    copyTextToClipboard,
     generatePassword() {
       this.password = randomStr(16, CHARSET.ALPHA_NUM);
     },
@@ -109,7 +111,7 @@ export default {
         >
           <a
             href="#"
-            @click.prevent.stop="$copyText(password)"
+            @click.prevent.stop="copyTextToClipboard(password)"
           >{{ t('action.copy') }}</a>
         </div>
         <div

shell/edit/provisioning.cattle.io.cluster/__tests__/CustomCommand.tests.ts

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand.vue';
-
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
 describe('component: CustomCommand', () => {
   const token = 'MY_TOKEN';
   const ip = 'MY_IP';

shell/initialize/index.js

@@ -21,7 +21,6 @@ import plugins from '../core/plugins.js';
 import pluginsLoader from '../core/plugins-loader.js';
 import axiosShell from '../plugins/axios';
 import '../plugins/tooltip';
-import '../plugins/vue-clipboard2';
 import '../plugins/v-select';
 import '../plugins/transitions';
 import '../plugins/vue-js-modal';

shell/models/__tests__/management.cattle.io.cluster.test.ts

@@ -1,5 +1,9 @@
 import MgmtCluster from '@shell/models/management.cattle.io.cluster';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('class MgmtCluster', () => {
   describe('provisioner', () => {
     const testCases = [

shell/models/management.cattle.io.cluster.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { CATALOG, CLUSTER_BADGE } from '@shell/config/labels-annotations';
 import { NODE, FLEET, MANAGEMENT, CAPI } from '@shell/config/types';
 import { insertAt, addObject, removeObject } from '@shell/utils/array';
@@ -15,6 +14,7 @@ import HybridModel from '@shell/plugins/steve/hybrid-class';
 import { LINUX, WINDOWS } from '@shell/store/catalog';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 // See translation file cluster.providers for list of providers
 // If the logo is not named with the provider name, add an override here
@@ -408,9 +408,13 @@ export default class MgmtCluster extends HybridModel {
   }
 
   async copyKubeConfig() {
-    const config = await this.generateKubeConfig();
+    try {
+      const config = await this.generateKubeConfig();
 
-    Vue.prototype.$copyText(config);
+      if (config) {
+        await copyTextToClipboard(config);
+      }
+    } catch {}
   }
 
   async fetchNodeMetrics() {

shell/package.json

@@ -120,7 +120,7 @@
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
     "vue": "2.7.14",
-    "vue-clipboard2": "0.3.1",
+    "clipboard-polyfill": "4.0.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",

shell/utils/clipboard.js

@@ -0,0 +1,5 @@
+import * as Clipboard from 'clipboard-polyfill';
+
+export async function copyTextToClipboard(text) {
+  await Clipboard.writeText(text);
+}

yarn.lock

@@ -5214,14 +5214,10 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-clipboard@^2.0.0:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
-  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
+[email protected]:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clipboard-polyfill/-/clipboard-polyfill-4.0.1.tgz#8bff9da4b37565d4fac9dd85249c65bd24f3d1a8"
+  integrity sha512-oOxooaJd9dzy78jk1fw4IL+J0SiBn+W24KqUYUwsr0OWEsb5aZlKAWglr9Fg/XEFQMT3ZmJ2AnRoRMZZOMcOQQ==
 
 clipboardy@^2.3.0:
   version "2.3.0"
@@ -6778,11 +6774,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-delegate@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
-  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -8733,13 +8724,6 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
-good-listener@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
-  dependencies:
-    delegate "^3.1.2"
-
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -13751,11 +13735,6 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
 
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
-
 selfsigned@^1.10.8:
   version "1.10.14"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.14.tgz#ee51d84d9dcecc61e07e4aba34f229ab525c1574"
@@ -14760,11 +14739,6 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==
 
-tiny-emitter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -15394,13 +15368,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"
   integrity sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==
 
-[email protected]:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
-  integrity sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==
-  dependencies:
-    clipboard "^2.0.0"
-
 [email protected]:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/vue-codemirror/-/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"