fix: update handle display logic and improve popover layout in node components (#7244)

* ✨ (NodeInputField/index.tsx): Add support for displaying a refresh button based on the template configuration
🔧 (popover/index.tsx): Adjust the width of the input field in the popover to improve UI consistency

* 🐛 (NodeInputField/index.tsx): fix access to refresh_button property to prevent potential null pointer error

* ✨ (index.tsx): Add hasRefreshButton prop to InputComponent, InputGlobalComponent, and StrRenderComponent to enable refresh button functionality
📝 (index.tsx): Add hasRefreshButton prop to BaseInputProps type to ensure type safety and consistency across components and types

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -68,6 +68,10 @@ export default function NodeInputField({
     name,
   });
 
+  const hasRefreshButton = useMemo(() => {
+    return data.node?.template[name]?.refresh_button;
+  }, [data.node?.template, name]);
+
   const nodeInformationMetadata: NodeInfoType = useMemo(() => {
     return {
       flowId: currentFlow?.id ?? "",
@@ -89,7 +93,8 @@ export default function NodeInputField({
   const displayHandle =
     (!LANGFLOW_SUPPORTED_TYPES.has(type ?? "") ||
       (optionalHandle && optionalHandle.length > 0)) &&
-    !isToolMode;
+    !isToolMode &&
+    !hasRefreshButton;
 
   const isFlexView = FLEX_VIEW_TYPES.includes(type ?? "");
 

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx

@@ -185,6 +185,7 @@ const CustomInputPopover = ({
   popoverWidth,
   commandWidth,
   blockAddNewGlobalVariable,
+  hasRefreshButton,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const memoizedOptions = useMemo(() => new Set<string>(options), [options]);
@@ -254,8 +255,9 @@ const CustomInputPopover = ({
                   className={cn(
                     editNode && "text-xs",
                     nodeStyle
-                      ? "max-w-60 rounded-[3px] px-1 font-mono"
+                      ? "max-w-56 rounded-[3px] px-1 font-mono"
                       : "bg-muted",
+                    hasRefreshButton && "max-w-48",
                   )}
                 />
               </div>

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

@@ -42,6 +42,7 @@ export default function InputComponent({
   popoverWidth,
   commandWidth,
   blockAddNewGlobalVariable = false,
+  hasRefreshButton = false,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
@@ -155,6 +156,7 @@ export default function InputComponent({
               popoverWidth={popoverWidth}
               commandWidth={commandWidth}
               blockAddNewGlobalVariable={blockAddNewGlobalVariable}
+              hasRefreshButton={hasRefreshButton}
             />
           )}
         </>

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

@@ -5,7 +5,7 @@ import {
 import GeneralDeleteConfirmationModal from "@/shared/components/delete-confirmation-modal";
 import GeneralGlobalVariableModal from "@/shared/components/global-variable-modal";
 import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import DeleteConfirmationModal from "../../../../../modals/deleteConfirmationModal";
 import useAlertStore from "../../../../../stores/alertStore";
 import { cn } from "../../../../../utils/utils";
@@ -27,6 +27,7 @@ export default function InputGlobalComponent({
   editNode = false,
   placeholder,
   isToolMode = false,
+  hasRefreshButton = false,
 }: InputProps<string, InputGlobalComponentType>): JSX.Element {
   const { data: globalVariables } = useGetGlobalVariables();
   const unavailableFields = useGlobalVariablesStore(
@@ -115,6 +116,7 @@ export default function InputGlobalComponent({
         );
       }}
       isToolMode={isToolMode}
+      hasRefreshButton={hasRefreshButton}
     />
   );
 }

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

@@ -66,7 +66,7 @@ export function StrRenderComponent({
       <DropdownComponent
         {...baseInputProps}
         dialogInputs={templateData.dialog_inputs}
-        options={templateData.options}
+        options={templateData.options ?? []}
         optionsMetaData={templateData.options_metadata}
         combobox={templateData.combobox}
         name={templateData?.name!}

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

@@ -72,6 +72,7 @@ export function ParameterRenderComponent({
       isToolMode,
       nodeId,
       nodeInformationMetadata,
+      hasRefreshButton: templateData.refresh_button,
     };
 
     if (TEXT_FIELD_TYPES.includes(templateData.type ?? "")) {

src/frontend/src/components/core/parameterRenderComponent/types.ts

@@ -20,6 +20,7 @@ export type BaseInputProps<valueType = any> = {
   metadata?: any;
   nodeId?: string;
   nodeInformationMetadata?: NodeInfoType;
+  hasRefreshButton?: boolean;
 };
 
 // Generic type for composing input props

src/frontend/src/types/components/index.ts

@@ -49,6 +49,7 @@ export type InputComponentType = {
   popoverWidth?: string;
   commandWidth?: string;
   blockAddNewGlobalVariable?: boolean;
+  hasRefreshButton?: boolean;
 };
 export type DropDownComponent = {
   disabled?: boolean;