From febae4b589ad89be025a0e4054f05c2cd0442013 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 10 Jan 2025 15:29:00 -0300
Subject: [PATCH] feat: standardize node output icons with TextSearch and
 Chevrons (#5600)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (NodeInputField): Update styling to include padding-bottom when lastInput is true for better UI appearance
📝 (NodeOutputfield): Import TextSearch component from lucide-react library for future use
🔧 (RenderInputParameters): Simplify logic for determining lastInput in NodeInputField component
🔧 (GenericNode): Change icon displayed on HiddenOutputsButton based on showHiddenOutputs state
🔧 (GenericNode): Update tooltip content to include the number of hiddenOutputs when toggling visibility
🔧 (sliderComponent): Remove unnecessary padding-bottom from SliderComponent for better layout
📝 (constants.ts): Update tooltip text for better clarity and consistency with action names

* ✨ (NodeOutputfield/index.tsx): Update import statement for IconComponent to include ForwardedIconComponent for better organization and clarity
🐛 (chatInputOutputUser-shard-0.spec.ts, chatInputOutputUser-shard-1.spec.ts): Fix references to 'ScanEye' icon to 'TextSearchIcon' for consistency and accuracy in tests
---
 .../GenericNode/components/NodeInputField/index.tsx      | 4 ++--
 .../GenericNode/components/NodeOutputfield/index.tsx     | 9 +++++++--
 .../components/RenderInputParameters/index.tsx           | 5 +----
 src/frontend/src/CustomNodes/GenericNode/index.tsx       | 8 ++++----
 .../components/sliderComponent/index.tsx                 | 2 +-
 src/frontend/src/constants/constants.ts                  | 4 ++--
 .../core/features/chatInputOutputUser-shard-0.spec.ts    | 4 ++--
 .../integrations/chatInputOutputUser-shard-1.spec.ts     | 4 ++--
 8 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
index ad5cc66f5..a1d1f977b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
@@ -108,8 +108,8 @@ export default function NodeInputField({
     <div
       ref={ref}
       className={cn(
-        "relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
-        lastInput ? "rounded-b-[0.69rem]" : "",
+        "relative flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
+        lastInput ? "rounded-b-[0.69rem] pb-5" : "",
         isToolMode && "bg-primary/10",
         (name === "code" && type === "code") || (name.includes("code") && proxy)
           ? "hidden"
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index 4e9ad0c03..3f250ebe5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -1,8 +1,11 @@
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import { useUpdateNodeInternals } from "@xyflow/react";
 import { cloneDeep } from "lodash";
+import { TextSearch } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { default as IconComponent } from "../../../../components/common/genericIconComponent";
+import ForwardedIconComponent, {
+  default as IconComponent,
+} from "../../../../components/common/genericIconComponent";
 import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
 import useFlowStore from "../../../../stores/flowStore";
@@ -113,7 +116,9 @@ const InspectButton = memo(
       unstyled
       onClick={onClick}
     >
-      <ScanEyeIcon
+      <IconComponent
+        name="TextSearchIcon"
+        strokeWidth={ICON_STROKE_WIDTH}
         className={cn(
           "icon-size",
           isToolMode
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx
index 2a0844f0b..c0ab05610 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx
@@ -87,10 +87,7 @@ const RenderInputParameters = ({
 
       return (
         <NodeInputField
-          lastInput={
-            idx === templateFields.length - 1 &&
-            !(shownOutputs.length > 0 || showHiddenOutputs)
-          }
+          lastInput={!(shownOutputs.length > 0 || showHiddenOutputs)}
           key={memoizedKey}
           data={data}
           colors={memoizedColor.colors}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 40bb9ebd7..dc3af464a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -48,11 +48,11 @@ const HiddenOutputsButton = memo(
   }) => (
     <Button
       unstyled
-      className="group flex h-6 w-6 items-center justify-center rounded-full border bg-background hover:border-foreground hover:text-foreground"
+      className="group m-auto h-[1.75rem] w-[1.75rem] place-items-center items-center rounded-full border bg-muted hover:text-foreground"
       onClick={onClick}
     >
       <ForwardedIconComponent
-        name={showHiddenOutputs ? "EyeOff" : "Eye"}
+        name={showHiddenOutputs ? "ChevronsDownUp" : "ChevronsUpDown"}
         strokeWidth={1.5}
         className="h-4 w-4 text-placeholder-foreground group-hover:text-foreground"
       />
@@ -455,8 +455,8 @@ function GenericNode({
                 <ShadTooltip
                   content={
                     showHiddenOutputs
-                      ? TOOLTIP_HIDDEN_OUTPUTS
-                      : TOOLTIP_OPEN_HIDDEN_OUTPUTS
+                      ? `${TOOLTIP_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
+                      : `${TOOLTIP_OPEN_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
                   }
                 >
                   <div
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
index 21d90940a..bd79556ee 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
@@ -198,7 +198,7 @@ export default function SliderComponent({
   const ringClassInputClass = "ring-[1px] ring-slider-input-border";
 
   return (
-    <div className="w-full rounded-lg pb-2">
+    <div className="w-full rounded-lg">
       <Case condition={!sliderButtons}>
         <div className="noflow nowheel nopan nodelete nodrag flex items-center justify-end">
           <div
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index fc3fb2360..fccce3ccb 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -686,8 +686,8 @@ export const TOOLTIP_OUTDATED_NODE =
 
 export const CHAT_SECOND_INITIAL_TEXT = "to inspect previous messages.";
 
-export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Show hidden outputs";
-export const TOOLTIP_HIDDEN_OUTPUTS = "Hide outputs";
+export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Expand hidden outputs";
+export const TOOLTIP_HIDDEN_OUTPUTS = "Collapse hidden outputs";
 
 export const ZERO_NOTIFICATIONS = "No new notifications";
 
diff --git a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
index 8ec21307e..6e4ebd8b2 100644
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@@ -80,11 +80,11 @@ test(
 
     await page.getByText("Close", { exact: true }).click();
 
-    await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
       timeout: 30000,
     });
 
-    await page.getByTestId("icon-ScanEye").nth(4).click();
+    await page.getByTestId("icon-TextSearchIcon").nth(4).click();
 
     await page.getByText("Restart").isHidden();
   },
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
index 614f442be..879689739 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
@@ -34,11 +34,11 @@ test(
       timeout: 15000,
     });
 
-    await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
       timeout: 30000,
     });
 
-    await page.getByTestId("icon-ScanEye").nth(4).click();
+    await page.getByTestId("icon-TextSearchIcon").nth(4).click();
 
     await page.getByText("Sender", { exact: true }).isVisible();
     await page.getByText("Type", { exact: true }).isVisible();