Context menu overhaul, close #368

Author: Andres

.eslintrc.json

@@ -88,7 +88,7 @@
         }],
         "lines-between-class-members": ["error", "always"],
         "max-depth": ["error", 6],
-        "max-len": ["warn", 200],
+        "max-len": ["warn", 300],
         "max-lines": ["warn", 300],
         "max-nested-callbacks": ["error", 4],
         "max-params": ["error", 4],

CHANGELOG.md

@@ -2,6 +2,9 @@
 ===================
 
 * Gaucho now runs as a single-instance app
+* Overhaul of menu and context menu options
+    * Suite-related actions moved to context menu
+    * "Import suite" is not part of settings 
 * Adds cut-copy-paste items to context menu
 * Dependencies updated
 

src/app/api/context_menu.js

@@ -24,7 +24,8 @@ class ContextMenu extends EventEmitter {
                     this.emit(event, this.extraData);
                 } : undefined,
                 type: item.type || "normal",
-                role: item.role
+                role: item.role,
+                sublabel: item.sublabel
             });
             this.menu.append(menuItem);
         }
@@ -41,8 +42,8 @@ class ContextMenu extends EventEmitter {
 }
 
 class DefaultContextMenu extends ContextMenu {
-    constructor(extraOptions = []) {
-        super(extraOptions.concat([{
+    constructor(extraOptions = [], includeEditFields = true) {
+        const editableFields = [{
             label: "Cut",
             role: "cut"
         }, {
@@ -53,7 +54,9 @@ class DefaultContextMenu extends ContextMenu {
             role: "paste"
         }, {
             type: "separator"
-        }, {
+        }];
+
+        const baseFields = [{
             label: "Settings",
             event: "settings"
         }, {
@@ -62,7 +65,11 @@ class DefaultContextMenu extends ContextMenu {
         }, {
             label: "Quit",
             event: "quit"
-        }]));
+        }];
+
+        const fields = includeEditFields ? editableFields.concat(baseFields) : baseFields;
+
+        super(extraOptions.concat(fields));
     }
 
     toggle(extraData) {
@@ -81,12 +88,29 @@ class DefaultContextMenu extends ContextMenu {
 }
 
 class TabMenu extends DefaultContextMenu {
-    constructor() {
-        super([{label: "Delete",
-            event: "delete"}, {label: "Rename",
-            event: "rename"}, {label: "Export Suite",
-            event: "export-suite"}, {label: "Duplicate Suite",
-            event: "duplicate-suite"}, {type: "separator"}]);
+    constructor(suiteTitle) {
+        super([{
+            label: `Run "${suiteTitle}"`,
+            event: "run-suite"
+        }, {
+            label: "Stop Suite",
+            event: "stop-suite"
+        }, {
+            label: "Schedule",
+            event: "schedule-suite"
+        }, {type: "separator"}, {
+            label: "Delete",
+            event: "delete"
+        }, {
+            label: "Rename",
+            event: "rename"
+        }, {
+            label: "Export",
+            event: "export-suite"
+        }, {
+            label: "Duplicate",
+            event: "duplicate-suite"
+        }, {type: "separator"}], false);
     }
 }
 

src/app/components/navbar/navbar.vue

@@ -31,13 +31,8 @@
 <script>
 "use strict";
 
-const app = require('electron').remote;
-const dialog = app.dialog;
 const ipcRenderer = require('electron').ipcRenderer;
-
 const EventHandler = require('../../event_handler');
-
-const schedulerModal = require('../../api/scheduler_modal');
 const aboutModal = require('../../api/about_modal');
 
 const components = {
@@ -63,36 +58,6 @@ module.exports = {
                 case "about":
                     this.openAboutModal();
                     break;
-                case "runSuite":
-                    this.$store.dispatch("runSuite");
-                    break;
-                case "stopSuite":
-                    this.$store.dispatch("stopSuite", this.$store.state.tasks.selectedSuite);
-                    break;
-                case "importSuite":
-                    if (this.$store.getters.canAddSuite) {
-                        dialog.showOpenDialog({
-                            filters: [{
-                                name: 'json',
-                                extensions: ['json']
-                            }]
-                        }).then((dialogResult) => {
-                            if (dialogResult.filePaths && dialogResult.filePaths[0]) {
-                                const filename = dialogResult.filePaths[0];
-                                this.$store.dispatch("importSuite", filename).catch((err) => {
-                                    console.warn(err);
-                                });
-                            }
-                        });
-                    }
-                    break;
-                case "scheduleSuite":
-                    schedulerModal("Schedule Suite Execution").then((res) => {
-                        this.$store.dispatch("scheduleSuite", res);
-                    }, () => {
-                        // Cancelled scheduling
-                    });
-                    break;
                 case "settings":
                     this.$store.commit("toggleSettings");
                     break;

src/app/components/navbar/navbar_menu.vue

@@ -36,31 +36,7 @@ module.exports = {
                 name: "Quit",
                 value: "quit"
             }];
-
-            let extraOptions = [];
-
-            if (this.$store.state.editMode) {
-                const canImportSuite = this.$store.getters.canAddSuite;
-                extraOptions = [{
-                    name: "Import Suite",
-                    value: "importSuite",
-                    disabled: !canImportSuite
-                }];
-            } else {
-                extraOptions = [{
-                    name: "Run Suite",
-                    value: "runSuite"
-                }, {
-                    name: "Stop Suite",
-                    value: "stopSuite"
-                }, {
-                    name: "Schedule Suite",
-                    value: "scheduleSuite"
-                }];
-            }
-            return extraOptions.concat([{
-                value: "divider"
-            }], defaultOptions);
+            return defaultOptions;
         }
     },
     methods: {

src/app/components/navbar/suite_tabs.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="tabs is-fullwidth">
         <draggable v-model="suites" tag="ul" v-bind="draggableOptions" @end="suiteDragEnd">
-            <li v-for="(suite, index) in suites" class="tab-suite-item" @contextmenu.stop="context(index)" :style="{ width: tabsWidth }"
-                :class="{'is-active': isSelected(index), 'inactive': !isSelected(index)}" @click="selectSuite(index)" @dragover="selectSuite(index)" :key="index"
+            <li v-for="(suite, index) in suites" class="tab-suite-item" :style="{ width: tabsWidth }" :class="{'is-active': isSelected(index), 'inactive': !isSelected(index)}" @click="selectSuite(index)" @contextmenu.stop="context(index)"
+                @dragover="selectSuite(index)" :key="index"
             >
                 <a class="columns is-mobile is-centered tab-content">
                     <div class="column tab-text-container">
@@ -37,11 +37,10 @@ const dialog = app.dialog;
 
 const AppAlerts = require('../../api/app_alerts');
 const ContextMenu = require('../../api/context_menu');
+const schedulerModal = require('../../api/scheduler_modal');
 
 const constants = require('../../../common/constants.js');
 
-const tabMenu = new ContextMenu.TabMenu();
-
 const components = {
     "draggable": require('vuedraggable')
 };
@@ -79,6 +78,26 @@ module.exports = {
     },
     methods: {
         context(index) {
+            const tabMenu = new ContextMenu.TabMenu(this.suites[index].title);
+
+            tabMenu.on("run-suite", (i) => {
+                this.selectSuite(i);
+                this.$store.dispatch("runSuite");
+            });
+            tabMenu.on("stop-suite", (i) => {
+                this.selectSuite(i);
+                this.$store.dispatch("stopSuite", i);
+            });
+            tabMenu.on("schedule-suite", (i) => {
+                this.selectSuite(i);
+                const title = this.suites[i].title;
+                schedulerModal(`Schedule "${title}" Execution`).then((res) => {
+                    this.$store.dispatch("scheduleSuite", res);
+                }, () => {
+                    // Cancelled scheduling
+                });
+            });
+
             tabMenu.on("delete", (i) => {
                 this.removeSuite(i);
             });

src/app/components/settings/button_item.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="field">
         <div class="control has-text-centered">
-            <button class="button is-primary is-fullwidth" @click="onClick">
+            <button class="button is-primary is-fullwidth" @click="onClick" :disabled="disabled">
                 <slot></slot>
             </button>
             <small class="settings-label" v-if="label">{{label}}</small>
@@ -14,7 +14,16 @@
 "use strict";
 
 module.exports = {
-    props: ["label"],
+    props: {
+        label: {
+            type: String,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
     methods: {
         onClick() {
             this.$emit("select");

src/app/components/settings/settings_actions.vue

@@ -4,6 +4,7 @@
             <button-item @select="resetSettings">Reset Settings</button-item>
             <button-item @select="exportTasks">Export Tasks</button-item>
             <button-item @select="importTasks" label="Warning: This will override your previous tasks">Import Tasks</button-item>
+            <button-item @select="importSuite" :disabled="!canImportSuite">Import Suite</button-item>
             <button-item @select="clearTasks" label="Warning: This will remove all your suites and tasks">Clear Tasks</button-item>
         </div>
     </div>
@@ -29,6 +30,11 @@ const components = {
 
 module.exports = {
     components: components,
+    computed: {
+        canImportSuite() {
+            return this.$store.getters.canAddSuite;
+        }
+    },
     methods: {
         importTasks() {
             dialog.showOpenDialog({
@@ -77,6 +83,23 @@ module.exports = {
         },
         resetSettings() {
             this.$emit("resetSettings");
+        },
+        importSuite() {
+            if (this.canImportSuite) {
+                dialog.showOpenDialog({
+                    filters: [{
+                        name: 'json',
+                        extensions: ['json']
+                    }]
+                }).then((dialogResult) => {
+                    if (dialogResult.filePaths && dialogResult.filePaths[0]) {
+                        const filename = dialogResult.filePaths[0];
+                        this.$store.dispatch("importSuite", filename).catch((err) => {
+                            console.warn(err);
+                        });
+                    }
+                });
+            }
         }
     }
 };