RI-7006: Replace resize related components (#4574)

* Replace EUI panel with another libs resizable panel.
* change browser panel sizes by the new array model instead of the key value object
* add wrappers around the resizable components
* replace the workbench view - query and result panel section
* replace panels in instance page template
* finish the handle design
* create and replace the ResizeObserver everywhere
* moved ImperativePanelGroupHandle import in resize components

Author: dantovska

jest.config.cjs

@@ -26,6 +26,8 @@ module.exports = {
     '^uuid$': require.resolve('uuid'),
     msgpackr: require.resolve('msgpackr'),
     'brotli-dec-wasm': '<rootDir>/redisinsight/__mocks__/brotli-dec-wasm.js',
+    'react-resizable-panels':
+      '<rootDir>/redisinsight/__mocks__/react-resizable-panels.js',
   },
   setupFiles: [
     'construct-style-sheets-polyfill',

package.json

@@ -279,6 +279,7 @@
     "react-jsx-parser": "^1.28.4",
     "react-monaco-editor": "^0.55.0",
     "react-redux": "^7.2.2",
+    "react-resizable-panels": "^3.0.2",
     "react-rnd": "^10.3.5",
     "react-router-dom": "^5.3.4",
     "react-virtualized": "^9.22.2",

redisinsight/__mocks__/react-resizable-panels.js

@@ -0,0 +1,21 @@
+export const Panel = ({ children }) => children;
+export const PanelGroup = ({ children }) => children;
+export const PanelResizeHandle = () => 'MockPanelResizeHandle';
+
+// Mock utility functions and constants
+export const DATA_ATTRIBUTES = {};
+
+export const assert = jest.fn();
+export const disableGlobalCursorStyles = jest.fn();
+export const enableGlobalCursorStyles = jest.fn();
+export const getIntersectingRectangle = jest.fn();
+export const getPanelElement = jest.fn();
+export const getPanelElementsForGroup = jest.fn();
+export const getPanelGroupElement = jest.fn();
+export const getResizeHandleElement = jest.fn();
+export const getResizeHandleElementIndex = jest.fn();
+export const getResizeHandleElementsForGroup = jest.fn();
+export const getResizeHandlePanelIds = jest.fn();
+export const intersects = jest.fn();
+export const setNonce = jest.fn();
+export const usePanelGroupContext = jest.fn();

redisinsight/ui/src/components/base/layout/index.ts

@@ -1,4 +1,13 @@
 import HorizontalRule from './horizontal-rule/HorizontalRule'
 import LoadingContent from './loading-content/LoadingContent'
+import ResizableContainer from './resize/container/ResizableContainer'
+import ResizablePanel from './resize/panel/ResizablePanel'
+import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
 
-export { HorizontalRule, LoadingContent }
+export {
+  HorizontalRule,
+  LoadingContent,
+  ResizablePanel,
+  ResizableContainer,
+  ResizablePanelHandle,
+}

redisinsight/ui/src/components/base/layout/resize/container/ResizableContainer.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react'
+
+import {
+  ImperativePanelGroupHandle,
+  PanelGroup,
+  PanelGroupProps,
+} from 'react-resizable-panels'
+
+const ResizableContainer = forwardRef<
+  ImperativePanelGroupHandle,
+  PanelGroupProps
+>((props, ref) => <PanelGroup ref={ref} {...props} />)
+
+export default ResizableContainer

redisinsight/ui/src/components/base/layout/resize/handle/ResizablePanelHandle.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {
+  HandleContainer,
+  Line,
+  ResizablePanelHandleProps,
+  StyledPanelResizeHandle,
+} from './resizable-panel-handle.styles'
+
+const ResizablePanelHandle = ({
+  className,
+  direction = 'vertical',
+  ...rest
+}: ResizablePanelHandleProps) => (
+  <StyledPanelResizeHandle
+    $direction={direction}
+    className={className}
+    {...rest}
+  >
+    <HandleContainer $direction={direction}>
+      <Line />
+      <Line />
+    </HandleContainer>
+  </StyledPanelResizeHandle>
+)
+
+export default ResizablePanelHandle

redisinsight/ui/src/components/base/layout/resize/handle/resizable-panel-handle.styles.ts

@@ -0,0 +1,55 @@
+import {
+  PanelResizeHandle,
+  PanelResizeHandleProps,
+} from 'react-resizable-panels'
+import styled, { css } from 'styled-components'
+
+export interface ResizablePanelHandleProps extends PanelResizeHandleProps {
+  direction?: 'horizontal' | 'vertical'
+}
+
+export const StyledPanelResizeHandle = styled(PanelResizeHandle)<{
+  $direction: 'horizontal' | 'vertical'
+}>`
+  ${({ $direction }) =>
+    $direction === 'vertical'
+      ? css`
+          width: 16px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        `
+      : css`
+          height: 16px;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+        `}
+`
+
+export const HandleContainer = styled.div<{
+  $direction: 'horizontal' | 'vertical'
+  children?: React.ReactNode
+}>`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+
+  ${({ $direction }) =>
+    $direction === 'vertical' &&
+    css`
+      transform: rotate(90deg);
+    `}
+`
+
+export const Line = styled.div`
+  width: 12px;
+  height: 1px;
+  background-color: #343741;
+`

redisinsight/ui/src/components/base/layout/resize/index.ts

@@ -0,0 +1 @@
+export { ImperativePanelGroupHandle } from 'react-resizable-panels'

redisinsight/ui/src/components/base/layout/resize/panel/ResizablePanel.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { Panel, PanelProps } from 'react-resizable-panels'
+
+const ResizablePanel = (props: PanelProps) => <Panel {...props} />
+
+export default ResizablePanel

redisinsight/ui/src/components/base/utils/index.ts

@@ -1 +1,2 @@
 export { OutsideClickDetector } from './OutsideClickDetector'
+export { RIResizeObserver } from './resize-observer/ResizeObserver'