Merge pull request #4148 from towerofnix/ctx-menu-hide-option-clean-diff

"Hide" monitor context menu option

src/components/monitor/monitor.jsx

@@ -108,6 +108,14 @@ const MonitorComponent = props => (
                             id="gui.monitor.contextMenu.export"
                         />
                     </MenuItem>}
+                {props.onHide &&
+                    <MenuItem onClick={props.onHide}>
+                        <FormattedMessage
+                            defaultMessage="hide"
+                            description="Menu item to hide the monitor"
+                            id="gui.monitor.contextMenu.hide"
+                        />
+                    </MenuItem>}
             </ContextMenu>
         ), document.body)}
     </ContextMenuTrigger>
@@ -127,6 +135,7 @@ MonitorComponent.propTypes = {
     onDragEnd: PropTypes.func.isRequired,
     onExport: PropTypes.func,
     onImport: PropTypes.func,
+    onHide: PropTypes.func,
     onNextMode: PropTypes.func.isRequired,
     onSetModeToDefault: PropTypes.func,
     onSetModeToLarge: PropTypes.func,

src/containers/monitor.jsx

@@ -39,6 +39,7 @@ class Monitor extends React.Component {
         super(props);
         bindAll(this, [
             'handleDragEnd',
+            'handleHide',
             'handleNextMode',
             'handleSetModeToDefault',
             'handleSetModeToLarge',
@@ -115,6 +116,12 @@ class Monitor extends React.Component {
             y: newY
         }));
     }
+    handleHide () {
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            visible: false
+        }));
+    }
     handleNextMode () {
         const modes = availableModes(this.props.opcode);
         const modeIndex = modes.indexOf(this.props.mode);
@@ -210,6 +217,7 @@ class Monitor extends React.Component {
                     onDragEnd={this.handleDragEnd}
                     onExport={isList ? this.handleExport : null}
                     onImport={isList ? this.handleImport : null}
+                    onHide={this.handleHide}
                     onNextMode={this.handleNextMode}
                     onSetModeToDefault={isList ? null : this.handleSetModeToDefault}
                     onSetModeToLarge={isList ? null : this.handleSetModeToLarge}

test/helpers/selenium-helper.js

@@ -22,7 +22,9 @@ class SeleniumHelper {
             'clickBlocksCategory',
             'elementIsVisible',
             'findByText',
+            'textToXpath',
             'findByXpath',
+            'textExists',
             'getDriver',
             'getSauceDriver',
             'getLogs',
@@ -46,7 +48,8 @@ class SeleniumHelper {
             reportedValue: '*[@class="blocklyDropDownContent"]',
             soundsTab: "*[@id='react-tabs-5']",
             spriteTile: '*[starts-with(@class,"react-contextmenu-wrapper")]',
-            monitors: '*[starts-with(@class,"stage_monitor-wrapper")]'
+            monitors: '*[starts-with(@class,"stage_monitor-wrapper")]',
+            contextMenu: '*[starts-with(@class,"react-contextmenu")]'
         };
     }
 
@@ -98,8 +101,17 @@ class SeleniumHelper {
             ));
     }
 
+    textToXpath (text, scope) {
+        return `//body//${scope || '*'}//*[contains(text(), '${text}')]`;
+    }
+
     findByText (text, scope) {
-        return this.findByXpath(`//body//${scope || '*'}//*[contains(text(), '${text}')]`);
+        return this.findByXpath(this.textToXpath(text, scope));
+    }
+
+    textExists (text, scope) {
+        return this.driver.findElements(By.xpath(this.textToXpath(text, scope)))
+            .then(elements => elements.length > 0);
     }
 
     loadUri (uri) {

test/integration/blocks.test.js

@@ -8,6 +8,7 @@ const {
     clickXpath,
     findByText,
     findByXpath,
+    textExists,
     getDriver,
     getLogs,
     Key,
@@ -90,6 +91,13 @@ describe('Working with the blocks', () => {
         await clickButton('OK');
         await findByXpath("//input[@step='0.01'][@max='100.1']");
 
+        // Hiding the monitor via context menu should work
+        await rightClickText('score', scope.monitors);
+        await clickText('hide', scope.contextMenu);
+        await driver.sleep(100);
+        const monitorExists = await textExists('score', scope.monitors);
+        await expect(monitorExists).toBeFalsy();
+
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });
@@ -123,6 +131,13 @@ describe('Working with the blocks', () => {
         await clickText('list1', scope.blocksTab);
         await findByText('thing thing thing thing2', scope.reportedValue); // Tooltip with result
 
+        // Hiding the monitor via context menu should work
+        await rightClickText('list1', scope.monitors);
+        await clickText('hide', scope.contextMenu);
+        await driver.sleep(100);
+        const monitorExists = await textExists('list1', scope.monitors);
+        await expect(monitorExists).toBeFalsy();
+
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });