fix: trim whitespace for secrete name and file paths in UI; deterministic duration formatting

Author: srikanth-s2003

front/assets/js/insights/util/formatter.ts

@@ -32,17 +32,33 @@ export const Formatter = {
       return `N/A`;
     }
 
-    if (secs >= 3600 * 24) {
-      const fullDays = Math.floor(secs / (3600 * 24));
-      return moment.unix(secs).format(`${fullDays}[d] H[h] m[m] s[s]`);
-    } else if (secs >= 3600) {
-      const duration = moment.duration(secs, `seconds`);
-      return `${duration.hours()}h ${duration.minutes()}m ${duration.seconds()}s`;
-    } else if (secs >= 60) {
-      return moment.unix(secs).format(`m[m] s[s]`);
-    } else {
-      return moment.unix(secs).format(`s[s]`);
+    // Use arithmetic-based formatting (days/hours/minutes/seconds) to avoid
+    // timezone-dependent behavior of `moment.unix(...).format(...)`.
+    const secondsInDay = 24 * 3600;
+    const secondsInHour = 3600;
+    const secondsInMinute = 60;
+
+    let remaining = Math.floor(secs);
+    const days = Math.floor(remaining / secondsInDay);
+    remaining = remaining % secondsInDay;
+    const hours = Math.floor(remaining / secondsInHour);
+    remaining = remaining % secondsInHour;
+    const minutes = Math.floor(remaining / secondsInMinute);
+    const seconds = remaining % secondsInMinute;
+
+    if (days > 0) {
+      return `${days}d ${hours}h ${minutes}m ${seconds}s`;
     }
+
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${seconds}s`;
+    }
+
+    if (minutes > 0) {
+      return `${minutes}m ${seconds}s`;
+    }
+
+    return `${seconds}s`;
   },
 
   percentage: (percentage: number): string => {

front/assets/js/manage_secret.js

@@ -142,6 +142,8 @@ export var ManageSecret = {
       secretEditor.browseFilesOnClick(fileUploadLink, fileUpload);
       secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, fileMd5PresentId, fileImageId);
       secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInput, fileContent, md5Id);
+      // Attach trimming handler for the file path input
+      secretEditor.attachFilePathTrimmer(fileInput);
     });
   },
 
@@ -152,12 +154,16 @@ export var ManageSecret = {
 
       let envVarIndex = secretEditor.envVars.length - 1;
       let envVar = secretEditor.envVars[envVarIndex];
-      let [element, envVarDiv, envVarDeleteLink, envVarInput, md5Id] =
+      // envVarElement returns [element, envVarNameId, envVarDivId, envVarDeleteLink, envVarValueId, envVarMd5Id]
+      let [element, envVarNameId, envVarDiv, envVarDeleteLink, envVarInput, md5Id] =
         secretEditor.envVarElement(envVar, envVarIndex);
 
       document.getElementById("env-vars-input").insertAdjacentHTML("beforeend", element);
       secretEditor.activateEnvVarDeleteLink(envVarDeleteLink, envVarDiv, envVarInput, md5Id);
 
+      // ensure validation/trim is attached for the newly created input
+      secretEditor.activateEnvVarValidation(envVarNameId);
+
       return false;
     });
   },
@@ -177,23 +183,45 @@ export var ManageSecret = {
       secretEditor.browseFilesOnClick(fileUploadLink, fileUpload);
       secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, fileMd5PresentId, fileImageId);
       secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInput, fileContent, md5Id);
+      // Attach trimming handler for newly cloned file path input
+      secretEditor.attachFilePathTrimmer(fileInput);
 
       return false;
     });
   },
 
+  attachFilePathTrimmer: function(fileInputId) {
+    // fileInputId is the id of the visible text input for the file path (e.g. files_0_path)
+    $("body").on("change blur input", "#" + fileInputId, function() {
+      let raw = $(this).val();
+      let trimmed = raw !== undefined && raw !== null ? raw.trim() : raw;
+      if (raw !== trimmed) {
+        $(this).val(trimmed);
+      }
+    });
+  },
+
   activateEnvVarValidation: function (selector) {
     let secretEditor = this;
-    $("body").on("change textInput input", "#" + selector, function () {
-      valid_name_regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
-      let name = $(this).val();
+    // Validate on input and change, but always validate the trimmed value.
+    $("body").on("change textInput input blur", "#" + selector, function () {
+  const valid_name_regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+      // Trim whitespace from the input value (leading/trailing) and update the field on blur/change
+      let raw = $(this).val();
+      let name = raw !== undefined && raw !== null ? raw.trim() : raw;
+
       if (name.match(valid_name_regex)) {
         $(this).next(".error-message").remove(); // removes existing error message
       }
       else {
         $(this).next(".error-message").remove(); // removes existing error message
         $(this).after('<p class="f6 fw5 mt1 mb0 red error-message">Invalid variable name!</p>');
       }
+
+      // If the visible value differs from trimmed, update it on blur/change
+      if (raw !== name) {
+        $(this).val(name);
+      }
     });
   },