feature: Add scroll detection for NodeDescription overflow and remove feature flag (#3676)

* feat: Add scroll detection for NodeDescription overflow

* style: update CSS to hide non-selected note nodes

* remove feature flag

* [autofix.ci] apply automated fixes

* refactor: update feature flags and test IDs

- Update ENABLE_MVPS flag to false in feature-flags.ts
- Update testId from "extended-disclosure" to "bundle-extended-disclosure" in extraSidebarComponent/index.tsx

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -3,7 +3,7 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import useFlowStore from "@/stores/flowStore";
 import { handleKeyDown } from "@/utils/reactflowUtils";
 import { cn } from "@/utils/utils";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Markdown from "react-markdown";
 
 export default function NodeDescription({
@@ -29,6 +29,27 @@ export default function NodeDescription({
   const [nodeDescription, setNodeDescription] = useState(description);
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const setNode = useFlowStore((state) => state.setNode);
+  const overflowRef = useRef<HTMLDivElement>(null);
+  const [hasScroll, sethasScroll] = useState(false);
+
+  useEffect(() => {
+    //timeout to wait for the dom to update
+    setTimeout(() => {
+      if (overflowRef.current) {
+        console.log(
+          overflowRef.current.clientHeight,
+          overflowRef.current.scrollHeight,
+        );
+        if (
+          overflowRef.current.clientHeight < overflowRef.current.scrollHeight
+        ) {
+          sethasScroll(true);
+        } else {
+          sethasScroll(false);
+        }
+      }
+    }, 200);
+  }, [inputDescription]);
 
   useEffect(() => {
     if (!selected) {
@@ -45,6 +66,7 @@ export default function NodeDescription({
       className={cn(
         "generic-node-desc",
         !inputDescription ? "overflow-auto" : "",
+        hasScroll ? "nowheel" : "",
       )}
     >
       {inputDescription ? (
@@ -109,6 +131,7 @@ export default function NodeDescription({
         </>
       ) : (
         <div
+          ref={overflowRef}
           className={cn(
             "nodoubleclick generic-node-desc-text h-full cursor-text word-break-break-word dark:text-note-placeholder",
             description === "" || !description ? "font-light italic" : "",

src/frontend/src/CustomNodes/NoteNode/index.tsx

@@ -33,7 +33,6 @@ function NoteNode({
       });
     }
   }, []);
-
   const MemoNoteToolbarComponent = useMemo(
     () => (
       <NodeToolbar>
@@ -69,7 +68,7 @@ function NoteNode({
         ref={nodeDiv}
         className={cn(
           "flex h-full w-full flex-col gap-3 rounded-md border border-b p-5 transition-all",
-          selected ? "" : "shadow-sm",
+          selected ? "" : "-z-50 shadow-sm",
         )}
       >
         <div className="flex h-fit w-full items-center align-middle">
@@ -92,7 +91,6 @@ function NoteNode({
             width: size.width,
             height: size.height,
           }}
-          className="nowheel overflow-auto"
         >
           <NodeDescription
             inputClassName="border-0 ring-transparent resize-none rounded-none shadow-none h-full w-full"

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

@@ -475,11 +475,11 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             <Background className="" />
             {!view && (
               <Controls className="fill-foreground stroke-foreground text-primary [&>button]:border-b-border [&>button]:bg-muted hover:[&>button]:bg-border">
-                {ENABLE_MVPS && (
                 <ControlButton
                   data-testid="add_note"
                   onClick={() => {
                     const wrapper = reactFlowWrapper.current!;
+                    const viewport = reactFlowInstance?.getViewport();
                     const x = wrapper.getBoundingClientRect().width / 2;
                     const y = wrapper.getBoundingClientRect().height / 2;
                     const nodePosition =
@@ -527,7 +527,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
                     </div>
                   </ShadTooltip>
                 </ControlButton>
-                )}
               </Controls>
             )}
             <SelectionMenu

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

@@ -316,7 +316,7 @@ export default function ExtraSidebar(): JSX.Element {
                 title: "Bundles",
                 Icon: nodeIconsLucide.unknown,
               }}
-              testId="extended-disclosure"
+              testId="bundle-extended-disclosure"
             >
               {Object.keys(dataFilter)
                 .sort(sortKeys)

src/frontend/src/style/classes.css

@@ -162,3 +162,7 @@ textarea[class^="ag-"]:focus {
 .react-flow__node.dragging * {
   cursor: grabbing !important;
 }
+
+.react-flow__node-noteNode:not(.selected){
+  z-index: -1 !important;
+}

src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts

@@ -3,10 +3,6 @@ import { expect, test } from "@playwright/test";
 import uaParser from "ua-parser-js";
 
 test("user should be able to interact with sticky notes", async ({ page }) => {
-  // prevent test from failing if feature flag is disabled
-  if (!ENABLE_MVPS) {
-    return;
-  }
   await page.goto("/");
   await page.waitForSelector('[data-testid="mainpage_title"]', {
     timeout: 30000,