feat: add cancel button in add snippet panel

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html

@@ -111,8 +111,9 @@
                 </div>
             </div>
 
-            <div id="save-custom-snippet-btn">
-                <button class="dialog-button btn primary" disabled>Save</button>
+            <div id="add-custom-snippet-panel-buttons">
+                <button id="cancel-custom-snippet-btn" class="dialog-button btn">Cancel</button>
+                <button id="save-custom-snippet-btn" class="dialog-button btn primary" disabled>Save</button>
             </div>
         </div>
 

src/extensionsIntegrated/CustomSnippets/main.js

@@ -122,6 +122,7 @@ define(function (require, exports, module) {
     function _registerHandlers() {
         const $closePanelBtn = $("#close-custom-snippets-panel-btn");
         const $saveCustomSnippetBtn = $("#save-custom-snippet-btn");
+        const $cancelCustomSnippetBtn = $("#cancel-custom-snippet-btn");
         const $abbrInput = $("#abbr-box");
         const $descInput = $("#desc-box");
         const $templateInput = $("#template-text-box");
@@ -159,6 +160,11 @@ define(function (require, exports, module) {
             Driver.handleSaveBtnClick();
         });
 
+        $cancelCustomSnippetBtn.on("click", function () {
+            UIHelper.showSnippetListMenu();
+            SnippetsList.showSnippetsList();
+        });
+
         $abbrInput.on("input", Helper.toggleSaveButtonDisability);
         $templateInput.on("input", Helper.toggleSaveButtonDisability);
 

src/styles/Extn-CustomSnippets.less

@@ -534,11 +534,14 @@
         }
     }
 
-    #save-custom-snippet-btn {
+    #add-custom-snippet-panel-buttons {
         margin-top: 8px;
         padding-top: 8px;
         border-top: 1px solid @bc-panel-separator;
         text-align: right;
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
 
         .dark & {
             border-top: 1px solid @dark-bc-panel-separator;