Fix: General UI Bugs (#2176)

## Overview
This pull request includes several bug fixes and improvements to the
project. Each commit addresses a specific issue or enhancement, ensuring
a more robust and user-friendly experience.

## Changes

1. **Fixed if/else that is not on useEffect**
- Corrected the conditional logic to ensure proper execution flow
outside of useEffect.

2. **Fixed badge size on Advanced modal**
- Adjusted the badge size in the Advanced modal for better visual
alignment and consistency.

3. **Changed icon of message**
- Updated the message icon to improve user interface clarity and
aesthetics.

4. **Fixed grabbing to override children**
- Resolved an issue where grabbing was interfering with child
components, ensuring proper functionality and user interaction.

5. **Fixed error color and padding**
- Enhanced the error display by adjusting color and padding, making
error messages more noticeable and readable.

6. **Fixed not being able to copy anywhere**
- Fixed a bug preventing users from copying text, enhancing user
convenience and accessibility.

7. **Fixed table header displaying Title Case instead of normal**
- Corrected the table header formatting to display in normal case,
improving readability and adherence to design guidelines.

## Testing
- Each fix has been tested to ensure the issues have been resolved
without introducing new bugs.
- User interface changes have been reviewed to confirm visual
improvements.

## Impact
- These changes improve the overall user experience, usability, and
interface consistency.
- The bug fixes address critical issues that enhance the functionality
and reliability of the application.

## Conclusion
These updates collectively contribute to a more polished and
user-friendly application. Please review the changes and provide
feedback or approval for merging.

Thank you!

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

@@ -121,7 +121,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -130,7 +130,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips
+    renderTooltips,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -139,7 +139,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -152,12 +152,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -196,10 +196,11 @@ export default function ParameterComponent({
     }
   }
 
-  // If optionalHandle is an empty list, then it is not an optional handle
+  useEffect(() => {
     if (optionalHandle && optionalHandle.length === 0) {
       optionalHandle = null;
     }
+  }, [optionalHandle]);
 
   useEffect(() => {
     renderTooltips();
@@ -239,7 +240,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -309,7 +310,7 @@ export default function ParameterComponent({
                         "h-5 w-5 rounded-md",
                         displayOutputPreview && !unknownOutput
                           ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
-                          : " cursor-not-allowed text-muted-foreground"
+                          : " cursor-not-allowed text-muted-foreground",
                       )}
                       name={"ScanEye"}
                     />
@@ -359,7 +360,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -13,7 +13,7 @@ export default function SingleAlert({
 
   return (
     <Transition
-      className="relative"
+      className="nocopy nowheel nopan nodelete nodrag noundo relative"
       show={show}
       appear={true}
       enter="transition-transform duration-500 ease-out"

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -58,7 +58,7 @@ export default function ChatView({
       //
       .filter(
         (output) =>
-          output.data.message || (!output.data.message && output.artifacts)
+          output.data.message || (!output.data.message && output.artifacts),
       )
       .map((output, index) => {
         try {
@@ -138,7 +138,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) {
     chat.message = message;
     updateFlowPool(chat.componentId, {
@@ -154,7 +154,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
-    setErrorData
+    setErrorData,
   );
 
   return (
@@ -204,7 +204,7 @@ export default function ChatView({
                   {CHAT_FIRST_INITIAL_TEXT}{" "}
                   <span>
                     <IconComponent
-                      name="MessageSquare"
+                      name="MessageSquareMore"
                       className="mx-1 inline h-5 w-5 animate-bounce "
                     />
                   </span>{" "}

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -191,11 +191,9 @@ export default function CodeAreaModal({
               (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
             }
           >
-            <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+            <div className="mt-5 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
-              <h1 className="text-lg text-destructive">
+              <h1 className="text-lg text-error">{error?.detail?.error}</h1>
-                {error?.detail?.error}
+              <div className="ml-2 mt-2 w-full text-sm text-destructive word-break-break-word">
-              </h1>
-              <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
                 <span className="w-full word-break-break-word">
                   {error?.detail?.traceback}
                 </span>

src/frontend/src/modals/editNodeModal/index.tsx

@@ -25,7 +25,7 @@ const EditNodeModal = forwardRef(
       //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
-    ref
+    ref,
   ) => {
     const myData = useRef(cloneDeep(data));
 
@@ -53,7 +53,7 @@ const EditNodeModal = forwardRef(
       handleOnNewValue,
       handleOnChangeDb,
       changeAdvanced,
-      open
+      open,
     );
 
     const [gridApi, setGridApi] = useState<GridApi | null>(null);
@@ -78,9 +78,11 @@ const EditNodeModal = forwardRef(
         </BaseModal.Trigger>
         <BaseModal.Header description={data.node?.description!}>
           <span className="pr-2">{data.type}</span>
-          <Badge variant={isDark ? "gray" : "secondary"}>
+          <div>
-            <span className="relative top-[0.6px]">ID: {data.id}</span>
+            <Badge size="sm" variant={isDark ? "gray" : "secondary"}>
+              ID: {data.id}
             </Badge>
+          </div>
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex h-full flex-col">
@@ -117,7 +119,7 @@ const EditNodeModal = forwardRef(
         />
       </BaseModal>
     );
-  }
+  },
 );
 
 export default EditNodeModal;

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -59,22 +59,21 @@ export default function Page({
   flow: FlowType;
   view?: boolean;
 }): JSX.Element {
-  const preventDefault = true;
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow
+    (state) => state.autoSaveCurrentFlow,
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance
+    (state) => state.setReactFlowInstance,
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -91,10 +90,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection
+    (state) => state.lastCopiedSelection,
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection
+    (state) => state.setLastCopiedSelection,
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -117,7 +116,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName()
+        getRandomName(),
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -125,8 +124,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id
+              (selectionNode) => selectionNode.id === oldNodes.id,
-            )
+            ),
         ),
         newGroupNode,
       ]);
@@ -136,8 +135,8 @@ export default function Page({
             !clonedSelection!.nodes.some(
               (selectionNode) =>
                 selectionNode.id === oldEdge.target ||
-                selectionNode.id === oldEdge.source
+                selectionNode.id === oldEdge.source,
-            )
+            ),
         ),
         ...newEdges,
       ]);
@@ -179,17 +178,17 @@ export default function Page({
   }, []);
 
   function handleUndo(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "noundo")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
-    if (!isWrappedWithClass(e, "noundo")) {
       undo();
     }
   }
 
   function handleRedo(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "noundo")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
-    if (!isWrappedWithClass(e, "noundo")) {
       redo();
     }
   }
@@ -213,40 +212,36 @@ export default function Page({
         {
           x: position.current.x,
           y: position.current.y,
-        }
+        },
       );
     }
   }
 
   function handleCopy(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "nocopy")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
-    if (
+      if (window.getSelection()?.toString().length === 0 && lastSelection) {
-      !isWrappedWithClass(e, "nocopy") &&
-      window.getSelection()?.toString().length === 0 &&
-      lastSelection
-    ) {
         setLastCopiedSelection(_.cloneDeep(lastSelection));
       }
     }
+  }
 
   function handleCut(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "nocopy")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
-    if (
+      if (window.getSelection()?.toString().length === 0 && lastSelection) {
-      !isWrappedWithClass(e, "nocopy") &&
-      window.getSelection()?.toString().length === 0 &&
-      lastSelection
-    ) {
         setLastCopiedSelection(_.cloneDeep(lastSelection), true);
       }
     }
+  }
 
   function handlePaste(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "nocopy")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       if (
-      !isWrappedWithClass(e, "nocopy") &&
         window.getSelection()?.toString().length === 0 &&
         lastCopiedSelection
       ) {
@@ -257,11 +252,12 @@ export default function Page({
         });
       }
     }
+  }
 
   function handleDelete(e: KeyboardEvent) {
+    if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
-    if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
       takeSnapshot();
       deleteNode(lastSelection.nodes.map((node) => node.id));
       deleteEdge(lastSelection.edges.map((edge) => edge.id));
@@ -277,27 +273,27 @@ export default function Page({
   const cutAction = useShortcutsStore((state) => state.cut);
   const pasteAction = useShortcutsStore((state) => state.paste);
   //@ts-ignore
-  useHotkeys(undoAction, handleUndo, { preventDefault });
+  useHotkeys(undoAction, handleUndo);
   //@ts-ignore
-  useHotkeys(redoAction, handleRedo, { preventDefault });
+  useHotkeys(redoAction, handleRedo);
   //@ts-ignore
-  useHotkeys(groupAction, handleGroup, { preventDefault });
+  useHotkeys(groupAction, handleGroup);
   //@ts-ignore
-  useHotkeys(duplicate, handleDuplicate, { preventDefault });
+  useHotkeys(duplicate, handleDuplicate);
   //@ts-ignore
-  useHotkeys(copyAction, handleCopy, { preventDefault });
+  useHotkeys(copyAction, handleCopy);
   //@ts-ignore
-  useHotkeys(cutAction, handleCut, { preventDefault });
+  useHotkeys(cutAction, handleCut);
   //@ts-ignore
-  useHotkeys(pasteAction, handlePaste, { preventDefault });
+  useHotkeys(pasteAction, handlePaste);
   //@ts-ignore
-  useHotkeys(deleteAction, handleDelete, { preventDefault });
+  useHotkeys(deleteAction, handleDelete);
   //@ts-ignore
-  useHotkeys("delete", handleDelete, { preventDefault });
+  useHotkeys("delete", handleDelete);
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
     );
   }, [templates, types]);
 
@@ -306,7 +302,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect]
+    [takeSnapshot, onConnect],
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -347,7 +343,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata")
+          event.dataTransfer.getData("nodedata"),
         );
 
         const newId = getNodeId(data.type);
