From db4c67395ec802f26db95bc1e1dd63b15b3c12f0 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 6 Dec 2019 19:02:39 +0200
Subject: [PATCH 01/36] port masthead to vue

---
 client/galaxy/scripts/components/Masthead.vue | 91 +++++++++++++++++++
 client/galaxy/scripts/layout/masthead.js      | 50 +++++++---
 2 files changed, 129 insertions(+), 12 deletions(-)
 create mode 100644 client/galaxy/scripts/components/Masthead.vue

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
new file mode 100644
index 000000000000..620347a9f521
--- /dev/null
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -0,0 +1,91 @@
+<template>
+        <div>
+            <b-navbar id="masthead" toggleable="lg" type="dark"
+                      role="navigation" aria-label="Main" class="justify-content-center">
+                <b-navbar-brand :href="brandLink" aria-label="homepage">
+                    <img alt="logo" class="navbar-brand-image" :src="brandImage"/>
+                    <span class="navbar-brand-title">{{ brandTitle }}</span>
+                </b-navbar-brand>
+
+                <b-navbar-nav>
+                    <template v-for="tab in tabs">
+                        <b-nav-item v-if="!tab.menu"
+                                    :active="tab.id === activeTab"
+                                    :class="{
+                                        active: tab.id === activeTab
+                                    }"
+                                    :style="{
+                                        visibility: tab.visible ? 'visible' : 'hidden',
+                                    }"
+                                    :id="tab.id" href="#"
+
+                                    :link-classes="[tab.icon && 'nav-icon', tab.icon && 'fa', tab.icon || '']"
+                        >
+                            {{ tab["title"] }}
+                        </b-nav-item>
+
+                        <b-nav-item-dropdown v-else
+                                             :text="tab.title"
+                                             :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
+                                             :id="tab.id" href="#">
+                            <b-dropdown-item v-for="item in tab.menu" href="#">{{ item["title"] }}</b-dropdown-item>
+                        </b-nav-item-dropdown>
+                    </template>
+                </b-navbar-nav>
+
+                <div ref="quota-meter-container" class="quota-meter-container"/>
+            </b-navbar>
+        </div>
+</template>
+
+<script>
+    // import { VBTooltip } from "bootstrap-vue";
+    import { BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle } from "bootstrap-vue";
+
+    export default {
+        name: "Masthead.vue",
+        props: {
+            brandTitle: {
+                type: String
+            },
+            brandLink: {
+                type: String
+            },
+            brandImage: {
+                type: String
+            },
+            quotaMeter: {
+                type: Object
+            },
+            activeTab: {
+                type: String,
+            },
+            tabs: {
+                type: Array
+            }
+        },
+        components: {
+            BNavbar,
+            BNavbarBrand,
+            BNavbarNav,
+        },
+        mounted() {
+            console.log(this.tabs);
+            console.log(this.activeTab);
+
+            this.quotaMeter.setElement(this.$refs['quota-meter-container']);
+            this.quotaMeter.render();
+        }
+    }
+</script>
+
+<style scoped>
+    i.fa {
+        width: 100%;
+        height: 100%;
+    }
+
+    .icon > a {
+
+    }
+</style>
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 2265f30d01b0..cc3efab1391c 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -5,6 +5,10 @@ import Scratchbook from "layout/scratchbook";
 import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
 
