Merge pull request #5675 from qiagu/iss4846

Fix active tab highlighting

client/galaxy/scripts/apps/analysis.js

@@ -101,15 +101,20 @@ window.app = function app(options, bootstrapped) {
             var model = new UserPreferences.Model({
                 user_id: Galaxy.params.id
             });
-            this.page.display(new FormWrapper.View(model.get(form_id)));
+            this.page.display(new FormWrapper.View(_.extend(
+                model.get(form_id),
+                {active_tab: "user"}
+            )));
         },
 
         show_visualizations: function(action_id) {
+            var activeTab = action_id=="list_published"?"shared":"visualization";
             this.page.display(
                 new GridShared.View({
                     action_id: action_id,
                     plural: "Visualizations",
-                    item: "visualization"
+                    item: "visualization",
+                    active_tab: activeTab
                 })
             );
         },
@@ -118,7 +123,8 @@ window.app = function app(options, bootstrapped) {
             this.page.display(
                 new FormWrapper.View({
                     url: `visualization/edit?id=${QueryStringParsing.get("id")}`,
-                    redirect: "visualizations/list"
+                    redirect: "visualizations/list",
+                    active_tab: "visualization"
                 })
             );
         },
@@ -209,11 +215,13 @@ window.app = function app(options, bootstrapped) {
         },
 
         show_pages: function(action_id) {
+            var activeTab = action_id=="list_published"?"shared":"user";
             this.page.display(
                 new GridShared.View({
                     action_id: action_id,
                     plural: "Pages",
-                    item: "page"
+                    item: "page",
+                    active_tab: activeTab
                 })
             );
         },
@@ -222,7 +230,8 @@ window.app = function app(options, bootstrapped) {
             this.page.display(
                 new FormWrapper.View({
                     url: "page/create",
-                    redirect: "pages/list"
+                    redirect: "pages/list",
+                    active_tab: "user"
                 })
             );
         },
@@ -231,7 +240,8 @@ window.app = function app(options, bootstrapped) {
             this.page.display(
                 new FormWrapper.View({
                     url: `page/edit?id=${QueryStringParsing.get("id")}`,
-                    redirect: "pages/list"
+                    redirect: "pages/list",
+                    active_tab: "user"
                 })
             );
         },
@@ -244,7 +254,8 @@ window.app = function app(options, bootstrapped) {
             this.page.display(
                 new FormWrapper.View({
                     url: `workflow/create`,
-                    redirect: "workflow/editor"
+                    redirect: "workflow/editor",
+                    active_tab: "workflow"
                 })
             );
         },
