Fix chatbot flyout cannot be resized beyond the window size (opensearch-project#9735)

* Fix chatbot flyout resize button displays out of window

Signed-off-by: Owen Wang <[email protected]>

* Changeset file for PR opensearch-project#9735 created/updated

* Add debouncing and add check when initial load chatbot size

Signed-off-by: Owen Wang <[email protected]>

---------

Signed-off-by: Owen Wang <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: 2 people

changelogs/fragments/9735.yml

@@ -0,0 +1,2 @@
+fix:
+- Chatbot flyout cannot be resized beyond the window size ([#9735](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9735))

src/core/public/overlays/sidecar/components/resizable_button.test.tsx

@@ -5,9 +5,18 @@
 
 import React from 'react';
 
-import { ResizableButton, MIN_SIDECAR_SIZE } from './resizable_button';
-import { shallow } from 'enzyme';
+import { ResizableButton } from './resizable_button';
+import { mount, shallow } from 'enzyme';
 import { SIDECAR_DOCKED_MODE } from '../sidecar_service';
+import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/dom';
+import { MIN_SIDECAR_SIZE } from '../helper';
+
+const originalAddEventListener = window.addEventListener;
+
+const restoreWindowEvents = () => {
+  window.addEventListener = originalAddEventListener;
+};
 
 const storeWindowEvents = () => {
   const map: Record<string, Function> = {};
@@ -47,6 +56,17 @@ test('it should be vertical when docked mode is takeover', () => {
 test('it should emit onResize with new flyout size when docked right and drag and horizontal', () => {
   const windowEvents = storeWindowEvents();
 
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+
   const onResize = jest.fn();
   const newProps = { ...props, onResize };
   const component = shallow(<ResizableButton {...newProps} />);
@@ -63,6 +83,17 @@ test('it should emit onResize with new flyout size when docked right and drag an
 test('it should emit onResize with new flyout size when docked left and drag and horizontal', () => {
   const windowEvents = storeWindowEvents();
 
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+
   const onResize = jest.fn();
   const newProps = { ...props, onResize, dockedMode: SIDECAR_DOCKED_MODE.LEFT };
   const component = shallow(<ResizableButton {...newProps} />);
@@ -79,6 +110,17 @@ test('it should emit onResize with new flyout size when docked left and drag and
 test('it should emit onResize with new flyout size when drag and vertical', () => {
   const windowEvents = storeWindowEvents();
 
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 2000,
+  });
+
   const onResize = jest.fn();
   const newProps = { ...props, onResize, dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER };
   const component = shallow(<ResizableButton {...newProps} />);
@@ -94,6 +136,7 @@ test('it should emit onResize with new flyout size when drag and vertical', () =
 
 test('it should emit onResize with min size when drag if new size is below the minimum', () => {
   const windowEvents = storeWindowEvents();
+
   const onResize = jest.fn();
   const newProps = { ...props, onResize };
   const component = shallow(<ResizableButton {...newProps} />);
@@ -106,3 +149,111 @@ test('it should emit onResize with min size when drag if new size is below the m
   expect(onResize).toHaveBeenCalledWith(newSize);
   expect(component).toMatchSnapshot();
 });
+
+test('it should not call onResize when new size exceeds window bounds', () => {
+  const windowEvents = storeWindowEvents();
+  const onResize = jest.fn();
+
+  // Mock window dimensions
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 1000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1200,
+  });
+
+  // Test takeover mode with size exceeding window height
+  const takeoverProps = {
+    ...props,
+    onResize,
+    dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER,
+  };
+  const takeoverComponent = shallow(<ResizableButton {...takeoverProps} />);
+  const takeoverResizer = takeoverComponent.find(`[data-test-subj~="resizableButton"]`).first();
+
+  takeoverResizer.simulate('mousedown', { clientY: 0, pageX: 0, pageY: 0 });
+  let mouseMoveEvent = new MouseEvent('mousemove', {
+    clientY: -2000,
+    pageX: 0,
+    pageY: 0,
+  } as any);
+  windowEvents?.mousemove(mouseMoveEvent); // Exceeds window.innerHeight
+  windowEvents?.mouseup();
+
+  expect(onResize).not.toHaveBeenCalled();
+
+  // Test right mode with size exceeding window width
+  const rightProps = {
+    ...props,
+    onResize,
+    dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+  };
+  const rightComponent = shallow(<ResizableButton {...rightProps} />);
+  const rightResizer = rightComponent.find(`[data-test-subj~="resizableButton"]`).first();
+
+  rightResizer.simulate('mousedown', { clientX: 0, pageX: 0, pageY: 0 });
+  mouseMoveEvent = new MouseEvent('mousemove', { clientX: -2000, pageX: 0, pageY: 0 } as any);
+  windowEvents?.mousemove(mouseMoveEvent); // Exceeds window.innerWidth
+  windowEvents?.mouseup();
+
+  expect(onResize).not.toHaveBeenCalled();
+});
+
+test('it should handle window resize events correctly for different docked modes', async () => {
+  restoreWindowEvents();
+  const onResize = jest.fn();
+
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 1000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1200,
+  });
+
+  const takeoverProps = {
+    ...props,
+    onResize,
+    dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER,
+    flyoutSize: 800,
+  };
+  let component = mount(<ResizableButton {...takeoverProps} />);
+
+  await act(async () => {
+    Object.defineProperty(window, 'innerHeight', { value: 600 });
+    window.dispatchEvent(new Event('resize'));
+  });
+
+  await waitFor(() => {
+    // wait for debounce
+    expect(onResize).toHaveBeenCalledWith(600);
+  });
+  onResize.mockClear();
+
+  const rightProps = {
+    ...props,
+    onResize,
+    dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+    flyoutSize: 1000,
+  };
+  component = mount(<ResizableButton {...rightProps} />);
+
+  await act(async () => {
+    Object.defineProperty(window, 'innerWidth', { value: 800 });
+    window.dispatchEvent(new Event('resize'));
+  });
+
+  await waitFor(() => {
+    // wait for debounce
+    expect(onResize).toHaveBeenCalledWith(800);
+  });
+
+  component.unmount();
+});

src/core/public/overlays/sidecar/components/resizable_button.tsx

@@ -3,19 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import './resizable_button.scss';
-import { getPosition } from '../helper';
+import { getPosition, calculateNewPaddingSize, MIN_SIDECAR_SIZE } from '../helper';
 import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../sidecar_service';
+import { debounce } from '../../../../../core/public/utils';
 
 interface Props {
   onResize: (size: number) => void;
   flyoutSize: number;
   dockedMode: ISidecarConfig['dockedMode'] | undefined;
 }
 
-export const MIN_SIDECAR_SIZE = 350;
+const RESIZE_DEBOUNCE_DELAY = 50;
 
 export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) => {
   const isHorizontal = dockedMode !== SIDECAR_DOCKED_MODE.TAKEOVER;
@@ -29,6 +30,29 @@ export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) =>
   const initialFlyoutSize = useRef(flyoutSize);
   const setFocus = (e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.focus();
 
+  const currentFlyoutSize = useRef(flyoutSize);
+  currentFlyoutSize.current = flyoutSize;
+
+  useEffect(() => {
+    const debouncedResize = debounce(() => {
+      const currentSize = currentFlyoutSize.current;
+
+      if (currentSize > MIN_SIDECAR_SIZE) {
+        // Make sure flyout never below min size even if the window goes below the size
+        const newPaddingSize = calculateNewPaddingSize(dockedMode, currentSize);
+        if (currentSize > newPaddingSize) {
+          onResize(newPaddingSize);
+        }
+      }
+    }, RESIZE_DEBOUNCE_DELAY);
+
+    window.addEventListener('resize', debouncedResize);
+
+    return () => {
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, [dockedMode, onResize]);
+
   const onMouseDown = useCallback(
     (event: React.MouseEvent | React.TouchEvent) => {
       const onMouseUp = () => {
@@ -39,6 +63,17 @@ export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) =>
         window.removeEventListener('touchend', onMouseUp);
       };
       const onMouseMove = (e: MouseEvent | TouchEvent) => {
+        if (
+          e instanceof MouseEvent &&
+          (e.clientX < 0 ||
+            e.clientX > window.innerWidth ||
+            e.clientY < 0 ||
+            e.clientY > window.innerHeight)
+        ) {
+          // Stop resize calculation if the user mouse move out of window
+          return;
+        }
+
         let offset;
         if (dockedMode === SIDECAR_DOCKED_MODE.LEFT) {
           offset = getPosition(e, isHorizontal) - initialMouseXorY.current;

src/core/public/overlays/sidecar/helper.ts

@@ -11,6 +11,8 @@ function isMouseEvent(
   return typeof event === 'object' && 'pageX' in event && 'pageY' in event;
 }
 
+export const MIN_SIDECAR_SIZE = 350;
+
 export const getPosition = (
   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
   isHorizontal: boolean
@@ -44,3 +46,23 @@ export const getSidecarLeftNavStyle = (config: ISidecarConfig | undefined) => {
   }
   return {};
 };
+
+export const calculateNewPaddingSize = (
+  dockedMode: SIDECAR_DOCKED_MODE | undefined,
+  currentSize: number
+): number => {
+  let paddingSize = currentSize;
+  // Make sure flyout never below min size even if the window goes below the size
+  if (dockedMode === SIDECAR_DOCKED_MODE.TAKEOVER && currentSize > window.innerHeight) {
+    // Automatically reduce the height in full screen mode when resize the window
+    paddingSize = window.innerHeight;
+  } else if (
+    (dockedMode === SIDECAR_DOCKED_MODE.LEFT || dockedMode === SIDECAR_DOCKED_MODE.RIGHT) &&
+    currentSize > window.innerWidth
+  ) {
+    // Automatically reduce the width in left or right docked mode when resize the window
+    paddingSize = window.innerWidth;
+  }
+  // Make sure the padding size never goes below minimum size
+  return Math.max(paddingSize, MIN_SIDECAR_SIZE);
+};

src/core/public/overlays/sidecar/sidecar_service.tsx

@@ -12,6 +12,7 @@ import { I18nStart } from '../../i18n';
 import { MountPoint } from '../../types';
 import { OverlayRef } from '../types';
 import { Sidecar } from './components/sidecar';
+import { calculateNewPaddingSize } from './helper';
 /**
  * A SidecarRef is a reference to an opened sidecar panel. It offers methods to
  * close the sidecar panel again. If you open a sidecar panel you should make
@@ -133,7 +134,13 @@ export class SidecarService {
         // init
         (!sidecarConfig$.value && config.dockedMode && config.paddingSize)
       ) {
-        sidecarConfig$.next({ ...sidecarConfig$.value, ...config } as ISidecarConfig);
+        sidecarConfig$.next({
+          ...sidecarConfig$.value,
+          ...config,
+          ...(config.paddingSize
+            ? { paddingSize: calculateNewPaddingSize(config.dockedMode, config.paddingSize) }
+            : {}),
+        } as ISidecarConfig);
       }
     };