From 32a0707f9fb6c4d66a128af078e0e7a41dc2ea30 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 13 Dec 2024 19:06:47 -0300 Subject: [PATCH] fix: simplify input field handling in InputListComponent (#5255) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🔧 (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 | 1 + .../components/button-input-list.tsx | 77 +++++++++++++ .../helpers/get-class-name.ts | 4 + .../inputListComponent/helpers/get-test-id.ts | 7 ++ .../components/inputListComponent/index.tsx | 109 ++++-------------- 5 files changed, 111 insertions(+), 87 deletions(-) create mode 100644 src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/components/button-input-list.tsx create mode 100644 src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-class-name.ts create mode 100644 src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-test-id.ts diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index d715a8035..1cc1fcdd8 100644 --- a/src/frontend/package-lock.json +++ b/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": { diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/components/button-input-list.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/components/button-input-list.tsx new file mode 100644 index 000000000..6ed831f58 --- /dev/null +++ b/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) => void; + disabled: boolean; + editNode: boolean; + addIcon: boolean; + componentName: string; +}) => { + return ( + <> +
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", + )} + > + +
+ + ); +}; diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-class-name.ts b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-class-name.ts new file mode 100644 index 000000000..59bcecfee --- /dev/null +++ b/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"); diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-test-id.ts b/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/helpers/get-test-id.ts new file mode 100644 index 000000000..77c2a26f8 --- /dev/null +++ b/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}`; 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 fd5d6fdb0..c2a27895c 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/inputListComponent/index.tsx +++ b/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 (
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 && ( -
-
- -
-
- )} -
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", - )} - > - -
+ editNode={editNode} + addIcon + componentName={componentName || ""} + /> + )} +
))}