feat: Copy to clipboard the record text (#1625)

This PR adds the "copy text" action in the extra actions menu, it also centralizes the "copy to clipboard" function and makes some small changes to the text Closes #1616 (cherry picked from commit 8db56ed)
argilla-io · Aug 22, 2022 · d634a7b · d634a7b
1 parent bef010c
commit d634a7b
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 54 deletions.
diff --git a/frontend/assets/scss/base/base.scss b/frontend/assets/scss/base/base.scss
@@ -185,9 +185,7 @@ a {
 }
 
 .hidden-input {
-    opacity: 0;
-    position: absolute;
-    bottom: 100%;
+    @extend %visuallyhidden;
 }
 
 .vue-recycle-scroller {

diff --git a/frontend/components/commons/results/RecordExtraActions.vue b/frontend/components/commons/results/RecordExtraActions.vue
@@ -17,29 +17,25 @@
 
 <template>
   <div v-click-outside="close" :key="open" class="record__extra-actions">
-    <a
-      v-if="hasMetadata || allowChangeStatus"
-      class="extra-actions__button"
-      href="#"
-      @click.prevent="open = !open"
+    <a class="extra-actions__button" href="#" @click.prevent="open = !open"
       ><svgicon name="kebab-menu" width="20" height="20" color="#4A4A4A"
     /></a>
     <div v-if="open" class="extra-actions__content">
       <div v-if="hasMetadata" @click="showMetadata()">
         <span>View metadata</span>
       </div>
-      <template v-if="allowChangeStatus">
-        <div
-          v-for="status in allowedStatusActions"
-          :key="status.key"
-          :class="record.status === 'Discarded' ? 'disabled' : null"
-          @click="onChangeRecordStatus(status.key)"
-        >
-          <span>{{
-            record.status === "Discarded" ? "Discarded" : status.name
-          }}</span>
+      <re-action-tooltip tooltip="Copied">
+        <div @click="$copyToClipboard(record.clipboardText)">
+          <span>Copy text</span>
         </div>
-      </template>
+      </re-action-tooltip>
+      <div
+        v-if="allowChangeStatus"
+        :class="record.status === 'Discarded' ? 'disabled' : null"
+        @click="onChangeRecordStatus('Discarded')"
+      >
+        <span>Discard record</span>
+      </div>
     </div>
   </div>
 </template>
@@ -78,16 +74,6 @@ export default {
       open: false,
     };
   },
-  data: () => ({
-    statusActions: [
-      // TODO: Do we need this? Just the discard action should be allowed here
-      {
-        name: "Discard",
-        key: "Discarded",
-        class: "discard",
-      },
-    ],
-  }),
   computed: {
     open: {
       get: function () {
@@ -157,6 +143,7 @@ export default {
     z-index: 1;
     .disabled {
       pointer-events: none;
+      opacity: 0.7;
     }
     div {
       padding: 0.5em;

diff --git a/frontend/components/core/ReBreadcrumbs.vue b/frontend/components/core/ReBreadcrumbs.vue
@@ -39,7 +39,7 @@
         class="breadcrumbs__copy"
         href="#"
         @click.prevent="
-          copyToClipboard(
+          $copyToClipboard(
             filteredBreadcrumbs[filteredBreadcrumbs.length - 1].name
           )
         "
@@ -67,17 +67,6 @@ export default {
       return this.breadcrumbs.filter((breadcrumb) => breadcrumb.name);
     },
   },
-  methods: {
-    copyToClipboard(name) {
-      const myTemporaryInputElement = document.createElement("input");
-      myTemporaryInputElement.type = "text";
-      myTemporaryInputElement.className = "hidden-input";
-      myTemporaryInputElement.value = name;
-      document.body.appendChild(myTemporaryInputElement);
-      myTemporaryInputElement.select();
-      document.execCommand("Copy");
-    },
-  },
 };
 </script>
 

diff --git a/frontend/components/core/ReCode.vue b/frontend/components/core/ReCode.vue
@@ -22,12 +22,7 @@ export default {
   },
   methods: {
     copy(code) {
-      const myTemporaryInputElement = document.createElement("textarea");
-      myTemporaryInputElement.className = "hidden-input";
-      myTemporaryInputElement.value = code;
-      document.body.appendChild(myTemporaryInputElement);
-      myTemporaryInputElement.select();
-      document.execCommand("Copy");
+      this.$copyToClipboard(code);
     },
   },
 };

diff --git a/frontend/models/Text2Text.js b/frontend/models/Text2Text.js
@@ -56,6 +56,10 @@ class Text2TextRecord extends BaseRecord {
     }
     return undefined;
   }
+
+  get clipboardText() {
+    return this.text;
+  }
 }
 
 class Text2TextSearchQuery extends BaseSearchQuery {

diff --git a/frontend/models/TextClassification.js b/frontend/models/TextClassification.js
@@ -66,6 +66,21 @@ class TextClassificationRecord extends BaseRecord {
     }
     return undefined;
   }
+
+  get clipboardText() {
+    if (Object.keys(this.inputs).length > 1) {
+      return Object.keys(this.inputs)
+        .map(
+          (key, index) =>
+            `${key.toUpperCase()}\n${this.inputs[key]}${
+              Object.keys(this.inputs).length === index + 1 ? "" : "\n\n"
+            }`
+        )
+        .join("");
+    } else {
+      return Object.values(this.inputs);
+    }
+  }
 }
 
 class TextClassificationSearchQuery extends BaseSearchQuery {

diff --git a/frontend/models/TokenClassification.js b/frontend/models/TokenClassification.js
@@ -48,6 +48,10 @@ class TokenClassificationRecord extends BaseRecord {
   recordTitle() {
     return this.text;
   }
+
+  get clipboardText() {
+    return this.text;
+  }
 }
 
 class TokenClassificationSearchQuery extends BaseSearchQuery {

diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -54,6 +54,7 @@ export default {
     { src: "~/plugins/virtualScroller.js" },
     { src: "~/plugins/toast.js" },
     { src: "~/plugins/highlight-search.js" },
+    { src: "~/plugins/copy-to-clipboard.js" },
     { src: "~/plugins/filters.js" },
     { src: "~/plugins/variables.js" },
   ],

diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
@@ -271,13 +271,7 @@ export default {
       this.copy(route);
     },
     copy(id) {
-      const myTemporaryInputElement = document.createElement("input");
-      myTemporaryInputElement.type = "text";
-      myTemporaryInputElement.className = "hidden-input";
-      myTemporaryInputElement.value = id;
-      document.body.appendChild(myTemporaryInputElement);
-      myTemporaryInputElement.select();
-      document.execCommand("Copy");
+      this.$copyToClipboard(id);
     },
     showConfirmDatasetDeletion(dataset) {
       this.datasetCompositeId = dataset.id;

diff --git a/frontend/plugins/copy-to-clipboard.js b/frontend/plugins/copy-to-clipboard.js
@@ -0,0 +1,32 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default (context, inject) => {
+  const copyToClipboard = function (text) {
+    if (document.querySelector(".hidden-input")) {
+      document.querySelector(".hidden-input").remove();
+    }
+    const myTemporaryInputElement = document.createElement("textarea");
+    myTemporaryInputElement.className = "hidden-input";
+    myTemporaryInputElement.value = text;
+    document.body.appendChild(myTemporaryInputElement);
+    myTemporaryInputElement.select();
+    document.execCommand("Copy");
+  };
+
+  inject("copyToClipboard", copyToClipboard);
+};
diff --git a/frontend/specs/components/commons/results/RecordExtraAtions.spec.js b/frontend/specs/components/commons/results/RecordExtraAtions.spec.js
@@ -0,0 +1,34 @@
+import { mount } from "@vue/test-utils";
+import RecordExtraActions from "@/components/commons/results/RecordExtraActions";
+
+function mountRecordExtraActions() {
+  return mount(RecordExtraActions, {
+    idState() {
+      return {
+        open: true,
+      };
+    },
+    propsData: {
+      record: {
+        metadata: {
+          Metadata: "metadata example",
+        },
+        status: "Validated",
+      },
+      allowChangeStatus: true,
+      dataset: {
+        name: "Dataset1",
+      },
+    },
+  });
+}
+
+describe("RecordExtraActions", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountRecordExtraActions();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap b/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RecordExtraActions renders properly 1`] = `
+<div class="record__extra-actions"><a href="#" class="extra-actions__button"><svg version="1.1" viewBox="0 0 41 40" class="svg-icon svg-fill" style="width: 20px; height: 20px;">
+      <path fill="#4A4A4A" stroke="none" pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 5c1.114 0 1.956.297 2.527.89.57.593.855 1.457.855 2.59 0 1.095-.292 1.942-.875 2.542-.584.6-1.42.9-2.507.9-1.048 0-1.873-.304-2.477-.91-.604-.607-.905-1.45-.905-2.531 0-1.108.295-1.965.885-2.571.59-.607 1.423-.91 2.497-.91zm0 11.53c1.114 0 1.956.296 2.527.89.57.592.855 1.463.855 2.61 0 1.094-.292 1.941-.875 2.54-.584.6-1.42.9-2.507.9-1.048 0-1.873-.303-2.477-.909-.604-.607-.905-1.45-.905-2.531 0-1.121.295-1.985.885-2.591.59-.606 1.423-.91 2.497-.91zm0 11.548c1.114 0 1.956.297 2.527.89.57.594.855 1.457.855 2.591 0 1.094-.292 1.941-.875 2.541-.584.6-1.42.9-2.507.9-1.048 0-1.873-.303-2.477-.91-.604-.606-.905-1.45-.905-2.531 0-1.108.295-1.964.885-2.57.59-.607 1.423-.91 2.497-.91z" _fill="#000"></path>
+    </svg></a>
+  <div class="extra-actions__content">
+    <div><span>View metadata</span></div>
+    <re-action-tooltip tooltip="Copied">
+      <div><span>Copy text</span></div>
+    </re-action-tooltip>
+    <div><span>Discard record</span></div>
+  </div>
+</div>
+`;