Merge pull request #7594 from martenson/workflow-ux

improve workflow cog menu ux

client/galaxy/scripts/mvc/workflow/workflow-view.js

@@ -378,12 +378,10 @@ export default Backbone.View.extend({
         // Load workflow definition
         this.load_workflow(self.options.id, self.options.version);
         if (make_popupmenu) {
+            $("#workflow-run-button").click(() =>  window.location = `${getAppRoot()}workflows/run?id=${self.options.id}`);
+            $("#workflow-save-button").click(() => save_current_workflow());
             make_popupmenu($("#workflow-options-button"), {
-                Save: save_current_workflow,
                 "Save As": workflow_save_as,
-                Run: function() {
-                    window.location = `${getAppRoot()}workflows/run?id=${self.options.id}`;
-                },
                 "Edit Attributes": function() {
                     self.workflow.clear_active_node();
                 },

client/galaxy/scripts/ui/popupmenu.js

@@ -37,11 +37,12 @@ export function make_popupmenu(button_element, initial_options) {
             $.each(options, (k, v) => {
                 if (v) {
                     // Action can be either an anonymous function and a mapped dict.
-                    var action = v.action || v;
+                    let action = v.action || v;
+                    let url = v.url || "javascript:void(0);";
                     menu_element.append(
                         $("<li></li>").append(
                             $("<a>")
-                                .attr("href", v.url)
+                                .attr("href", url)
                                 .html(k)
                                 .click(action)
                         )

templates/webapps/galaxy/workflow/editor.mako

@@ -225,10 +225,18 @@
 <%def name="center_panel()">
 
     <div class="unified-panel-header" unselectable="on">
-        <div class="panel-header-buttons">
-            <a id="workflow-options-button" class="panel-header-button" href="#"><span class="fa fa-cog"></span></a>
-        </div>
         <div class="unified-panel-header-inner">
+            <div class="panel-header-buttons">
+                <a id="workflow-run-button" class="panel-header-button" href="#" title="Run" style="display: inline-block;" aria-label="Run">
+                    <span class="fa fa-play"></span>
+                </a>
+                <a id="workflow-save-button" class="panel-header-button" href="#" title="Save" style="display: inline-block;" aria-label="Save">
+                    <span class="fa fa-floppy-o"></span>
+                </a>
+                <a id="workflow-options-button" class="panel-header-button" href="#" title="Workflow options" style="display: inline-block;" aria-label="Workflow options">
+                    <span class="fa fa-cog"></span>
+                </a>
+            </div>
             ${h.to_unicode( stored.name ) | h}
         </div>
     </div>

test/galaxy_selenium/navigates_galaxy.py

@@ -800,6 +800,12 @@ class NavigatesGalaxy(HasDriver):
     def workflow_editor_options_menu_element(self):
         return self.wait_for_selector_visible("#workflow-options-button-menu")
 
+    def workflow_editor_click_run(self):
+        return self.wait_for_and_click_selector("#workflow-run-button")
+
+    def workflow_editor_click_save(self):
+        return self.wait_for_and_click_selector("#workflow-save-button")
+
     def admin_open(self):
         self.components.masthead.admin.wait_for_and_click()
 

test/selenium_tests/test_workflow_editor.py

@@ -335,7 +335,7 @@ steps:
         self.screenshot("workflow_editor_missing_tool")
 
     def workflow_editor_save_and_close(self):
-        self.workflow_editor_click_option("Save")
+        self.workflow_editor_click_save()
         self.workflow_editor_click_option("Close")
 
     def workflow_editor_maximize_center_pane(self, collapse_left=True, collapse_right=True):