🚸 Make app grid popup menu toggle visibility when clicking on it (#325) (#448)

* 🚸 Make app grid popup menu toggle visibility when clicking on it (#325)

changelog.md

@@ -3,16 +3,20 @@
 ## Features
 
 - New Version Semantics
-- Usage quota settings
+- Usage quota settings 
-- PostgreSQL support as a metadata database
+- PostgreSQL support as a metadata database 
 - OpenSearch support as a search database
 - New API to check file storage consistency
 - UX improvements
-    - Remove the switcher from breadcrumbs
+  - Remove the switcher from breadcrumbs
+  - Improved translations
+- Be able to use SMTP transport without TLS
+- Do not display deleted items in the shared with me section
 
 ## BugFixes
 - Fix preview of the files on mobile and web
--  Malformed URL when you share a file
+- Malformed URL when you share a file
+- ...
 
 # Twake Drive v2023.Q3.012
 

tdrive/frontend/src/app/components/menus/menu.jsx

@@ -22,10 +22,6 @@ export default class Menu extends React.Component {
       }
   */
 
-  static closeAll() {
-    MenusManager.closeAllMenus(); // Corrected method name to closeAllMenus()
-  }
-
   constructor(props) {
     super(props);
     this.state = {
@@ -51,21 +47,24 @@ export default class Menu extends React.Component {
     MenusManager.openMenu(menu, rect, position);
   }
 
-  openMenu(evt) {
+  async openMenu(evt) {
     if (this.open) {
-      this.closeAll();
+      this.open = false;
+      MenusManager.closeMenu();
+      this.setState({ isMenuOpen: false });
     } else {
-      this.open = true;
       evt.preventDefault();
       evt.stopPropagation();
       var elementRect = this.container.current.getBoundingClientRect(); // Fixed getBoundingClientRect()
       elementRect.x = elementRect.x || elementRect.left;
       elementRect.y = elementRect.y || elementRect.top;
-      this.previousMenusId = MenusManager.openMenu( // Updated variable name
+      this.previousMenusId = await MenusManager.openMenu(
         this.props.menu,
         elementRect,
         this.props.position,
       );
+      this.setState({ isMenuOpen: true }, () => this.open = true);
+      this.open = true;
       if (this.props.onOpen) this.props.onOpen();
     }
   }
@@ -77,7 +76,7 @@ export default class Menu extends React.Component {
 
     if (
       (MenusManager.menus.length === 0 && this.previousMenusNumber > 0) ||
-      MenusManager.lastOpenedId !== this.previousMenusId // Updated variable name
+      MenusManager.last_opened_id !== this.previousMenusId
     ) {
       if (this.open && this.props.onClose) {
         this.props.onClose();
@@ -103,18 +102,18 @@ export default class Menu extends React.Component {
       <div
         ref={this.container}
         style={this.props.style}
-        onClick={(evt) => {
+        onClick={async (evt) => {
-          console.log('if this open: ', this.state.isMenuOpen);
           if (this.props.toggle) {
             if (!this.open) {
-              this.setState({ ...this.state, isMenuOpen: true });
+              await this.openMenu(evt);
-              this.openMenu(evt);
             } else {
               MenusManager.closeMenu();
+              this.open = false;
+              this.setState({ isMenuOpen: false });
               this.props.onClose && this.props.onClose();
             }
           } else {
-            this.openMenu(evt);
+            await this.openMenu(evt);
           }
         }}
         className={this.props.className}

tdrive/frontend/src/app/environment/version.ts

@@ -2,4 +2,4 @@ export default {
   version: /* @VERSION */ '1.0.1',
   version_detail: /* @VERSION_DETAIL */ '1.0.1',
   version_name: /* @VERSION_NAME */ 'Ghost-Dog',
-};
+};

tdrive/frontend/src/app/views/client/common/app-grid.tsx

@@ -14,6 +14,7 @@ export default ({ className }: { className?: string }): JSX.Element => {
   return (
     <Menu
       position="bottom"
+      toggle="true"
       menu={[
         {
           type: 'react-element',