Merge branch '451-collapse-expand-for-the-right-side-panel' into 'master'

feat(ui): Collapse/expand for the right-side panel in DLE UI (#451)

Closes #451

See merge request postgres-ai/database-lab!677

Author: agneum

ui/packages/ce/package.json

@@ -13,6 +13,7 @@
     "@monaco-editor/react": "^4.4.5",
     "@mui/material": "^5.10.12",
     "@postgres.ai/shared": "link:../shared",
+    "@postgres.ai/ce": "link:../ce",
     "@types/node": "^12.20.33",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.10",

ui/packages/ce/src/App/Menu/styles.module.scss

@@ -14,6 +14,10 @@
 
   @include touch-transition(width);
 
+  @media screen and (max-width: '600px') {
+    width: 100vw;
+  }
+
   &.collapsed {
     width: 64px;
   }

ui/packages/ce/src/components/PageContainer/styles.module.scss

@@ -3,4 +3,8 @@
   flex: 1 1 100%;
   display: flex;
   flex-direction: column;
+
+  @media screen and (max-width: '600px') {
+    padding: 24px 12px 24px 12px;
+  }
 }

ui/packages/shared/components/Button2/styles.module.scss

@@ -26,7 +26,7 @@
   }
 
   &.md {
-    height: 26px;
+    min-height: 26px;
     font-size: 14px;
   }
 

ui/packages/shared/hooks/useWindowDimensions.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+export const useWindowDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = useState(window.innerWidth)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowDimensions(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowDimensions
+}

ui/packages/shared/pages/Instance/Info/components/Property/styles.module.scss

@@ -7,6 +7,11 @@
 .name {
   flex: 0 0 134px;
   margin-right: 14px;
+
+  @media screen and (max-width: '600px') {
+    flex: 1 1 100%;
+    margin-right: 7px;
+  }
 }
 
 .content {

ui/packages/shared/pages/Instance/Info/index.tsx

@@ -5,43 +5,119 @@
  *--------------------------------------------------------------------------
  */
 
+import cn from 'classnames'
+import { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core'
 
+import { Button } from '@postgres.ai/ce/src/App/Menu/components/Button'
+import { useWindowDimensions } from '@postgres.ai/shared/hooks/useWindowDimensions'
+import { ReactComponent as ArrowRightIcon } from '@postgres.ai/ce/src/App/Menu/icons/arrow-right.svg'
+import { ReactComponent as ArrowLeftIcon } from '@postgres.ai/ce/src/App/Menu/icons/arrow-left.svg'
+
 import { Status } from './Status'
 import { Retrieval } from './Retrieval'
 import { Connection } from './Connection'
 import { Disks } from './Disks'
 import { Snapshots } from './Snapshots'
 
+import styles from './styles.module.scss'
+
+const SIDEBAR_COLLAPSED_PARAM = 'overviewSidebarCollapsed'
+const SMALL_BREAKPOINT_PX = 937
+
 const useStyles = makeStyles(
   (theme) => ({
     root: {
-      flex: '0 0 437px',
-      minWidth: 0,
+      flex: '0 0 auto',
 
       [theme.breakpoints.down('md')]: {
-        flexBasis: '300px',
+        width: '300px',
       },
 
       [theme.breakpoints.down('sm')]: {
-        flex: '1 1 100%',
+        flex: '0 0 auto',
+        width: '100%',
         marginTop: '20px',
       },
     },
+    collapseBtn: {
+      background: '#f9f9f9',
+      margin: '20px 0 10px 0',
+      fontWeight: 500,
+
+      '& svg': {
+        marginRight: '5px',
+      },
+
+      '&:hover': {
+        background: '#f1f1f1',
+      },
+    },
+    arrowImage: {
+      width: '16px',
+      height: '16px',
+
+      '& path': {
+        fill: '#000',
+      },
+    },
   }),
   { index: 1 },
 )
 
 export const Info = () => {
   const classes = useStyles()
+  const width = useWindowDimensions()
+  const isMobileScreen = width <= SMALL_BREAKPOINT_PX
+
+  const [isCollapsed, setIsCollapsed] = useState(
+    () => localStorage.getItem(SIDEBAR_COLLAPSED_PARAM) === '1',
+  )
+
+  const handleClick = () => {
+    setIsCollapsed(!isCollapsed)
+    localStorage.setItem(SIDEBAR_COLLAPSED_PARAM, isCollapsed ? '0' : '1')
+  }
+
+  useEffect(() => {
+    if (isMobileScreen) {
+      setIsCollapsed(false)
+    }
+  }, [width])
 
   return (
-    <div className={classes.root}>
-      <Status />
-      <Retrieval />
-      <Connection />
-      <Disks />
-      <Snapshots />
+    <div
+      className={cn(
+        styles.root,
+        !isCollapsed ? classes.root : styles.collapsed,
+      )}
+    >
+      {!isMobileScreen && (
+        <Button
+          className={classes.collapseBtn}
+          onClick={handleClick}
+          isCollapsed={isCollapsed}
+          icon={
+            isCollapsed ? (
+              <ArrowLeftIcon className={classes.arrowImage} />
+            ) : (
+              <ArrowRightIcon className={classes.arrowImage} />
+            )
+          }
+        >
+          Collapse
+        </Button>
+      )}
+
+      {!isCollapsed && (
+        <div>
+          <Status />
+          <Retrieval />
+          <Connection />
+          <Disks />
+          <Snapshots />
+        </div>
+      )}
     </div>
   )
 }

ui/packages/shared/pages/Instance/Info/styles.module.scss

@@ -0,0 +1,18 @@
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  min-height: 0;
+  min-width: 0;
+  width: 437px;
+
+  @media screen and (max-width: '600px') {
+    width: 100%;
+  }
+
+  @include touch-transition(width);
+
+  &.collapsed {
+    height: 100%;
+    width: 64px;
+  }
+}