Do not close context menu when clicking on checkbox items (#4690)

Author: AlexandreSi

newIDE/app/src/UI/Menu/ContextMenu.js

@@ -8,6 +8,7 @@ import Fade from '@material-ui/core/Fade';
 import ElectronMenuImplementation from './ElectronMenuImplementation';
 import MaterialUIMenuImplementation from './MaterialUIMenuImplementation';
 import optionalRequire from '../../Utils/OptionalRequire';
+import useForceUpdate from '../../Utils/UseForceUpdate';
 const electron = optionalRequire('electron');
 
 export type ContextMenuInterface = {|
@@ -28,6 +29,7 @@ const MaterialUIContextMenu = React.forwardRef<
   ]);
   const [openMenu, setOpenMenu] = React.useState<boolean>(false);
   const [buildOptions, setBuildOptions] = React.useState<any>({});
+  const forceUpdate = useForceUpdate();
 
   const menuImplementation = new MaterialUIMenuImplementation({
     onClose: () => setOpenMenu(false),
@@ -58,7 +60,8 @@ const MaterialUIContextMenu = React.forwardRef<
           {...menuImplementation.getMenuProps()}
         >
           {menuImplementation.buildFromTemplate(
-            props.buildMenuTemplate(i18n, buildOptions)
+            props.buildMenuTemplate(i18n, buildOptions),
+            forceUpdate
           )}
         </Menu>
       )}

newIDE/app/src/UI/Menu/ElectronMenuImplementation.js

@@ -1,17 +1,31 @@
+// @flow
 import optionalRequire from '../../Utils/OptionalRequire';
+import {
+  type MenuItemTemplate,
+  type ContextMenuImplementation,
+} from './Menu.flow';
 const electron = optionalRequire('electron');
 const remote = optionalRequire('@electron/remote');
 
 /**
  * Wraps an Electron Menu
  */
-export default class ElectronMenuImplementation {
-  buildFromTemplate(template) {
+export default class ElectronMenuImplementation
+  implements ContextMenuImplementation {
+  menuTemplate: Array<MenuItemTemplate>;
+  menu: any; // TODO: Is it necessary to store the menu in a class variable?
+
+  buildFromTemplate(template: Array<MenuItemTemplate>) {
     this.menuTemplate = template;
     return undefined;
   }
 
-  showMenu(dimensions) {
+  showMenu(dimensions: {|
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  |}) {
     if (!electron) return;
 
     const { Menu } = remote;

newIDE/app/src/UI/Menu/MaterialUIMenuImplementation.js

@@ -11,7 +11,10 @@ import Divider from '@material-ui/core/Divider';
 import Fade from '@material-ui/core/Fade';
 import makeStyles from '@material-ui/styles/makeStyles';
 import { adaptAcceleratorString } from '../AcceleratorString';
-import { type MenuItemTemplate } from './Menu.flow';
+import {
+  type MenuItemTemplate,
+  type ContextMenuImplementation,
+} from './Menu.flow';
 
 const useStyles = makeStyles({
   backdropRootForMouse: {
@@ -185,13 +188,17 @@ const SubMenuItem = ({ item, buildFromTemplate }) => {
  *  - checked (when `type` is 'checkbox')
  *  - submenu
  */
-export default class MaterialUIMenuImplementation {
+export default class MaterialUIMenuImplementation
+  implements ContextMenuImplementation {
   _onClose: () => void;
   constructor({ onClose }: {| onClose: () => void |}) {
     this._onClose = onClose;
   }
 
-  buildFromTemplate(template: Array<MenuItemTemplate>) {
+  buildFromTemplate(
+    template: Array<MenuItemTemplate>,
+    forceUpdate?: () => void
+  ) {
     return template
       .map((item, id) => {
         if (item.visible === false) return null;
@@ -215,13 +222,20 @@ export default class MaterialUIMenuImplementation {
                 // $FlowFixMe - existence should be inferred by Flow.
                 item.enabled === false
               }
-              onClick={() => {
+              onClick={async () => {
                 if (item.enabled === false) {
                   return;
                 }
 
                 if (item.click) {
-                  item.click();
+                  await item.click();
+                  if (item.type === 'checkbox') {
+                    // In case the item click function changes something that React does not detect,
+                    // for instance a change in the project/layout C++ object, the menu must be
+                    // manually updated to display the change.
+                    if (forceUpdate) forceUpdate();
+                    return;
+                  }
                 }
                 this._onClose();
               }}
@@ -238,7 +252,9 @@ export default class MaterialUIMenuImplementation {
             <SubMenuItem
               key={'submenu' + item.label}
               item={item}
-              buildFromTemplate={template => this.buildFromTemplate(template)}
+              buildFromTemplate={template =>
+                this.buildFromTemplate(template, forceUpdate)
+              }
             />
           );
         } else {

newIDE/app/src/UI/Menu/Menu.flow.js

@@ -1,5 +1,7 @@
 // @flow
 
+import { type Node as ReactNode } from 'react';
+
 /**
  * The type describing a menu item supported both as in an Electron
  * menu and as a material-ui menu (for the web-app).
@@ -33,6 +35,19 @@ export type MenuItemTemplate =
       type: 'separator',
     |};
 
+export interface ContextMenuImplementation {
+  buildFromTemplate(
+    template: Array<MenuItemTemplate>,
+    forceUpdate?: () => void
+  ): ?ReactNode;
+  showMenu(dimensions: {|
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  |}): void;
+}
+
 /**
  * The type describing a menu item without any function for the clicks.
  * Instead, `onClickSendEvent` or `onClickOpenLink` are plain strings