RI-7560: fix bottom group panel movement when expand / collapse (#5012)

* refactor the panel sizing logic to avoid movement on the bottom group section when expanded/collapsed
* make key details border radius 8px to match the one of the key list on the left
* move the border inline styles to a styled component and use for both panels

Author: dantovska

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -5,6 +5,8 @@ import cx from 'classnames'
 
 import { isNumber } from 'lodash'
 import { useTheme } from '@redis-ui/styles'
+import styled from 'styled-components'
+
 import {
   formatLongName,
   getDbIndex,
@@ -66,6 +68,11 @@ const widthExplorePanel = 460
 export const firstPanelId = 'keys'
 export const secondPanelId = 'keyDetails'
 
+const BorderedResizablePanel = styled(ResizablePanel)`
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+`
+
 const isOneSideMode = (isInsightsOpen: boolean) =>
   globalThis.innerWidth <
   widthResponsiveSize + (isInsightsOpen ? widthExplorePanel : 0)
@@ -324,7 +331,7 @@ const BrowserPage = () => {
           direction="horizontal"
           onLayout={onPanelWidthChange}
         >
-          <ResizablePanel
+          <BorderedResizablePanel
             defaultSize={sizes && sizes[0] ? sizes[0] : 50}
             minSize={45}
             id={firstPanelId}
@@ -333,22 +340,18 @@ const BrowserPage = () => {
                 arePanelsCollapsed ||
                 (isBrowserFullScreen && !isRightPanelOpen),
             })}
-            style={{
-              border: `1px solid ${theme.semantic.color.border.neutral500}`,
-              borderRadius: `8px`,
-            }}
           >
             <BrowserLeftPanel
               selectedKey={selectedKey}
               selectKey={selectKey}
               removeSelectedKey={handleRemoveSelectedKey}
               handleAddKeyPanel={handleAddKeyPanel}
             />
-          </ResizablePanel>
+          </BorderedResizablePanel>
           {!arePanelsCollapsed && !isBrowserFullScreen && (
             <ResizablePanelHandle />
           )}
-          <ResizablePanel
+          <BorderedResizablePanel
             defaultSize={sizes && sizes[1] ? sizes[1] : 50}
             minSize={45}
             id={secondPanelId}
@@ -359,10 +362,6 @@ const BrowserPage = () => {
               [styles.keyDetails]:
                 arePanelsCollapsed || (isRightPanelOpen && isBrowserFullScreen),
             })}
-            style={{
-              border: `1px solid ${theme.semantic.color.border.neutral500}`,
-              borderRadius: `5px`,
-            }}
           >
             <BrowserRightPanel
               arePanelsCollapsed={arePanelsCollapsed}
@@ -375,7 +374,7 @@ const BrowserPage = () => {
               handleBulkActionsPanel={handleBulkActionsPanel}
               closeRightPanels={closeRightPanels}
             />
-          </ResizablePanel>
+          </BorderedResizablePanel>
         </ResizableContainer>
       </div>
       <OnboardingStartPopover />

redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
+import styled from 'styled-components'
 
 import InstanceHeader from 'uiSrc/components/instance-header'
 import { ExplorePanelTemplate } from 'uiSrc/templates'
@@ -27,6 +28,10 @@ export interface Props {
   children: React.ReactNode
 }
 
+const ButtonGroupResizablePanel = styled(ResizablePanel)`
+  flex-basis: 27px !important;
+`
+
 export const getDefaultSizes = () => {
   const storedSizes = localStorageService.get(
     BrowserStorageItem.cliResizableContainer,
@@ -35,17 +40,6 @@ export const getDefaultSizes = () => {
   return storedSizes && Array.isArray(storedSizes) ? storedSizes : [60, 40]
 }
 
-export const calculateMainPanelInitialSize = () => {
-  const total = window.innerHeight
-  const remaining = total - 26
-  return Math.floor((remaining / total) * 100)
-}
-
-export const calculateBottomGroupPanelInitialSize = () => {
-  const total = window.innerHeight
-  return Math.ceil((26 / total) * 100)
-}
-
 const roundUpSizes = (sizes: number[]) => [
   Math.floor(sizes[0]),
   Math.ceil(sizes[1]),
@@ -58,9 +52,6 @@ const InstancePageTemplate = (props: Props) => {
   const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
   const { isShowMonitor } = useSelector(monitorSelector)
 
-  const sizeMain: number = calculateMainPanelInitialSize()
-  const sizeBottomCollapsed: number = calculateBottomGroupPanelInitialSize()
-
   const ref = useRef<ImperativePanelGroupHandle>(null)
 
   useEffect(
@@ -92,7 +83,7 @@ const InstancePageTemplate = (props: Props) => {
     if (isShowBottomGroup) {
       ref.current?.setLayout(roundUpSizes(sizes))
     } else {
-      ref.current?.setLayout([sizeMain, sizeBottomCollapsed])
+      ref.current?.setLayout([100, 0])
     }
   }, [isShowBottomGroup])
 
@@ -111,7 +102,7 @@ const InstancePageTemplate = (props: Props) => {
         <ResizablePanel
           id={firstPanelId}
           minSize={7}
-          defaultSize={isShowBottomGroup ? sizes[0] : sizeMain}
+          defaultSize={isShowBottomGroup ? sizes[0] : 100}
           data-testid={firstPanelId}
         >
           <AppNavigationActionsProvider
@@ -129,15 +120,15 @@ const InstancePageTemplate = (props: Props) => {
           data-testid="resize-btn-browser-cli"
           style={{ display: isShowBottomGroup ? 'inherit' : 'none' }}
         />
-        <Spacer size="m" />
-        <ResizablePanel
+        {!isShowBottomGroup && <Spacer size="l" />}
+        <ButtonGroupResizablePanel
           id={secondPanelId}
-          defaultSize={isShowBottomGroup ? sizes[1] : sizeBottomCollapsed}
+          defaultSize={isShowBottomGroup ? sizes[1] : 0}
           minSize={isShowBottomGroup ? 20 : 0}
           data-testid={secondPanelId}
         >
           <BottomGroupComponents />
-        </ResizablePanel>
+        </ButtonGroupResizablePanel>
       </ResizableContainer>
     </>
   )