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,25 @@ 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 useResize from '@clients/oss-console/components/hooks/useResize';
+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 +39,9 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
   open = false,
 }) => {
   const theme = useTheme();
+
+  const { width, enableResize } = useResize({ minWidth: defaultDetailsPanelWidth });
+
   return (
     <Drawer
       anchor="right"
@@ -50,7 +63,8 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
       open={open}
       key="detailsPanel"
     >
-      <StyledPaper id={detailsPanelId} square>
+      <StyledPaper id={detailsPanelId} square sx={{ width }}>
+        <div onMouseDown={enableResize} 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',

packages/oss-console/src/components/hooks/useResize.ts

@@ -0,0 +1,51 @@
+// Reference: https://stackoverflow.com/a/68742668
+
+import { useCallback, useEffect, useState } from 'react';
+
+type UseResizeProps = {
+  minWidth: number;
+};
+
+type UseResizeReturn = {
+  width: number;
+  enableResize: () => void;
+};
+
+const useResize = ({ minWidth }: UseResizeProps): UseResizeReturn => {
+  const [isResizing, setIsResizing] = useState(false);
+  const [width, setWidth] = useState(minWidth);
+
+  const enableResize = useCallback(() => {
+    setIsResizing(true);
+  }, [setIsResizing]);
+
+  const disableResize = useCallback(() => {
+    setIsResizing(false);
+  }, [setIsResizing]);
+
+  const resize = useCallback(
+    (e: MouseEvent) => {
+      if (isResizing) {
+        const newWidth = document.body.offsetWidth - e.clientX; // You may want to add some offset here from props
+        if (newWidth >= minWidth) {
+          setWidth(newWidth);
+        }
+      }
+    },
+    [minWidth, isResizing, setWidth],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousemove', resize);
+    document.addEventListener('mouseup', disableResize);
+
+    return () => {
+      document.removeEventListener('mousemove', resize);
+      document.removeEventListener('mouseup', disableResize);
+    };
+  }, [disableResize, resize]);
+
+  return { width, enableResize };
+};
+
+export default useResize;