feat: made description and file extension input as optional

Author: devvaannsh

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

@@ -80,11 +80,11 @@
 
                 <div id="desc-box-wrapper">
                     <label for="desc-box"
-                           title="Brief description of what this snippet does (e.g., 'console log shortcut', 'function template')."
+                           title="Brief description of what this snippet does. Leave empty if no description needed."
                            data-placement="top">
-                        Description:
+                        Description (optional):
                     </label>
-                    <input id="desc-box" type="text" placeholder="console log shortcut" autocomplete="off" />
+                    <input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
                 </div>
             </div>
 
@@ -99,11 +99,11 @@
 
             <div id="file-extn-box-wrapper">
                 <label for="file-extn-box"
-                       title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css') or 'all' for all files."
+                       title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
                        data-placement="top">
-                    File Extension:
+                    File Extension (optional):
                 </label>
-                <input id="file-extn-box" type="text" placeholder=".js, .html or all" autocomplete="off" />
+                <input id="file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
             </div>
 
             <div id="save-custom-snippet-btn">

src/extensionsIntegrated/CustomSnippets/main.js

@@ -130,7 +130,6 @@ define(function (require, exports, module) {
         });
 
         $abbrInput.on("input", Helper.toggleSaveButtonDisability);
-        $descInput.on("input", Helper.toggleSaveButtonDisability);
         $templateInput.on("input", Helper.toggleSaveButtonDisability);
 
         $fileExtnInput.on("input", function () {

src/extensionsIntegrated/CustomSnippets/src/helper.js

@@ -17,9 +17,9 @@ define(function (require, exports, module) {
 
         return {
             abbreviation: abbreviation,
-            description: description,
+            description: description || "", // allow empty description
             templateText: templateText,
-            fileExtension: fileExtension
+            fileExtension: fileExtension || "all" // default to "all" if empty
         };
     }
 
@@ -30,20 +30,17 @@ define(function (require, exports, module) {
      * this is called inside the '_registerHandlers' function in the main.js file
      */
     function toggleSaveButtonDisability() {
-        // these are the required fields
+        // abbreviation and template text are required fields
+        // they both should have some value only then save button will be enabled
         const $abbrInput = $("#abbr-box");
-        const $descInput = $("#desc-box");
         const $templateInput = $("#template-text-box");
-        const $fileExtnInput = $("#file-extn-box");
 
         const $saveBtn = $("#save-custom-snippet-btn").find("button");
 
         // make sure that the required fields has some value
         const hasAbbr = $abbrInput.val().trim().length > 0;
-        const hasDesc = $descInput.val().trim().length > 0;
         const hasTemplate = $templateInput.val().trim().length > 0;
-        const hasFileExtn = $fileExtnInput.val().trim().length > 0;
-        $saveBtn.prop("disabled", !(hasAbbr && hasDesc && hasTemplate && hasFileExtn));
+        $saveBtn.prop("disabled", !(hasAbbr && hasTemplate));
     }
 
     /**

src/extensionsIntegrated/CustomSnippets/src/snippetsList.js

@@ -1,4 +1,3 @@
-
 /*
  * This file handles the display and management of the snippets list that is shown in the UI
  * Note: when there are no snippets present, a message like no snippets are added yet is shown. refer to the html file
@@ -34,9 +33,18 @@ define(function (require, exports, module) {
             .attr("title", `Template: ${snippetItem.templateText}`);
 
         const $snippetDescription = $("<div>")
-            .text(snippetItem.description || "No description")
+            .text(
+                snippetItem.description && snippetItem.description.trim() !== ""
+                    ? snippetItem.description
+                    : "No description"
+            )
             .attr("id", "snippet-description")
-            .attr("title", `Description: ${snippetItem.description}`);
+            .attr(
+                "title",
+                snippetItem.description && snippetItem.description.trim() !== ""
+                    ? `Description: ${snippetItem.description}`
+                    : "No description provided"
+            );
 
         const $snippetFiles = $("<div>")
             .text(snippetItem.fileExtension || "all")
@@ -90,7 +98,7 @@ define(function (require, exports, module) {
         UIHelper.showSnippetsListHeader(); // show header when there are snippets to display
 
         // add each filtered snippet to the list
-        filteredSnippets.forEach(function(snippetItem) {
+        filteredSnippets.forEach(function (snippetItem) {
             _createSnippetItem(snippetItem);
         });
     }