feat; Fix regression in password masking

Author: PintoGideon

src/components/AddNode/GuidedConfig.tsx

@@ -39,18 +39,13 @@ import {
 } from "../../api/common";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { fetchParamsAndComputeEnv } from "../../store/plugin/pluginSlice";
-import { Alert } from "../Antd";
 import { ClipboardCopyFixed, ErrorAlert } from "../Common";
 import ComputeEnvironments from "./ComputeEnvironment";
 import RequiredParam from "./RequiredParam";
 import SimpleDropdown from "./SimpleDropdown";
 import { AddNodeContext } from "./context";
 import { type InputIndex, Types } from "./types";
-import {
-  handleGetTokens,
-  maskPasswordValue,
-  unpackParametersIntoString,
-} from "./utils";
+import { handleGetTokens, unpackParametersIntoString } from "./utils";
 
 const advancedConfigList = [
   {
@@ -389,9 +384,10 @@ const CheckboxComponent = () => {
               ? customQuote(value)
               : value;
           const [id, flag] = paramsRequiredFetched[param_name];
-          const maskedValue = maskPasswordValue(flag, quotedValue);
+          // Store the original value, not the masked one
+          // Masking is only for display purposes
           requiredInput[id] = {
-            value: maskedValue,
+            value: quotedValue,
             flag,
             type,
             placeholder: "",
@@ -404,9 +400,9 @@ const CheckboxComponent = () => {
               : value;
 
           const flag = paramsDropdownFetched[param_name];
-          const maskedValue = maskPasswordValue(flag, quotedValue);
+          // Store the original value for dropdown parameters too, not masked version
           dropdownInput[v4()] = {
-            value: maskedValue,
+            value: quotedValue,
             flag,
             type,
             placeholder: "",
@@ -752,14 +748,7 @@ const AdvancedConfiguration = () => {
                   </Dropdown>
                 )}
                 <HelperText style={{ marginTop: "0.25em" }}>
-                  <HelperTextItem>
-                    <div
-                      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-                      dangerouslySetInnerHTML={{
-                        __html: `${config.helper_text}`,
-                      }}
-                    />
-                  </HelperTextItem>
+                  <HelperTextItem>{config.helper_text}</HelperTextItem>
                 </HelperText>
               </FormGroup>
             </Form>

src/components/AddNode/RequiredParam.tsx

@@ -4,16 +4,13 @@ import { type FormEvent, useContext, useEffect, useRef } from "react";
 import { AddNodeContext } from "./context";
 import type { RequiredParamProp } from "./types";
 import { Types } from "./types";
-import { maskPasswordValue } from "./utils";
 
 const RequiredParam: React.FC<RequiredParamProp> = ({ param }) => {
   const { state, dispatch } = useContext(AddNodeContext);
   const { requiredInput } = state;
   const inputElement = useRef<HTMLInputElement>(null);
 
   const value = requiredInput?.[param.data.id]?.value ?? "";
-  // Mask password values for display
-  const displayValue = maskPasswordValue(param.data.flag, value);
 
   const handleInputChange = (value: string) => {
     const { id, flag, help: placeholder, type } = param.data;
@@ -48,10 +45,14 @@ const RequiredParam: React.FC<RequiredParamProp> = ({ param }) => {
         <TextInput
           className="required-params__textInput"
           ref={inputElement}
-          type="text"
+          type={
+            param.data.flag?.toLowerCase().includes("password")
+              ? "password"
+              : "text"
+          }
           aria-label="required-parameters"
           placeholder={param.data.help}
-          value={displayValue}
+          value={value}
           id={param.data.name}
           onChange={(_e, value: string) => handleInputChange(value)}
         />

src/components/AddNode/SimpleDropdown.tsx

@@ -10,7 +10,7 @@ import {
 import React, { useContext, useEffect } from "react";
 import { CloseIcon } from "../Icons";
 import type { SimpleDropdownProps, SimpleDropdownState } from "./types";
-import { maskPasswordValue, unPackForKeyValue } from "./utils";
+import { unPackForKeyValue } from "./utils";
 
 import { v4 } from "uuid";
 import { AddNodeContext } from "./context";
@@ -144,8 +144,6 @@ const SimpleDropdown = ({ id, params }: SimpleDropdownProps) => {
     return parameters;
   };
 
-  const displayValue = maskPasswordValue(paramFlag, value);
-
   return (
     <>
       <div className="plugin-configuration">
@@ -176,12 +174,14 @@ const SimpleDropdown = ({ id, params }: SimpleDropdownProps) => {
         </Dropdown>
         <TextInput
           id={paramFlag}
-          type="text"
+          type={
+            paramFlag?.toLowerCase().includes("password") ? "password" : "text"
+          }
           aria-label="text"
           className="plugin-configuration__input"
           onChange={handleInputChange}
           placeholder={placeholder}
-          value={displayValue}
+          value={value}
           isDisabled={
             type === "boolean" || (params && params.dropdown.length === 0)
           }

src/components/AddNode/utils.ts

@@ -20,7 +20,6 @@ export const unpackParametersIntoObject = (input: InputType) => {
   for (const parameter in input) {
     const [flag, value, type] = unPackForKeyValue(input[parameter]);
 
-    // Store the original value - masking will happen during display
     result[flag] = {
       value,
       type,
@@ -30,22 +29,18 @@ export const unpackParametersIntoObject = (input: InputType) => {
   return result;
 };
 
-export const maskPasswordValue = (flag: string, value: string): string => {
-  // Check if flag or parameter name contains "password" (case insensitive)
-  return flag.toLowerCase().includes("password")
-    ? "*".repeat(value ? value.length : 0)
-    : value;
-};
-
 export const unpackParametersIntoString = (input: InputType) => {
   let string = "";
 
   for (const parameter in input) {
     const flag = input[parameter].flag;
     const value = input[parameter].value;
 
-    // Use the maskPasswordValue function to mask passwords (checks flag name)
-    const displayValue = maskPasswordValue(flag, value);
+    // Check if this is a password parameter and mask it with asterisks for display
+    const isPassword = flag?.toLowerCase().includes("password");
+    const displayValue = isPassword
+      ? "*".repeat(value ? value.length : 0)
+      : value;
 
     string += `${flag} ${displayValue} `;
   }

src/components/NodeDetails/NodeDetails.tsx

@@ -310,21 +310,25 @@ function getCommand(
       const paramName = instanceParam.data.param_name;
 
       // Check if parameter name contains "password" (case insensitive)
-      const isPassword = paramName.toLowerCase().includes("password");
+      const isPassword =
+        paramName.toLowerCase().includes("password") ||
+        pluginParam.data.flag?.toLowerCase().includes("password");
 
       // If it's a password, mask the value with asterisks of the same length
       const displayValue = isPassword
         ? "*".repeat(value ? value.length : 0)
         : value;
 
-      const safeValue =
-        isString && needsQuoting(displayValue)
+      // For password fields, ensure the masked value is used consistently
+      const safeValue = isPassword
+        ? displayValue
+        : isString && needsQuoting(displayValue)
           ? customQuote(displayValue)
           : displayValue;
 
       modifiedParams.push({
         name: pluginParam.data.flag,
-        value: isBoolean ? " " : isString ? safeValue : displayValue,
+        value: isBoolean ? " " : safeValue,
       });
     }
   }