feat: replace reset button with cancel button in the edit snippets panel

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/driver.js

@@ -116,19 +116,24 @@ define(function (require, exports, module) {
     }
 
     /**
-     * This function handles the reset button click for editing a snippet
-     * It restores the original snippet data in the edit form
+     * This function is responsible to handle the cancel button click in the edit-snippet panel
+     * this resets the format to the last saved values and then moves back to the snippets-list panel
      */
-    function handleResetBtnClick() {
+    function handleCancelEditBtnClick() {
         const $editView = $("#custom-snippets-edit");
         const originalSnippet = $editView.data("originalSnippet");
 
         if (originalSnippet) {
-            // restore original data in the form
+            // restore original data in the form to reset any changes
             Helper.populateEditForm(originalSnippet);
-            // update save button state
-            Helper.toggleEditSaveButtonDisability();
         }
+
+        $editView.removeData("originalSnippet");
+        $editView.removeData("snippetIndex");
+
+        // navigate back to snippets list
+        UIHelper.showSnippetListMenu();
+        SnippetsList.showSnippetsList();
     }
 
     /**
@@ -183,5 +188,5 @@ define(function (require, exports, module) {
     exports.getWordBeforeCursor = getWordBeforeCursor;
     exports.handleSaveBtnClick = handleSaveBtnClick;
     exports.handleEditSaveBtnClick = handleEditSaveBtnClick;
-    exports.handleResetBtnClick = handleResetBtnClick;
+    exports.handleCancelEditBtnClick = handleCancelEditBtnClick;
 });

src/extensionsIntegrated/CustomSnippets/helper.js

@@ -479,38 +479,6 @@ define(function (require, exports, module) {
         const hasAbbr = $abbrInput.val().trim().length > 0;
         const hasTemplate = $templateInput.val().trim().length > 0;
         $saveBtn.prop("disabled", !(hasAbbr && hasTemplate));
-
-        // Also toggle the reset button state
-        toggleResetButtonDisability();
-    }
-
-    /**
-     * This function checks if the snippet is in its default state and
-     * disables the reset button if it is
-     */
-    function toggleResetButtonDisability() {
-        const $editView = $("#custom-snippets-edit");
-        const originalSnippet = $editView.data("originalSnippet");
-        const $resetBtn = $("#reset-snippet-btn");
-
-        if (!originalSnippet) {
-            // If there's no original snippet data, disable the reset button
-            $resetBtn.prop("disabled", true);
-            return;
-        }
-
-        // Get current values from the form
-        const currentData = getEditSnippetData();
-
-        // Check if current values match original values
-        const isDefault =
-            currentData.abbreviation === originalSnippet.abbreviation &&
-            currentData.description === (originalSnippet.description || "") &&
-            currentData.templateText === originalSnippet.templateText &&
-            currentData.fileExtension === originalSnippet.fileExtension;
-
-        // Disable reset button if in default state
-        $resetBtn.prop("disabled", isDefault);
     }
 
     /**
@@ -884,7 +852,6 @@ define(function (require, exports, module) {
     exports.populateEditForm = populateEditForm;
     exports.getEditSnippetData = getEditSnippetData;
     exports.toggleEditSaveButtonDisability = toggleEditSaveButtonDisability;
-    exports.toggleResetButtonDisability = toggleResetButtonDisability;
     exports.clearEditInputFields = clearEditInputFields;
     exports.handleTextareaTabKey = handleTextareaTabKey;
     exports.validateAbbrInput = validateAbbrInput;

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

@@ -163,7 +163,7 @@
             </div>
 
             <div id="edit-snippet-buttons">
-                <button id="reset-snippet-btn" class="dialog-button btn">Reset</button>
+                <button id="cancel-edit-snippet-btn" class="dialog-button btn">Cancel</button>
                 <button id="save-edit-snippet-btn" class="dialog-button btn primary" disabled>Save</button>
             </div>
         </div>

src/extensionsIntegrated/CustomSnippets/main.js

@@ -141,7 +141,7 @@ define(function (require, exports, module) {
         const $editTemplateInput = $("#edit-template-text-box");
         const $editFileExtnInput = $("#edit-file-extn-box");
         const $saveEditSnippetBtn = $("#save-edit-snippet-btn");
-        const $resetSnippetBtn = $("#reset-snippet-btn");
+        const $cancelEditSnippetBtn = $("#cancel-edit-snippet-btn");
 
         $addSnippetBtn.on("click", function () {
             UIHelper.showAddSnippetMenu();
@@ -237,8 +237,8 @@ define(function (require, exports, module) {
             Driver.handleEditSaveBtnClick();
         });
 
-        $resetSnippetBtn.on("click", function () {
-            Driver.handleResetBtnClick();
+        $cancelEditSnippetBtn.on("click", function () {
+            Driver.handleCancelEditBtnClick();
         });
 
         // filter input event handler