From c1316a3bc145f75aab9238588dabd52aca249167 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 1 May 2019 17:40:51 -0400
Subject: [PATCH] Fix dropdown templates in legacy popup-menu generators

---
 client/galaxy/scripts/mvc/ui/popup-menu.js    | 33 ++++++++-----------
 .../galaxy/scripts/mvc/workflow/workflow.js   |  2 +-
 client/galaxy/scripts/ui/popupmenu.js         | 19 +++++------
 client/galaxy/style/scss/base.scss            |  2 +-
 4 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/client/galaxy/scripts/mvc/ui/popup-menu.js b/client/galaxy/scripts/mvc/ui/popup-menu.js
index 5e27f02dca1..e704cd5b0b0 100644
--- a/client/galaxy/scripts/mvc/ui/popup-menu.js
+++ b/client/galaxy/scripts/mvc/ui/popup-menu.js
@@ -53,7 +53,7 @@ var PopupMenu = Backbone.View.extend({
         if (this.options.length) {
             var menu = this;
             //precondition: there should be one option per li
-            this.$el.find("li").each(function(i, li) {
+            this.$(".dropdown-item").each(function(i, li) {
                 var option = menu.options[i];
 
                 // if the option has 'func', call that function when the anchor is clicked
@@ -75,34 +75,29 @@ var PopupMenu = Backbone.View.extend({
     },
 
     template: function(id, options) {
-        return ['<ul id="', id, '-menu" class="dropdown-menu">', this._templateOptions(options), "</ul>"].join("");
+        return `<div id="${id}-menu" class="dropdown-menu">
+                    ${this._templateOptions(options)}
+                </div>`;
     },
 
     _templateOptions: function(options) {
         if (!options.length) {
-            return "<li>(no options)</li>";
+            return '<div class="dropdown-item">(no options)</div>';
         }
         return _.map(options, option => {
             if (option.divider) {
-                return '<li class="divider"></li>';
+                return '<div class="dropdown-item divider"></div>';
             } else if (option.header) {
-                return ['<li class="head"><a href="javascript:void(0);">', option.html, "</a></li>"].join("");
+                return `<div class="dropdown-item head">
+                            <a href="javascript:void(0);">${option.html}</a>
+                        </div>`;
             }
             var href = option.href || "javascript:void(0);";
-            var target = option.target ? ` target="${option.target}"` : "";
-
-            var check = option.checked ? '<span class="fa fa-check"></span>' : "";
-
-            return [
-                '<li><a class="popupmenu-option" href="',
-                href,
-                '"',
-                target,
-                ">",
-                check,
-                option.html,
-                "</a></li>"
-            ].join("");
+            var target = option.target ? `target="${option.target}"` : "";
+            var check = option.checked ? '<span class="fa fa-check"/>' : "";
+            return `<a class="dropdown-item popupmenu-option" href="${href}" ${target}>
+                        ${check}${option.html}
+                    </a>`;
         }).join("");
     },
 
diff --git a/client/galaxy/scripts/mvc/workflow/workflow.js b/client/galaxy/scripts/mvc/workflow/workflow.js
index 1d9f42b8f8f..9530a6836f1 100644
--- a/client/galaxy/scripts/mvc/workflow/workflow.js
+++ b/client/galaxy/scripts/mvc/workflow/workflow.js
@@ -150,7 +150,7 @@ const WorkflowItemView = Backbone.View.extend({
     /** Template for user actions for workflows */
     _templateActions: function() {
         const Galaxy = getGalaxyInstance();
-        if (this.model.get("owner") !== Galaxy.user.attributes.username) {
+        if (this.model.get("owner") == Galaxy.user.attributes.username) {
             return `<div class="dropdown-menu">
                         <a class="dropdown-item" href="${getAppRoot()}workflow/editor?id=${this.model.id}">Edit</a>
                         <a class="dropdown-item" href="${getAppRoot()}workflows/run?id=${this.model.id}">Run</a>
diff --git a/client/galaxy/scripts/ui/popupmenu.js b/client/galaxy/scripts/ui/popupmenu.js
index 5d87c3bcddb..8b62b516be2 100644
--- a/client/galaxy/scripts/ui/popupmenu.js
+++ b/client/galaxy/scripts/ui/popupmenu.js
@@ -29,10 +29,10 @@ export function make_popupmenu(button_element, initial_options) {
         // Need setTimeouts so clicks don't interfere with each other
         setTimeout(() => {
             // Dynamically generate the wrapper holding all the selectable options of the menu.
-            var menu_element = $(`<ul class='dropdown-menu' id='${button_element.attr("id")}-menu'></ul>`);
+            var menu_element = $(`<div class="dropdown-menu" id="${button_element.attr('id')}-menu"/>`);
             var options = button_element.data("menu_options");
             if (_.size(options) <= 0) {
-                $("<li>No Options.</li>").appendTo(menu_element);
+                $('<div class="dropdown-item">No Options.</div>').appendTo(menu_element);
             }
             $.each(options, (k, v) => {
                 if (v) {
@@ -40,17 +40,16 @@ export function make_popupmenu(button_element, initial_options) {
                     const action = v.action || v;
                     const url = v.url || "javascript:void(0);";
                     menu_element.append(
-                        $("<li></li>").append(
-                            $("<a>")
-                                .attr("href", url)
-                                .html(k)
-                                .click(action)
-                        )
+                        $("<a>")
+                            .addClass("dropdown-item")
+                            .attr("href", url)
+                            .html(k)
+                            .click(action)
                     );
                 } else {
                     menu_element.append(
-                        $("<li></li>")
-                            .addClass("head")
+                        $("<div/>")
+                            .addClass("dropdown-item head")
                             .append($("<a href='#'></a>").html(k))
                     );
                 }
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 172b99dad92..18d3f30dd48 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -1328,7 +1328,7 @@ div.popmenu-wrapper {
     top: 100%;
     z-index: 20000;
 
-    ul.dropdown-menu {
+    .dropdown-menu {
         // Since our menus are contained in a positioned div, need to override some styles
         display: block;
         position: relative;