From e9aed7930ffa9db3fac7c136bb6d273b770c7317 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 24 Feb 2025 13:40:16 -0300
Subject: [PATCH] [UXE-6359] feat: add export to csv button to waf rules tuning
 page (#2194)

* feat: add export to csv button to waf rules tuning page

* fix: change responsive layout
---
 .../with-selection-behavior.vue               |  2 +-
 src/views/WafRules/ListWafRulesTuning.vue     | 34 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/templates/list-table-block/with-selection-behavior.vue b/src/templates/list-table-block/with-selection-behavior.vue
index dedb97f22..78fedc7ec 100644
--- a/src/templates/list-table-block/with-selection-behavior.vue
+++ b/src/templates/list-table-block/with-selection-behavior.vue
@@ -498,7 +498,7 @@
     }
   }
 
-  defineExpose({ reload, data })
+  defineExpose({ reload, data, handleExportTableDataToCSV })
 
   const extractFieldValue = (rowData, field) => {
     return rowData[field]
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 51c72c9b6..d3b09be76 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -53,12 +53,30 @@
         />
       </div>
     </div>
-    <advancedFilter
-      v-model:externalFilter="selectedFilter"
-      v-model:filterAdvanced="selectedFilterAdvanced"
-      :fieldsInFilter="listFields"
-      @applyFilter="filterSearch"
-    />
+    <div class="flex flex-col md:flex-row md:items-center gap-2">
+      <advancedFilter
+        v-model:externalFilter="selectedFilter"
+        v-model:filterAdvanced="selectedFilterAdvanced"
+        :fieldsInFilter="listFields"
+        @applyFilter="filterSearch"
+      />
+      <PrimeButton
+        class="md:hidden"
+        outlined
+        size="small"
+        label="Export to CSV"
+        icon="pi pi-download"
+        @click="downloadCSV"
+      />
+      <PrimeButton
+        class="hidden md:flex"
+        outlined
+        size="small"
+        icon="pi pi-download"
+        v-tooltip.bottom="{ value: 'Export to CSV', showDelay: 200 }"
+        @click="downloadCSV"
+      />
+    </div>
   </div>
   <ListTableBlock
     v-show="showListTable"
@@ -347,6 +365,10 @@
     filterTuning()
   }
 
+  const downloadCSV = () => {
+    listServiceWafTunningRef.value?.handleExportTableDataToCSV()
+  }
+
   const showToast = (summary, severity) => {
     return toast.add({
       severity,