From 6ace83198b820e32c16210d28fd3041f9819bb01 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Sun, 10 Nov 2024 17:37:06 -0300 Subject: [PATCH] feat: Add 'isToolMode' prop for enhanced tool mode support (#4483) * fix: update getIconName function to support optional parameters and add tool mode handling * Add 'isToolMode' prop to components for tool mode support - Introduced 'isToolMode' prop across various components to enable tool mode functionality. - Updated icon logic in textAreaComponent to use 'getIconName' with 'isToolMode'. - Passed 'isToolMode' prop through parameterRenderComponent and related components. - Adjusted inputGlobalComponent and NodeInputField to handle 'isToolMode' for conditional rendering. --------- Co-authored-by: anovazzi1 --- .../GenericNode/components/NodeInputField/index.tsx | 1 + .../inputComponent/components/helpers/get-icon-name.ts | 10 ++++++---- src/frontend/src/components/inputComponent/index.tsx | 2 ++ .../components/inputGlobalComponent/index.tsx | 2 ++ .../components/strRenderComponent/index.tsx | 5 ++++- .../components/textAreaComponent/index.tsx | 4 +++- .../src/components/parameterRenderComponent/index.tsx | 3 +++ .../src/components/parameterRenderComponent/types.ts | 1 + .../src/customization/components/custom-parameter.tsx | 3 +++ src/frontend/src/types/components/index.ts | 1 + 10 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx index 2d017e96e..35e6c6473 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx @@ -184,6 +184,7 @@ export default function NodeInputField({ nodeClass={data.node!} disabled={disabled} placeholder={isToolMode ? DEFAULT_TOOLSET_PLACEHOLDER : undefined} + isToolMode={isToolMode} /> )} diff --git a/src/frontend/src/components/inputComponent/components/helpers/get-icon-name.ts b/src/frontend/src/components/inputComponent/components/helpers/get-icon-name.ts index 182348c31..95075f765 100644 --- a/src/frontend/src/components/inputComponent/components/helpers/get-icon-name.ts +++ b/src/frontend/src/components/inputComponent/components/helpers/get-icon-name.ts @@ -1,9 +1,11 @@ export const getIconName = ( - disabled: boolean, - selectedOption: string, - optionsIcon: string, - nodeStyle: boolean, + disabled?: boolean, + selectedOption?: string, + optionsIcon?: string, + nodeStyle?: boolean, + isToolMode?: boolean, ) => { + if (isToolMode) return "Hammer"; if (disabled) return "lock"; if (selectedOption && nodeStyle) return "GlobeOkIcon"; return optionsIcon; diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index a313d7c92..917e5f153 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -38,6 +38,7 @@ export default function InputComponent({ name, onChangeFolderName, nodeStyle, + isToolMode, }: InputComponentType): JSX.Element { const [pwdVisible, setPwdVisible] = useState(false); const refInput = useRef(null); @@ -183,6 +184,7 @@ export default function InputComponent({ selectedOption!, optionsIcon, nodeStyle!, + isToolMode!, )} className={cn( disabled ? "cursor-grab text-placeholder" : "cursor-pointer", diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx index 0fb0c7cd2..560382b18 100644 --- a/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx +++ b/src/frontend/src/components/parameterRenderComponent/components/inputGlobalComponent/index.tsx @@ -22,6 +22,7 @@ export default function InputGlobalComponent({ password, editNode = false, placeholder, + isToolMode = false, }: InputProps): JSX.Element { const setErrorData = useAlertStore((state) => state.setErrorData); @@ -137,6 +138,7 @@ export default function InputGlobalComponent({ { skipSnapshot }, ); }} + isToolMode={isToolMode} /> ); } diff --git a/src/frontend/src/components/parameterRenderComponent/components/strRenderComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/strRenderComponent/index.tsx index 4c10a5896..2c66af43f 100644 --- a/src/frontend/src/components/parameterRenderComponent/components/strRenderComponent/index.tsx +++ b/src/frontend/src/components/parameterRenderComponent/components/strRenderComponent/index.tsx @@ -9,7 +9,8 @@ export function StrRenderComponent({ placeholder, ...baseInputProps }: InputProps) { - const { handleOnNewValue, id, disabled, editNode, value } = baseInputProps; + const { handleOnNewValue, id, disabled, editNode, value, isToolMode } = + baseInputProps; if (!templateData.options) { return templateData.multiline ? ( @@ -25,6 +26,7 @@ export function StrRenderComponent({ } }} id={`textarea_${id}`} + isToolMode={isToolMode} /> ) : ( ); } diff --git a/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx index 5996c553c..7b616d4ff 100644 --- a/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx @@ -1,3 +1,4 @@ +import { getIconName } from "@/components/inputComponent/components/helpers/get-icon-name"; import { GRADIENT_CLASS } from "@/constants/constants"; import ComponentTextModal from "@/modals/textAreaModal"; import { useRef, useState } from "react"; @@ -59,6 +60,7 @@ export default function TextAreaComponent({ updateVisibility, password, placeholder, + isToolMode = false, }: InputProps): JSX.Element { const inputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); @@ -106,7 +108,7 @@ export default function TextAreaComponent({ = { handleNodeClass?: (value: any, code?: string, type?: string) => void; readonly?: boolean; placeholder?: string; + isToolMode?: boolean; }; // Generic type for composing input props diff --git a/src/frontend/src/customization/components/custom-parameter.tsx b/src/frontend/src/customization/components/custom-parameter.tsx index 8e813fb9e..e5474094d 100644 --- a/src/frontend/src/customization/components/custom-parameter.tsx +++ b/src/frontend/src/customization/components/custom-parameter.tsx @@ -14,6 +14,7 @@ export function CustomParameterComponent({ nodeClass, disabled, placeholder, + isToolMode, }: { handleOnNewValue: handleOnNewValueType; name: string; @@ -25,6 +26,7 @@ export function CustomParameterComponent({ nodeClass: APIClassType; disabled: boolean; placeholder?: string; + isToolMode?: boolean; }) { return ( ); } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 7f0c07254..20cfcc2a5 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -40,6 +40,7 @@ export type InputComponentType = { isObjectOption?: boolean; onChangeFolderName?: (e: any) => void; nodeStyle?: boolean; + isToolMode?: boolean; }; export type DropDownComponent = { disabled?: boolean;