+import Masthead from "../components/Masthead.vue";
+import { mountVueComponent } from "../utils/mountVueComponent";
+import _ from "../libs/underscore";
+
 /** Masthead **/
 const View = Backbone.View.extend({
     initialize: function(options) {
@@ -36,7 +40,8 @@ const View = Backbone.View.extend({
             .fetch(this.options);
 
         // highlight initial active view
-        this.highlight(options.active_view);
+        this.activeView = options.active_view;
+        this.highlight(options.active_view); // covered
 
         // scratchbook
         Galaxy.frame = this.frame = new Scratchbook({
@@ -81,10 +86,29 @@ const View = Backbone.View.extend({
     },
 
     render: function() {
-        this.$navbarBrandTitle.html(`Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`);
-        this.$navbarBrandLink.attr("href", this.options.logo_url);
-        this.$navbarBrandImage.attr("src", this.options.logo_src);
+        this.$navbarBrandTitle.html(`Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`); // covered
+        this.$navbarBrandLink.attr("href", this.options.logo_url); // covered
+        this.$navbarBrandImage.attr("src", this.options.logo_src); // covered
         this.quotaMeter.render();
+
+
+        const el = document.createElement('div');
+        this.el.appendChild(el); // use this.el directly when feature parity is accomplished
+
+        mountVueComponent(Masthead)(
+            { // params
+                brandTitle: `Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`,
+                brandLink:  this.options.logo_url,
+                brandImage: this.options.logo_src,
+
+                quotaMeter: this.quotaMeter,
+                activeTab: this.activeView,
+                tabs: _.map(this.collection.models, el => {
+                    return el.toJSON();
+                })
+            },
+            el
+        );
         return this;
     },
 
@@ -97,14 +121,16 @@ const View = Backbone.View.extend({
     /** body template */
     _template: function() {
         return `
-            <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark" role="navigation" aria-label="Main">
-                <a class="navbar-brand" aria-label="homepage">
-                    <img alt="logo" class="navbar-brand-image"/>
-                    <span class="navbar-brand-title"/>
-                </a>
-                <ul class="navbar-nav"/>
-                <div class="quota-meter-container"/>
-            </nav>`;
+            <div>
+                <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark" role="navigation" aria-label="Main">
+                    <a class="navbar-brand" aria-label="homepage">
+                        <img alt="logo" class="navbar-brand-image"/>
+                        <span class="navbar-brand-title"/>
+                    </a>
+                    <ul class="navbar-nav"/>
+                    <div class="quota-meter-container"/>
+                </nav>
+            </div>`;
     }
 });
 

From a61b3d211e5b5409168f34658de9f42a2bc4b47d Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 6 Dec 2019 19:38:55 +0200
Subject: [PATCH 02/36] add tooltips

---
 client/galaxy/scripts/components/Masthead.vue | 13 ++++++++++---
 client/galaxy/scripts/layout/menu.js          |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 620347a9f521..935d713e896c 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -14,6 +14,8 @@
                                     :class="{
                                         active: tab.id === activeTab
                                     }"
+                                    v-b-tooltip.hover.bottom
+                                    :title="tab.tooltip"
                                     :style="{
                                         visibility: tab.visible ? 'visible' : 'hidden',
                                     }"
@@ -26,6 +28,8 @@
 
                         <b-nav-item-dropdown v-else
                                              :text="tab.title"
+                                             v-b-tooltip.hover.bottom
+                                             :title="tab.tooltip"
                                              :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
                                              :id="tab.id" href="#">
                             <b-dropdown-item v-for="item in tab.menu" href="#">{{ item["title"] }}</b-dropdown-item>
@@ -39,11 +43,14 @@
 </template>
 
 <script>
-    // import { VBTooltip } from "bootstrap-vue";
-    import { BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle } from "bootstrap-vue";
+    import { VBTooltip } from "bootstrap-vue";
+    import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 
     export default {
-        name: "Masthead.vue",
+        name: "Masthead",
+        directives: {
+            "v-b-tooltip": VBTooltip
+        },
         props: {
             brandTitle: {
                 type: String
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index b9a2b210aee2..d8777f9b1610 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -353,7 +353,7 @@ const Tab = Backbone.View.extend({
                 visibility: (this.model.get("visible") && "visible") || "hidden"
             });
         this.model.set("url", this._formatUrl(this.model.get("url")));
-        this.$note
+        this.$note // TODO: port note
             .html(this.model.get("note") || "")
             .removeClass()
             .addClass("nav-note")

From c3b33fe1a2f13733606ff93f6796ea8f8ee92cff Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 6 Dec 2019 20:31:45 +0200
Subject: [PATCH 03/36] add popovers

---
 client/galaxy/scripts/components/Masthead.vue | 91 ++++++++++++-------
 client/galaxy/scripts/layout/masthead.js      |  5 +-
 client/galaxy/scripts/layout/menu.js          |  2 +-
 3 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 935d713e896c..c004cdd2caf7 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -9,31 +9,34 @@
 
                 <b-navbar-nav>
                     <template v-for="tab in tabs">
-                        <b-nav-item v-if="!tab.menu"
-                                    :active="tab.id === activeTab"
-                                    :class="{
-                                        active: tab.id === activeTab
-                                    }"
-                                    v-b-tooltip.hover.bottom
-                                    :title="tab.tooltip"
-                                    :style="{
-                                        visibility: tab.visible ? 'visible' : 'hidden',
-                                    }"
-                                    :id="tab.id" href="#"
+                            <b-nav-item v-if="!tab.menu"
+                                        :class="{
+                                            active: tab.id === activeTab,
+                                        }"
+                                        :active="!tab.disabled"
+                                        v-b-tooltip.hover.bottom :title="tab.tooltip"
+                                        @click="open(tab, $event)"
+                                        v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
+                                        :style="{
+                                            visibility: tab.visible ? 'visible' : 'hidden',
+                                        }"
+                                        :id="tab.id" href="#"
 
-                                    :link-classes="[tab.icon && 'nav-icon', tab.icon && 'fa', tab.icon || '']"
-                        >
-                            {{ tab["title"] }}
-                        </b-nav-item>
+                                        :link-classes="[tab.icon && 'nav-icon', tab.icon && 'fa', tab.icon || '']"
+                            >
 
-                        <b-nav-item-dropdown v-else
-                                             :text="tab.title"
-                                             v-b-tooltip.hover.bottom
-                                             :title="tab.tooltip"
-                                             :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
-                                             :id="tab.id" href="#">
-                            <b-dropdown-item v-for="item in tab.menu" href="#">{{ item["title"] }}</b-dropdown-item>
-                        </b-nav-item-dropdown>
+                                {{ tab["title"] }}
+                            </b-nav-item>
+
+                            <b-nav-item-dropdown v-else
+                                                 :text="tab.title"
+                                                 v-b-tooltip.hover.bottom :title="tab.tooltip"
+                                                 @show="open(tab, $event)"
+                                                 v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
+                                                 :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
+                                                 :id="tab.id" href="#">
+                                <b-dropdown-item v-for="item in tab.menu" href="#">{{ item["title"] }}</b-dropdown-item>
+                            </b-nav-item-dropdown>
                     </template>
                 </b-navbar-nav>
 
@@ -44,12 +47,14 @@
 
 <script>
     import { VBTooltip } from "bootstrap-vue";
+    import { VBPopover } from "bootstrap-vue";
     import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 
     export default {
         name: "Masthead",
         directives: {
-            "v-b-tooltip": VBTooltip
+            "v-b-tooltip": VBTooltip,
+            "v-b-popover": VBPopover
         },
         props: {
             brandTitle: {
@@ -69,6 +74,9 @@
             },
             tabs: {
                 type: Array
+            },
+            appRoot: {
+                type: String,
             }
         },
         components: {
@@ -76,10 +84,32 @@
             BNavbarBrand,
             BNavbarNav,
         },
-        mounted() {
-            console.log(this.tabs);
-            console.log(this.activeTab);
+        data() {
+            return {
+            };
+        },
+        computed: {
+            popoverNote() {
+                return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
+            }
+        },
+        methods: {
+            open(tab, event) {
+                if (tab.disabled) {
+                    event.preventDefault();
 
+                    this.$root.$emit('bv::hide::tooltip');
+                    this.$root.$emit('bv::show::popover', tab.id);
+
+                    setTimeout(() => {
+                        this.$root.$emit('bv::hide::popover', tab.id);
+                    }, 3000);
+                } else {
+                    // TODO: action
+                }
+            },
+        },
+        mounted() {
             this.quotaMeter.setElement(this.$refs['quota-meter-container']);
             this.quotaMeter.render();
         }
@@ -87,12 +117,5 @@
 </script>
 
 <style scoped>
-    i.fa {
-        width: 100%;
-        height: 100%;
-    }
-
-    .icon > a {
 
-    }
 </style>
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index cc3efab1391c..ba818fd874bd 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -8,6 +8,7 @@ import { getGalaxyInstance } from "app";
 import Masthead from "../components/Masthead.vue";
 import { mountVueComponent } from "../utils/mountVueComponent";
 import _ from "../libs/underscore";
+import { getAppRoot } from "onload/loadConfig";
 
 /** Masthead **/
 const View = Backbone.View.extend({
@@ -105,7 +106,9 @@ const View = Backbone.View.extend({
                 activeTab: this.activeView,
                 tabs: _.map(this.collection.models, el => {
                     return el.toJSON();
-                })
+                }),
+
+                appRoot: getAppRoot()
             },
             el
         );
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index d8777f9b1610..722e75b17405 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -477,7 +477,7 @@ const Tab = Backbone.View.extend({
             } else {
                 model.set("show_menu", true);
             }
-        } else {
+        } else { // covered
             if (this.$link.popover) {
                 this.$link.popover("dispose");
             }

From 3bd05089035a0d1d1bcd458b266a73b5a0f73a58 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 6 Dec 2019 20:48:14 +0200
Subject: [PATCH 04/36] actions

---
 client/galaxy/scripts/components/Masthead.vue | 31 ++++++++++++++++---
 client/galaxy/scripts/layout/masthead.js      |  3 +-
 client/galaxy/scripts/layout/menu.js          |  6 ++--
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index c004cdd2caf7..3cee90511051 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -20,8 +20,9 @@
                                         :style="{
                                             visibility: tab.visible ? 'visible' : 'hidden',
                                         }"
-                                        :id="tab.id" href="#"
-
+                                        :id="tab.id"
+                                        :href="tab.url"
+                                        :target="tab.target"
                                         :link-classes="[tab.icon && 'nav-icon', tab.icon && 'fa', tab.icon || '']"
                             >
 
@@ -35,7 +36,13 @@
                                                  v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
                                                  :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
                                                  :id="tab.id" href="#">
-                                <b-dropdown-item v-for="item in tab.menu" href="#">{{ item["title"] }}</b-dropdown-item>
+                                <b-dropdown-item v-for="item in tab.menu"
+                                                 :href="item.url"
+                                                 :target="item.target"
+                                                 @click="open(item, $event)"
+                                >
+                                    {{ item["title"] }}
+                                </b-dropdown-item>
                             </b-nav-item-dropdown>
                     </template>
                 </b-navbar-nav>
@@ -77,6 +84,9 @@
             },
             appRoot: {
                 type: String,
+            },
+            Galaxy: {
+                type: Object,
             }
         },
         components: {
@@ -104,12 +114,23 @@
                     setTimeout(() => {
                         this.$root.$emit('bv::hide::popover', tab.id);
                     }, 3000);
-                } else {
-                    // TODO: action
+                } else if (!tab.menu) {
+                    event.preventDefault();
+
+                    if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
+                        this.Galaxy.page.router.executeUseRouter(tab.url);
+                    } else {
+                        try {
+                            this.Galaxy.frame.add(tab);
+                        } catch (err) {
+                            console.warn("Missing frame element on galaxy instance", err);
+                        }
+                    }
                 }
             },
         },
         mounted() {
+            console.log(this.tabs);
             this.quotaMeter.setElement(this.$refs['quota-meter-container']);
             this.quotaMeter.render();
         }
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index ba818fd874bd..bd93a7a1bf25 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -108,7 +108,8 @@ const View = Backbone.View.extend({
                     return el.toJSON();
                 }),
 
-                appRoot: getAppRoot()
+                appRoot: getAppRoot(),
+                Galaxy: getGalaxyInstance(),
             },
             el
         );
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index 722e75b17405..61f403d97f68 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -442,7 +442,7 @@ const Tab = Backbone.View.extend({
             });
     },
 
-    buildLink: function(label, url) {
+    buildLink: function(label, url) { // covered
         return $("<div/>")
             .append(
                 $("<a/>")
@@ -453,7 +453,7 @@ const Tab = Backbone.View.extend({
     },
 
     /** Handle click event */
-    _toggleClick: function(e) {
+    _toggleClick: function(e) { // covered
         const model = this.model;
         e.preventDefault();
         $(".tooltip").hide();
@@ -477,7 +477,7 @@ const Tab = Backbone.View.extend({
             } else {
                 model.set("show_menu", true);
             }
-        } else { // covered
+        } else {
             if (this.$link.popover) {
                 this.$link.popover("dispose");
             }

From 71459d6253606e5fcbc94d0ffc2f048d0ab3170c Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 6 Dec 2019 20:59:04 +0200
Subject: [PATCH 05/36] port nav-note

---
 client/galaxy/scripts/components/Masthead.vue | 9 ++++++++-
 client/galaxy/scripts/layout/menu.js          | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 3cee90511051..6d493b76157c 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -27,6 +27,7 @@
                             >
 
                                 {{ tab["title"] }}
+                                <div v-if="tab.show_note" class="nav-note-port">{{ tab["note"] }}</div>
                             </b-nav-item>
 
                             <b-nav-item-dropdown v-else
@@ -42,6 +43,7 @@
                                                  @click="open(item, $event)"
                                 >
                                     {{ item["title"] }}
+                                    <div v-if="tab.note" class="nav-note-port">{{ tab["note"] }}</div>
                                 </b-dropdown-item>
                             </b-nav-item-dropdown>
                     </template>
@@ -138,5 +140,10 @@
 </script>
 
 <style scoped>
-
+    .nav-note-port {
+        position: absolute;
+        bottom: .1rem;
+        font-size: .7rem;
+        color: gold;
+    }
 </style>
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index 61f403d97f68..5d449f6516fe 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -60,7 +60,7 @@ const Collection = Backbone.Collection.extend({
             tooltip: _l("Chain tools into workflows"),
             disabled: !Galaxy.user.id,
             url: "workflows/list",
-            target: "__use_router__"
+            target: "__use_router__",
         });
 
         //
@@ -353,7 +353,7 @@ const Tab = Backbone.View.extend({
                 visibility: (this.model.get("visible") && "visible") || "hidden"
             });
         this.model.set("url", this._formatUrl(this.model.get("url")));
-        this.$note // TODO: port note
+        this.$note
             .html(this.model.get("note") || "")
             .removeClass()
             .addClass("nav-note")

From 38042daf239ee97b436df1513c00f4c850fe6b91 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Mon, 9 Dec 2019 21:06:30 +0200
Subject: [PATCH 06/36] add scratch book

---
 client/galaxy/scripts/components/Masthead.vue | 75 +++++++++++++++++--
 client/galaxy/scripts/layout/masthead.js      |  2 +
 client/galaxy/scripts/layout/menu.js          |  2 +-
 client/galaxy/scripts/layout/scratchbook.js   |  4 +
 4 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 6d493b76157c..56f049d21b9c 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -23,13 +23,15 @@
                                         :id="tab.id"
                                         :href="tab.url"
                                         :target="tab.target"
-                                        :link-classes="[tab.icon && 'nav-icon', tab.icon && 'fa', tab.icon || '']"
-                            >
+                                        :link-classes="[
+                                            tab.toggle && 'toggle',
+                                            tab.icon && 'nav-icon',
+                                            tab.icon && 'fa',
+                                            tab.icon || ''
+                                        ]">
 
                                 {{ tab["title"] }}
-                                <div v-if="tab.show_note" class="nav-note-port">{{ tab["note"] }}</div>
                             </b-nav-item>
-
                             <b-nav-item-dropdown v-else
                                                  :text="tab.title"
                                                  v-b-tooltip.hover.bottom :title="tab.tooltip"
@@ -43,9 +45,9 @@
                                                  @click="open(item, $event)"
                                 >
                                     {{ item["title"] }}
-                                    <div v-if="tab.note" class="nav-note-port">{{ tab["note"] }}</div>
                                 </b-dropdown-item>
                             </b-nav-item-dropdown>
+                        <li v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab["note"] }}</li>
                     </template>
                 </b-navbar-nav>
 
@@ -58,6 +60,7 @@
     import { VBTooltip } from "bootstrap-vue";
     import { VBPopover } from "bootstrap-vue";
     import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
+    import _ from "underscore";
 
     export default {
         name: "Masthead",
@@ -84,6 +87,9 @@
             tabs: {
                 type: Array
             },
+            frames: {
+                type: Object,
+            },
             appRoot: {
                 type: String,
             },
@@ -107,6 +113,10 @@
         },
         methods: {
             open(tab, event) {
+                if (tab.onclick) {
+                    return this.propogateClick(tab, event);
+                }
+
                 if (tab.disabled) {
                     event.preventDefault();
 
@@ -121,29 +131,80 @@
 
                     if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
                         this.Galaxy.page.router.executeUseRouter(tab.url);
+                        this.activeTab = tab.id;
                     } else {
                         try {
                             this.Galaxy.frame.add(tab);
+                            this.activeTab = tab.id;
                         } catch (err) {
                             console.warn("Missing frame element on galaxy instance", err);
                         }
                     }
                 }
             },
+            propogateClick(tab, event) {
+                event.preventDefault();
+                tab.onclick();
+
+                if (tab.id === "enable-scratchbook") {
+                    _.each(this.tabs, (tab, i) => {
+                        if (tab.id === "enable-scratchbook") {
+                            tab.active = !tab.active;
+
+                            this.$set(this.tabs, i, {
+                                ...tab,
+                                toggle: tab.active,
+                                show_note: tab.active,
+                                note_cls: tab.active && "fa fa-check"
+                            });
+                        }
+                    });
+                }
+            },
+        },
+        created() {
+            _.each(this.tabs, tab => {
+                if (tab.onbeforeunload) {
+                    console.log(tab);
+                    document.addEventListener('beforeunload', () => {
+                        tab.onbeforeunload();
+                    });
+                }
+            });
         },
         mounted() {
             console.log(this.tabs);
             this.quotaMeter.setElement(this.$refs['quota-meter-container']);
             this.quotaMeter.render();
+
+            const idx = _.findIndex(this.tabs, { id: "show-scratchbook" });
+            this.frames
+                .on("add remove", () => {
+                    this.$set(this.tabs, idx, {
+                        ...this.tabs[idx],
+                        note: this.frames.length(),
+                        visible: this.frames.length() > 0
+                    });
+                })
+                .on("show hide", () => {
+                    this.$set(this.tabs, idx, {
+                        ...this.tabs[idx],
+                        toggle: this.frames.visible,
+                        icon: (this.frames.visible && "fa-eye") || "fa-eye-slash"
+                    });
+                });
         }
     }
 </script>
 
 <style scoped>
     .nav-note-port {
-        position: absolute;
-        bottom: .1rem;
+        position: relative;
+        font-weight: 700;
+        left: -0.4rem;
+        top: 0.7rem;
         font-size: .7rem;
         color: gold;
+        width: 0;
     }
 </style>
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index bd93a7a1bf25..ed7accb6c0e1 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -108,6 +108,8 @@ const View = Backbone.View.extend({
                     return el.toJSON();
                 }),
 
+                frames: this.frame.getFrames(),
+
                 appRoot: getAppRoot(),
                 Galaxy: getGalaxyInstance(),
             },
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index 5d449f6516fe..b1f91448c76d 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -60,7 +60,7 @@ const Collection = Backbone.Collection.extend({
             tooltip: _l("Chain tools into workflows"),
             disabled: !Galaxy.user.id,
             url: "workflows/list",
-            target: "__use_router__",
+            target: "__use_router__"
         });
 
         //
diff --git a/client/galaxy/scripts/layout/scratchbook.js b/client/galaxy/scripts/layout/scratchbook.js
index eeb7953ef5d8..532fa391ca33 100644
--- a/client/galaxy/scripts/layout/scratchbook.js
+++ b/client/galaxy/scripts/layout/scratchbook.js
@@ -70,6 +70,10 @@ export default Backbone.View.extend({
         this.history_cache = {};
     },
 
+    getFrames() { // needed for Vue.js integration
+        return this.frames;
+    },
+
     /** Add a dataset to the frames */
     addDataset: function(dataset_id) {
         const self = this;

From 3545c387c7bf9142d90e4d87e0f7f795e0f3e78b Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Mon, 9 Dec 2019 21:54:15 +0200
Subject: [PATCH 07/36] active tab

---
 client/galaxy/scripts/components/Masthead.vue | 11 +++++------
 client/galaxy/scripts/layout/masthead.js      |  3 ++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 56f049d21b9c..47ef75ef7078 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -11,7 +11,7 @@
                     <template v-for="tab in tabs">
                             <b-nav-item v-if="!tab.menu"
                                         :class="{
-                                            active: tab.id === activeTab,
+                                            active: tab.id === activeTab(),
                                         }"
                                         :active="!tab.disabled"
                                         v-b-tooltip.hover.bottom :title="tab.tooltip"
@@ -33,6 +33,9 @@
                                 {{ tab["title"] }}
                             </b-nav-item>
                             <b-nav-item-dropdown v-else
+                                                 :class="{
+                                                    active: tab.id === activeTab(),
+                                                 }"
                                                  :text="tab.title"
                                                  v-b-tooltip.hover.bottom :title="tab.tooltip"
                                                  @show="open(tab, $event)"
@@ -82,7 +85,7 @@
                 type: Object
             },
             activeTab: {
-                type: String,
+                type: Function,
             },
             tabs: {
                 type: Array
@@ -131,11 +134,9 @@
 
                     if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
                         this.Galaxy.page.router.executeUseRouter(tab.url);
-                        this.activeTab = tab.id;
                     } else {
                         try {
                             this.Galaxy.frame.add(tab);
-                            this.activeTab = tab.id;
                         } catch (err) {
                             console.warn("Missing frame element on galaxy instance", err);
                         }
@@ -165,7 +166,6 @@
         created() {
             _.each(this.tabs, tab => {
                 if (tab.onbeforeunload) {
-                    console.log(tab);
                     document.addEventListener('beforeunload', () => {
                         tab.onbeforeunload();
                     });
@@ -173,7 +173,6 @@
             });
         },
         mounted() {
-            console.log(this.tabs);
             this.quotaMeter.setElement(this.$refs['quota-meter-container']);
             this.quotaMeter.render();
 
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index ed7accb6c0e1..6bedbfbaaa46 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -103,7 +103,7 @@ const View = Backbone.View.extend({
                 brandImage: this.options.logo_src,
 
                 quotaMeter: this.quotaMeter,
-                activeTab: this.activeView,
+                activeTab: () => {return this.activeView},
                 tabs: _.map(this.collection.models, el => {
                     return el.toJSON();
                 }),
@@ -119,6 +119,7 @@ const View = Backbone.View.extend({
     },
 
     highlight: function(id) {
+        this.activeView = id;
         this.collection.forEach(function(model) {
             model.set("active", model.id == id);
         });

From fe6ee3b307a8c559b2640ef2b3def62600bff326 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Mon, 9 Dec 2019 22:02:41 +0200
Subject: [PATCH 08/36] fix scratch-book indicator

---
 client/galaxy/scripts/components/Masthead.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 47ef75ef7078..24a81c6d9f9c 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -182,7 +182,8 @@
                     this.$set(this.tabs, idx, {
                         ...this.tabs[idx],
                         note: this.frames.length(),
-                        visible: this.frames.length() > 0
+                        visible: this.frames.length() > 0,
+                        show_note: this.frames.length() > 0,
                     });
                 })
                 .on("show hide", () => {

From 4500a787646d9446a6882edd80e51885d20c1dac Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Thu, 2 Jan 2020 16:46:19 +0200
Subject: [PATCH 09/36] dot notation for property accessors

---
 client/galaxy/scripts/components/Masthead.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 24a81c6d9f9c..a97aead090ba 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -30,7 +30,7 @@
                                             tab.icon || ''
                                         ]">
 
-                                {{ tab["title"] }}
+                                {{ tab.title }}
                             </b-nav-item>
                             <b-nav-item-dropdown v-else
                                                  :class="{
@@ -47,10 +47,10 @@
                                                  :target="item.target"
                                                  @click="open(item, $event)"
                                 >
-                                    {{ item["title"] }}
+                                    {{ item.title }}
                                 </b-dropdown-item>
                             </b-nav-item-dropdown>
-                        <li v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab["note"] }}</li>
+                        <li v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</li>
                     </template>
                 </b-navbar-nav>
 

From cd36bd20d1b81cad33732a16402dcaec5385312c Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Thu, 2 Jan 2020 17:38:16 +0200
Subject: [PATCH 10/36] prepare nav item to be refactored into a separate
 component

---
 client/galaxy/scripts/components/Masthead.vue | 23 +++++++++++--------
 .../scripts/components/MastheadItem.vue       | 13 +++++++++++
 2 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 client/galaxy/scripts/components/MastheadItem.vue

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index a97aead090ba..c6520cfeb787 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -24,13 +24,16 @@
                                         :href="tab.url"
                                         :target="tab.target"
                                         :link-classes="[
-                                            tab.toggle && 'toggle',
                                             tab.icon && 'nav-icon',
-                                            tab.icon && 'fa',
-                                            tab.icon || ''
                                         ]">
 
-                                {{ tab.title }}
+                                <template v-if="tab.icon">
+                                    <span :class="['fa', tab.icon, tab.toggle && 'toggle']"/>
+                                    <span v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</span>
+                                </template>
+                                <template v-else>
+                                    {{ tab.title }}
+                                </template>
                             </b-nav-item>
                             <b-nav-item-dropdown v-else
                                                  :class="{
@@ -50,7 +53,6 @@
                                     {{ item.title }}
                                 </b-dropdown-item>
                             </b-nav-item-dropdown>
-                        <li v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</li>
                     </template>
                 </b-navbar-nav>
 
@@ -199,12 +201,15 @@
 
 <style scoped>
     .nav-note-port {
-        position: relative;
+        position: absolute;
         font-weight: 700;
-        left: -0.4rem;
-        top: 0.7rem;
         font-size: .7rem;
         color: gold;
-        width: 0;
+        line-height: 3.5rem;
+        margin-left: 1px;
+    }
+
+    li .nav-link > span.toggle {
+        color: gold;
     }
 </style>
diff --git a/client/galaxy/scripts/components/MastheadItem.vue b/client/galaxy/scripts/components/MastheadItem.vue
new file mode 100644
index 000000000000..058164e1174b
--- /dev/null
+++ b/client/galaxy/scripts/components/MastheadItem.vue
@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "MastheadItem.vue"
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

From c368f682abaf3838354fa43424c6c441535236bb Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Thu, 2 Jan 2020 18:24:03 +0200
Subject: [PATCH 11/36] refactor nav item (wip)

---
 client/galaxy/scripts/components/Masthead.vue | 145 +++---------------
 .../scripts/components/MastheadItem.vue       | 139 ++++++++++++++++-
 client/galaxy/scripts/layout/masthead.js      |   2 +-
 3 files changed, 156 insertions(+), 130 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index c6520cfeb787..20e1ac1ea716 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -8,52 +8,10 @@
                 </b-navbar-brand>
 
                 <b-navbar-nav>
-                    <template v-for="tab in tabs">
-                            <b-nav-item v-if="!tab.menu"
-                                        :class="{
-                                            active: tab.id === activeTab(),
-                                        }"
-                                        :active="!tab.disabled"
-                                        v-b-tooltip.hover.bottom :title="tab.tooltip"
-                                        @click="open(tab, $event)"
-                                        v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                                        :style="{
-                                            visibility: tab.visible ? 'visible' : 'hidden',
-                                        }"
-                                        :id="tab.id"
-                                        :href="tab.url"
-                                        :target="tab.target"
-                                        :link-classes="[
-                                            tab.icon && 'nav-icon',
-                                        ]">
-
-                                <template v-if="tab.icon">
-                                    <span :class="['fa', tab.icon, tab.toggle && 'toggle']"/>
-                                    <span v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</span>
-                                </template>
-                                <template v-else>
-                                    {{ tab.title }}
-                                </template>
-                            </b-nav-item>
-                            <b-nav-item-dropdown v-else
-                                                 :class="{
-                                                    active: tab.id === activeTab(),
-                                                 }"
-                                                 :text="tab.title"
-                                                 v-b-tooltip.hover.bottom :title="tab.tooltip"
-                                                 @show="open(tab, $event)"
-                                                 v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                                                 :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
-                                                 :id="tab.id" href="#">
-                                <b-dropdown-item v-for="item in tab.menu"
-                                                 :href="item.url"
-                                                 :target="item.target"
-                                                 @click="open(item, $event)"
-                                >
-                                    {{ item.title }}
-                                </b-dropdown-item>
-                            </b-nav-item-dropdown>
-                    </template>
+                    <masthead-item v-for="(tab, idx) in tabs" :tab="tab" :activeTab="activeTab"
+                                   :key="`tab-${idx}`"
+                                   :appRoot="appRoot" :Galaxy="Galaxy" @updateScratchbookTab="updateScratchbookTab">
+                    </masthead-item>
                 </b-navbar-nav>
 
                 <div ref="quota-meter-container" class="quota-meter-container"/>
@@ -62,17 +20,12 @@
 </template>
 
 <script>
-    import { VBTooltip } from "bootstrap-vue";
-    import { VBPopover } from "bootstrap-vue";
     import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
+    import MastheadItem from "./MastheadItem";
     import _ from "underscore";
 
     export default {
         name: "Masthead",
-        directives: {
-            "v-b-tooltip": VBTooltip,
-            "v-b-popover": VBPopover
-        },
         props: {
             brandTitle: {
                 type: String
@@ -106,73 +59,23 @@
             BNavbar,
             BNavbarBrand,
             BNavbarNav,
-        },
-        data() {
-            return {
-            };
-        },
-        computed: {
-            popoverNote() {
-                return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
-            }
+            MastheadItem
         },
         methods: {
-            open(tab, event) {
-                if (tab.onclick) {
-                    return this.propogateClick(tab, event);
-                }
+            updateScratchbookTab(tab) {
+                _.each(this.tabs, (tab, i) => {
+                    if (tab.id === "enable-scratchbook") {
+                        tab.active = !tab.active;
 
-                if (tab.disabled) {
-                    event.preventDefault();
-
-                    this.$root.$emit('bv::hide::tooltip');
-                    this.$root.$emit('bv::show::popover', tab.id);
-
-                    setTimeout(() => {
-                        this.$root.$emit('bv::hide::popover', tab.id);
-                    }, 3000);
-                } else if (!tab.menu) {
-                    event.preventDefault();
-
-                    if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
-                        this.Galaxy.page.router.executeUseRouter(tab.url);
-                    } else {
-                        try {
-                            this.Galaxy.frame.add(tab);
-                        } catch (err) {
-                            console.warn("Missing frame element on galaxy instance", err);
-                        }
+                        this.$set(this.tabs, i, {
+                            ...tab,
+                            toggle: tab.active,
+                            show_note: tab.active,
+                            note_cls: tab.active && "fa fa-check"
+                        });
                     }
-                }
-            },
-            propogateClick(tab, event) {
-                event.preventDefault();
-                tab.onclick();
-
-                if (tab.id === "enable-scratchbook") {
-                    _.each(this.tabs, (tab, i) => {
-                        if (tab.id === "enable-scratchbook") {
-                            tab.active = !tab.active;
-
-                            this.$set(this.tabs, i, {
-                                ...tab,
-                                toggle: tab.active,
-                                show_note: tab.active,
-                                note_cls: tab.active && "fa fa-check"
-                            });
-                        }
-                    });
-                }
-            },
-        },
-        created() {
-            _.each(this.tabs, tab => {
-                if (tab.onbeforeunload) {
-                    document.addEventListener('beforeunload', () => {
-                        tab.onbeforeunload();
-                    });
-                }
-            });
+                });
+            }
         },
         mounted() {
             this.quotaMeter.setElement(this.$refs['quota-meter-container']);
@@ -200,16 +103,4 @@
 </script>
 
 <style scoped>
-    .nav-note-port {
-        position: absolute;
-        font-weight: 700;
-        font-size: .7rem;
-        color: gold;
-        line-height: 3.5rem;
-        margin-left: 1px;
-    }
-
-    li .nav-link > span.toggle {
-        color: gold;
-    }
 </style>
diff --git a/client/galaxy/scripts/components/MastheadItem.vue b/client/galaxy/scripts/components/MastheadItem.vue
index 058164e1174b..09c70da167da 100644
--- a/client/galaxy/scripts/components/MastheadItem.vue
+++ b/client/galaxy/scripts/components/MastheadItem.vue
@@ -1,13 +1,148 @@
 <template>
-    
+    <b-nav-item v-if="!tab.menu"
+                :class="{ active: tab.id === activeTab(), }"
+                :active="!tab.disabled"
+                v-b-tooltip.hover.bottom :title="tab.tooltip"
+                @click="open(tab, $event)"
+                v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
+                :style="{ visibility: tab.visible ? 'visible' : 'hidden',}"
+                :id="tab.id"
+                :href="tab.url"
+                :target="tab.target"
+                :link-classes="[ tab.icon && 'nav-icon', ]">
+
+        <template v-if="tab.icon">
+            <span :class="['fa', tab.icon, tab.toggle && 'toggle']"/>
+            <span v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</span>
+        </template>
+        <template v-else>
+            {{ tab.title }}
+        </template>
+    </b-nav-item>
+    <b-nav-item-dropdown v-else
+                         :class="{ active: tab.id === activeTab(), }"
+                         :text="tab.title"
+                         v-b-tooltip.hover.bottom :title="tab.tooltip"
+                         @show="open(tab, $event)"
+                         v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
+                         :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
+                         :id="tab.id" href="#">
+        <template v-for="item in tab.menu">
+            <b-dropdown-item :href="item.url"
+                             :target="item.target"
+                             @click="open(item, $event)"
+            >
+                {{ item.title }}
+            </b-dropdown-item>
+            <div v-if="item.divider" class="dropdown-divider" />
+        </template>
+    </b-nav-item-dropdown>
 </template>
 
 <script>
+    import _ from "underscore";
+    import { VBTooltip } from "bootstrap-vue";
+    import { VBPopover } from "bootstrap-vue";
+
     export default {
-        name: "MastheadItem.vue"
+        name: "MastheadItem",
+        directives: {
+            "v-b-tooltip": VBTooltip,
+            "v-b-popover": VBPopover
+        },
+        props: {
+            tab: {
+                type: Object,
+            },
+            activeTab: {
+                type: Function,
+            },
+            appRoot: {
+                type: String,
+            },
+            Galaxy: {
+                type: Object,
+            }
+        },
+        computed: {
+            popoverNote() {
+                return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
+            }
+        },
+        created() {
+            if (this.tab.onbeforeunload) {
+                document.addEventListener('beforeunload', () => {
+                    this.tab.onbeforeunload();
+                });
+            }
+        },
+        mounted() {
+            console.log(this.tab)
+        },
+        methods: {
+            open(tab, event) {
+                if (tab.onclick) {
+                    return this.propogateClick(tab, event);
+                }
+
+                if (tab.disabled) {
+                    event.preventDefault();
+
+                    this.$root.$emit('bv::hide::tooltip');
+                    this.$root.$emit('bv::show::popover', tab.id);
+
+                    setTimeout(() => {
+                        this.$root.$emit('bv::hide::popover', tab.id);
+                    }, 3000);
+                } else if (!tab.menu) {
+                    event.preventDefault();
+
+                    if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
+                        this.Galaxy.page.router.executeUseRouter(tab.url);
+                    } else {
+                        try {
+                            this.Galaxy.frame.add(tab);
+                        } catch (err) {
+                            console.warn("Missing frame element on galaxy instance", err);
+                        }
+                    }
+                }
+            },
+            propogateClick(tab, event) {
+                event.preventDefault();
+                tab.onclick();
+
+                if (tab.id === "enable-scratchbook") {
+                    this.$emit('updateScratchbookTab', tab);
+                    // _.each(this.tabs, (tab, i) => {
+                    //     if (tab.id === "enable-scratchbook") {
+                    //         tab.active = !tab.active;
+                    //
+                    //         this.$set(this.tabs, i, {
+                    //             ...tab,
+                    //             toggle: tab.active,
+                    //             show_note: tab.active,
+                    //             note_cls: tab.active && "fa fa-check"
+                    //         });
+                    //     }
+                    // });
+                }
+            },
+        },
     }
 </script>
 
 <style scoped>
+    .nav-note-port {
+        position: absolute;
+        font-weight: 700;
+        font-size: .7rem;
+        color: gold;
+        line-height: 3.5rem;
+        margin-left: 1px;
+    }
 
+    li .nav-link > span.toggle {
+        color: gold;
+    }
 </style>
\ No newline at end of file
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 6bedbfbaaa46..dedc39be3c4e 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -103,7 +103,7 @@ const View = Backbone.View.extend({
                 brandImage: this.options.logo_src,
 
                 quotaMeter: this.quotaMeter,
-                activeTab: () => {return this.activeView},
+                activeTab: () => { return this.activeView },
                 tabs: _.map(this.collection.models, el => {
                     return el.toJSON();
                 }),

From 4e6417dcfabac843b7f589e1e0128d641ff402e5 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Wed, 8 Jan 2020 15:31:37 +0200
Subject: [PATCH 12/36] refactor some attributes as computed properties

---
 .../scripts/components/MastheadItem.vue       | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/client/galaxy/scripts/components/MastheadItem.vue b/client/galaxy/scripts/components/MastheadItem.vue
index 09c70da167da..0f9d254d72a5 100644
--- a/client/galaxy/scripts/components/MastheadItem.vue
+++ b/client/galaxy/scripts/components/MastheadItem.vue
@@ -1,40 +1,41 @@
 <template>
     <b-nav-item v-if="!tab.menu"
-                :class="{ active: tab.id === activeTab(), }"
+                :class="classes"
+                :style="styles"
                 :active="!tab.disabled"
-                v-b-tooltip.hover.bottom :title="tab.tooltip"
-                @click="open(tab, $event)"
-                v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                :style="{ visibility: tab.visible ? 'visible' : 'hidden',}"
                 :id="tab.id"
                 :href="tab.url"
                 :target="tab.target"
-                :link-classes="[ tab.icon && 'nav-icon', ]">
+                :link-classes="linkClasses"
+                v-b-tooltip.hover.bottom :title="tab.tooltip"
+                v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
+                @click="open(tab, $event)">
 
         <template v-if="tab.icon">
-            <span :class="['fa', tab.icon, tab.toggle && 'toggle']"/>
-            <span v-if="tab.show_note" class="nav-note-port" :class="tab.note_cls">{{ tab.note }}</span>
+            <span :class="iconClasses"/>
+            <span v-if="tab.show_note" :class="['nav-note-port', tab.note_cls]">{{ tab.note }}</span>
         </template>
         <template v-else>
             {{ tab.title }}
         </template>
     </b-nav-item>
     <b-nav-item-dropdown v-else
-                         :class="{ active: tab.id === activeTab(), }"
+                         :class="classes"
+                         :style="styles"
                          :text="tab.title"
+                         :id="tab.id" href="#"
                          v-b-tooltip.hover.bottom :title="tab.tooltip"
-                         @show="open(tab, $event)"
                          v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                         :style="{visibility: tab.visible ? 'visible' : 'hidden'}"
-                         :id="tab.id" href="#">
-        <template v-for="item in tab.menu">
+                         @show="open(tab, $event)">
+        <template v-for="(item, idx) in tab.menu">
             <b-dropdown-item :href="item.url"
+                             :key="`item-${idx}`"
                              :target="item.target"
                              @click="open(item, $event)"
             >
                 {{ item.title }}
             </b-dropdown-item>
-            <div v-if="item.divider" class="dropdown-divider" />
+            <div v-if="item.divider" class="dropdown-divider" :key="`divider-${idx}`" />
         </template>
     </b-nav-item-dropdown>
 </template>
@@ -67,6 +68,28 @@
         computed: {
             popoverNote() {
                 return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
+            },
+            classes() {
+                return {
+                    active: this.tab.id === this.activeTab()
+                }
+            },
+            linkClasses() {
+                return {
+                    'nav-icon': this.tab.icon
+                }
+            },
+            iconClasses() {
+                return Object.fromEntries([
+                    ['fa', true],
+                    ['toggle', this.tab.toggle],
+                    [this.tab.icon, this.tab.icon]
+                ]);
+            },
+            styles() {
+                return {
+                    visibility: this.tab.visible ? 'visible' : 'hidden',
+                }
             }
         },
         created() {
@@ -76,9 +99,6 @@
                 });
             }
         },
-        mounted() {
-            console.log(this.tab)
-        },
         methods: {
             open(tab, event) {
                 if (tab.onclick) {
@@ -114,18 +134,6 @@
 
                 if (tab.id === "enable-scratchbook") {
                     this.$emit('updateScratchbookTab', tab);
-                    // _.each(this.tabs, (tab, i) => {
-                    //     if (tab.id === "enable-scratchbook") {
-                    //         tab.active = !tab.active;
-                    //
-                    //         this.$set(this.tabs, i, {
-                    //             ...tab,
-                    //             toggle: tab.active,
-                    //             show_note: tab.active,
-                    //             note_cls: tab.active && "fa fa-check"
-                    //         });
-                    //     }
-                    // });
                 }
             },
         },

From 33b1d5681f12abec8b70a9d026e1d424299809b3 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Wed, 8 Jan 2020 15:39:35 +0200
Subject: [PATCH 13/36] format

---
 client/galaxy/scripts/components/Masthead.vue | 191 +++++++-------
 .../scripts/components/MastheadItem.vue       | 241 +++++++++---------
 client/galaxy/scripts/layout/masthead.js      |  14 +-
 client/galaxy/scripts/layout/menu.js          |   6 +-
 client/galaxy/scripts/layout/scratchbook.js   |   3 +-
 5 files changed, 234 insertions(+), 221 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead.vue
index 20e1ac1ea716..f594455cf4ac 100644
--- a/client/galaxy/scripts/components/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead.vue
@@ -1,106 +1,117 @@
 <template>
-        <div>
-            <b-navbar id="masthead" toggleable="lg" type="dark"
-                      role="navigation" aria-label="Main" class="justify-content-center">
-                <b-navbar-brand :href="brandLink" aria-label="homepage">
-                    <img alt="logo" class="navbar-brand-image" :src="brandImage"/>
-                    <span class="navbar-brand-title">{{ brandTitle }}</span>
-                </b-navbar-brand>
+    <div>
+        <b-navbar
+            id="masthead"
+            toggleable="lg"
+            type="dark"
+            role="navigation"
+            aria-label="Main"
+            class="justify-content-center"
+        >
+            <b-navbar-brand :href="brandLink" aria-label="homepage">
+                <img alt="logo" class="navbar-brand-image" :src="brandImage" />
+                <span class="navbar-brand-title">{{ brandTitle }}</span>
+            </b-navbar-brand>
 
-                <b-navbar-nav>
-                    <masthead-item v-for="(tab, idx) in tabs" :tab="tab" :activeTab="activeTab"
-                                   :key="`tab-${idx}`"
-                                   :appRoot="appRoot" :Galaxy="Galaxy" @updateScratchbookTab="updateScratchbookTab">
-                    </masthead-item>
-                </b-navbar-nav>
+            <b-navbar-nav>
+                <masthead-item
+                    v-for="(tab, idx) in tabs"
+                    :tab="tab"
+                    :activeTab="activeTab"
+                    :key="`tab-${idx}`"
+                    :appRoot="appRoot"
+                    :Galaxy="Galaxy"
+                    @updateScratchbookTab="updateScratchbookTab"
+                >
+                </masthead-item>
+            </b-navbar-nav>
 
-                <div ref="quota-meter-container" class="quota-meter-container"/>
-            </b-navbar>
-        </div>
+            <div ref="quota-meter-container" class="quota-meter-container" />
+        </b-navbar>
+    </div>
 </template>
 
 <script>
-    import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
-    import MastheadItem from "./MastheadItem";
-    import _ from "underscore";
+import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
+import MastheadItem from "./MastheadItem";
+import _ from "underscore";
 
-    export default {
-        name: "Masthead",
-        props: {
-            brandTitle: {
-                type: String
-            },
-            brandLink: {
-                type: String
-            },
-            brandImage: {
-                type: String
-            },
-            quotaMeter: {
-                type: Object
-            },
-            activeTab: {
-                type: Function,
-            },
-            tabs: {
-                type: Array
-            },
-            frames: {
-                type: Object,
-            },
-            appRoot: {
-                type: String,
-            },
-            Galaxy: {
-                type: Object,
-            }
+export default {
+    name: "Masthead",
+    props: {
+        brandTitle: {
+            type: String
         },
-        components: {
-            BNavbar,
-            BNavbarBrand,
-            BNavbarNav,
-            MastheadItem
+        brandLink: {
+            type: String
         },
-        methods: {
-            updateScratchbookTab(tab) {
-                _.each(this.tabs, (tab, i) => {
-                    if (tab.id === "enable-scratchbook") {
-                        tab.active = !tab.active;
-
-                        this.$set(this.tabs, i, {
-                            ...tab,
-                            toggle: tab.active,
-                            show_note: tab.active,
-                            note_cls: tab.active && "fa fa-check"
-                        });
-                    }
-                });
-            }
+        brandImage: {
+            type: String
+        },
+        quotaMeter: {
+            type: Object
+        },
+        activeTab: {
+            type: Function
+        },
+        tabs: {
+            type: Array
+        },
+        frames: {
+            type: Object
+        },
+        appRoot: {
+            type: String
         },
-        mounted() {
-            this.quotaMeter.setElement(this.$refs['quota-meter-container']);
-            this.quotaMeter.render();
+        Galaxy: {
+            type: Object
+        }
+    },
+    components: {
+        BNavbar,
+        BNavbarBrand,
+        BNavbarNav,
+        MastheadItem
+    },
+    methods: {
+        updateScratchbookTab(tab) {
+            _.each(this.tabs, (tab, i) => {
+                if (tab.id === "enable-scratchbook") {
+                    tab.active = !tab.active;
 
-            const idx = _.findIndex(this.tabs, { id: "show-scratchbook" });
-            this.frames
-                .on("add remove", () => {
-                    this.$set(this.tabs, idx, {
-                        ...this.tabs[idx],
-                        note: this.frames.length(),
-                        visible: this.frames.length() > 0,
-                        show_note: this.frames.length() > 0,
-                    });
-                })
-                .on("show hide", () => {
-                    this.$set(this.tabs, idx, {
-                        ...this.tabs[idx],
-                        toggle: this.frames.visible,
-                        icon: (this.frames.visible && "fa-eye") || "fa-eye-slash"
+                    this.$set(this.tabs, i, {
+                        ...tab,
+                        toggle: tab.active,
+                        show_note: tab.active,
+                        note_cls: tab.active && "fa fa-check"
                     });
-                });
+                }
+            });
         }
+    },
+    mounted() {
+        this.quotaMeter.setElement(this.$refs["quota-meter-container"]);
+        this.quotaMeter.render();
+
+        const idx = _.findIndex(this.tabs, { id: "show-scratchbook" });
+        this.frames
+            .on("add remove", () => {
+                this.$set(this.tabs, idx, {
+                    ...this.tabs[idx],
+                    note: this.frames.length(),
+                    visible: this.frames.length() > 0,
+                    show_note: this.frames.length() > 0
+                });
+            })
+            .on("show hide", () => {
+                this.$set(this.tabs, idx, {
+                    ...this.tabs[idx],
+                    toggle: this.frames.visible,
+                    icon: (this.frames.visible && "fa-eye") || "fa-eye-slash"
+                });
+            });
     }
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/client/galaxy/scripts/components/MastheadItem.vue b/client/galaxy/scripts/components/MastheadItem.vue
index 0f9d254d72a5..792e966cf897 100644
--- a/client/galaxy/scripts/components/MastheadItem.vue
+++ b/client/galaxy/scripts/components/MastheadItem.vue
@@ -1,38 +1,40 @@
 <template>
-    <b-nav-item v-if="!tab.menu"
-                :class="classes"
-                :style="styles"
-                :active="!tab.disabled"
-                :id="tab.id"
-                :href="tab.url"
-                :target="tab.target"
-                :link-classes="linkClasses"
-                v-b-tooltip.hover.bottom :title="tab.tooltip"
-                v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                @click="open(tab, $event)">
-
+    <b-nav-item
+        v-if="!tab.menu"
+        :class="classes"
+        :style="styles"
+        :active="!tab.disabled"
+        :id="tab.id"
+        :href="tab.url"
+        :target="tab.target"
+        :link-classes="linkClasses"
+        v-b-tooltip.hover.bottom
+        :title="tab.tooltip"
+        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
+        @click="open(tab, $event)"
+    >
         <template v-if="tab.icon">
-            <span :class="iconClasses"/>
+            <span :class="iconClasses" />
             <span v-if="tab.show_note" :class="['nav-note-port', tab.note_cls]">{{ tab.note }}</span>
         </template>
         <template v-else>
             {{ tab.title }}
         </template>
     </b-nav-item>
-    <b-nav-item-dropdown v-else
-                         :class="classes"
-                         :style="styles"
-                         :text="tab.title"
-                         :id="tab.id" href="#"
-                         v-b-tooltip.hover.bottom :title="tab.tooltip"
-                         v-b-popover.manual.bottom="{id: tab.id, content: popoverNote, html: true}"
-                         @show="open(tab, $event)">
+    <b-nav-item-dropdown
+        v-else
+        :class="classes"
+        :style="styles"
+        :text="tab.title"
+        :id="tab.id"
+        href="#"
+        v-b-tooltip.hover.bottom
+        :title="tab.tooltip"
+        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
+        @show="open(tab, $event)"
+    >
         <template v-for="(item, idx) in tab.menu">
-            <b-dropdown-item :href="item.url"
-                             :key="`item-${idx}`"
-                             :target="item.target"
-                             @click="open(item, $event)"
-            >
+            <b-dropdown-item :href="item.url" :key="`item-${idx}`" :target="item.target" @click="open(item, $event)">
                 {{ item.title }}
             </b-dropdown-item>
             <div v-if="item.divider" class="dropdown-divider" :key="`divider-${idx}`" />
@@ -41,116 +43,111 @@
 </template>
 
 <script>
-    import _ from "underscore";
-    import { VBTooltip } from "bootstrap-vue";
-    import { VBPopover } from "bootstrap-vue";
+import { VBTooltip } from "bootstrap-vue";
+import { VBPopover } from "bootstrap-vue";
 
-    export default {
-        name: "MastheadItem",
-        directives: {
-            "v-b-tooltip": VBTooltip,
-            "v-b-popover": VBPopover
+export default {
+    name: "MastheadItem",
+    directives: {
+        "v-b-tooltip": VBTooltip,
+        "v-b-popover": VBPopover
+    },
+    props: {
+        tab: {
+            type: Object
         },
-        props: {
-            tab: {
-                type: Object,
-            },
-            activeTab: {
-                type: Function,
-            },
-            appRoot: {
-                type: String,
-            },
-            Galaxy: {
-                type: Object,
-            }
+        activeTab: {
+            type: Function
         },
-        computed: {
-            popoverNote() {
-                return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
-            },
-            classes() {
-                return {
-                    active: this.tab.id === this.activeTab()
-                }
-            },
-            linkClasses() {
-                return {
-                    'nav-icon': this.tab.icon
-                }
-            },
-            iconClasses() {
-                return Object.fromEntries([
-                    ['fa', true],
-                    ['toggle', this.tab.toggle],
-                    [this.tab.icon, this.tab.icon]
-                ]);
-            },
-            styles() {
-                return {
-                    visibility: this.tab.visible ? 'visible' : 'hidden',
-                }
-            }
+        appRoot: {
+            type: String
         },
-        created() {
-            if (this.tab.onbeforeunload) {
-                document.addEventListener('beforeunload', () => {
-                    this.tab.onbeforeunload();
-                });
-            }
+        Galaxy: {
+            type: Object
+        }
+    },
+    computed: {
+        popoverNote() {
+            return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
         },
-        methods: {
-            open(tab, event) {
-                if (tab.onclick) {
-                    return this.propogateClick(tab, event);
-                }
-
-                if (tab.disabled) {
-                    event.preventDefault();
+        classes() {
+            return {
+                active: this.tab.id === this.activeTab()
+            };
+        },
+        linkClasses() {
+            return {
+                "nav-icon": this.tab.icon
+            };
+        },
+        iconClasses() {
+            return Object.fromEntries([["fa", true], ["toggle", this.tab.toggle], [this.tab.icon, this.tab.icon]]);
+        },
+        styles() {
+            return {
+                visibility: this.tab.visible ? "visible" : "hidden"
+            };
+        }
+    },
+    created() {
+        if (this.tab.onbeforeunload) {
+            document.addEventListener("beforeunload", () => {
+                this.tab.onbeforeunload();
+            });
+        }
+    },
+    methods: {
+        open(tab, event) {
+            if (tab.onclick) {
+                return this.propogateClick(tab, event);
+            }
 
-                    this.$root.$emit('bv::hide::tooltip');
-                    this.$root.$emit('bv::show::popover', tab.id);
+            if (tab.disabled) {
+                event.preventDefault();
 
-                    setTimeout(() => {
-                        this.$root.$emit('bv::hide::popover', tab.id);
-                    }, 3000);
-                } else if (!tab.menu) {
-                    event.preventDefault();
+                this.$root.$emit("bv::hide::tooltip");
+                this.$root.$emit("bv::show::popover", tab.id);
 
-                    if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
-                        this.Galaxy.page.router.executeUseRouter(tab.url);
-                    } else {
-                        try {
-                            this.Galaxy.frame.add(tab);
-                        } catch (err) {
-                            console.warn("Missing frame element on galaxy instance", err);
-                        }
-                    }
-                }
-            },
-            propogateClick(tab, event) {
+                setTimeout(() => {
+                    this.$root.$emit("bv::hide::popover", tab.id);
+                }, 3000);
+            } else if (!tab.menu) {
                 event.preventDefault();
-                tab.onclick();
 
-                if (tab.id === "enable-scratchbook") {
-                    this.$emit('updateScratchbookTab', tab);
+                if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
+                    this.Galaxy.page.router.executeUseRouter(tab.url);
+                } else {
+                    try {
+                        this.Galaxy.frame.add(tab);
+                    } catch (err) {
+                        console.warn("Missing frame element on galaxy instance", err);
+                    }
                 }
-            },
+            }
         },
+        propogateClick(tab, event) {
+            event.preventDefault();
+            tab.onclick();
+
+            if (tab.id === "enable-scratchbook") {
+                this.$emit("updateScratchbookTab", tab);
+            }
+        }
     }
+};
 </script>
 
 <style scoped>
-    .nav-note-port {
-        position: absolute;
-        font-weight: 700;
-        font-size: .7rem;
-        color: gold;
-        line-height: 3.5rem;
-        margin-left: 1px;
-    }
+.nav-note-port {
+    position: absolute;
+    font-weight: 700;
+    font-size: 0.7rem;
+    color: gold;
+    line-height: 3.5rem;
+    margin-left: 1px;
+}
 
-    li .nav-link > span.toggle {
-        color: gold;
-    }
-</style>
\ No newline at end of file
+li .nav-link > span.toggle {
+    color: gold;
+}
+</style>
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index dedc39be3c4e..3ec405768a7b 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -92,18 +92,20 @@ const View = Backbone.View.extend({
         this.$navbarBrandImage.attr("src", this.options.logo_src); // covered
         this.quotaMeter.render();
 
-
-        const el = document.createElement('div');
+        const el = document.createElement("div");
         this.el.appendChild(el); // use this.el directly when feature parity is accomplished
 
         mountVueComponent(Masthead)(
-            { // params
+            {
+                // params
                 brandTitle: `Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`,
-                brandLink:  this.options.logo_url,
+                brandLink: this.options.logo_url,
                 brandImage: this.options.logo_src,
 
                 quotaMeter: this.quotaMeter,
-                activeTab: () => { return this.activeView },
+                activeTab: () => {
+                    return this.activeView;
+                },
                 tabs: _.map(this.collection.models, el => {
                     return el.toJSON();
                 }),
@@ -111,7 +113,7 @@ const View = Backbone.View.extend({
                 frames: this.frame.getFrames(),
 
                 appRoot: getAppRoot(),
-                Galaxy: getGalaxyInstance(),
+                Galaxy: getGalaxyInstance()
             },
             el
         );
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index b1f91448c76d..1fb142605f1d 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -442,7 +442,8 @@ const Tab = Backbone.View.extend({
             });
     },
 
-    buildLink: function(label, url) { // covered
+    buildLink: function(label, url) {
+        // covered
         return $("<div/>")
             .append(
                 $("<a/>")
@@ -453,7 +454,8 @@ const Tab = Backbone.View.extend({
     },
 
     /** Handle click event */
-    _toggleClick: function(e) { // covered
+    _toggleClick: function(e) {
+        // covered
         const model = this.model;
         e.preventDefault();
         $(".tooltip").hide();
diff --git a/client/galaxy/scripts/layout/scratchbook.js b/client/galaxy/scripts/layout/scratchbook.js
index 532fa391ca33..c24b91628c35 100644
--- a/client/galaxy/scripts/layout/scratchbook.js
+++ b/client/galaxy/scripts/layout/scratchbook.js
@@ -70,7 +70,8 @@ export default Backbone.View.extend({
         this.history_cache = {};
     },
 
-    getFrames() { // needed for Vue.js integration
+    getFrames() {
+        // needed for Vue.js integration
         return this.frames;
     },
 

From 7c50c6ec78af656a8d9cd6345560f1488057776a Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Wed, 8 Jan 2020 17:49:51 +0200
Subject: [PATCH 14/36] remove the original navbar

---
 client/galaxy/scripts/layout/masthead.js | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 3ec405768a7b..917ae34dcf86 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -17,22 +17,10 @@ const View = Backbone.View.extend({
 
         const self = this;
         this.options = options;
-        this.setElement(this._template());
-        this.$navbarBrandLink = this.$(".navbar-brand");
-        this.$navbarBrandImage = this.$(".navbar-brand-image");
-        this.$navbarBrandTitle = this.$(".navbar-brand-title");
-        this.$navbarTabs = this.$(".navbar-nav");
-        this.$quoteMeter = this.$(".quota-meter-container");
 
         // build tabs
         this.collection = new Menu.Collection();
         this.collection
-            .on("add", model => {
-                self.$navbarTabs.append(new Menu.Tab({ model: model }).render().$el);
-            })
-            .on("reset", () => {
-                self.$navbarTabs.empty();
-            })
             .on("dispatch", callback => {
                 self.collection.each(m => {
                     callback(m);
@@ -41,7 +29,6 @@ const View = Backbone.View.extend({
             .fetch(this.options);
 
         // highlight initial active view
-        this.activeView = options.active_view;
         this.highlight(options.active_view); // covered
 
         // scratchbook
@@ -53,7 +40,6 @@ const View = Backbone.View.extend({
         // add quota meter to masthead
         Galaxy.quotaMeter = this.quotaMeter = new QuotaMeter.UserQuotaMeter({
             model: Galaxy.user,
-            el: this.$quoteMeter
         });
 
         // loop through beforeunload functions if the user attempts to unload the page
@@ -87,11 +73,6 @@ const View = Backbone.View.extend({
     },
 
     render: function() {
-        this.$navbarBrandTitle.html(`Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`); // covered
-        this.$navbarBrandLink.attr("href", this.options.logo_url); // covered
-        this.$navbarBrandImage.attr("src", this.options.logo_src); // covered
-        this.quotaMeter.render();
-
         const el = document.createElement("div");
         this.el.appendChild(el); // use this.el directly when feature parity is accomplished
 

From 299b5199f6113c35ef60485247bb88bc5efc8990 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 9 Jan 2020 18:25:09 -0500
Subject: [PATCH 15/36] Move masthead components to masthead directory

---
 client/galaxy/scripts/components/{ => Masthead}/Masthead.vue   | 0
 .../galaxy/scripts/components/{ => Masthead}/MastheadItem.vue  | 0
 client/galaxy/scripts/components/Masthead/initMasthead.js      | 2 +-
 client/galaxy/scripts/layout/masthead.js                       | 3 +--
 4 files changed, 2 insertions(+), 3 deletions(-)
 rename client/galaxy/scripts/components/{ => Masthead}/Masthead.vue (100%)
 rename client/galaxy/scripts/components/{ => Masthead}/MastheadItem.vue (100%)

diff --git a/client/galaxy/scripts/components/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
similarity index 100%
rename from client/galaxy/scripts/components/Masthead.vue
rename to client/galaxy/scripts/components/Masthead/Masthead.vue
diff --git a/client/galaxy/scripts/components/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
similarity index 100%
rename from client/galaxy/scripts/components/MastheadItem.vue
rename to client/galaxy/scripts/components/Masthead/MastheadItem.vue
diff --git a/client/galaxy/scripts/components/Masthead/initMasthead.js b/client/galaxy/scripts/components/Masthead/initMasthead.js
index 9df6e15e2305..0699528de614 100644
--- a/client/galaxy/scripts/components/Masthead/initMasthead.js
+++ b/client/galaxy/scripts/components/Masthead/initMasthead.js
@@ -3,7 +3,7 @@
  * This function is exposed with the rest of the page-globals in bundledEntries.
  */
 import Vue from "vue";
-import Masthead from "components/Masthead";
+import Masthead from "./Masthead";
 
 export function initMasthead(config, container) {
     console.log("initMasthead");
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 0392f8f0a973..c9df77f28467 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -4,8 +4,7 @@ import Menu from "layout/menu";
 import Scratchbook from "layout/scratchbook";
 import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
-
-import Masthead from "../components/Masthead.vue";
+import Masthead from "../components/Masthead/Masthead";
 import { mountVueComponent } from "../utils/mountVueComponent";
 import _ from "../libs/underscore";
 import { getAppRoot } from "onload/loadConfig";

From be4f6dc2a415bf3fcf1225c86a309c7274885fde Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 9 Jan 2020 18:27:24 -0500
Subject: [PATCH 16/36] Format client

---
 client/galaxy/scripts/layout/masthead.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index c9df77f28467..8c3b5ac4f789 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -38,7 +38,7 @@ const View = Backbone.View.extend({
         // set up the quota meter (And fetch the current user data from trans)
         // add quota meter to masthead
         Galaxy.quotaMeter = this.quotaMeter = new QuotaMeter.UserQuotaMeter({
-            model: Galaxy.user,
+            model: Galaxy.user
         });
 
         // loop through beforeunload functions if the user attempts to unload the page

From b1ff157122eb584f1d67c451e77120b68c84e696 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 9 Jan 2020 18:36:50 -0500
Subject: [PATCH 17/36] Remove unused template helper

---
 client/galaxy/scripts/layout/masthead.js | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 8c3b5ac4f789..6de656860eeb 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -12,9 +12,8 @@ import { getAppRoot } from "onload/loadConfig";
 /** Masthead **/
 const View = Backbone.View.extend({
     initialize: function(options) {
-        const Galaxy = getGalaxyInstance();
-
         const self = this;
+        const Galaxy = getGalaxyInstance();
         this.options = options;
 
         // build tabs
@@ -74,19 +73,15 @@ const View = Backbone.View.extend({
     render: function() {
         const el = document.createElement("div");
         this.el.appendChild(el); // use this.el directly when feature parity is accomplished
-
         let brandTitle = this.options.display_galaxy_brand ? "Galaxy " : "";
         if (this.options.brand) {
             brandTitle += this.options.brand;
         }
-
         mountVueComponent(Masthead)(
             {
-                // params
                 brandTitle: brandTitle,
                 brandLink: this.options.logo_url,
                 brandImage: this.options.logo_src,
-
                 quotaMeter: this.quotaMeter,
                 activeTab: () => {
                     return this.activeView;
@@ -94,9 +89,7 @@ const View = Backbone.View.extend({
                 tabs: _.map(this.collection.models, el => {
                     return el.toJSON();
                 }),
-
                 frames: this.frame.getFrames(),
-
                 appRoot: getAppRoot(),
                 Galaxy: getGalaxyInstance()
             },
@@ -110,21 +103,6 @@ const View = Backbone.View.extend({
         this.collection.forEach(function(model) {
             model.set("active", model.id == id);
         });
-    },
-
-    /** body template */
-    _template: function() {
-        return `
-            <div>
-                <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark" role="navigation" aria-label="Main">
-                    <a class="navbar-brand" aria-label="homepage">
-                        <img alt="logo" class="navbar-brand-image"/>
-                        <span class="navbar-brand-title"/>
-                    </a>
-                    <ul class="navbar-nav"/>
-                    <div class="quota-meter-container"/>
-                </nav>
-            </div>`;
     }
 });
 

From e19a1cfa96ab9beb80ec078036ac7b542a121769 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 17 Jan 2020 15:36:21 +0200
Subject: [PATCH 18/36] fix multilevel links

---
 .../components/Masthead/MastheadItem.vue      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index 792e966cf897..e0e8beb08dbd 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -5,8 +5,9 @@
         :style="styles"
         :active="!tab.disabled"
         :id="tab.id"
-        :href="tab.url"
-        :target="tab.target"
+        :href="formatUrl(tab.url)"
+        :target="tab.target || '_parent'"
+        role="menuitem"
         :link-classes="linkClasses"
         v-b-tooltip.hover.bottom
         :title="tab.tooltip"
@@ -34,7 +35,7 @@
         @show="open(tab, $event)"
     >
         <template v-for="(item, idx) in tab.menu">
-            <b-dropdown-item :href="item.url" :key="`item-${idx}`" :target="item.target" @click="open(item, $event)">
+            <b-dropdown-item :href="formatUrl(item.url)" :key="`item-${idx}`" :target="item.target || '_parent'" role="menuitem" @click="open(item, $event)">
                 {{ item.title }}
             </b-dropdown-item>
             <div v-if="item.divider" class="dropdown-divider" :key="`divider-${idx}`" />
@@ -45,6 +46,7 @@
 <script>
 import { VBTooltip } from "bootstrap-vue";
 import { VBPopover } from "bootstrap-vue";
+import {getAppRoot} from "../../onload";
 
 export default {
     name: "MastheadItem",
@@ -113,12 +115,13 @@ export default {
                 }, 3000);
             } else if (!tab.menu) {
                 event.preventDefault();
-
                 if (tab.target === "__use_router__" && typeof this.Galaxy.page !== "undefined") {
-                    this.Galaxy.page.router.executeUseRouter(tab.url);
+                    this.Galaxy.page.router.executeUseRouter(this.formatUrl(tab.url));
                 } else {
                     try {
-                        this.Galaxy.frame.add(tab);
+                        this.Galaxy.frame.add({...tab,
+                            url: this.formatUrl(tab.url),
+                        });
                     } catch (err) {
                         console.warn("Missing frame element on galaxy instance", err);
                     }
@@ -132,7 +135,10 @@ export default {
             if (tab.id === "enable-scratchbook") {
                 this.$emit("updateScratchbookTab", tab);
             }
-        }
+        },
+        formatUrl(url) {
+            return typeof url === "string" && url.indexOf("//") === -1 && url.charAt(0) != "/" ? this.appRoot + url : url;
+        },
     }
 };
 </script>

From fae9c28dbec439701138ecd076582172747a4da5 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmin <inkuzm@gmail.com>
Date: Fri, 17 Jan 2020 17:12:26 +0200
Subject: [PATCH 19/36] show navbar at the libraries page

---
 .../components/Masthead/MastheadItem.vue      |  1 -
 .../components/Masthead/initMasthead.js       | 31 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index e0e8beb08dbd..e56da8338ac4 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -46,7 +46,6 @@
 <script>
 import { VBTooltip } from "bootstrap-vue";
 import { VBPopover } from "bootstrap-vue";
-import {getAppRoot} from "../../onload";
 
 export default {
     name: "MastheadItem",
diff --git a/client/galaxy/scripts/components/Masthead/initMasthead.js b/client/galaxy/scripts/components/Masthead/initMasthead.js
index 0699528de614..5cb0edc54182 100644
--- a/client/galaxy/scripts/components/Masthead/initMasthead.js
+++ b/client/galaxy/scripts/components/Masthead/initMasthead.js
@@ -2,15 +2,30 @@
  * Temporary function used to mount the masthead inside the current application.
  * This function is exposed with the rest of the page-globals in bundledEntries.
  */
-import Vue from "vue";
-import Masthead from "./Masthead";
+// import Vue from "vue";
+// import Masthead from "./Masthead";
+import Masthead from "../../layout/masthead";
 
 export function initMasthead(config, container) {
     console.log("initMasthead");
-    const Component = Vue.extend(Masthead);
-    return new Component({
-        props: Object.keys(config),
-        propsData: config,
-        el: container
-    });
+
+    const masthead = new Masthead.View(config);
+    masthead.render();
+
+    const $masthead = $("#masthead");
+
+    if (config.hide_masthead) {
+        $masthead.remove();
+    } else {
+        if (container) {
+            $(container).replaceWith(masthead.el);
+        }
+    }
+
+    // const Component = Vue.extend(Masthead);
+    // return new Component({
+    //     props: Object.keys(config),
+    //     propsData: config,
+    //     el: container
+    // });
 }

From 929f7c056a9c1586804a2028f47f5bfba92da379 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Feb 2020 14:17:33 -0500
Subject: [PATCH 20/36] Parse tab classes, fix failing anon selenium test case,
 format client

---
 .../scripts/components/Masthead/MastheadItem.vue   | 14 ++++++++++----
 client/galaxy/scripts/layout/menu.js               |  2 +-
 lib/galaxy/selenium/navigation.yml                 |  4 ++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index e56da8338ac4..a0df70a9600a 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -72,9 +72,11 @@ export default {
             return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
         },
         classes() {
-            return {
-                active: this.tab.id === this.activeTab()
-            };
+            let classesString = this.tab.cls || "";
+            if (this.tab.id == this.activeTab()) {
+                classesString = `${classesString} active`;
+            }
+            return classesString;
         },
         linkClasses() {
             return {
@@ -82,7 +84,11 @@ export default {
             };
         },
         iconClasses() {
-            return Object.fromEntries([["fa", true], ["toggle", this.tab.toggle], [this.tab.icon, this.tab.icon]]);
+            return Object.fromEntries([
+                ["fa", true],
+                ["toggle", this.tab.toggle],
+                [this.tab.icon, this.tab.icon]
+            ]);
         },
         styles() {
             return {
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index 86332292209c..cb3d6dd795e8 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -264,7 +264,7 @@ const Collection = Backbone.Collection.extend({
                 userTab = {
                     id: "user",
                     title: _l("Login"),
-                    cls: "loggedout-only",
+                    cls: "loggedin-only",
                     tooltip: _l("Login"),
                     url: "login",
                     target: "galaxy_main",
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index dda5649d0c03..6a5cbc543cce 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -44,8 +44,8 @@ masthead:
       type: xpath
       selector: '//a[contains(text(), "Logged in as")]'
 
-    logged_in_only: 'a.loggedin-only'
-    logged_out_only: 'a.loggedout-only'
+    logged_in_only: '.loggedin-only'
+    logged_out_only: '.loggedout-only'
 
   labels:
     # top-level menus

From 39c8896972881fa9fe51f1f7a77c418954a2a6b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Feb 2020 14:23:07 -0500
Subject: [PATCH 21/36] Restore swapped cls attribute

---
 client/galaxy/scripts/layout/menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index cb3d6dd795e8..86332292209c 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -264,7 +264,7 @@ const Collection = Backbone.Collection.extend({
                 userTab = {
                     id: "user",
                     title: _l("Login"),
-                    cls: "loggedin-only",
+                    cls: "loggedout-only",
                     tooltip: _l("Login"),
                     url: "login",
                     target: "galaxy_main",

From 28455177572f4ce411cab632ff78401b2ac40c4b Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 12:52:51 -0400
Subject: [PATCH 22/36] Reformat and lint fixes.

---
 .../scripts/components/Masthead/Masthead.vue  | 32 ++++++++--------
 .../components/Masthead/MastheadItem.vue      | 38 +++++++++++--------
 .../components/Masthead/initMasthead.js       |  1 +
 client/galaxy/scripts/layout/masthead.js      |  6 +--
 4 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
index f594455cf4ac..9e44fb56c728 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead/Masthead.vue
@@ -40,38 +40,38 @@ export default {
     name: "Masthead",
     props: {
         brandTitle: {
-            type: String
+            type: String,
         },
         brandLink: {
-            type: String
+            type: String,
         },
         brandImage: {
-            type: String
+            type: String,
         },
         quotaMeter: {
-            type: Object
+            type: Object,
         },
         activeTab: {
-            type: Function
+            type: Function,
         },
         tabs: {
-            type: Array
+            type: Array,
         },
         frames: {
-            type: Object
+            type: Object,
         },
         appRoot: {
-            type: String
+            type: String,
         },
         Galaxy: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     components: {
         BNavbar,
         BNavbarBrand,
         BNavbarNav,
-        MastheadItem
+        MastheadItem,
     },
     methods: {
         updateScratchbookTab(tab) {
@@ -83,11 +83,11 @@ export default {
                         ...tab,
                         toggle: tab.active,
                         show_note: tab.active,
-                        note_cls: tab.active && "fa fa-check"
+                        note_cls: tab.active && "fa fa-check",
                     });
                 }
             });
-        }
+        },
     },
     mounted() {
         this.quotaMeter.setElement(this.$refs["quota-meter-container"]);
@@ -100,17 +100,17 @@ export default {
                     ...this.tabs[idx],
                     note: this.frames.length(),
                     visible: this.frames.length() > 0,
-                    show_note: this.frames.length() > 0
+                    show_note: this.frames.length() > 0,
                 });
             })
             .on("show hide", () => {
                 this.$set(this.tabs, idx, {
                     ...this.tabs[idx],
                     toggle: this.frames.visible,
-                    icon: (this.frames.visible && "fa-eye") || "fa-eye-slash"
+                    icon: (this.frames.visible && "fa-eye") || "fa-eye-slash",
                 });
             });
-    }
+    },
 };
 </script>
 
diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index a0df70a9600a..d9f40ee225e8 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -35,7 +35,13 @@
         @show="open(tab, $event)"
     >
         <template v-for="(item, idx) in tab.menu">
-            <b-dropdown-item :href="formatUrl(item.url)" :key="`item-${idx}`" :target="item.target || '_parent'" role="menuitem" @click="open(item, $event)">
+            <b-dropdown-item
+                :href="formatUrl(item.url)"
+                :key="`item-${idx}`"
+                :target="item.target || '_parent'"
+                role="menuitem"
+                @click="open(item, $event)"
+            >
                 {{ item.title }}
             </b-dropdown-item>
             <div v-if="item.divider" class="dropdown-divider" :key="`divider-${idx}`" />
@@ -51,21 +57,21 @@ export default {
     name: "MastheadItem",
     directives: {
         "v-b-tooltip": VBTooltip,
-        "v-b-popover": VBPopover
+        "v-b-popover": VBPopover,
     },
     props: {
         tab: {
-            type: Object
+            type: Object,
         },
         activeTab: {
-            type: Function
+            type: Function,
         },
         appRoot: {
-            type: String
+            type: String,
         },
         Galaxy: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     computed: {
         popoverNote() {
@@ -80,21 +86,21 @@ export default {
         },
         linkClasses() {
             return {
-                "nav-icon": this.tab.icon
+                "nav-icon": this.tab.icon,
             };
         },
         iconClasses() {
             return Object.fromEntries([
                 ["fa", true],
                 ["toggle", this.tab.toggle],
-                [this.tab.icon, this.tab.icon]
+                [this.tab.icon, this.tab.icon],
             ]);
         },
         styles() {
             return {
-                visibility: this.tab.visible ? "visible" : "hidden"
+                visibility: this.tab.visible ? "visible" : "hidden",
             };
-        }
+        },
     },
     created() {
         if (this.tab.onbeforeunload) {
@@ -124,9 +130,7 @@ export default {
                     this.Galaxy.page.router.executeUseRouter(this.formatUrl(tab.url));
                 } else {
                     try {
-                        this.Galaxy.frame.add({...tab,
-                            url: this.formatUrl(tab.url),
-                        });
+                        this.Galaxy.frame.add({ ...tab, url: this.formatUrl(tab.url) });
                     } catch (err) {
                         console.warn("Missing frame element on galaxy instance", err);
                     }
@@ -142,9 +146,11 @@ export default {
             }
         },
         formatUrl(url) {
-            return typeof url === "string" && url.indexOf("//") === -1 && url.charAt(0) != "/" ? this.appRoot + url : url;
+            return typeof url === "string" && url.indexOf("//") === -1 && url.charAt(0) != "/"
+                ? this.appRoot + url
+                : url;
         },
-    }
+    },
 };
 </script>
 
diff --git a/client/galaxy/scripts/components/Masthead/initMasthead.js b/client/galaxy/scripts/components/Masthead/initMasthead.js
index 5cb0edc54182..796fa052e15c 100644
--- a/client/galaxy/scripts/components/Masthead/initMasthead.js
+++ b/client/galaxy/scripts/components/Masthead/initMasthead.js
@@ -5,6 +5,7 @@
 // import Vue from "vue";
 // import Masthead from "./Masthead";
 import Masthead from "../../layout/masthead";
+import $ from "jquery";
 
 export function initMasthead(config, container) {
     console.log("initMasthead");
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index e793de4c173a..45a70e7a0eab 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -13,9 +13,7 @@ import { getAppRoot } from "onload/loadConfig";
 const View = Backbone.View.extend({
     initialize: function (options) {
         const Galaxy = getGalaxyInstance();
-
         const self = this;
-        const Galaxy = getGalaxyInstance();
         this.options = options;
 
         // build tabs
@@ -84,12 +82,12 @@ const View = Backbone.View.extend({
                 activeTab: () => {
                     return this.activeView;
                 },
-                tabs: _.map(this.collection.models, el => {
+                tabs: _.map(this.collection.models, (el) => {
                     return el.toJSON();
                 }),
                 frames: this.frame.getFrames(),
                 appRoot: getAppRoot(),
-                Galaxy: getGalaxyInstance()
+                Galaxy: getGalaxyInstance(),
             },
             el
         );

From 437d261f8306c40e33f1223821a27ce9030358dd Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 15:16:00 -0400
Subject: [PATCH 23/36] Eliminate extra wrapper div in Masthead vue component.

---
 .../scripts/components/Masthead/Masthead.vue  | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
index 9e44fb56c728..351be10c0451 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead/Masthead.vue
@@ -1,34 +1,32 @@
 <template>
-    <div>
-        <b-navbar
-            id="masthead"
-            toggleable="lg"
-            type="dark"
-            role="navigation"
-            aria-label="Main"
-            class="justify-content-center"
-        >
-            <b-navbar-brand :href="brandLink" aria-label="homepage">
-                <img alt="logo" class="navbar-brand-image" :src="brandImage" />
-                <span class="navbar-brand-title">{{ brandTitle }}</span>
-            </b-navbar-brand>
+    <b-navbar
+        id="masthead"
+        toggleable="lg"
+        type="dark"
+        role="navigation"
+        aria-label="Main"
+        class="justify-content-center"
+    >
+        <b-navbar-brand :href="brandLink" aria-label="homepage">
+            <img alt="logo" class="navbar-brand-image" :src="brandImage" />
+            <span class="navbar-brand-title">{{ brandTitle }}</span>
+        </b-navbar-brand>
 
-            <b-navbar-nav>
-                <masthead-item
-                    v-for="(tab, idx) in tabs"
-                    :tab="tab"
-                    :activeTab="activeTab"
-                    :key="`tab-${idx}`"
-                    :appRoot="appRoot"
-                    :Galaxy="Galaxy"
-                    @updateScratchbookTab="updateScratchbookTab"
-                >
-                </masthead-item>
-            </b-navbar-nav>
+        <b-navbar-nav>
+            <masthead-item
+                v-for="(tab, idx) in tabs"
+                :tab="tab"
+                :activeTab="activeTab"
+                :key="`tab-${idx}`"
+                :appRoot="appRoot"
+                :Galaxy="Galaxy"
+                @updateScratchbookTab="updateScratchbookTab"
+            >
+            </masthead-item>
+        </b-navbar-nav>
 
-            <div ref="quota-meter-container" class="quota-meter-container" />
-        </b-navbar>
-    </div>
+        <div ref="quota-meter-container" class="quota-meter-container" />
+    </b-navbar>
 </template>
 
 <script>

From 6f58812f0749ee1563a240b257b8a5bc7155f65f Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 15:35:44 -0400
Subject: [PATCH 24/36] Integrate Sam's suggestions on masthead PR.

- Switch activeTab to a String instead of a Function.
- Use .map instead of underscore (eliminate import).
---
 .../galaxy/scripts/components/Masthead/Masthead.vue  |  2 +-
 .../scripts/components/Masthead/MastheadItem.vue     |  4 ++--
 client/galaxy/scripts/layout/masthead.js             | 12 +++++-------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
index 351be10c0451..f269a67e67b6 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead/Masthead.vue
@@ -50,7 +50,7 @@ export default {
             type: Object,
         },
         activeTab: {
-            type: Function,
+            type: String,
         },
         tabs: {
             type: Array,
diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index d9f40ee225e8..6fc03ae7f325 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -64,7 +64,7 @@ export default {
             type: Object,
         },
         activeTab: {
-            type: Function,
+            type: String,
         },
         appRoot: {
             type: String,
@@ -79,7 +79,7 @@ export default {
         },
         classes() {
             let classesString = this.tab.cls || "";
-            if (this.tab.id == this.activeTab()) {
+            if (this.tab.id == this.activeTab) {
                 classesString = `${classesString} active`;
             }
             return classesString;
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index 45a70e7a0eab..f88d0dbd1fe4 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -6,7 +6,6 @@ import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
 import Masthead from "../components/Masthead/Masthead";
 import { mountVueComponent } from "../utils/mountVueComponent";
-import _ from "../libs/underscore";
 import { getAppRoot } from "onload/loadConfig";
 
 /** Masthead **/
@@ -73,18 +72,17 @@ const View = Backbone.View.extend({
         if (this.options.brand) {
             brandTitle += this.options.brand;
         }
+        const tabs = this.collection.models.map((el) => {
+            return el.toJSON();
+        });
         mountVueComponent(Masthead)(
             {
                 brandTitle: brandTitle,
                 brandLink: this.options.logo_url,
                 brandImage: this.options.logo_src,
                 quotaMeter: this.quotaMeter,
-                activeTab: () => {
-                    return this.activeView;
-                },
-                tabs: _.map(this.collection.models, (el) => {
-                    return el.toJSON();
-                }),
+                activeTab: this.activeView,
+                tabs: tabs,
                 frames: this.frame.getFrames(),
                 appRoot: getAppRoot(),
                 Galaxy: getGalaxyInstance(),

From 93bf865de60a8456e99b7e423ae260008b6a620e Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 16:19:56 -0400
Subject: [PATCH 25/36] More computed properties in MastheadItem.

---
 .../scripts/components/Masthead/MastheadItem.vue       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index 6fc03ae7f325..079139491614 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -1,6 +1,6 @@
 <template>
     <b-nav-item
-        v-if="!tab.menu"
+        v-if="!menu"
         :class="classes"
         :style="styles"
         :active="!tab.disabled"
@@ -74,12 +74,18 @@ export default {
         },
     },
     computed: {
+        menu() {
+            return this.tab.menu;
+        },
+        active() {
+            return this.tab.id == this.activeTab;
+        },
         popoverNote() {
             return `Please <a href="${this.appRoot}login">login or register</a> to use this feature.`;
         },
         classes() {
             let classesString = this.tab.cls || "";
-            if (this.tab.id == this.activeTab) {
+            if (this.active) {
                 classesString = `${classesString} active`;
             }
             return classesString;

From 5bac49ac1a242d681af334413ec44b4b408c11b8 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 16:20:18 -0400
Subject: [PATCH 26/36] Fix masthead sometimes being too tall.

---
 client/galaxy/style/scss/base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index f9b10dba6953..6d8aa2dc5024 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -359,7 +359,7 @@ body {
     background-color: $brand-masthead;
     height: $masthead-height;
     .navbar-nav {
-        min-height: 100%;
+        height: $masthead-height;
         > li {
             // This allows the background color to fill the full height of the
             // masthead, while still keeping the contents centered (using flex)

From 1fceddcfc61f1a9fddf9a48f344bb3809a8f9a5d Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 May 2020 21:07:28 -0400
Subject: [PATCH 27/36] Add simple, minimal unit tests for Masthead*.vue.

---
 .../components/Masthead/Masthead.test.js      | 43 +++++++++++++++++++
 .../components/Masthead/MastheadItem.test.js  | 42 ++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 client/galaxy/scripts/components/Masthead/Masthead.test.js
 create mode 100644 client/galaxy/scripts/components/Masthead/MastheadItem.test.js

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.test.js b/client/galaxy/scripts/components/Masthead/Masthead.test.js
new file mode 100644
index 000000000000..ba8d4b40ead6
--- /dev/null
+++ b/client/galaxy/scripts/components/Masthead/Masthead.test.js
@@ -0,0 +1,43 @@
+import Masthead from "./Masthead.vue";
+import { mount, createLocalVue } from "@vue/test-utils";
+
+describe("Masthead.vue", () => {
+    let wrapper;
+    let localVue;
+    let quotaRendered, quotaEl;
+
+    beforeEach(() => {
+        localVue = createLocalVue();
+        quotaRendered = false;
+        quotaEl = null;
+
+        const quotaMeter = {
+            setElement: function (el) {
+                quotaEl = el;
+            },
+            render: function () {
+                quotaRendered = true;
+            },
+        };
+
+        const frames = {
+            on: () => {
+                return frames;
+            },
+        };
+
+        wrapper = mount(Masthead, {
+            propsData: {
+                quotaMeter,
+                frames,
+            },
+            localVue,
+            attachToDocument: true,
+        });
+    });
+
+    it("set quota element and renders it", async () => {
+        expect(quotaEl).to.not.equals(null);
+        expect(quotaRendered).to.equals(true);
+    });
+});
diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.test.js b/client/galaxy/scripts/components/Masthead/MastheadItem.test.js
new file mode 100644
index 000000000000..9bd4145fa9a3
--- /dev/null
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.test.js
@@ -0,0 +1,42 @@
+import MastheadItem from "./MastheadItem.vue";
+import { mount, createLocalVue } from "@vue/test-utils";
+
+describe("Masthead.vue", () => {
+    let wrapper;
+    let localVue;
+    let active, menu;
+
+    beforeEach(() => {
+        localVue = createLocalVue();
+    });
+
+    function m() {
+        const tab = {
+            id: "mytab",
+            menu: menu,
+        };
+        return mount(MastheadItem, {
+            propsData: {
+                tab,
+                activeTab: active,
+            },
+            localVue,
+        });
+    }
+
+    it("should render active tab with menus", async () => {
+        active = "mytab";
+        menu = true;
+        wrapper = m();
+        expect(wrapper.vm.active).to.equals(true);
+        expect(wrapper.vm.menu).to.equals(true);
+    });
+
+    it("should render inactive tabs without menus", async () => {
+        active = "othertab";
+        menu = false;
+        wrapper = m();
+        expect(wrapper.vm.active).to.equals(false);
+        expect(wrapper.vm.menu).to.equals(false);
+    });
+});

From 218c01e69487262e1d7f5cf13651deb3303b5f8f Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 12 May 2020 13:52:46 -0400
Subject: [PATCH 28/36] More masthead unit tests.

Implement hidden tabs also to match unit tests in qunit.
---
 .../components/Masthead/Masthead.test.js      | 46 ++++++++++++++++++-
 .../scripts/components/Masthead/Masthead.vue  |  1 +
 .../components/Masthead/MastheadItem.vue      |  6 +++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.test.js b/client/galaxy/scripts/components/Masthead/Masthead.test.js
index ba8d4b40ead6..6ba6bb5d71f7 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.test.js
+++ b/client/galaxy/scripts/components/Masthead/Masthead.test.js
@@ -20,6 +20,29 @@ describe("Masthead.vue", () => {
             },
         };
 
+        const tabs = [
+            // Main Analysis Tab..
+            {
+                id: "analysis",
+                title: "Analyze",
+                menu: false,
+                url: "root",
+            },
+            {
+                id: "shared",
+                title: "Shared Items",
+                menu: true,
+            },
+            // Hidden tab (pre-Vue framework supported this, not sure it is used
+            // anywhere?)
+            {
+                id: "hiddentab",
+                title: "Hidden Title",
+                menu: false,
+                hidden: true,
+            },
+        ];
+
         const frames = {
             on: () => {
                 return frames;
@@ -30,14 +53,35 @@ describe("Masthead.vue", () => {
             propsData: {
                 quotaMeter,
                 frames,
+                tabs,
+                appRoot: "prefix/",
             },
             localVue,
             attachToDocument: true,
         });
     });
 
-    it("set quota element and renders it", async () => {
+    it("set quota element and renders it", () => {
         expect(quotaEl).to.not.equals(null);
         expect(quotaRendered).to.equals(true);
     });
+
+    it("should render simple tab item links", () => {
+        console.log(wrapper.html());
+        expect(wrapper.findAll("li.nav-item").length).to.equals(3);
+        // Ensure specified link title respected.
+        expect(wrapper.find("#analysis a").text()).to.equals("Analyze");
+        expect(wrapper.find("#analysis a").attributes("href")).to.equals("prefix/root");
+    });
+
+    it("should render tab items with menus", () => {
+        // Ensure specified link title respected.
+        expect(wrapper.find("#shared a").text()).to.equals("Shared Items");
+        expect(wrapper.find("#shared").classes("dropdown")).to.equals(true);
+    });
+
+    it("should make hidden tabs hidden", () => {
+        expect(wrapper.find("#analysis").attributes().style).to.not.contain("display: none");
+        expect(wrapper.find("#hiddentab").attributes().style).to.contain("display: none");
+    });
 });
diff --git a/client/galaxy/scripts/components/Masthead/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
index f269a67e67b6..f3e27aaad4e8 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead/Masthead.vue
@@ -20,6 +20,7 @@
                 :key="`tab-${idx}`"
                 :appRoot="appRoot"
                 :Galaxy="Galaxy"
+                v-show="!(tab.hidden === undefined ? false : tab.hidden)"
                 @updateScratchbookTab="updateScratchbookTab"
             >
             </masthead-item>
diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index 079139491614..81fb2da36fb9 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -52,9 +52,15 @@
 <script>
 import { VBTooltip } from "bootstrap-vue";
 import { VBPopover } from "bootstrap-vue";
+import { BNavItem, BNavItemDropdown, BDropdownItem } from "bootstrap-vue";
 
 export default {
     name: "MastheadItem",
+    components: {
+        BNavItem,
+        BNavItemDropdown,
+        BDropdownItem,
+    },
     directives: {
         "v-b-tooltip": VBTooltip,
         "v-b-popover": VBPopover,

From 0690b3e0def27e4fd0add8421adc0313e9fb63c6 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 12 May 2020 15:01:34 -0400
Subject: [PATCH 29/36] Masthead - add unit test for active tab.

---
 .../galaxy/scripts/components/Masthead/Masthead.test.js  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.test.js b/client/galaxy/scripts/components/Masthead/Masthead.test.js
index 6ba6bb5d71f7..3d085b1d3294 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.test.js
+++ b/client/galaxy/scripts/components/Masthead/Masthead.test.js
@@ -43,6 +43,8 @@ describe("Masthead.vue", () => {
             },
         ];
 
+        const activeTab = "shared";
+
         const frames = {
             on: () => {
                 return frames;
@@ -54,6 +56,7 @@ describe("Masthead.vue", () => {
                 quotaMeter,
                 frames,
                 tabs,
+                activeTab,
                 appRoot: "prefix/",
             },
             localVue,
@@ -84,4 +87,10 @@ describe("Masthead.vue", () => {
         expect(wrapper.find("#analysis").attributes().style).to.not.contain("display: none");
         expect(wrapper.find("#hiddentab").attributes().style).to.contain("display: none");
     });
+
+    it("should highlight the active tab", () => {
+        expect(wrapper.find("#analysis").classes("active")).to.equals(false);
+        expect(wrapper.find("#shared").classes("active")).to.equals(true);
+    });
+
 });

From 99fa717d53edef4f3b363acfa04c8abd4330bc10 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 12 May 2020 17:10:05 -0400
Subject: [PATCH 30/36] More progress on masthead tests.

---
 .../components/Masthead/Masthead.test.js      | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/galaxy/scripts/components/Masthead/Masthead.test.js b/client/galaxy/scripts/components/Masthead/Masthead.test.js
index 3d085b1d3294..e90fa9448c1a 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.test.js
+++ b/client/galaxy/scripts/components/Masthead/Masthead.test.js
@@ -1,9 +1,11 @@
 import Masthead from "./Masthead.vue";
 import { mount, createLocalVue } from "@vue/test-utils";
+import Scratchbook from "layout/scratchbook";
 
 describe("Masthead.vue", () => {
     let wrapper;
     let localVue;
+    let scratchbook;
     let quotaRendered, quotaEl;
 
     beforeEach(() => {
@@ -31,7 +33,7 @@ describe("Masthead.vue", () => {
             {
                 id: "shared",
                 title: "Shared Items",
-                menu: true,
+                menu: [{ title: "_menu_title", url: "_menu_url", target: "_menu_target" }],
             },
             // Hidden tab (pre-Vue framework supported this, not sure it is used
             // anywhere?)
@@ -42,14 +44,17 @@ describe("Masthead.vue", () => {
                 hidden: true,
             },
         ];
-
         const activeTab = "shared";
 
-        const frames = {
-            on: () => {
-                return frames;
-            },
+        // scratchbook assumes this is a Backbone collection - mock that out.
+        tabs.add = (x) => {
+            tabs.push(x);
+            return x;
         };
+        scratchbook = new Scratchbook({
+            collection: tabs,
+        });
+        const frames = scratchbook.getFrames();
 
         wrapper = mount(Masthead, {
             propsData: {
@@ -70,8 +75,7 @@ describe("Masthead.vue", () => {
     });
 
     it("should render simple tab item links", () => {
-        console.log(wrapper.html());
-        expect(wrapper.findAll("li.nav-item").length).to.equals(3);
+        expect(wrapper.findAll("li.nav-item").length).to.equals(5);
         // Ensure specified link title respected.
         expect(wrapper.find("#analysis a").text()).to.equals("Analyze");
         expect(wrapper.find("#analysis a").attributes("href")).to.equals("prefix/root");
@@ -81,6 +85,11 @@ describe("Masthead.vue", () => {
         // Ensure specified link title respected.
         expect(wrapper.find("#shared a").text()).to.equals("Shared Items");
         expect(wrapper.find("#shared").classes("dropdown")).to.equals(true);
+
+        expect(wrapper.findAll("#shared .dropdown-menu li").length).to.equals(1);
+        expect(wrapper.find("#shared .dropdown-menu li a").attributes().href).to.equals("prefix/_menu_url");
+        expect(wrapper.find("#shared .dropdown-menu li a").attributes().target).to.equals("_menu_target");
+        expect(wrapper.find("#shared .dropdown-menu li a").text()).to.equals("_menu_title");
     });
 
     it("should make hidden tabs hidden", () => {
@@ -93,4 +102,11 @@ describe("Masthead.vue", () => {
         expect(wrapper.find("#shared").classes("active")).to.equals(true);
     });
 
+    it("should display scratchbook button", async () => {
+        expect(wrapper.find("#enable-scratchbook a span").classes("fa-th")).to.equals(true);
+        expect(scratchbook.active).to.equals(false);
+        // wrapper.find("#enable-scratchbook a").trigger("click");
+        // await localVue.nextTick();
+        // expect(scratchbook.active).to.equals(true);
+    });
 });

From 54fe0e83b157ad6e13a96aed67190c84b17224f1 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 13 May 2020 12:54:31 -0400
Subject: [PATCH 31/36] Remove now unused menu tab code in layout/menu.js.

---
 client/galaxy/scripts/layout/menu.js | 195 ---------------------------
 1 file changed, 195 deletions(-)

diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index c8cb044939a2..f649715bf1be 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -1,9 +1,7 @@
 /** Masthead Collection **/
-import _ from "underscore";
 import $ from "jquery";
 import axios from "axios";
 import Backbone from "backbone";
-import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import _l from "utils/localization";
 import { CommunicationServerView } from "layout/communication-server-view";
@@ -345,199 +343,6 @@ const Collection = Backbone.Collection.extend({
     },
 });
 
-/** Masthead tab **/
-const Tab = Backbone.View.extend({
-    initialize: function (options) {
-        this.model = options.model;
-        this.setElement(this._template());
-        this.$link = this.$(".nav-link");
-        this.$note = this.$(".nav-note");
-        this.$menu = this.$(".dropdown-menu");
-        this.listenTo(this.model, "change", this.render, this);
-    },
-
-    events: {
-        "click .nav-link": "_toggleClick",
-    },
-
-    render: function () {
-        $(".tooltip").remove();
-        this.$el
-            .removeClass()
-            .addClass(this.model.get("disabled") && "disabled")
-            .addClass(this.model.get("active") && "active")
-            .addClass(this.model.get("menu") && "dropdown")
-            .attr("id", this.model.id)
-            .css({
-                visibility: (this.model.get("visible") && "visible") || "hidden",
-            });
-        this.model.set("url", this._formatUrl(this.model.get("url")));
-        this.$note
-            .html(this.model.get("note") || "")
-            .removeClass()
-            .addClass("nav-note")
-            .addClass(this.model.get("note_cls"))
-            .css({
-                display: (this.model.get("show_note") && "block") || "none",
-            });
-        this.$link
-            .html(this.model.get("title") || "")
-            .removeClass()
-            .addClass("nav-link")
-            .addClass(this.model.get("cls"))
-            .addClass(this.model.get("icon") && `nav-icon fa ${this.model.get("icon")}`)
-            .addClass(this.model.get("menu") && "dropdown-toggle")
-            .addClass(this.model.get("toggle") && "toggle")
-            .attr("id", this.model.get("menu") && `dropdown-button-${this.model.get("id")}`)
-            .attr("aria-haspopup", this.model.get("menu") && "true")
-            .attr("target", this.model.get("target"))
-            .attr("href", this.model.get("url"))
-            .attr("title", this.model.get("tooltip"))
-            .tooltip("dispose");
-        if (this.model.get("tooltip")) {
-            this.$link.tooltip({ placement: "bottom" });
-        }
-        if (this.model.get("menu") && this.model.get("show_menu")) {
-            this.$menu.show();
-            $("#dd-helper")
-                .show()
-                .off()
-                .on("click", () => {
-                    $("#dd-helper").hide();
-                    this.model.set("show_menu", false);
-                });
-        } else {
-            this.$menu.hide();
-            $("#dd-helper").hide();
-        }
-        this.$menu.empty().removeClass();
-        if (this.model.get("menu")) {
-            _.each(this.model.get("menu"), (menuItem) => {
-                this.$menu.append(this._buildMenuItem(menuItem));
-                if (menuItem.divider) {
-                    this.$menu.append($("<div/>").addClass("dropdown-divider"));
-                }
-            });
-            this.$menu.addClass("dropdown-menu");
-            this.$menu.attr("aria-labelledby", this.$menu.siblings(".dropdown-toggle").attr("id"));
-            this.$menu.attr("role", "menu");
-            this.$link.append($("<b/>").addClass("caret"));
-        }
-        return this;
-    },
-
-    /** Add new menu item */
-    _buildMenuItem: function (options) {
-        options = _.defaults(options || {}, {
-            title: "",
-            url: "",
-            target: "_parent",
-            noscratchbook: false,
-        });
-        options.url = this._formatUrl(options.url);
-        return $("<a/>")
-            .addClass("dropdown-item")
-            .attr("href", options.url)
-            .attr("target", options.target)
-            .attr("class", options.class)
-            .attr("role", "menuitem")
-            .html(options.title)
-            .on("click", (e) => {
-                e.preventDefault();
-                this.model.set("show_menu", false);
-                if (options.onclick) {
-                    options.onclick();
-                } else {
-                    const Galaxy = getGalaxyInstance();
-                    if (options.target == "__use_router__" && typeof Galaxy.page != "undefined") {
-                        Galaxy.page.router.executeUseRouter(options.url);
-                    } else {
-                        try {
-                            Galaxy.frame.add(options);
-                        } catch (err) {
-                            console.warn("Missing frame element on galaxy instance", err);
-                        }
-                    }
-                }
-            });
-    },
-
-    buildLink: function (label, url) {
-        // covered
-        return $("<div/>")
-            .append(
-                $("<a/>")
-                    .attr("href", getAppRoot() + url)
-                    .html(label)
-            )
-            .html();
-    },
-
-    /** Handle click event */
-    _toggleClick: function (e) {
-        // covered
-        const model = this.model;
-        e.preventDefault();
-        $(".tooltip").hide();
-        model.trigger("dispatch", (m) => {
-            if (model.id !== m.id && m.get("menu")) {
-                m.set("show_menu", false);
-            }
-        });
-        if (!model.get("disabled")) {
-            if (!model.get("menu")) {
-                if (model.get("onclick")) {
-                    model.get("onclick")();
-                } else {
-                    const Galaxy = getGalaxyInstance();
-                    if (model.attributes.target == "__use_router__" && typeof Galaxy.page != "undefined") {
-                        Galaxy.page.router.executeUseRouter(model.attributes.url);
-                    } else {
-                        Galaxy.frame.add(model.attributes);
-                    }
-                }
-            } else {
-                model.set("show_menu", true);
-            }
-        } else {
-            if (this.$link.popover) {
-                this.$link.popover("dispose");
-            }
-            this.$link
-                .popover({
-                    html: true,
-                    placement: "bottom",
-                    content: `Please ${this.buildLink("login or register", "login")} to use this feature.`,
-                })
-                .popover("show");
-            window.setTimeout(() => {
-                this.$link.popover("dispose");
-            }, 3000);
-        }
-    },
-
-    /** Url formatting */
-    _formatUrl: function (url) {
-        return typeof url == "string" &&
-            url.indexOf("mailto:") === -1 &&
-            url.indexOf("//") === -1 &&
-            url.charAt(0) != "/"
-            ? getAppRoot() + url
-            : url;
-    },
-
-    /** body tempate */
-    _template: function () {
-        return `
-            <li class="nav-item">
-                <a class="nav-link"/>
-                <div class="nav-note"/>
-                <div class="dropdown-menu"/>
-            </li>`;
-    },
-});
-
 export default {
     Collection: Collection,
-    Tab: Tab,
 };

From 48e7838a200fcae35c66d42874d684bb335b67cd Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 13 May 2020 16:06:06 -0400
Subject: [PATCH 32/36] Fix Selenium tests for masthead change.

---
 lib/galaxy/selenium/navigates_galaxy.py |  6 +++---
 lib/galaxy/selenium/navigation.yml      | 12 +++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index d84922aa153c..459e4dcc9603 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -435,7 +435,7 @@ def register(self, email=None, password=None, username=None, confirm=None, asser
             username = email.split("@")[0]
 
         self.home()
-        self.click_masthead_user()
+        self.components.masthead.register_or_login.wait_for_and_click()
         self.wait_for_and_click(self.navigation.registration.selectors.toggle)
         form = self.wait_for_visible(self.navigation.registration.selectors.form)
         self.fill(form, dict(
@@ -470,8 +470,8 @@ def register(self, email=None, password=None, username=None, confirm=None, asser
             assert email in text
             assert self.get_logged_in_user()["email"] == email
 
-            # Hide masthead menu click
-            self.click_center()
+            # clicking away no longer closes menu post Masthead -> VueJS
+            self.click_masthead_user()
 
     def wait_for_logged_in(self):
         try:
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 7de142da6cfe..2e02ecd7143b 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -31,14 +31,12 @@ masthead:
   selectors:
     _: '#masthead'
 
-    user:
-      type: xpath
-      selector: '//li[@id="user"]'
+    # bootstrap-vue a tag doesn't work as link target, need to hit span inside
+    user: '#user.loggedin-only > a.nav-link.dropdown-toggle > span'
+    register_or_login: '#user.loggedout-only > .nav-link'
 
-    user_menu: 'li#user .dropdown-menu'
-    workflow:
-      type: xpath
-      selector: '//li[@id="workflow"]'
+    user_menu: '#user .dropdown-menu a'
+    workflow: '#workflow .nav-link > span'
 
     user_email:
       type: xpath

From 5cc07cf6b8a86d64d52cb5d3f81cba18c28a1b99 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 14 May 2020 08:52:53 -0400
Subject: [PATCH 33/36] Another selenium fix.

---
 lib/galaxy/selenium/navigates_galaxy.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 459e4dcc9603..b1b4642cafd7 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -406,7 +406,7 @@ def submit_login(self, email, password=None, assert_valid=True, retries=0):
             'login': email,
             'password': password,
         }
-        self.click_masthead_user()
+        self.components.masthead.register_or_login.wait_for_and_click()
         self.sleep_for(WAIT_TYPES.UX_RENDER)
         form = self.wait_for_visible(self.navigation.login.selectors.form)
         self.fill(form, login_info)

From 815d8b5f1dc2449c957d3c42873b08823475a5c8 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 14 May 2020 14:11:24 -0400
Subject: [PATCH 34/36] Another Selenium fix for masthead changes.

---
 lib/galaxy/selenium/navigation.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 2e02ecd7143b..6e57baf01f13 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -36,7 +36,7 @@ masthead:
     register_or_login: '#user.loggedout-only > .nav-link'
 
     user_menu: '#user .dropdown-menu a'
-    workflow: '#workflow .nav-link > span'
+    workflow: '#workflow .nav-link'
 
     user_email:
       type: xpath

From 387fded0fcd289c50333404bdc4310dc8a10f774 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 14 May 2020 17:32:40 -0400
Subject: [PATCH 35/36] More selenium test fixes for new masthead.

Problem is the interactive tooltips that are off by default in bootstrap but not bootstrap-vue. interactive tooltips are better for accessibility though so best to just work around them for testing?
---
 lib/galaxy/selenium/navigates_galaxy.py | 14 +++++++++++---
 lib/galaxy/selenium/navigation.yml      |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index b1b4642cafd7..5290c65b14c5 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -362,7 +362,7 @@ def click_grid_popup_option(self, item_name, option_label):
 
     def published_grid_search_for(self, search_term=None):
         return self._inline_search_for(
-            '#input-free-text-search-filter',
+            self.navigation.grids.free_text_search,
             search_term,
         )
 
@@ -374,7 +374,9 @@ def is_logged_in(self):
 
     @retry_during_transitions
     def _inline_search_for(self, selector, search_term=None):
-        search_box = self.wait_for_and_click_selector(selector)
+        # Clear tooltip resulting from clicking on the masthead to get here.
+        self.clear_tooltips()
+        search_box = self.wait_for_and_click(selector)
         search_box.clear()
         if search_term is not None:
             search_box.send_keys(search_term)
@@ -954,6 +956,12 @@ def wait_for_overlays_cleared(self):
         self.wait_for_selector_absent_or_hidden(".ui-modal", wait_type=WAIT_TYPES.UX_POPUP)
         self.wait_for_selector_absent_or_hidden(".toast", wait_type=WAIT_TYPES.UX_POPUP)
 
+    def clear_tooltips(self):
+        action_chains = self.action_chains()
+        center_element = self.driver.find_element_by_css_selector("#center")
+        action_chains.move_to_element(center_element).perform()
+        self.wait_for_selector_absent_or_hidden(".b-tooltip", wait_type=WAIT_TYPES.UX_POPUP)
+
     def workflow_index_open(self):
         self.home()
         self.click_masthead_workflow()
@@ -977,7 +985,7 @@ def workflow_index_click_search(self):
 
     def workflow_index_search_for(self, search_term=None):
         return self._inline_search_for(
-            "#workflow-search",
+            self.navigation.workflows.search_box,
             search_term,
         )
 
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 6e57baf01f13..bb1768bbc1ca 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -301,6 +301,7 @@ workflows:
     new_button: '#workflow-create'
     import_button: '#workflow-import'
     save_button: '#workflow-save-button'
+    search_box: "#workflow-search"
 
 workflow_run:
 

From 3964d1a212dff320592fa600de4a075b917c373c Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 14 May 2020 17:34:52 -0400
Subject: [PATCH 36/36] Remove masthead qunit tests (most ported to VueJS
 tests)

---
 client/galaxy/scripts/qunit/test.js           |   1 -
 .../scripts/qunit/tests/masthead_tests.js     | 124 ------------------
 2 files changed, 125 deletions(-)
 delete mode 100644 client/galaxy/scripts/qunit/tests/masthead_tests.js

diff --git a/client/galaxy/scripts/qunit/test.js b/client/galaxy/scripts/qunit/test.js
index 41abaa55e995..2702237bedef 100644
--- a/client/galaxy/scripts/qunit/test.js
+++ b/client/galaxy/scripts/qunit/test.js
@@ -11,7 +11,6 @@ import "./tests/form_tests";
 
 import "./tests/list_of_pairs_collection_creator_tests";
 import "./tests/workflow_editor_tests";
-import "./tests/masthead_tests";
 import "./tests/graph_tests";
 import "./tests/job_dag_tests";
 import "./tests/history_contents_model_tests";
diff --git a/client/galaxy/scripts/qunit/tests/masthead_tests.js b/client/galaxy/scripts/qunit/tests/masthead_tests.js
deleted file mode 100644
index 88021ed15adb..000000000000
--- a/client/galaxy/scripts/qunit/tests/masthead_tests.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/* global QUnit */
-import $ from "jquery";
-import testApp from "qunit/test-app";
-import Masthead from "layout/masthead";
-import { getAppRoot } from "onload";
-import { getGalaxyInstance } from "app";
-
-QUnit.module("Masthead test", {
-    beforeEach: function () {
-        testApp.create();
-        this.masthead = new Masthead.View({
-            brand: "brand",
-            use_remote_user: "use_remote_user",
-            remote_user_logout_href: "remote_user_logout_href",
-            lims_doc_url: "lims_doc_url",
-            support_url: "support_url",
-            search_url: "search_url",
-            mailing_lists: "mailing_lists",
-            screencasts_url: "screencasts_url",
-            wiki_url: "wiki_url",
-            citation_url: "citation_url",
-            terms_url: "terms_url",
-            logo_url: "logo_url",
-            logo_src: "../../../static/favicon.png",
-            is_admin_user: "is_admin_user",
-            active_view: "analysis",
-            ftp_upload_site: "ftp_upload_site",
-            datatypes_disable_auto: true,
-            allow_user_creation: true,
-            enable_cloud_launch: true,
-            user_requests: true,
-        });
-        this.container = this.masthead.render().$el;
-        $("body").append(this.container);
-    },
-    afterEach: function () {
-        testApp.destroy();
-        this.container.remove();
-    },
-});
-
-QUnit.test("tabs", function (assert) {
-    var tab = this.masthead.collection.findWhere({ id: "analysis" });
-    var $tab = $("#analysis");
-    var $toggle = $tab.find(".nav-link");
-    var $note = $tab.find(".nav-note");
-    var $menu = $tab.find(".dropdown-menu");
-    assert.ok(tab && $tab.length == 1, "Found analysis tab");
-    tab.set("title", "Analyze");
-    assert.ok($toggle.html() == "Analyze", "Correct title");
-    assert.ok($toggle.css("visibility") == "visible", "Tab visible");
-    tab.set("visible", false);
-    assert.ok($toggle.css("visibility") == "hidden", "Tab hidden");
-    tab.set("visible", true);
-    assert.ok($toggle.css("visibility") == "visible", "Tab visible, again");
-    assert.ok($toggle.attr("href") == getAppRoot(), "Correct initial url");
-    tab.set("url", "_url");
-    assert.ok($toggle.attr("href") == "/_url", "Correct test url");
-    tab.set("url", "http://_url");
-    assert.ok($toggle.attr("href") == "http://_url", "Correct http url");
-    tab.set("tooltip", "_tooltip");
-    $toggle.trigger("mouseover");
-    assert.ok($(".tooltip-inner").html() == "_tooltip", "Correct tooltip");
-    tab.set("tooltip", null);
-    $toggle.trigger("mouseover");
-    assert.ok($(".tooltip-inner").length === 0, "Tooltip removed");
-    tab.set("tooltip", "_tooltip_new");
-    $toggle.trigger("mouseover");
-    assert.ok($(".tooltip-inner").html() == "_tooltip_new", "Correct new tooltip");
-    tab.set("cls", "_cls");
-    assert.ok($toggle.hasClass("_cls"), "Correct extra class");
-    tab.set("cls", "_cls_new");
-    assert.ok($toggle.hasClass("_cls_new") && !$toggle.hasClass("_cls"), "Correct new extra class");
-    assert.ok($note.html() === "", "Correct empty note");
-    tab.set({ note: "_note", show_note: true });
-    assert.ok($note.html() == "_note", "Correct new note");
-    tab.set("toggle", true);
-    assert.ok($toggle.hasClass("toggle"), "Toggled");
-    tab.set("toggle", false);
-    assert.ok(!$tab.hasClass("toggle"), "Untoggled");
-    tab.set("disabled", true);
-    assert.ok($tab.hasClass("disabled"), "Correctly disabled");
-    tab.set("disabled", false);
-    assert.ok(!$tab.hasClass("disabled"), "Correctly enabled");
-    assert.ok($tab.hasClass("active"), "Highlighted");
-    tab.set("active", false);
-    assert.ok(!$tab.hasClass("active"), "Not highlighted");
-    tab.set("active", true);
-    assert.ok($tab.hasClass("active"), "Highlighted, again");
-    assert.ok($menu.length === 0, "Dropdown menu correctly empty");
-    tab.set("menu", [{ title: "_menu_title", url: "_menu_url", target: "_menu_target" }]);
-    $menu = $tab.find(".dropdown-menu");
-    assert.ok($menu.hasClass("dropdown-menu"), "Menu has correct class");
-    assert.ok($menu.css("display") == "none", "Menu hidden");
-    $toggle.trigger("click");
-    assert.ok($menu.css("display") == "block", "Menu shown");
-    var $item = $menu.find("a");
-    assert.ok($item.length == 1, "Added one menu item");
-    assert.ok($item.html() == "_menu_title", "Menu item has correct title");
-    assert.ok($item.attr("href") == "/_menu_url", "Menu item has correct url");
-    assert.ok($item.attr("target") == "_menu_target", "Menu item has correct target");
-    tab.set("menu", null);
-    $item = $menu.find("a");
-    assert.ok($item.length === 0, "All menu items removed");
-    tab.set("menu", [
-        { title: "_menu_title_0", url: "_menu_url_0", target: "_menu_target_0" },
-        { title: "_menu_title_1", url: "_menu_url_1", target: "_menu_target_1" },
-    ]);
-    $item = $menu.find("a");
-    assert.ok($item.length == 2, "Two menu items added");
-    tab.set("show_menu", false);
-    assert.ok($menu.css("display", "none"), "Menu manually hidden");
-    tab.set("show_menu", true);
-    assert.ok($menu.css("display", "block"), "Menu manually shown, again");
-    tab = this.masthead.collection.findWhere({ id: "enable-scratchbook" });
-    $tab = $("#enable-scratchbook");
-    $toggle = $tab.find(".nav-link");
-    assert.ok(tab && $toggle.length == 1, "Found tab to enable scratchbook");
-    assert.ok(!$toggle.hasClass("toggle"), "Untoggled before click");
-    $toggle.trigger("click");
-    assert.ok($toggle.hasClass("toggle"), "Toggled after click");
-    let galaxy = getGalaxyInstance();
-    assert.ok(galaxy.frame.active, "Scratchbook is active");
-});