fix: trim whitespace for secrete name and file paths in UI

[srikanth-s2003]

Summary

Trim leading and trailing whitespace for secret names and secret file paths in the front-end editor so accidental spaces no longer end up in secret names or paths. Also made the Formatter.duration implementation deterministic (arithmetic-based) to avoid timezone-dependent formatting issues that caused tests to fail.

This is a UI-side improvement that reduces the chance of invisible whitespace causing CI/CD failures. The canonical fix should also trim on the server (secrethub) to cover API/CLI — see "Next steps" below.

What I changed

• Trim env var name inputs on change/blur/input and validate using the trimmed value.
  • File: front/assets/js/manage_secret.js
  • Behavior: input is trimmed and any validation runs against the trimmed value; validation errors appear as before.
• Trim secret file path inputs on change/blur/input.
  • File: front/assets/js/manage_secret.js
• Fix destructuring bug when cloning env var input so validation handlers are attached to newly-added inputs.
  • File: front/assets/js/manage_secret.js
• Avoid leaking a global regex by declaring valid_name_regex with const.
  • File: front/assets/js/manage_secret.js
• Replace timezone-dependent moment formatting in Formatter.duration with arithmetic-based formatting so tests are deterministic.
  • File: front/assets/js/insights/util/formatter.ts

Motivation / context

Issue: Automatic Whitespace Trimming for Secret Names (#502)

Users can accidentally add leading/trailing whitespace to secret names; because that whitespace is invisible in many UIs, it can silently break CI/CD usage. Trimming in the UI avoids many accidental cases; however, server-side trimming is necessary for a complete fix across UI/CLI/API.

How I tested

• Front-end linter: ran in front/assets (ESLint warnings only; no errors).
• Front-end test suite: ran npm ci && npm test in front/assets.
  • Result: All front-end tests pass (273 passing).
  • The Formatter.duration test had previously failed due to timezone-dependent logic; the new arithmetic-based implementation fixes that.
• Manual reasoning: trimmed values are written back into the input element on blur/change so what the user sees is the normalized name/path.

How to review

• Look at front/assets/js/manage_secret.js for trimming/validation logic.
  • Pay attention to event handlers attached to existing and cloned inputs.
• Look at front/assets/js/insights/util/formatter.ts for the deterministic duration implementation.
• Run the test suite locally:

  cd front/assets
  npm ci --no-audit --no-fund
  npm run lint
  npm test

✅ Checklist

• I have tested this change
• This change requires documentation update

[lucianoliberti]

@srikanth-s2003 can you please sign your commit? Thanks

[hamir-suspect]

Hey @srikanth-s2003 , I like your change for the time formatting, can you split this into two PRs please.

The implemented trimming does not work for file paths, you can do (partial) manual integration test like this:

make console.bash # or make dev.server 
# for some environments/setups automatic js reloading does not work so you'll need to run :os.run('cd assets && node build.js') to reload the js
 # then you'll have a loacl dev server on localhost:4000
 # create a secret
# in iex
> Support.Stubs.DB.all(:secrets)
# You'll see the secret that was saved 

also in the original ticket the proposed ideal solution is to do this in the secrethub service so the API requests would have the same behaviour.

Why it is not working:
The value we pass into attachFilePathTrimmer is the upload placeholder div, not the actual text input id (files_*_path). Because the delegated handler is bound to a div, it never sees change/input events and $(this).val() is always undefined, so no trimming happens for existing or newly added file rows.

I will propose changes to the PR that would fix it.

[hamir-suspect]

I'll add inline suggestions for the improvements we discussed

[hamir-suspect]

Suggestion: Remove blur event - it's redundant since we're already handling change and input:

Suggested change

	$("body").on("change blur input", "#" + fileInputId, function() {
	$("body").on("change input", "#" + fileInputId, function() {

[hamir-suspect]

Suggestion: Remove blur event here too for consistency:

Suggested change

	$("body").on("change textInput input blur", "#" + selector, function () {
	$("body").on("change textInput input", "#" + selector, function () {

[hamir-suspect]

Suggestion: Pass filePathInput (the actual input field ID) instead of fileInput (the container):

Suggested change

	// Attach trimming handler for the file path input
	secretEditor.attachFilePathTrimmer(filePathInput);

[hamir-suspect]

Suggestion: Pass filePathInput instead of fileInput:

Suggested change

	// Attach trimming handler for newly cloned file path input
	secretEditor.attachFilePathTrimmer(filePathInput);

[hamir-suspect]

Additional suggestions for variable naming

The inline suggestions above reference filePathInput and fileInputContainer, but to use these you'll need to update the fileElement() function and the destructuring:

1. Update the return statement in fileElement() (around line 114):

return [element, secretUploadLinkId, secretUploadId, fileContentId, fileDivId, secretInputId, fileDeleteLink, fileMd5Id, fileMd5PresentId, fileImageId, filePathId];

2. Update destructuring in showFiles() (line 137):

let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId, filePathInput] =
  secretEditor.fileElement(file, index);

3. Update destructuring in cloneFile() (line 178):

let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId, filePathInput] =
  secretEditor.fileElement(file, fileIndex);

Then use fileInputContainer for operations that need the container ID and filePathInput for the trimmer (as shown in the inline suggestions).

[hamir-suspect]

LMK if you have trouble testing this or if you need further some further help.