feat(panel): Resizable side panel

Resolves: flyteorg/flyte#5102
Signed-off-by: Chi-Sheng Liu <[email protected]>

packages/oss-console/src/components/common/DetailsPanel.tsx

@@ -4,15 +4,24 @@ 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',
   flex: '1 1 100%',
   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>

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',