@@ -363,7 +359,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY }
+          { x: event.clientX, y: event.clientY },
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -392,7 +388,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste]
+    [getNodeId, setNodes, takeSnapshot, paste],
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -408,7 +404,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges]
+    [setEdges],
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -441,7 +437,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    []
+    [],
   );
 
   const onPaneClick = useCallback((flow) => {

src/frontend/src/style/applies.css

@@ -411,7 +411,7 @@
   }
 
   .error-build-message {
-    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl;
+    @apply mt-6 w-96 rounded-md bg-error-background p-4 shadow-xl;
   }
   .error-build-message-circle {
     @apply alert-icon text-status-red;

src/frontend/src/style/classes.css

@@ -97,10 +97,6 @@ select:-webkit-autofill:focus {
   background-color: #141924 !important;
 }
 
-.grabbing {
+.react-flow__node.dragging * {
-  cursor: grabbing;
+  cursor: grabbing !important;
-}
-
-.react-flow__node {
-  cursor: grab;
 }

src/frontend/src/style/index.css

@@ -32,6 +32,7 @@
 
     --error-background: #fef2f2;
     --error-foreground: #991b1b;
+    --error: #991b1b;
 
     --success-background: #f0fdf4;
     --success-foreground: #14532d;
@@ -111,6 +112,7 @@
 
     --error-foreground: #fef2f2;
     --error-background: #450a0a;
+    --error: #991b1b;
 
     --info-foreground: #eff6ff;
     --info-background: #172554;

src/frontend/tailwind.config.js

@@ -64,8 +64,11 @@ module.exports = {
         "dark-blue": "var(--dark-blue)",
         "dark-gray": "var(--dark-gray)",
         "dark-red": "var(--dark-red)",
-        "error-background": "var(--error-background)",
+        error: {
-        "error-foreground": "var(--error-foreground)",
+          DEFAULT: "var(--error)",
+          background: "var(--error-background)",
+          foreground: "var(--error-foreground)",
+        },
         "high-dark-gray": "var(--high-dark-gray)",
         "high-indigo": "var(--high-indigo)",
         "high-light-gray": "var(--high-light-gray)",

src/frontend/tests/end-to-end/actionsMainPage.spec.ts

@@ -89,6 +89,11 @@ test("search components", async ({ page }) => {
   }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
   await page.getByText("Chat Input").first().click();
   await page.getByTestId("more-options-modal").click();
 
@@ -152,6 +157,11 @@ test("user should be able to download a flow or a component", async ({
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
 
@@ -224,6 +234,12 @@ test("user should be able to duplicate a flow or a component", async ({
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
 

src/frontend/tests/end-to-end/chatInputOutput.spec.ts

@@ -62,7 +62,7 @@ test("chat_io_teste", async ({ page }) => {
   // Click and hold on the first element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[10]/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[8]/button/div/div'
     )
     .hover();
   await page.mouse.down();
@@ -70,7 +70,7 @@ test("chat_io_teste", async ({ page }) => {
   // Move to the second element
   await page
     .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[4]/div/button/div/div'
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div/div'
     )
     .hover();
 

src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
 import { readFileSync } from "fs";
+import path from "path";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {
   if (!process.env.CI) {

src/frontend/tests/end-to-end/generalBugs.spec.ts

@@ -1,4 +1,6 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should interact with api request", async ({ page }) => {
   await page.goto("/");

src/frontend/tests/end-to-end/group.spec.ts

@@ -26,6 +26,10 @@ test.describe("group node test", () => {
       .click();
     await page.waitForTimeout(2000);
     await page.getByLabel("fit view").first().click();
+
+    await page.getByTestId("title-OpenAI").click();
+    await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
+    await page.getByTestId("title-Prompt").click({ modifiers: ["Control"] });
     await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
 
     await page.getByRole("button", { name: "Group" }).click();

src/frontend/tests/end-to-end/logs.spec.ts

@@ -50,13 +50,16 @@ test("should able to see and interact with logs", async ({ page }) => {
   await page.getByRole("gridcell").first().isVisible();
 
   await page.getByText("Messages", { exact: true }).click();
-  await page.getByText("Index").isVisible();
+  await page.getByText("index", { exact: true }).last().isVisible();
-  await page.getByText("Timestamp").isVisible();
+  await page.getByText("timestamp", { exact: true }).isVisible();
-  await page.getByText("Flow Id", { exact: true }).isVisible();
+  await page.getByText("flow_id", { exact: true }).isVisible();
-  await page.getByText("Source").isVisible();
+  await page.getByText("source", { exact: true }).isVisible();
-  await page.getByText("Target", { exact: true }).isVisible();
+  await page.getByText("target", { exact: true }).isVisible();
-  await page.getByText("Target Args", { exact: true }).isVisible();
+  await page.getByText("vertex_id", { exact: true }).isVisible();
-  await page.getByText("Status", { exact: true }).isVisible();
+  await page.getByText("status", { exact: true }).isVisible();
-  await page.getByText("Error", { exact: true }).isVisible();
+  await page.getByText("error", { exact: true }).isVisible();
+  await page.getByText("outputs", { exact: true }).isVisible();
+  await page.getByText("inputs", { exact: true }).isVisible();
+
   await page.getByRole("gridcell").first().isVisible();
 });