fix: simplify input field handling in InputListComponent (#5255)

* 🔧 (index.tsx): Remove unnecessary conditional rendering for addNewInput button and simplify the logic for onClick event handler to improve code readability and maintainability.

* ✨ (button-input-list.tsx): Add a new component ButtonInputList to handle button input list functionality in the frontend
📝 (get-class-name.ts): Create a helper function getButtonClassName to generate button class names based on disabled state
📝 (get-test-id.ts): Create a helper function getTestId to generate unique test ids for input list buttons
🔄 (index.tsx): Refactor InputListComponent to use the new ButtonInputList component for handling button input list functionality in the frontend

src/frontend/package-lock.json

@@ -896,6 +896,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/components/button-input-list.tsx

@@ -0,0 +1,77 @@
+import IconComponent from "@/components/common/genericIconComponent";
+import { Button } from "@/components/ui/button";
+import { ICON_STROKE_WIDTH } from "@/constants/constants";
+import { cn } from "@/utils/utils";
+import { getButtonClassName } from "../helpers/get-class-name";
+import { getTestId } from "../helpers/get-test-id";
+
+export const ButtonInputList = ({
+  index,
+  value,
+  addNewInput,
+  removeInput,
+  disabled,
+  editNode,
+  addIcon,
+  componentName,
+}: {
+  index: number;
+  value: string[];
+  addNewInput: (e) => void;
+  removeInput: (index: number, e: React.MouseEvent<HTMLDivElement>) => void;
+  disabled: boolean;
+  editNode: boolean;
+  addIcon: boolean;
+  componentName: string;
+}) => {
+  return (
+    <>
+      <div
+        onClick={
+          (index === 0 && value.length <= 1) || addIcon
+            ? addNewInput
+            : (e) => removeInput(index, e)
+        }
+        className={cn(
+          "hit-area-icon group flex items-center justify-center text-center",
+          disabled
+            ? "pointer-events-none bg-background hover:bg-background"
+            : "",
+          (index === 0 && value.length <= 1) || addIcon
+            ? "bg-background hover:bg-muted"
+            : "hover:bg-smooth-red",
+        )}
+      >
+        <Button
+          unstyled
+          size="icon"
+          className={cn(
+            "hit-area-icon flex items-center justify-center",
+            getButtonClassName(disabled),
+          )}
+          data-testid={getTestId(
+            (index === 0 && value.length <= 1) || addIcon ? "plus" : "minus",
+            index,
+            editNode,
+            componentName,
+          )}
+          disabled={disabled}
+        >
+          <IconComponent
+            name={
+              (index === 0 && value.length <= 1) || addIcon ? "Plus" : "Trash2"
+            }
+            className={cn(
+              "icon-size justify-self-center text-muted-foreground",
+              !disabled && "hover:cursor-pointer hover:text-foreground",
+              (index === 0 && value.length <= 1) || addIcon
+                ? "group-hover:text-foreground"
+                : "group-hover:text-destructive",
+            )}
+            strokeWidth={ICON_STROKE_WIDTH}
+          />
+        </Button>
+      </div>
+    </>
+  );
+};

src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-class-name.ts

@@ -0,0 +1,4 @@
+import { classNames } from "@/utils/utils";
+
+export const getButtonClassName = (disabled: boolean) =>
+  classNames(disabled ? "text-hard-zinc" : "text-placeholder-foreground");

src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-test-id.ts

@@ -0,0 +1,7 @@
+export const getTestId = (
+  type: string,
+  index: number,
+  editNode: boolean,
+  componentName: string,
+) =>
+  `input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;

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

@@ -1,13 +1,11 @@
 import { useEffect, useRef } from "react";
 
-import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import _ from "lodash";
 import { classNames, cn } from "../../../../../utils/utils";
-import IconComponent from "../../../../common/genericIconComponent";
-import { Button } from "../../../../ui/button";
 import { Input } from "../../../../ui/input";
 import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
 import { InputListComponentType, InputProps } from "../../types";
+import { ButtonInputList } from "./components/button-input-list";
 
 export default function InputListComponent({
   value = [""],
@@ -52,12 +50,6 @@ export default function InputListComponent({
     handleOnNewValue({ value: newInputList });
   };
 
-  const getButtonClassName = () =>
-    classNames(disabled ? "text-hard-zinc" : "text-placeholder-foreground");
-
-  const getTestId = (type, index) =>
-    `input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
-
   return (
     <div
       className={classNames(
@@ -76,91 +68,34 @@ export default function InputListComponent({
               editNode ? "input-edit-node" : "",
               disabled ? "disabled-state" : "",
               "peer relative",
-              index === 0 && value.length > 1 && "pr-7 focus:pr-3",
+              index === 0 && value.length > 1 && "w-3/4 pr-7 focus:pr-3",
             )}
             placeholder={getPlaceholder(disabled, placeholder)}
             onChange={(event) => handleInputChange(index, event.target.value)}
             data-testid={`${id}_${index}`}
           />
           {index === 0 && value.length > 1 && (
-            <div className="absolute right-[65px] flex items-center peer-focus:pointer-events-none peer-focus:hidden">
+            <ButtonInputList
-              <div
+              index={index}
-                onClick={addNewInput}
+              value={value}
-                className={cn(
+              addNewInput={addNewInput}
-                  "hit-area-icon group flex !h-9 items-center justify-center text-center",
+              removeInput={removeInput}
-                  disabled
-                    ? "pointer-events-none bg-background hover:bg-background"
-                    : "",
-                  index === 0
-                    ? "bg-background hover:bg-muted"
-                    : "hover:bg-smooth-red",
-                )}
-              >
-                <Button
-                  unstyled
-                  size="icon"
-                  className={cn(
-                    "hit-area-icon flex items-center justify-center",
-                    getButtonClassName(),
-                  )}
-                  data-testid={getTestId("plus", index)}
               disabled={disabled}
-                >
+              editNode={editNode}
-                  <IconComponent
+              addIcon
-                    name={"Plus"}
+              componentName={componentName || ""}
-                    className={cn(
-                      "icon-size justify-self-center text-muted-foreground",
-                      !disabled && "hover:cursor-pointer hover:text-foreground",
-                      "group-hover:text-foreground",
-                    )}
-                    strokeWidth={ICON_STROKE_WIDTH}
             />
-                </Button>
-              </div>
-            </div>
-          )}
-          <div
-            onClick={
-              index === 0 && value.length <= 1
-                ? addNewInput
-                : (e) => removeInput(index, e)
-            }
-            className={cn(
-              "hit-area-icon group flex items-center justify-center text-center",
-              disabled
-                ? "pointer-events-none bg-background hover:bg-background"
-                : "",
-              index === 0 && value.length <= 1
-                ? "bg-background hover:bg-muted"
-                : "hover:bg-smooth-red",
-            )}
-          >
-            <Button
-              unstyled
-              size="icon"
-              className={cn(
-                "hit-area-icon flex items-center justify-center",
-                getButtonClassName(),
-              )}
-              data-testid={getTestId(
-                index === 0 && value.length <= 1 ? "plus" : "minus",
-                index,
           )}
+          <ButtonInputList
+            index={index}
+            value={value}
+            addNewInput={addNewInput}
+            removeInput={removeInput}
             disabled={disabled}
-            >
+            editNode={editNode}
-              <IconComponent
+            addIcon={false}
-                name={index === 0 && value.length <= 1 ? "Plus" : "Trash2"}
+            componentName={componentName || ""}
-                className={cn(
-                  "icon-size justify-self-center text-muted-foreground",
-                  !disabled && "hover:cursor-pointer hover:text-foreground",
-                  index === 0 && value.length <= 1
-                    ? "group-hover:text-foreground"
-                    : "group-hover:text-destructive",
-                )}
-                strokeWidth={ICON_STROKE_WIDTH}
           />
-            </Button>
-          </div>
         </div>
       ))}
     </div>