Fix custom protected branch pattern jumping scroll position to top

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/30149

Use more semantic `<button>` element and prevent the form from
submitting.

app/assets/javascripts/protected_branches/protected_branch_dropdown.js

@@ -6,7 +6,7 @@ class ProtectedBranchDropdown {
     this.$dropdown = options.$dropdown;
     this.$dropdownContainer = this.$dropdown.parent();
     this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedBranch = this.$dropdownContainer.find('.create-new-protected-branch');
+    this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch');
 
     this.buildDropdown();
     this.bindEvents();
@@ -46,7 +46,9 @@ class ProtectedBranchDropdown {
     this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
   }
 
-  onClickCreateWildcard() {
+  onClickCreateWildcard(e) {
+    e.preventDefault();
+
     // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
     this.$dropdown.data('glDropdown').remote.execute();
     this.$dropdown.data('glDropdown').selectRowAtIndex();
@@ -69,7 +71,7 @@ class ProtectedBranchDropdown {
 
     if (branchName) {
       this.$dropdownContainer
-        .find('.create-new-protected-branch code')
+        .find('.js-create-new-protected-branch code')
         .text(branchName);
     }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -119,6 +119,46 @@
   }
 }
 
+@mixin dropdown-link {
+  display: block;
+  position: relative;
+  padding: 5px 8px;
+  color: $gl-text-color;
+  line-height: initial;
+  text-overflow: ellipsis;
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover,
+  &:focus,
+  &.is-focused {
+    background-color: $dropdown-link-hover-bg;
+    text-decoration: none;
+
+    .badge {
+      background-color: darken($dropdown-link-hover-bg, 5%);
+    }
+  }
+
+  &.dropdown-menu-empty-link {
+    &.is-focused {
+      background-color: $dropdown-empty-row-bg;
+    }
+  }
+
+  &.dropdown-menu-user-link {
+    line-height: 16px;
+  }
+
+  .icon-play {
+    fill: $gl-text-color-secondary;
+    margin-right: 6px;
+    height: 12px;
+    width: 11px;
+  }
+}
+
 .dropdown-menu,
 .dropdown-menu-nav {
   display: none;
@@ -178,43 +218,7 @@
   }
 
   a {
-    display: block;
-    position: relative;
-    padding: 5px 8px;
-    color: $gl-text-color;
-    line-height: initial;
-    text-overflow: ellipsis;
-    border-radius: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-
-    &:hover,
-    &:focus,
-    &.is-focused {
-      background-color: $dropdown-link-hover-bg;
-      text-decoration: none;
-
-      .badge {
-        background-color: darken($dropdown-link-hover-bg, 5%);
-      }
-    }
-
-    &.dropdown-menu-empty-link {
-      &.is-focused {
-        background-color: $dropdown-empty-row-bg;
-      }
-    }
-
-    &.dropdown-menu-user-link {
-      line-height: 16px;
-    }
-
-    .icon-play {
-      fill: $gl-text-color-secondary;
-      margin-right: 6px;
-      height: 12px;
-      width: 11px;
-    }
+    @include dropdown-link;
   }
 
   .dropdown-header {

app/assets/stylesheets/pages/projects.scss

@@ -732,6 +732,15 @@ pre.light-well {
   }
 }
 
+.create-new-protected-branch-button {
+  @include dropdown-link;
+
+  width: 100%;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+}
+
 .protected-branches-list {
   margin-bottom: 30px;
 

app/views/projects/protected_branches/_dropdown.html.haml

@@ -10,6 +10,6 @@
 
   %ul.dropdown-footer-list
     %li
-      = link_to '#', title: "New Protected Branch", class: "create-new-protected-branch" do
+      %button{ class: "create-new-protected-branch-button js-create-new-protected-branch", title: "New Protected Branch" }
         Create wildcard
         %code