add wrappers around the resizable components

Author: dantovska

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,7 @@
+import React from 'react'
+
+import { PanelGroup, PanelGroupProps } from 'react-resizable-panels'
+
+const ResizableContainer = (props: PanelGroupProps) => <PanelGroup {...props} />
+
+export default ResizableContainer

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

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import {
+  PanelResizeHandle,
+  PanelResizeHandleProps,
+} from 'react-resizable-panels'
+
+import styles from './styles.module.scss'
+
+const ResizablePanelHandle = (props: PanelResizeHandleProps) => (
+  <PanelResizeHandle className={styles.handle} {...props} />
+)
+
+export default ResizablePanelHandle

redisinsight/ui/src/components/base/layout/resize/handle/styles.module.scss

@@ -0,0 +1,3 @@
+.handle {
+  width: 16px;
+}

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/pages/browser/BrowserPage.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
 import { EuiButton } from '@elastic/eui'
 
 import { isNumber } from 'lodash'
@@ -44,6 +43,7 @@ import {
 import OnboardingStartPopover from 'uiSrc/pages/browser/components/onboarding-start-popover'
 import { sidePanelsSelector } from 'uiSrc/slices/panels/sidePanels'
 import { useStateWithContext } from 'uiSrc/services/hooks'
+import { ResizableContainer, ResizablePanel, ResizablePanelHandle } from 'uiSrc/components/base/layout'
 import BrowserSearchPanel from './components/browser-search-panel'
 import BrowserLeftPanel from './components/browser-left-panel'
 import BrowserRightPanel from './components/browser-right-panel'
@@ -306,8 +306,8 @@ const BrowserPage = () => {
         />
       </div>
       <div className={cx(styles.main)}>
-        <PanelGroup className={styles.panelGroup} direction="horizontal" onLayout={onPanelWidthChange}>
-          <Panel
+        <ResizableContainer className={styles.resizableContainer} direction="horizontal" onLayout={onPanelWidthChange}>
+          <ResizablePanel
             defaultSize={sizes && sizes[0] ? sizes[0] : 50}
             minSize={40}
             id={firstPanelId}
@@ -321,11 +321,11 @@ const BrowserPage = () => {
               removeSelectedKey={handleRemoveSelectedKey}
               handleAddKeyPanel={handleAddKeyPanel}
             />
-          </Panel>
+          </ResizablePanel>
           {!arePanelsCollapsed && !isBrowserFullScreen && (
-            <PanelResizeHandle className={styles.panelSeparator} />
+            <ResizablePanelHandle />
           )}
-          <Panel
+          <ResizablePanel
             defaultSize={sizes && sizes[1] ? sizes[1] : 50}
             minSize={40}
             id={secondPanelId}
@@ -346,8 +346,8 @@ const BrowserPage = () => {
               handleBulkActionsPanel={handleBulkActionsPanel}
               closeRightPanels={closeRightPanels}
             />
-          </Panel>
-        </PanelGroup>
+          </ResizablePanel>
+        </ResizableContainer>
       </div>
       <OnboardingStartPopover />
     </div >

redisinsight/ui/src/pages/browser/styles.module.scss

@@ -74,21 +74,15 @@ $breakpoint-to-hide-resize-panel: 1280px;
   }
 }
 
-.panelGroup {
+.resizableContainer {
   position: relative;
 
-  .panel {
-    .noVisible{
-      visibility: hidden;
-    }
-
-    .fullWidth {
-      width: 100% !important;
-      min-width: 100% !important;
-    }
+  .noVisible{
+    visibility: hidden;
   }
 
-  .panelSeparator {
-    width: 16px;
+  .fullWidth {
+    width: 100% !important;
+    min-width: 100% !important;
   }
 }