refactor: improve readability of several components (#3714)

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* ✅ (Simple Agent.spec.ts): update expected count of python words to 2 for accurate test results
📝 (auto-login-off.spec.ts): add a 1-second timeout before checking visibility of a text element to ensure proper rendering and improve test reliability

* 📝 (cardComponent/index.tsx): Extract handlePlaygroundClick function to improve code readability and maintainability
📝 (codeAreaComponent/index.tsx): Refactor code to use consistent naming conventions and improve code structure
📝 (rename-label.tsx): Refactor code to use consistent naming conventions and improve code structure
📝 (dictAreaModal/index.tsx): Refactor code to use consistent naming conventions and improve code structure

* 🔧 (rename-label.tsx): Refactor RenameLabel component to improve readability and maintainability by restructuring the component logic into separate functions for handling blur, change, and double click events. Split the component rendering logic into separate functions for input and span elements.

* update type

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/cardComponent/index.tsx

@@ -55,6 +55,32 @@ export default function CollectionCardComponent({
 
   const { onDragStart } = useDragStart(data);
 
+  const handlePlaygroundClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    track("Playground Button Clicked", { flowId: data.id });
+    setLoadingPlayground(true);
+    const flow = getFlowById(data.id);
+    if (flow) {
+      if (!hasPlayground(flow)) {
+        setErrorData({
+          title: "Error",
+          list: ["This flow doesn't have a playground."],
+        });
+        setLoadingPlayground(false);
+        return;
+      }
+      setCurrentFlow(flow);
+      setOpenPlayground(true);
+      setLoadingPlayground(false);
+    } else {
+      setErrorData({
+        title: "Error",
+        list: ["Error getting flow data."],
+      });
+    }
+  };
+
   return (
     <>
       <Card
@@ -135,31 +161,7 @@ export default function CollectionCardComponent({
                   size="sm"
                   className="gap-2 whitespace-nowrap bg-muted"
                   data-testid={"playground-flow-button-" + data.id}
-                  onClick={(e) => {
+                  onClick={handlePlaygroundClick}
-                    e.preventDefault();
-                    e.stopPropagation();
-                    track("Playground Button Clicked", { flowId: data.id });
-                    setLoadingPlayground(true);
-                    const flow = getFlowById(data.id);
-                    if (flow) {
-                      if (!hasPlayground(flow)) {
-                        setErrorData({
-                          title: "Error",
-                          list: ["This flow doesn't have a playground."],
-                        });
-                        setLoadingPlayground(false);
-                        return;
-                      }
-                      setCurrentFlow(flow);
-                      setOpenPlayground(true);
-                      setLoadingPlayground(false);
-                    } else {
-                      setErrorData({
-                        title: "Error",
-                        list: ["Error getting flow data."],
-                      });
-                    }
-                  }}
                 >
                   {!loadingPlayground ? (
                     <IconComponent

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import { CodeAreaComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
 
 import IconComponent from "../genericIconComponent";
 
@@ -17,57 +18,68 @@ export default function CodeAreaComponent({
   open,
   setOpen,
 }: CodeAreaComponentType) {
-  const [myValue, setMyValue] = useState(
+  const [componentValue, setComponentValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value),
   );
   useEffect(() => {
-    if (disabled && myValue !== "") {
+    if (disabled && componentValue !== "") {
-      setMyValue("");
+      setComponentValue("");
       onChange("", undefined, true);
     }
   }, [disabled]);
 
   useEffect(() => {
-    setMyValue(typeof value == "string" ? value : JSON.stringify(value));
+    setComponentValue(typeof value == "string" ? value : JSON.stringify(value));
   }, [value]);
 
+  const handleValueChange = (newValue) => {
+    onChange(newValue);
+  };
+
+  const renderInputText = () => (
+    <span
+      id={id}
+      data-testid={id}
+      className={cn(
+        editNode
+          ? "input-edit-node input-dialog"
+          : "primary-input text-muted-foreground",
+        disabled && !editNode && "input-disable input-ring",
+      )}
+    >
+      {value !== "" ? value : "Type something..."}
+    </span>
+  );
+
+  const renderExternalLinkIcon = () => {
+    if (editNode) return null;
+
     return (
-    <div className={disabled ? "pointer-events-none w-full" : "w-full"}>
+      <IconComponent
+        name="ExternalLink"
+        className={cn(
+          "icons-parameters-comp shrink-0",
+          disabled ? "text-ring" : "hover:text-accent-foreground",
+        )}
+      />
+    );
+  };
+
+  return (
+    <div className={cn("w-full", disabled && "pointer-events-none")}>
       <CodeAreaModal
         open={open}
         setOpen={setOpen}
         readonly={readonly}
         dynamic={dynamic}
-        value={myValue}
+        value={value}
         nodeClass={nodeClass}
         setNodeClass={setNodeClass!}
-        setValue={(value: string) => {
+        setValue={handleValueChange}
-          setMyValue(value);
-          onChange(value);
-        }}
       >
         <div className="flex w-full items-center gap-3">
-          <span
+          {renderInputText()}
-            id={id}
+          {renderExternalLinkIcon()}
-            data-testid={id}
-            className={
-              editNode
-                ? "input-edit-node input-dialog"
-                : (disabled ? "input-disable input-ring " : "") +
-                  " primary-input text-muted-foreground"
-            }
-          >
-            {myValue !== "" ? myValue : "Type something..."}
-          </span>
-          {!editNode && (
-            <IconComponent
-              name="ExternalLink"
-              className={
-                "icons-parameters-comp shrink-0" +
-                (disabled ? " text-ring" : " hover:text-accent-foreground")
-              }
-            />
-          )}
         </div>
       </CodeAreaModal>
     </div>

src/frontend/src/components/dropdownComponent/index.tsx

@@ -69,14 +69,7 @@ export default function Dropdown({
     }
   }, [open]);
 
-  return (
+  const renderTriggerButton = () => (
-    <>
-      {Object.keys(options ?? [])?.length > 0 || combobox ? (
-        <>
-          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
-            {children ? (
-              <PopoverAnchor>{children}</PopoverAnchor>
-            ) : (
     <PopoverTrigger asChild>
       <Button
         disabled={disabled}
@@ -85,44 +78,30 @@ export default function Dropdown({
         role="combobox"
         ref={refButton}
         aria-expanded={open}
-                  data-testid={`${id ?? ""}`}
+        data-testid={id}
         className={cn(
           editNode
-                      ? "dropdown-component-outline"
+            ? "dropdown-component-outline input-edit-node"
-                      : "dropdown-component-false-outline",
+            : "dropdown-component-false-outline py-2",
           "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2",
         )}
       >
-                  <span
+        <span className="truncate" data-testid={`value-dropdown-${id}`}>
-                    className="truncate"
-                    data-testid={`value-dropdown-` + id}
-                  >
           {value &&
           value !== "" &&
           filteredOptions.find((option) => option === value)
             ? filteredOptions.find((option) => option === value)
             : "Choose an option..."}
         </span>
-
         <ForwardedIconComponent
           name="ChevronsUpDown"
           className="ml-2 h-4 w-4 shrink-0 opacity-50"
         />
       </Button>
     </PopoverTrigger>
-            )}
+  );
-            <PopoverContentDropdown
+
-              side="bottom"
+  const renderSearchInput = () => (
-              avoidCollisions={!!children}
-              className="noflow nowheel nopan nodelete nodrag p-0"
-              style={
-                children
-                  ? {}
-                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
-              }
-            >
-              <Command>
     <div className="flex items-center border-b px-3">
       <ForwardedIconComponent
         name="search"
@@ -134,32 +113,26 @@ export default function Dropdown({
         className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
       />
     </div>
+  );
+
+  const renderOptionsList = () => (
     <CommandList>
       <CommandEmpty>No values found.</CommandEmpty>
       <CommandGroup defaultChecked={false}>
-                    {filteredOptions?.map((option, id) => (
+        {filteredOptions?.map((option, index) => (
-                      <ShadTooltip
+          <ShadTooltip key={index} delayDuration={700} content={option}>
-                        delayDuration={700}
-                        key={id}
-                        content={option}
-                      >
             <div>
               <CommandItem
-                            key={id}
                 value={option}
                 onSelect={(currentValue) => {
                   onSelect(currentValue);
                   setOpen(false);
                 }}
                 className="items-center overflow-hidden truncate"
-                            data-testid={`${option}-${id ?? ""}-option`}
+                data-testid={`${option}-${index}-option`}
               >
-                            {customValue === option ? (
+                {customValue === option && (
-                              <span className="text-muted-foreground">
+                  <span className="text-muted-foreground">Text:&nbsp;</span>
-                                Text:&nbsp;
-                              </span>
-                            ) : (
-                              <></>
                 )}
                 <span className="truncate">{option}</span>
                 <ForwardedIconComponent
@@ -175,25 +148,46 @@ export default function Dropdown({
         ))}
       </CommandGroup>
     </CommandList>
+  );
+
+  const renderPopoverContent = () => (
+    <PopoverContentDropdown
+      side="bottom"
+      avoidCollisions={!!children}
+      className="noflow nowheel nopan nodelete nodrag p-0"
+      style={
+        children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+      }
+    >
+      <Command>
+        {renderSearchInput()}
+        {renderOptionsList()}
       </Command>
     </PopoverContentDropdown>
-          </Popover>
+  );
-        </>
+
+  if (Object.keys(options).length === 0 && !combobox) {
+    return isLoading ? (
+      <div>
+        <span className="text-sm italic">Loading...</span>
+      </div>
     ) : (
-        <>
-          {(!isLoading && (
       <div>
         <span className="text-sm italic">
           No parameters are available for display.
         </span>
       </div>
-          )) || (
+    );
-            <div>
+  }
-              <span className="text-sm italic">Loading...</span>
+
-            </div>
+  return (
-          )}
+    <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
-        </>
+      {children ? (
-      )}
+        <PopoverAnchor>{children}</PopoverAnchor>
-    </>
+      ) : (
+        renderTriggerButton()
+      )}
+      {renderPopoverContent()}
+    </Popover>
   );
 }

src/frontend/src/components/floatComponent/index.tsx

@@ -20,6 +20,19 @@ export default function FloatComponent({
     }
   }, [disabled]);
 
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = Number(event.target.value);
+    if (inputValue < min) {
+      event.target.value = min.toString();
+    } else if (inputValue > max) {
+      event.target.value = max.toString();
+    }
+  };
+
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+
   return (
     <div className="w-full">
       <Input
@@ -28,25 +41,14 @@ export default function FloatComponent({
         type="number"
         step={step}
         min={min}
-        onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
-          if (Number(event.target.value) < min) {
-            event.target.value = min.toString();
-          }
-          if (Number(event.target.value) > max) {
-            event.target.value = max.toString();
-          }
-        }}
         max={max}
         value={value ?? ""}
         disabled={disabled}
         className={editNode ? "input-edit-node" : ""}
-        placeholder={`Enter a value`}
+        placeholder="Enter a value"
-        onChange={(event) => {
+        onInput={handleInput}
-          onChange(event.target.value);
+        onChange={handleChange}
-        }}
+        onKeyDown={(e) => handleKeyDown(e, value, "")}
-        onKeyDown={(e) => {
-          handleKeyDown(e, value, "");
-        }}
       />
     </div>
   );

src/frontend/src/components/inputListComponent/index.tsx

@@ -29,6 +29,36 @@ export default function InputListComponent({
 
   if (!value?.length) value = [""];
 
+  const handleInputChange = (index, newValue) => {
+    const newInputList = _.cloneDeep(value);
+    newInputList[index] = newValue;
+    onChange(newInputList);
+  };
+
+  const addNewInput = (e) => {
+    e.preventDefault();
+    const newInputList = _.cloneDeep(value);
+    newInputList.push("");
+    onChange(newInputList);
+  };
+
+  const removeInput = (index, e) => {
+    e.preventDefault();
+    const newInputList = _.cloneDeep(value);
+    newInputList.splice(index, 1);
+    onChange(newInputList);
+  };
+
+  const getButtonClassName = () =>
+    classNames(
+      disabled || playgroundDisabled
+        ? "cursor-not-allowed text-muted-foreground"
+        : "text-primary hover:text-accent-foreground",
+    );
+
+  const getTestId = (type, index) =>
+    `input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
+
   return (
     <div
       className={classNames(
@@ -36,72 +66,31 @@ export default function InputListComponent({
         "flex w-full flex-col gap-3",
       )}
     >
-      {value.map((singleValue, idx) => {
+      {value.map((singleValue, index) => (
-        return (
+        <div key={index} className="flex w-full gap-3">
-          <div key={idx} className="flex w-full gap-3">
           <Input
             disabled={disabled || playgroundDisabled}
             type="text"
             value={singleValue}
             className={editNode ? "input-edit-node" : ""}
             placeholder="Type something..."
-              onChange={(event) => {
+            onChange={(event) => handleInputChange(index, event.target.value)}
-                let newInputList = _.cloneDeep(value);
+            data-testid={`${id}_${index}`}
-                newInputList[idx] = event.target.value;
-                onChange(newInputList);
-              }}
-              data-testid={`${id}_` + idx}
           />
-            {idx === 0 ? (
           <Button
             unstyled
-                className={cn(
+            className={getButtonClassName()}
-                  disabled || playgroundDisabled
+            onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
-                    ? "cursor-not-allowed text-muted-foreground"
+            data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
-                    : "text-primary hover:text-accent-foreground",
-                )}
-                onClick={(e) => {
-                  let newInputList = _.cloneDeep(value);
-                  newInputList.push("");
-                  onChange(newInputList);
-                  e.preventDefault();
-                }}
-                data-testid={
-                  `input-list-plus-btn${
-                    editNode ? "-edit" : ""
-                  }_${componentName}-` + idx
-                }
             disabled={disabled || playgroundDisabled}
           >
-                <IconComponent name="Plus" className="h-4 w-4" />
+            <IconComponent
+              name={index === 0 ? "Plus" : "X"}
+              className="h-4 w-4"
+            />
           </Button>
-            ) : (
-              <Button
-                unstyled
-                className={cn(
-                  disabled || playgroundDisabled
-                    ? "cursor-not-allowed text-muted-foreground"
-                    : "text-primary hover:text-accent-foreground",
-                )}
-                data-testid={
-                  `input-list-minus-btn${
-                    editNode ? "-edit" : ""
-                  }_${componentName}-` + idx
-                }
-                onClick={(e) => {
-                  let newInputList = _.cloneDeep(value);
-                  newInputList.splice(idx, 1);
-                  onChange(newInputList);
-                  e.preventDefault();
-                }}
-                disabled={disabled || playgroundDisabled}
-              >
-                <IconComponent name="X" className="h-4 w-4" />
-              </Button>
-            )}
         </div>
-        );
+      ))}
-      })}
     </div>
   );
 }

src/frontend/src/components/intComponent/index.tsx

@@ -38,36 +38,57 @@ export default function IntComponent({
     onChange(Number(e.target.value));
   };
 
+  const getStepValue = () => {
+    return (Number.isInteger(rangeSpec?.step) ? rangeSpec.step : 1) ?? 1;
+  };
+
+  const getMinValue = () => {
+    return rangeSpec?.min ?? min;
+  };
+
+  const getMaxValue = () => {
+    return rangeSpec?.max ?? undefined;
+  };
+
+  const getInputClassName = () => {
+    return cn(
+      editNode ? "input-edit-node" : "",
+      "nopan nodelete nodrag noflow primary-input",
+    );
+  };
+
+  const handleNumberChange = (newValue) => {
+    onChange(Number(newValue));
+  };
+
+  const handleInputChange = (event) => {
+    const inputValue = Number(event.target.value);
+    if (inputValue < getMinValue()) {
+      event.target.value = getMinValue().toString();
+    }
+  };
+
+  const inputRef = useRef(null);
+
   return (
     <div className="w-full">
       <NumberInput
         id={id}
-        step={(Number.isInteger(rangeSpec?.step) ? rangeSpec?.step : 1) ?? 1}
+        step={getStepValue()}
-        min={rangeSpec?.min ?? min}
+        min={getMinValue()}
-        max={rangeSpec?.max ?? undefined}
+        max={getMaxValue()}
-        onChange={(value) => {
+        onChange={handleNumberChange}
-          onChange(Number(value));
-        }}
         value={value ?? ""}
       >
         <NumberInputField
-          className={cn(
+          className={getInputClassName()}
-            editNode ? "input-edit-node" : "",
-            "nopan nodelete nodrag noflow primary-input",
-          )}
           onChange={handleChangeInput}
-          onKeyDown={(event) => {
+          onKeyDown={(event) => handleKeyDown(event, value, "")}
-            handleKeyDown(event, value, "");
+          onInput={handleInputChange}
-          }}
-          onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
-            if (Number(event.target.value) < min) {
-              event.target.value = min.toString();
-            }
-          }}
           disabled={disabled}
           placeholder={editNode ? "Integer number" : "Type an integer number"}
           data-testid={id}
-          ref={ref}
+          ref={inputRef}
         />
         <NumberInputStepper paddingRight={10}>
           <NumberIncrementStepper fontSize={8} marginTop={6} />

src/frontend/src/components/keypairListComponent/index.tsx

@@ -7,7 +7,6 @@ import {
   hasDuplicateKeys,
 } from "@/utils/reactflowUtils";
 import { cloneDeep } from "lodash";
-import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
@@ -27,7 +26,7 @@ export default function KeypairListComponent({
 
   const [duplicateKey, setDuplicateKey] = useState(false);
 
-  const myValue =
+  const values =
     Object.keys(value || {})?.length === 0 || !value
       ? [{ "": "" }]
       : convertObjToArray(value, "dict");
@@ -43,62 +42,64 @@ export default function KeypairListComponent({
   };
 
   const handleChangeKey = (event, idx) => {
-    const oldKey = Object.keys(myValue[idx])[0];
+    const oldKey = Object.keys(values[idx])[0];
-    const updatedObj = { [event.target.value]: myValue[idx][oldKey] };
+    const updatedObj = { [event.target.value]: values[idx][oldKey] };
 
-    const newValue = cloneDeep(myValue);
+    const newValue = cloneDeep(values);
     newValue[idx] = updatedObj;
 
     handleNewValue(newValue);
   };
 
   const handleChangeValue = (event, idx) => {
-    const key = Object.keys(myValue[idx])[0];
+    const key = Object.keys(values[idx])[0];
     const updatedObj = { [key]: event.target.value };
 
-    const newValue = cloneDeep(myValue);
+    const newValue = cloneDeep(values);
     newValue[idx] = updatedObj;
 
     handleNewValue(newValue);
   };
 
+  const addNewKeyValuePair = () => {
+    const newValues = cloneDeep(values);
+    newValues.push({ "": "" });
+    onChange(newValues);
+  };
+
+  const removeKeyValuePair = (index) => {
+    const newValues = cloneDeep(values);
+    newValues.splice(index, 1);
+    onChange(newValues);
+  };
+
+  const getInputClassName = (isEditNode, isDuplicateKey) => {
+    return `${isEditNode ? "input-edit-node" : ""} ${isDuplicateKey ? "input-invalid" : ""}`.trim();
+  };
+
+  const getTestId = (prefix, index) =>
+    `${editNode ? "editNode" : ""}${prefix}${index}`;
+
   return (
     <div
-      className={classNames(
+      className={`flex h-full flex-col gap-3 ${values?.length > 1 && editNode ? "mx-2 my-1" : ""}`}
-        myValue?.length > 1 && editNode ? "mx-2 my-1" : "",
-        "flex h-full flex-col gap-3",
-      )}
     >
-      {myValue?.map((obj, index) => {
+      {values?.map((obj, index) =>
-        return Object.keys(obj).map((key, idx) => {
+        Object.keys(obj).map((key, idx) => (
-          return (
           <div key={idx} className="flex w-full gap-2">
             <Input
-                data-testid={
+              data-testid={getTestId("keypair", index)}
-                  editNode ? "editNodekeypair" + index : "keypair" + index
+              id={getTestId("keypair", index)}
-                }
-                id={editNode ? "editNodekeypair" + index : "keypair" + index}
               type="text"
               value={key.trim()}
-                className={classNames(
+              className={getInputClassName(editNode, duplicateKey)}
-                  editNode ? "input-edit-node" : "",
-                  duplicateKey ? "input-invalid" : "",
-                )}
               placeholder="Type key..."
               onChange={(event) => handleChangeKey(event, index)}
             />
 
             <Input
-                data-testid={
+              data-testid={getTestId("keypair", index + 100)}
-                  editNode
+              id={getTestId("keypair", index + 100)}
-                    ? "editNodekeypair" + (index + 100).toString()
-                    : "keypair" + (index + 100).toString()
-                }
-                id={
-                  editNode
-                    ? "editNodekeypair" + (index + 100).toString()
-                    : "keypair" + (index + 100).toString()
-                }
               type="text"
               disabled={disabled}
               value={obj[key]}
@@ -107,56 +108,34 @@ export default function KeypairListComponent({
               onChange={(event) => handleChangeValue(event, index)}
             />
 
-              {isList && index === myValue.length - 1 ? (
+            {isList &&
+              (index === values.length - 1 ? (
                 <button
                   disabled={disabled}
-                  onClick={() => {
+                  onClick={addNewKeyValuePair}
-                    let newInputList = cloneDeep(myValue);
+                  id={getTestId("plusbtn", index)}
-                    newInputList.push({ "": "" });
-                    onChange(newInputList);
-                  }}
-                  id={
-                    editNode
-                      ? "editNodeplusbtn" + index.toString()
-                      : "plusbtn" + index.toString()
-                  }
                   data-testid={id}
                 >
                   <IconComponent
                     name="Plus"
-                    className={"h-4 w-4 hover:text-accent-foreground"}
+                    className="h-4 w-4 hover:text-accent-foreground"
                   />
                 </button>
-              ) : isList ? (
+              ) : (
                 <button
-                  onClick={() => {
+                  onClick={() => removeKeyValuePair(index)}
-                    let newInputList = cloneDeep(myValue);
+                  data-testid={getTestId("minusbtn", index)}
-                    newInputList.splice(index, 1);
+                  id={getTestId("minusbtn", index)}
-                    onChange(newInputList);
-                  }}
-                  data-testid={
-                    editNode
-                      ? "editNodeminusbtn" + index.toString()
-                      : "minusbtn" + index.toString()
-                  }
-                  id={
-                    editNode
-                      ? "editNodeminusbtn" + index.toString()
-                      : "minusbtn" + index.toString()
-                  }
                 >
                   <IconComponent
                     name="X"
                     className="h-4 w-4 hover:text-status-red"
                   />
                 </button>
-              ) : (
+              ))}
-                ""
+          </div>
+        )),
       )}
     </div>
   );
-        });
-      })}
-    </div>
-  );
 }

src/frontend/src/components/multiselectComponent/index.tsx

@@ -92,14 +92,15 @@ export default function MultiselectComponent({
     }
   }, [open]);
 
-  return (
+  const handleOptionSelect = (currentValue) => {
-    <>
+    if (value.includes(currentValue)) {
-      {Object.keys(options ?? [])?.length > 0 || combobox ? (
+      onSelect(value.filter((v) => v !== currentValue));
-        <>
+    } else {
-          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+      onSelect([...value, currentValue]);
-            {children ? (
+    }
-              <PopoverAnchor>{children}</PopoverAnchor>
+  };
-            ) : (
+
+  const renderDropdownTrigger = () => (
     <PopoverTrigger asChild>
       <Button
         disabled={disabled}
@@ -108,47 +109,28 @@ export default function MultiselectComponent({
         role="combobox"
         ref={refButton}
         aria-expanded={open}
-                  data-testid={`${id ?? ""}`}
+        data-testid={id}
         className={cn(
           editNode
-                      ? "dropdown-component-outline"
+            ? "dropdown-component-outline input-edit-node"
-                      : "dropdown-component-false-outline",
+            : "dropdown-component-false-outline py-2",
           "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2",
         )}
       >
-                  <span
+        <span className="truncate" data-testid={`value-dropdown-${id}`}>
-                    className="truncate"
+          {value.length > 0 && options.find((option) => value.includes(option))
-                    data-testid={`value-dropdown-` + id}
-                  >
-                    {value &&
-                    value.length > 0 &&
-                    options.find((option) => value.includes(option))
             ? value.join(", ")
             : "Choose an option..."}
         </span>
-
         <ForwardedIconComponent
           name="ChevronsUpDown"
           className="ml-2 h-4 w-4 shrink-0 opacity-50"
         />
       </Button>
     </PopoverTrigger>
-            )}
+  );
-            <PopoverContentDropdown
+
-              onOpenAutoFocus={(event) => {
+  const renderSearchInput = () => (
-                event.preventDefault();
-              }}
-              side="bottom"
-              avoidCollisions={!!children}
-              className="noflow nowheel nopan nodelete nodrag p-0"
-              style={
-                children
-                  ? {}
-                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
-              }
-            >
-              <Command>
     <div className="flex items-center border-b px-3">
       <ForwardedIconComponent
         name="search"
@@ -157,7 +139,6 @@ export default function MultiselectComponent({
       <input
         onChange={(event) => {
           setSearchValue(event.target.value);
-                      searchRoleByTerm(event.target.value);
         }}
         placeholder="Search options..."
         className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
@@ -173,48 +154,30 @@ export default function MultiselectComponent({
         />
       </Button>
     </div>
+  );
 
+  const renderOptionsList = () => (
     <CommandList className="overflow-y-scroll">
       <CommandEmpty>No values found.</CommandEmpty>
-                  <CommandGroup defaultChecked={false}>
+      <CommandGroup>
-                    {filteredOptions?.map((option, id) => (
+        {filteredOptions.map((option, index) => (
-                      <ShadTooltip
+          <ShadTooltip key={index} delayDuration={700} content={option}>
-                        delayDuration={700}
-                        key={id}
-                        content={option}
-                      >
             <div>
               <CommandItem
-                            key={id}
                 value={option}
-                            onSelect={(currentValue) => {
+                onSelect={handleOptionSelect}
-                              if (value.includes(currentValue)) {
-                                onSelect(
-                                  value.filter((v) => v !== currentValue),
-                                );
-                              } else {
-                                onSelect([...value, currentValue]);
-                              }
-                            }}
                 className="items-center overflow-hidden truncate"
                 data-testid={`${option}-${id ?? ""}-option`}
               >
-                            {customValues.includes(option) ||
+                {(customValues.includes(option) || searchValue === option) && (
-                            searchValue === option ? (
+                  <span className="text-muted-foreground">Text:&nbsp;</span>
-                              <span className="text-muted-foreground">
-                                Text:&nbsp;
-                              </span>
-                            ) : (
-                              <></>
                 )}
                 <span className="truncate">{option}</span>
                 <ForwardedIconComponent
                   name="Check"
                   className={cn(
                     "ml-auto h-4 w-4 shrink-0 text-primary",
-                                value.includes(option)
+                    value.includes(option) ? "opacity-100" : "opacity-0",
-                                  ? "opacity-100"
-                                  : "opacity-0",
                   )}
                 />
               </CommandItem>
@@ -223,25 +186,45 @@ export default function MultiselectComponent({
         ))}
       </CommandGroup>
     </CommandList>
-              </Command>
+  );
-            </PopoverContentDropdown>
+
-          </Popover>
+  if (Object.keys(options).length === 0 && !combobox) {
-        </>
+    return isLoading ? (
+      <div>
+        <span className="text-sm italic">Loading...</span>
+      </div>
     ) : (
-        <>
-          {(!isLoading && (
       <div>
         <span className="text-sm italic">
           No parameters are available for display.
         </span>
       </div>
-          )) || (
+    );
-            <div>
+  }
-              <span className="text-sm italic">Loading...</span>
+
-            </div>
+  return (
-          )}
+    <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
-        </>
+      {children ? (
-      )}
+        <PopoverAnchor>{children}</PopoverAnchor>
-    </>
+      ) : (
+        renderDropdownTrigger()
+      )}
+      <PopoverContentDropdown
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        side="bottom"
+        avoidCollisions={!!children}
+        className="noflow nowheel nopan nodelete nodrag p-0"
+        style={
+          children
+            ? {}
+            : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+        }
+      >
+        <Command>
+          {renderSearchInput()}
+          {renderOptionsList()}
+        </Command>
+      </PopoverContentDropdown>
+    </Popover>
   );
 }

src/frontend/src/components/promptComponent/index.tsx

@@ -1,6 +1,7 @@
 import PromptModal from "@/modals/promptModal";
 import { useEffect } from "react";
 import { PromptAreaComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 
@@ -21,8 +22,38 @@ export default function PromptAreaComponent({
     }
   }, [disabled]);
 
+  const renderPromptText = () => (
+    <span
+      id={id}
+      data-testid={id}
+      className={cn(
+        editNode
+          ? "input-edit-node input-dialog"
+          : "primary-input text-muted-foreground",
+        disabled && !editNode && "input-disable text-ring",
+      )}
+    >
+      {value !== "" ? value : "Type your prompt here..."}
+    </span>
+  );
+
+  const renderExternalLinkIcon = () => {
+    if (editNode) return null;
+
     return (
-    <div className={disabled ? "pointer-events-none w-full" : "w-full"}>
+      <IconComponent
+        id={id}
+        name="ExternalLink"
+        className={cn(
+          "icons-parameters-comp shrink-0",
+          disabled ? "text-ring" : "hover:text-accent-foreground",
+        )}
+      />
+    );
+  };
+
+  return (
+    <div className={cn("w-full", disabled && "pointer-events-none")}>
       <PromptModal
         id={id}
         field_name={field_name}
@@ -34,28 +65,8 @@ export default function PromptAreaComponent({
       >
         <Button unstyled className="w-full">
           <div className="flex w-full items-center gap-3">
-            <span
+            {renderPromptText()}
-              id={id}
+            {renderExternalLinkIcon()}
-              data-testid={id}
-              className={
-                editNode
-                  ? "input-edit-node input-dialog"
-                  : (disabled ? "input-disable text-ring " : "") +
-                    " primary-input text-muted-foreground"
-              }
-            >
-              {value !== "" ? value : "Type your prompt here..."}
-            </span>
-            {!editNode && (
-              <IconComponent
-                id={id}
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp shrink-0" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
-            )}
           </div>
         </Button>
       </PromptModal>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -22,65 +22,67 @@ export default function TextAreaComponent({
     }
   }, [disabled]);
 
-  return (
+  const renderTextarea = () => (
-    <div className={"flex w-full items-center" + (disabled ? "" : "")}>
-      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
     <Textarea
       id={id}
       data-testid={id}
       value={value}
       disabled={disabled}
       className={classNames(
+        "w-full resize-none",
         password !== undefined && password && value !== ""
           ? "text-clip password"
           : "",
         editNode ? "input-edit-node" : "",
-            password != undefined ? "pr-8" : "",
+        password !== undefined ? "pr-8" : "",
-            "w-full",
-            "resize-none",
       )}
       rows={1}
-          placeholder={"Type something..."}
+      placeholder="Type something..."
-          onChange={(event) => {
+      onChange={(event) => onChange(event.target.value)}
-            onChange(event.target.value);
-          }}
     />
+  );
+
+  const renderExternalLinkButton = () => (
     <ComponentTextModal
       changeVisibility={updateVisibility}
       value={value}
-          setValue={(value: string) => {
+      setValue={(value) => onChange(value)}
-            onChange(value);
-          }}
       disabled={disabled}
       password={password}
     >
       <div
-            className={
+        className={classNames(
-              "flex items-center" + (password ? "relative left-6" : "")
+          "flex items-center",
-            }
+          password ? "relative left-6" : "",
+        )}
       >
         <Button unstyled>
           <IconComponent
             strokeWidth={1.5}
             id={id}
             name="ExternalLink"
-                className={
+            className={classNames(
-                  "icons-parameters-comp shrink-0" +
+              "icons-parameters-comp shrink-0",
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+              disabled ? "text-ring" : "hover:text-accent-foreground",
-                }
+            )}
           />
         </Button>
       </div>
     </ComponentTextModal>
-        {password !== undefined && (
+  );
+
+  const renderPasswordToggle = () => {
+    if (password === undefined) return null;
+
+    return (
       <Button
         unstyled
         tabIndex={-1}
         className={classNames(
-              "mb-px text-muted-foreground hover:text-current",
+          "side-bar-button-size absolute mb-px text-muted-foreground hover:text-current",
           editNode
-                ? "side-bar-button-size absolute bottom-[1.3rem] right-[4.2rem]"
+            ? "bottom-[1.3rem] right-[4.2rem]"
-                : "side-bar-button-size absolute bottom-4 right-[4.2rem]",
+            : "bottom-4 right-[4.2rem]",
         )}
         onClick={(event) => {
           event.preventDefault();
@@ -122,7 +124,15 @@ export default function TextAreaComponent({
           </svg>
         )}
       </Button>
-        )}
+    );
+  };
+
+  return (
+    <div className={classNames("flex w-full items-center", disabled ? "" : "")}>
+      <div className="flex w-full items-center gap-3" data-testid={`div-${id}`}>
+        {renderTextarea()}
+        {renderExternalLinkButton()}
+        {renderPasswordToggle()}
       </div>
     </div>
   );

src/frontend/src/components/ui/rename-label.tsx

@@ -1,24 +1,30 @@
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/utils";
 
-export default function RenameLabel(props) {
+export default function RenameLabel({
+  value,
+  setValue,
+  className,
+  rename,
+  setRename,
+}) {
   const [internalState, setInternalState] = useState(false);
-  const [isRename, setIsRename] = props.rename
+  const [componentValue, setComponentValue] = useState(value);
-    ? [props.rename, props.setRename]
+  const [isRename, setIsRename] = rename
+    ? [rename, setRename]
     : [internalState, setInternalState];
 
   useEffect(() => {
-    if (props.value) setMyValue(props.value);
+    if (value) setComponentValue(value);
-  }, [props.value]);
+  }, [value]);
 
-  const [myValue, setMyValue] = useState(props.value);
   useEffect(() => {
     if (isRename) {
-      setMyValue(props.value);
+      setComponentValue(value);
       document.addEventListener("keydown", (event) => {
         if (event.key === "Escape") {
           setIsRename(false);
-          props.setValue("");
+          setValue("");
         }
       });
       if (inputRef.current) {
@@ -52,41 +58,47 @@ export default function RenameLabel(props) {
       input.style.width = `${textWidth + 16}px`;
     }
   };
-  return (
+
-    <div>
+  const handleBlur = () => {
-      {isRename ? (
+    setIsRename(false);
+    if (componentValue !== "") {
+      setValue(componentValue);
+    }
+  };
+
+  const handleChange = (event) => {
+    setComponentValue(event.target.value);
+  };
+
+  const handleDoubleClick = () => {
+    setIsRename(true);
+    setComponentValue(value);
+  };
+
+  const renderInput = () => (
     <input
-          autoFocus
       ref={inputRef}
       onInput={resizeInput}
       className={cn(
         "nopan nodelete nodrag noflow rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
-            props.className,
+        className,
       )}
-          onBlur={() => {
+      onBlur={handleBlur}
-            setIsRename(false);
+      value={componentValue}
-            if (props.value !== "") {
+      onChange={handleChange}
-              props.setValue(myValue);
-            }
-          }}
-          value={myValue}
-          onChange={(event) => {
-            setMyValue(event.target.value);
-          }}
     />
-      ) : (
+  );
+
+  const renderSpan = () => (
     <div className="flex items-center gap-2">
       <span
-            className={cn("truncate px-2 text-left", props.className)}
+        className={cn("truncate px-2 text-left", className)}
-            onDoubleClick={() => {
+        onDoubleClick={handleDoubleClick}
-              setIsRename(true);
-              setMyValue(props.value);
-            }}
       >
-            {props.value}
+        {value}
       </span>
     </div>
-      )}
-    </div>
   );
+
+  return <div>{isRename ? renderInput() : renderSpan()}</div>;
 }

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -27,31 +27,29 @@ export default function DictAreaModal({
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const isDark = useDarkStore((state) => state.dark);
-  const [myValue, setMyValue] = useState(value);
+  const [componentValue, setComponentValue] = useState(value);
 
   useEffect(() => {
-    setMyValue(value);
+    setComponentValue(value);
   }, [value, open]);
 
-  return (
+  const handleSubmit = () => {
-    <BaseModal
+    if (onChange) {
-      size="medium-h-full"
+      onChange(componentValue);
-      open={open}
-      disable={disabled}
-      setOpen={setOpen}
-      onSubmit={
-        onChange
-          ? () => {
-              onChange(myValue);
       setOpen(false);
     }
-          : undefined
+  };
-      }
+
-    >
+  const handleJsonChange = (edit) => {
-      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+    setComponentValue(edit.src);
-      <BaseModal.Header
+  };
-        description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
+
-      >
+  const customizeCopy = (copy) => {
+    navigator.clipboard.writeText(JSON.stringify(copy));
+  };
+
+  const renderHeader = () => (
+    <BaseModal.Header description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}>
       <span className="pr-2">
         {onChange ? "Edit Dictionary" : "View Dictionary"}
       </span>
@@ -61,6 +59,9 @@ export default function DictAreaModal({
         aria-hidden="true"
       />
     </BaseModal.Header>
+  );
+
+  const renderContent = () => (
     <BaseModal.Content>
       <div className="flex h-full w-full flex-col transition-all">
         <JsonView
@@ -69,16 +70,25 @@ export default function DictAreaModal({
           className={!isDark ? "json-view-white" : "json-view-dark"}
           editable={!!onChange}
           enableClipboard
-            onChange={(edit) => {
+          onChange={handleJsonChange}
-              setMyValue(edit.src);
+          src={cloneDeep(componentValue)}
-            }}
+          customizeCopy={customizeCopy}
-            src={cloneDeep(myValue)}
-            customizeCopy={(copy) => {
-              navigator.clipboard.writeText(JSON.stringify(copy));
-            }}
         />
       </div>
     </BaseModal.Content>
+  );
+
+  return (
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      disable={disabled}
+      setOpen={setOpen}
+      onSubmit={onChange ? handleSubmit : undefined}
+    >
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      {renderHeader()}
+      {renderContent()}
       <BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
     </BaseModal>
   );

src/frontend/tests/end-to-end/auto-login-off.spec.ts

@@ -217,6 +217,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
     timeout: 30000,
   });
 
+  await page.waitForTimeout(1000);
+
   expect(
     await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
   ).toBe(true);