From 8f68222b15bd7486b052e21a4edc349e374ac423 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 27 Nov 2024 17:36:30 -0300
Subject: [PATCH] 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
---
 .../components/inputListComponent/index.tsx   | 60 +++++++++++++++++--
 .../core/unit/codeAreaModalComponent.spec.ts  |  4 --
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx
index 6984feab4..fd5d6fdb0 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx
+++ b/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",
                 )}
diff --git a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
index 09496259d..47a8e1339 100644
--- a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
+++ b/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();