From b17040d3ef98d5e87b8f55ec8fc866f7a78abd81 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 27 Dec 2023 22:22:49 +0100
Subject: [PATCH] #115 copy cell value

---
 src/lib/utils/clipboardIo.js                  |  6 ++-
 .../Tabs/Tab/RunResult/ValueViewer.vue        | 43 +++++++++++++++++--
 .../Workspace/Tabs/Tab/RunResult/index.vue    |  2 +-
 tests/lib/utils/clipboardIo.spec.js           |  4 +-
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/lib/utils/clipboardIo.js b/src/lib/utils/clipboardIo.js
index 9806a32..0adc750 100644
--- a/src/lib/utils/clipboardIo.js
+++ b/src/lib/utils/clipboardIo.js
@@ -2,9 +2,11 @@ import Lib from 'plotly.js/src/lib'
 import dataUrlToBlob from 'dataurl-to-blob'
 
 export default {
-  async copyCsv (str) {
+  async copyText (str, notifyMessage) {
     await navigator.clipboard.writeText(str)
-    Lib.notifier('CSV copied to clipboard successfully', 'long')
+    if (notifyMessage) {
+      Lib.notifier(notifyMessage, 'long')
+    }
   },
 
   async copyImage (source) {
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
index aee6613..56d9d6a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
@@ -10,8 +10,16 @@
       >
         {{ format.text }}
       </button>
+
+      <button
+        type="button"
+        @click="copyToClipboard"
+      >
+        Copy
+      </button>
     </div>
-    <codemirror
+    <div class="value-body">
+      <codemirror
         v-if="currentFormat === 'json'"
         :value="formattedJson"
         :options="cmOptions"
@@ -19,6 +27,7 @@
       <div v-else class="text-value">
         {{ cellValue }}
       </div>
+    </div>
   </div>
 </template>
 
@@ -31,6 +40,7 @@ import 'codemirror/addon/fold/foldgutter.js'
 import 'codemirror/addon/fold/foldgutter.css'
 import 'codemirror/addon/fold/brace-fold.js'
 import 'codemirror/theme/neo.css'
+import cIo from '@/lib/utils/clipboardIo'
 
 export default {
   components: {
@@ -43,7 +53,7 @@ export default {
     return {
       formats: [
         { text: 'JSON', value: 'json' },
-        { text: 'TEXT', value: 'text' }
+        { text: 'Text', value: 'text' }
       ],
       currentFormat: 'text',
       cmOptions: {
@@ -81,6 +91,13 @@ export default {
       } catch {
         this.formattedJson = ''
       }
+    },
+    copyToClipboard () {
+      cIo.copyText(this.currentFormat === 'json'
+        ? this.formattedJson
+        : this.cellValue,
+      'The value is copied to clipboard.'
+      )
     }
   }
 }
@@ -89,13 +106,20 @@ export default {
 <style scoped>
 .value-viewer {
   background-color: var(--color-white);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .value-viewer-toolbar {
   display: flex;
   justify-content: end;
 }
+.value-body {
+  flex-grow: 1;
+  overflow: auto;
+}
 .text-value {
-  padding: 2px 8px;
+  padding: 8px 8px;
   color: var(--color-text-base);
 }
 
@@ -116,4 +140,17 @@ export default {
 .value-viewer-toolbar button[aria-selected="true"] {
   color: var(--color-accent);
 }
+
+>>> .vue-codemirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror-cursor {
+  width: 1px;
+  background: var(--color-text-base);
+}
 </style>
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
index 8b7a918..5bd923a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
@@ -256,7 +256,7 @@ export default {
     },
 
     copyToClipboard () {
-      cIo.copyCsv(this.dataToCopy)
+      cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
       this.$modal.hide('prepareCSVCopy')
     },
 
diff --git a/tests/lib/utils/clipboardIo.spec.js b/tests/lib/utils/clipboardIo.spec.js
index 3a61d57..5f2cc7d 100644
--- a/tests/lib/utils/clipboardIo.spec.js
+++ b/tests/lib/utils/clipboardIo.spec.js
@@ -7,9 +7,9 @@ describe('clipboardIo.js', async () => {
     sinon.restore()
   })
 
-  it('copyCsv', async () => {
+  it('copyText', async () => {
     sinon.stub(navigator.clipboard, 'writeText').resolves(true)
-    await cIo.copyCsv('id\tname\r\n1\t2')
+    await cIo.copyText('id\tname\r\n1\t2')
     expect(navigator.clipboard.writeText.calledOnceWith('id\tname\r\n1\t2'))
   })