Refactor: improve inputListComponent to enable deletion of the first item (#4890)

* Refactor inputListComponent to improve enable deletion of the first item

* [autofix.ci] apply automated fixes

* Refactor codeAreaModalComponent.spec.ts to improve test reliability and remove unnecessary code

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import _ from "lodash";
@@ -23,6 +23,7 @@ export default function InputListComponent({
       handleOnNewValue({ value: [""] }, { skipSnapshot: true });
     }
   }, [disabled]);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // @TODO Recursive Character Text Splitter - the value might be in string format, whereas the InputListComponent specifically requires an array format. To ensure smooth operation and prevent potential errors, it's crucial that we handle the conversion from a string to an array with the string as its element.
   if (typeof value === "string") {
@@ -70,22 +71,66 @@ export default function InputListComponent({
             disabled={disabled}
             type="text"
             value={singleValue}
+            ref={index === 0 ? inputRef : null}
             className={cn(
               editNode ? "input-edit-node" : "",
               disabled ? "disabled-state" : "",
+              "peer relative",
+              index === 0 && value.length > 1 && "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">
+              <div
+                onClick={addNewInput}
+                className={cn(
+                  "hit-area-icon group flex !h-9 items-center justify-center text-center",
+                  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}
+                >
+                  <IconComponent
+                    name={"Plus"}
+                    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 ? addNewInput : (e) => removeInput(index, e)}
+            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
+              index === 0 && value.length <= 1
                 ? "bg-background hover:bg-muted"
                 : "hover:bg-smooth-red",
             )}
@@ -97,15 +142,18 @@ export default function InputListComponent({
                 "hit-area-icon flex items-center justify-center",
                 getButtonClassName(),
               )}
-              data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
+              data-testid={getTestId(
+                index === 0 && value.length <= 1 ? "plus" : "minus",
+                index,
+              )}
               disabled={disabled}
             >
               <IconComponent
-                name={index === 0 ? "Plus" : "Trash2"}
+                name={index === 0 && value.length <= 1 ? "Plus" : "Trash2"}
                 className={cn(
                   "icon-size justify-self-center text-muted-foreground",
                   !disabled && "hover:cursor-pointer hover:text-foreground",
-                  index === 0
+                  index === 0 && value.length <= 1
                     ? "group-hover:text-foreground"
                     : "group-hover:text-destructive",
                 )}

src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts

@@ -56,12 +56,8 @@ test(
     await page
       .getByTestId("prototypesPython Function")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
-    await page.mouse.up();
-    await page.mouse.down();
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
     await page.getByTestId("div-generic-node").click();
 
     await page.getByTestId("code-button-modal").click();