Remove react-resizable dependency from UI (#62226)

Signed-off-by: Guan-Ming (Wesley) Chiu <105915352+guan404ming@users.noreply.github.com>

Author: guan404ming

airflow-core/src/airflow/ui/package.json

@@ -62,7 +62,6 @@
     "react-innertext": "^1.1.5",
     "react-json-view": "^1.21.3",
     "react-markdown": "^9.1.0",
-    "react-resizable": "^3.0.5",
     "react-resizable-panels": "^3.0.6",
     "react-router-dom": "^7.12.0",
     "react-syntax-highlighter": "^15.6.1",
@@ -85,7 +84,6 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@types/react-resizable": "^3.0.8",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",

airflow-core/src/airflow/ui/pnpm-lock.yaml

@@ -17,26 +17,9 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
-import { forwardRef } from "react";
 import type { PropsWithChildren } from "react";
-import { ResizableBox } from "react-resizable";
-import "react-resizable/css/styles.css";
-
-import { usePersistentResizableState } from "src/utils/usePersistentResizableState";
-
-const ResizeHandle = forwardRef<HTMLDivElement>((props, ref) => (
-  <Box
-    background="linear-gradient(-45deg, transparent 6px, #ccc 6px, #ccc 8px, transparent 8px, transparent 12px, #ccc 12px, #ccc 14px, transparent 14px)"
-    bottom={0}
-    cursor="se-resize"
-    height={5}
-    position="absolute"
-    ref={ref}
-    right={0}
-    width={5}
-    {...props}
-  />
-));
+import { useEffect, useRef } from "react";
+import { useLocalStorage } from "usehooks-ts";
 
 type ResizableWrapperProps = {
   readonly defaultSize?: { height: number; width: number };
@@ -55,28 +38,56 @@ export const ResizableWrapper = ({
   maxConstraints = MAX_SIZE,
   storageKey,
 }: ResizableWrapperProps) => {
-  const { handleResize, handleResizeStop, size } = usePersistentResizableState(storageKey, defaultSize);
+  const ref = useRef<HTMLDivElement>(null);
+  const [storedSize, setStoredSize] = useLocalStorage(storageKey, defaultSize);
+
+  useEffect(() => {
+    const el = ref.current;
+
+    if (!el) {
+      return undefined;
+    }
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height, width } = entry.contentRect;
+
+        if (width > 0 && height > 0) {
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(() => {
+            setStoredSize({ height: Math.round(height), width: Math.round(width) });
+          }, 300);
+        }
+      }
+    });
+
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [setStoredSize]);
 
   return (
-    <ResizableBox
-      handle={<ResizeHandle />}
-      height={size.height}
-      maxConstraints={maxConstraints}
-      minConstraints={[DEFAULT_SIZE.width, DEFAULT_SIZE.height]}
-      onResize={handleResize}
-      onResizeStop={handleResizeStop}
-      resizeHandles={["se"]}
-      style={{
-        backgroundColor: "inherit",
-        borderRadius: "inherit",
+    <Box
+      css={{
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        position: "relative",
+        resize: "both",
       }}
-      width={size.width}
+      height={`${storedSize.height}px`}
+      maxHeight={`${maxConstraints[1]}px`}
+      maxWidth={`${maxConstraints[0]}px`}
+      minHeight={`${DEFAULT_SIZE.height}px`}
+      minWidth={`${DEFAULT_SIZE.width}px`}
+      ref={ref}
+      width={`${storedSize.width}px`}
     >
-      <div>{children}</div>
-    </ResizableBox>
+      {children}
+    </Box>
   );
 };