From 14ac8e4306f4e1b37f94ce7aa3f6ef390ee15423 Mon Sep 17 00:00:00 2001
From: Lokesh Goel <lokesh.goel@couchbase.com>
Date: Fri, 13 Oct 2023 14:50:29 +0530
Subject: [PATCH] added accordion for advanced settings

---
 src/webViews/tools/dataExport.webview.ts | 44 ++++++++++++++++++------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/webViews/tools/dataExport.webview.ts b/src/webViews/tools/dataExport.webview.ts
index 43934efb..ad49facc 100644
--- a/src/webViews/tools/dataExport.webview.ts
+++ b/src/webViews/tools/dataExport.webview.ts
@@ -106,8 +106,6 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
                 background-color: #ccc;
             }
 
-            
-
             .folder-container {
                 display: flex; 
                 align-items: start;
@@ -165,7 +163,7 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
                 height: 0;
                 border-left: 5px solid transparent;
                 border-right: 5px solid transparent;
-                border-top: 5px solid #333; /* Arrow icon */
+                border-top: 5px solid #333;
             }
             
             .collapsible-content {
@@ -180,6 +178,27 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
                 background: #bb1117;
             }
             
+            .advanced-header {
+                cursor: pointer;
+                font-weight: bold;
+                padding: 5px;
+                display: flex;
+                align-items: center;
+            }
+            
+            .advanced-settings {
+                display: none;
+                padding: 10px;
+            }
+            .advanced-settings.active {
+                display: block;
+            }
+            
+            .arrow-icon {
+                transition: transform 0.2s;
+                margin-right:5px;
+            }
+            
           </style>
         </head>
 
@@ -232,14 +251,14 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
                 <br>
 
                 <div class="advanced-container">
-                    <div class="advanced-header">
-                       Advanced Settings
+                    <div class="advanced-header" id="advanced-header">
+                    <span class="arrow-icon">▶️</span>
+                        Advanced Settings
                     </div>
-                    <div class="advanced-settings">
+                    <div class="advanced-settings" id="advanced-settings">
                         <label for="threads">Threads</label>
                         <input type="number" name="threads" id="threads" value="4">
                         <br>
-
                         <div class="verboseLogContainer">
                             <label for="verboseLog" id="verboseLogLabel">Verbose Log:</label>
                             <input type="checkbox" name="verboseLog" id="verboseLog">
@@ -355,10 +374,13 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
             }
         });
 
-        function toggleCollapsible(header) {
-            const content = header.nextElementSibling;
-            content.style.display = content.style.display === 'block' ? 'none' : 'block';
-        }
+        $(document).ready(function () {
+            $("#advanced-header").click(function () {
+                $("#advanced-settings").toggleClass("active");
+                const arrowIcon = $(".arrow-icon");
+                arrowIcon.text(arrowIcon.text() === "▶️" ? "▼" : "▶️");
+            });
+        });
 
         function submitForm(event) {
             event.preventDefault(); // Prevent the form from submitting in the traditional way