From bf1bfc187bcd7f9c8d99b11622ae473249bc9883 Mon Sep 17 00:00:00 2001
From: Chi-Sheng Liu <chishengliu@chishengliu.com>
Date: Tue, 26 Mar 2024 02:10:53 +0800
Subject: [PATCH] feat(panel): Resizable side panel

Resolves: flyteorg/flyte#5102
Signed-off-by: Chi-Sheng Liu <chishengliu@chishengliu.com>
---
 .../src/components/common/DetailsPanel.tsx    | 34 +++++++++++++++++--
 .../src/components/common/constants.ts        |  2 +-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/oss-console/src/components/common/DetailsPanel.tsx b/packages/oss-console/src/components/common/DetailsPanel.tsx
index 0a598aebe..8baf04419 100644
--- a/packages/oss-console/src/components/common/DetailsPanel.tsx
+++ b/packages/oss-console/src/components/common/DetailsPanel.tsx
@@ -4,7 +4,8 @@ import Paper from '@mui/material/Paper';
 import { useTheme } from '@mui/material/styles';
 import styled from '@mui/system/styled';
 import { detailsPanelId } from '@clients/common/constants';
-import { detailsPanelWidth } from './constants';
+import classnames from 'classnames';
+import { defaultDetailsPanelWidth } from './constants';
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
   display: 'flex',
@@ -12,7 +13,15 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
   maxHeight: '100%',
   paddingBottom: theme.spacing(2),
   pointerEvents: 'initial',
-  width: detailsPanelWidth,
+  '& .dragger': {
+    width: '3px',
+    cursor: 'ew-resize',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 100,
+  },
 }));
 
 interface DetailsPanelProps {
@@ -29,6 +38,24 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
   open = false,
 }) => {
   const theme = useTheme();
+
+  const [panelWidth, setPanelWidth] = React.useState(defaultDetailsPanelWidth);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    document.addEventListener('mouseup', handleMouseUp, true);
+    document.addEventListener('mousemove', handleMouseMove, true);
+  };
+
+  const handleMouseUp = (e: React.MouseEvent) => {
+    document.removeEventListener('mouseup', handleMouseUp, true);
+    document.removeEventListener('mousemove', handleMouseMove, true);
+  };
+
+  const handleMouseMove = React.useCallback((e: React.MouseEvent) => {
+    const newWidth = document.body.offsetWidth - e.clientX;
+    setPanelWidth(newWidth);
+  }, []);
+
   return (
     <Drawer
       anchor="right"
@@ -50,7 +77,8 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
       open={open}
       key="detailsPanel"
     >
-      <StyledPaper id={detailsPanelId} square>
+      <StyledPaper id={detailsPanelId} square sx={{ width: panelWidth }}>
+        <div onMouseDown={(e) => handleMouseDown(e)} className={classnames('dragger')} />
         {children}
       </StyledPaper>
     </Drawer>
diff --git a/packages/oss-console/src/components/common/constants.ts b/packages/oss-console/src/components/common/constants.ts
index ca7197b01..1d62c8b4c 100644
--- a/packages/oss-console/src/components/common/constants.ts
+++ b/packages/oss-console/src/components/common/constants.ts
@@ -1,7 +1,7 @@
 import { env } from '@clients/common/environment';
 import { InterpreterOptions } from 'xstate';
 
-export const detailsPanelWidth = 432;
+export const defaultDetailsPanelWidth = 432;
 
 export const labels = {
   moreOptionsButton: 'Display more options',