@@ -320,14 +331,18 @@ window.app = function app(options, bootstrapped) {
             Utils.get({
                 url: `${Galaxy.root}api/workflows/${Utils.getQueryString("id")}/download?style=run`,
                 success: response => {
-                    this.page.display(new ToolFormComposite.View(response));
+                    this.page.display(new ToolFormComposite.View(_.extend(
+                        response,
+                        {active_tab: "workflow"}
+                    )));
                 },
                 error: response => {
                     var error_msg = response.err_msg || "Error occurred while loading the resource.";
                     var options = {
                         message: error_msg,
                         status: "danger",
-                        persistent: true
+                        persistent: true,
+                        active_tab: "workflow"
                     };
                     this.page.display(new Ui.Message(options));
                 }

client/galaxy/scripts/layout/menu.js

@@ -340,11 +340,13 @@ var Tab = Backbone.View.extend({
             .attr("title", this.model.get("tooltip"))
             .tooltip("destroy");
         this.model.get("tooltip") && this.$toggle.tooltip({ placement: "bottom" });
-        this.$dropdown
-            .removeClass()
-            .addClass("dropdown")
-            .addClass(this.model.get("disabled") && "disabled")
-            .addClass(this.model.get("active") && "active");
+        if(!this.model.get("menu")){
+            this.$dropdown
+                .removeClass()
+                .addClass("dropdown")
+                .addClass(this.model.get("disabled") && "disabled")
+                .addClass(this.model.get("active") && "active");
+        };
         if (this.model.get("menu") && this.model.get("show_menu")) {
             this.$menu.show();
             $("#dd-helper")

client/galaxy/scripts/mvc/dataset/dataset-edit-attributes.js

@@ -12,6 +12,7 @@ var View = Backbone.View.extend({
         });
         this.message = new Ui.Message({ persistent: true });
         this.tabs = this._createTabs();
+        this.active_tab = "user";
         this.$el
             .append($("<h4/>").append("Edit dataset attributes"))
             .append(this.message.$el)

client/galaxy/scripts/mvc/dataset/dataset-error.js

@@ -9,6 +9,7 @@ var View = Backbone.View.extend({
         this.model = new Backbone.Model({
             dataset_id: Galaxy.params.dataset_id
         });
+        this.active_tab = "user";
         this.render();
     },
 

client/galaxy/scripts/mvc/form/form-wrapper.js

@@ -6,6 +6,9 @@ var View = Backbone.View.extend({
         this.model = new Backbone.Model(options);
         this.url = this.model.get("url");
         this.redirect = this.model.get("redirect");
+        if (options && options.active_tab){
+            this.active_tab = options.active_tab;
+        }
         this.setElement("<div/>");
         this.render();
     },

client/galaxy/scripts/mvc/grid/grid-shared.js

@@ -9,6 +9,9 @@ var View = Backbone.View.extend({
         this.model = new Backbone.Model(options);
         this.item = this.model.get("item");
         this.title = this.model.get("plural");
+        if (options && options.active_tab){
+            this.active_tab = options.active_tab;
+        }
         $.ajax({
             url: `${Galaxy.root + this.item}/${this.model.get("action_id")}?${$.param(Galaxy.params)}`,
             success: function(response) {

client/galaxy/scripts/mvc/history/history-list.js

@@ -107,6 +107,12 @@ var View = Backbone.View.extend({
         var self = this;
         LoadingIndicator.markViewAsLoading(this);
 
+        if(options.action_id == "list_published"){
+            this.active_tab = "shared";
+        }
+        else if (options.action_id = "list"){
+            this.active_tab = "user";
+        }
         this.model = new Backbone.Model();
         Utils.get({
             url: `${Galaxy.root}history/${options.action_id}?${$.param(Galaxy.params)}`,

client/galaxy/scripts/mvc/tool/tool-form-composite.js

@@ -15,6 +15,9 @@ var View = Backbone.View.extend({
         this.modal = parent.Galaxy.modal || new Modal.View();
         this.model = (options && options.model) || new Backbone.Model(options);
         this.deferred = new Deferred();
+        if (options && options.active_tab){
+            this.active_tab = options.active_tab;
+        }
         this.setElement(
             $("<div/>")
                 .addClass("ui-form-composite")

client/galaxy/scripts/mvc/ui/ui-misc.js

@@ -47,6 +47,9 @@ export var Message = Backbone.View.extend({
                 fade: true
             }).set(options);
         this.listenTo(this.model, "change", this.render, this);
+        if (options && options.active_tab){
+            this.active_tab = options.active_tab;
+        }
         this.render();
     },
     update: function(options) {

client/galaxy/scripts/mvc/user/user-custom-builds.js

@@ -15,6 +15,7 @@ var Collection = Backbone.Collection.extend({
 var View = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
+        this.active_tab = "user";
         var history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
         this.model = new Backbone.Model();
         this.model.url = `${Galaxy.root}api/histories/${history_id}/custom_builds_metadata`;

client/galaxy/scripts/mvc/user/user-preferences.js

@@ -101,6 +101,7 @@ var Model = Backbone.Model.extend({
 /** View of the main user preference panel with links to individual user forms */
 var View = Backbone.View.extend({
     title: _l("User Preferences"),
+    active_tab: "user",
     initialize: function() {
         this.model = new Model();
         this.setElement("<div/>");

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

@@ -7,6 +7,7 @@ var View = Backbone.View.extend({
         var self = this;
         this.setElement($("<div/>"));
         this.model = new Backbone.Model();
+        this.active_tab = "visualization";
         $.ajax({
             url: `${Galaxy.root}api/datasets/${options.dataset_id}`
         }).done(dataset => {

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

@@ -346,6 +346,7 @@ const WorkflowListView = Backbone.View.extend({
 const ImportWorkflowView = Backbone.View.extend({
     initialize: function() {
         this.setElement("<div/>");
+        this.active_tab = "workflow";
         this.render();
     },