From 878689b3f7aca4f972eccbec7b076fb572d6c4cc Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sat, 6 Jan 2024 12:03:06 +0100
Subject: [PATCH] fix svg button state

---
 src/components/IconButton.vue                    | 16 +++++++++-------
 .../Workspace/Tabs/Tab/DataView/Chart/index.vue  |  1 +
 .../Main/Workspace/Tabs/Tab/DataView/index.vue   |  1 -
 .../Workspace/Tabs/Tab/DataView/DataView.spec.js |  4 ++++
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 648f436..61925e7 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <div
-    :class="['icon-btn', { active }, { disabled }]"
+  <button
+    :class="['icon-btn', { active }]"
+    :disabled="disabled"
     @click="onClick"
     @mouseenter="showTooltip($event, tooltipPosition)"
     @mouseleave="hideTooltip"
@@ -12,7 +13,7 @@
     <span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
       {{ tooltip }}
     </span>
-  </div>
+  </button>
 </template>
 
 <script>
@@ -38,11 +39,12 @@ export default {
   box-sizing: border-box;
   width: 26px;
   height: 26px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+  background-color: transparent;
+  border: none;
 }
 .icon-btn:hover {
   border: 1px solid var(--color-border);
@@ -56,12 +58,12 @@ export default {
   fill: var(--color-accent);
 }
 
-.disabled.icon-btn  .icon >>> path,
-.disabled.icon-btn  .icon >>> circle {
+.icon-btn:disabled  .icon >>> path,
+.icon-btn:disabled  .icon >>> circle {
   fill: var(--color-border);
 }
 
-.disabled.icon-btn {
+.icon-btn:disabled {
   cursor: default;
   pointer-events: none;
 }
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
index a3ada61..491edeb 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -77,6 +77,7 @@ export default {
       },
       { deep: true }
     )
+    this.$emit('update:importToSvgEnabled', true)
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
index 9bd7247..6774849 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
@@ -41,7 +41,6 @@
       >
         <png-icon />
       </icon-button>
-
       <icon-button
         :disabled="!importToSvgEnabled"
         tooltip="Save as SVG"
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
index 126e3ae..f3128fc 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
@@ -54,6 +54,10 @@ describe('DataView.vue', () => {
     const pivot = wrapper.findComponent({ name: 'pivot' }).vm
     sinon.spy(pivot, 'saveAsSvg')
 
+    // Switch to Custom Chart renderer
+    pivot.pivotOptions.rendererName = 'Custom chart'
+    await pivot.$nextTick()
+
     // Export to svg
     await svgBtn.trigger('click')
     expect(pivot.saveAsSvg.calledOnce).to.equal(true)