From e3ae480677c1d0941d03b2904138ff971fd2fdfb Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Wed, 26 Jul 2023 18:02:23 +0200
Subject: [PATCH] SSDM-13579: Improved buttons hiding functionality on resize
 to the left toolbar.

---
 .../database/data-browser/LeftToolbar.jsx     | 69 ++++++++++++++++---
 1 file changed, 61 insertions(+), 8 deletions(-)

diff --git a/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
index 59a5f05e404..38d5f61d44d 100644
--- a/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
@@ -31,6 +31,8 @@ import logger from "@src/js/common/logger.js";
 import autoBind from "auto-bind";
 import IconButton from "@material-ui/core/IconButton";
 import { debounce } from "@material-ui/core";
+import Container from "@src/js/components/common/form/Container.jsx";
+import Popover from "@material-ui/core/Popover";
 
 const color = 'secondary'
 const iconButtonSize = 'medium'
@@ -49,7 +51,17 @@ const styles = theme => ({
       marginRight: 0
     }
   },
-  toggleButton: {}
+  toggleButton: {},
+  collapsedButtonsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    '&>button': {
+      marginBottom: theme.spacing(1)
+    },
+    '&>button:nth-last-child(1)': {
+      marginBottom: 0
+    }
+  },
 })
 
 class LeftToolbar extends React.Component {
@@ -59,7 +71,8 @@ class LeftToolbar extends React.Component {
     autoBind(this)
 
     this.state = {
-      width: 0
+      width: 0,
+      hiddenButtonsPopup: null
     }
 
     this.controller = this.props.controller
@@ -84,7 +97,7 @@ class LeftToolbar extends React.Component {
 
   renderSelectionContextToolbar() {
     const { classes, buttonSize } = this.props
-    const { width } = this.state
+    const { width, hiddenButtonsPopup } = this.state
 
     const ellipsisButtonSize = 24
     const buttonsCount = 5
@@ -147,31 +160,71 @@ class LeftToolbar extends React.Component {
     ]
     const ellipsisButton = (
       <IconButton
-        key="ellipsis"
+        key='ellipsis'
         classes={{ root: classes.button }}
         color={color}
         size={iconButtonSize}
-        variant="outlined"
+        variant='outlined'
+        onClick={this.handleOpen}
       >
         <MoreIcon />
       </IconButton>
-    );
+    )
+
+    const popover = (
+      <Popover
+        open={Boolean(hiddenButtonsPopup)}
+        anchorEl={hiddenButtonsPopup}
+        onClose={this.handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left'
+        }}
+      >
+        <Container square={true}>{this.renderCollapsedButtons(buttons.slice(visibleButtonsCount))}</Container>
+      </Popover>
+    )
 
     return (
       <div className={classes.buttons}>
         {hideButtons
-          ? [...buttons.slice(0, visibleButtonsCount), ellipsisButton]
+          ? [...buttons.slice(0, visibleButtonsCount), ellipsisButton, popover]
           : buttons}
       </div>
     );
   }
 
+  renderCollapsedButtons(buttons) {
+    const { classes } = this.props
+    return (
+      <div className={classes.collapsedButtonsContainer}>
+        {buttons}
+      </div>
+    )
+  }
+
   onResize({ width }) {
     if (width !== this.state.width) {
-      this.setState({ width })
+      this.setState({ width, hiddenButtonsPopup: null })
     }
   }
 
+  handleOpen(event) {
+    this.setState({
+      hiddenButtonsPopup: event.currentTarget
+    })
+  }
+
+  handleClose() {
+    this.setState({
+      hiddenButtonsPopup: null
+    })
+  }
+
   render() {
     logger.log(logger.DEBUG, 'LeftToolbar.render')
 
-- 
GitLab