From 63c2b38c13e4b4d2e2af90cc4250ca4920867368 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 4 May 2023 13:13:33 +0200
Subject: [PATCH 01/11] Branches: Branch item update

Changes the pipeline icon size from 24 to 16,
moves the compare and delete button to a more action dropdown.

Changelog: changed
---
 .../components/branch_more_actions.vue        | 159 ++++++++++++++++++
 .../components/delete_branch_button.vue       |  85 ----------
 .../components/delete_merged_branches.vue     |  10 ++
 .../branches/components/sort_dropdown.vue     |   2 +-
 ..._button.js => init_branch_more_actions.js} |  18 +-
 .../pages/projects/branches/index/index.js    |   6 +-
 app/views/projects/branches/_branch.html.haml | 113 +++++++------
 app/views/projects/branches/_commit.html.haml |   6 +-
 .../_delete_branch_modal_button.html.haml     |  18 --
 .../projects/buttons/_download.html.haml      |   3 +-
 locale/gitlab.pot                             |   6 -
 qa/qa/page/project/branches/show.rb           |   2 +-
 .../branches/user_deletes_branch_spec.rb      |   2 +
 .../branches/user_views_branches_spec.rb      |   2 +-
 spec/features/projects/branches_spec.rb       |  20 ++-
 .../projects/environments/environment_spec.rb |   5 +-
 .../projects/merge_request_button_spec.rb     |  11 +-
 spec/features/protected_branches_spec.rb      |   4 +-
 .../delete_merged_branches_spec.js.snap       |  23 ++-
 ..._button_spec.js => branch_more_actions.js} |   4 +-
 20 files changed, 307 insertions(+), 192 deletions(-)
 create mode 100644 app/assets/javascripts/branches/components/branch_more_actions.vue
 delete mode 100644 app/assets/javascripts/branches/components/delete_branch_button.vue
 rename app/assets/javascripts/branches/{init_delete_branch_button.js => init_branch_more_actions.js} (63%)
 delete mode 100644 app/views/projects/branches/_delete_branch_modal_button.html.haml
 rename spec/frontend/branches/components/{delete_branch_button_spec.js => branch_more_actions.js} (95%)

diff --git a/app/assets/javascripts/branches/components/branch_more_actions.vue b/app/assets/javascripts/branches/components/branch_more_actions.vue
new file mode 100644
index 00000000000000..a5759fc1f44c5a
--- /dev/null
+++ b/app/assets/javascripts/branches/components/branch_more_actions.vue
@@ -0,0 +1,159 @@
+<script>
+import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  name: 'BranchMoreActions',
+  components: { GlDisclosureDropdown },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    branchName: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    defaultBranchName: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    canPushCode: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    canDeleteBranch: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isProtectedBranch: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    merged: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    comparePath: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    deletePath: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  i18n: {
+    toggleText: __('More actions'),
+    compare: s__('Branches|Compare'),
+    deleteBranch: s__('Branches|Delete branch'),
+    deleteProtectedBranch: s__('Branches|Delete protected branch'),
+  },
+  computed: {
+    isDefaultBranch() {
+      return this.branchName === this.defaultBranchName;
+    },
+    deleteBranchText() {
+      return this.isProtectedBranch
+        ? this.$options.i18n.deleteProtectedBranch
+        : this.$options.i18n.deleteBranch;
+    },
+    deleteBranchTitle() {
+      if (this.isDefaultBranch) {
+        return s__('Branches|The default branch cannot be deleted');
+      } else if (this.isProtectedBranch && !this.canDeleteBranch) {
+        return s__('Branches|Only a project maintainer or owner can delete a protected branch');
+      } else if (this.isProtectedBranch) {
+        return s__('Branches|Delete protected branch');
+      }
+
+      return s__('Branches|Delete branch');
+    },
+    dropdownItems() {
+      const items = [];
+
+      if (!this.isDefaultBranch) {
+        items.push({
+          text: this.$options.i18n.compare,
+          href: this.comparePath,
+          extraAttrs: {
+            class: 'js-onboarding-compare-branches',
+            'data-method': 'post',
+          },
+        });
+      }
+
+      if (this.canPushCode && (!this.isDefaultBranch || !this.canDeleteBranch)) {
+        let deleteClasses = 'js-delete-branch-button';
+        deleteClasses +=
+          !this.isDefaultBranch || !this.canDeleteBranch
+            ? // eslint-disable-next-line @gitlab/require-i18n-strings
+              ' gl-text-red-500!'
+            : // eslint-disable-next-line @gitlab/require-i18n-strings
+              ' gl-text-gray-400!';
+
+        items.push({
+          text: this.deleteBranchText,
+          title: this.deleteBranchTitle,
+          action: () => {
+            this.openModal();
+          },
+          extraAttrs: {
+            class: deleteClasses,
+            disabled: this.isDefaultBranch,
+            'data-qa-selector': 'delete_branch_button',
+            'aria-label': this.deleteBranchTitle,
+          },
+        });
+      }
+
+      return items;
+    },
+    dropdownItemsCheck() {
+      if (this.dropdownItems.length === 0) {
+        return false;
+      }
+
+      return true;
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit('openModal', {
+        branchName: this.branchName,
+        defaultBranchName: this.defaultBranchName,
+        deletePath: this.deletePath,
+        isProtectedBranch: this.isProtectedBranch,
+        merged: this.merged,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown
+    v-if="dropdownItemsCheck"
+    v-gl-tooltip.hover.top="{
+      title: $options.i18n.toggleText,
+      boundary: 'viewport',
+    }"
+    :toggle-text="$options.i18n.toggleText"
+    text-sr-only
+    icon="ellipsis_v"
+    category="tertiary"
+    no-caret
+    placement="right"
+    data-testid="branch-more-actions"
+    :items="dropdownItems"
+  />
+  <div v-else class="gl-display-inline-flex gl-w-7">&nbsp;</div>
+</template>
diff --git a/app/assets/javascripts/branches/components/delete_branch_button.vue b/app/assets/javascripts/branches/components/delete_branch_button.vue
deleted file mode 100644
index 6a6d4d48c52cb8..00000000000000
--- a/app/assets/javascripts/branches/components/delete_branch_button.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import eventHub from '../event_hub';
-
-export default {
-  name: 'DeleteBranchButton',
-  components: { GlButton },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    branchName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    defaultBranchName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    deletePath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    tooltip: {
-      type: String,
-      required: false,
-      default: s__('Branches|Delete branch'),
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isProtectedBranch: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    merged: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    title() {
-      if (this.isProtectedBranch && this.disabled) {
-        return s__('Branches|Only a project maintainer or owner can delete a protected branch');
-      } else if (this.isProtectedBranch) {
-        return s__('Branches|Delete protected branch');
-      }
-      return this.tooltip;
-    },
-  },
-  methods: {
-    openModal() {
-      eventHub.$emit('openModal', {
-        branchName: this.branchName,
-        defaultBranchName: this.defaultBranchName,
-        deletePath: this.deletePath,
-        isProtectedBranch: this.isProtectedBranch,
-        merged: this.merged,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    v-gl-tooltip.hover
-    icon="remove"
-    class="js-delete-branch-button"
-    data-qa-selector="delete_branch_button"
-    :disabled="disabled"
-    variant="default"
-    :title="title"
-    :aria-label="title"
-    @click="openModal"
-  />
-</template>
diff --git a/app/assets/javascripts/branches/components/delete_merged_branches.vue b/app/assets/javascripts/branches/components/delete_merged_branches.vue
index d9d8f1d742d70f..117c15be907cef 100644
--- a/app/assets/javascripts/branches/components/delete_merged_branches.vue
+++ b/app/assets/javascripts/branches/components/delete_merged_branches.vue
@@ -103,8 +103,18 @@ export default {
       no-caret
       placement="right"
       data-qa-selector="delete_merged_branches_dropdown_button"
+      class="gl-display-none gl-md-display-block!"
       :items="dropdownItems"
     />
+    <gl-button
+      data-qa-selector="delete_merged_branches_button"
+      category="secondary"
+      variant="danger"
+      class="gl-display-block gl-md-display-none!"
+      @click="openModal"
+    >
+      {{ $options.i18n.deleteButtonText }}
+    </gl-button>
     <gl-modal
       ref="modal"
       size="sm"
diff --git a/app/assets/javascripts/branches/components/sort_dropdown.vue b/app/assets/javascripts/branches/components/sort_dropdown.vue
index 99c82fc9a5a7c8..4866d506988059 100644
--- a/app/assets/javascripts/branches/components/sort_dropdown.vue
+++ b/app/assets/javascripts/branches/components/sort_dropdown.vue
@@ -52,7 +52,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex">
+  <div class="gl-display-flex gl-flex-grow-1">
     <gl-search-box-by-click
       v-model="searchTerm"
       :placeholder="$options.i18n.searchPlaceholder"
diff --git a/app/assets/javascripts/branches/init_delete_branch_button.js b/app/assets/javascripts/branches/init_branch_more_actions.js
similarity index 63%
rename from app/assets/javascripts/branches/init_delete_branch_button.js
rename to app/assets/javascripts/branches/init_branch_more_actions.js
index 43df5d993a4c3a..4476ac658b3410 100644
--- a/app/assets/javascripts/branches/init_delete_branch_button.js
+++ b/app/assets/javascripts/branches/init_branch_more_actions.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import DeleteBranchButton from '~/branches/components/delete_branch_button.vue';
+import DeleteBranchButton from '~/branches/components/branch_more_actions.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
-export default function initDeleteBranchButton(el) {
+export default function initBranchMoreActions(el) {
   if (!el) {
     return false;
   }
@@ -10,11 +10,12 @@ export default function initDeleteBranchButton(el) {
   const {
     branchName,
     defaultBranchName,
-    deletePath,
-    tooltip,
-    disabled,
+    canPushCode,
+    canDeleteBranch,
     isProtectedBranch,
     merged,
+    comparePath,
+    deletePath,
   } = el.dataset;
 
   return new Vue({
@@ -24,11 +25,12 @@ export default function initDeleteBranchButton(el) {
         props: {
           branchName,
           defaultBranchName,
-          deletePath,
-          tooltip,
-          disabled: parseBoolean(disabled),
+          canPushCode: parseBoolean(canPushCode),
+          canDeleteBranch: parseBoolean(canDeleteBranch),
           isProtectedBranch: parseBoolean(isProtectedBranch),
           merged: parseBoolean(merged),
+          comparePath,
+          deletePath,
         },
       }),
   });
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
index ac5e0b28dd120c..f5cd03ac48db35 100644
--- a/app/assets/javascripts/pages/projects/branches/index/index.js
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -1,9 +1,9 @@
 import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 import BranchSortDropdown from '~/branches/branch_sort_dropdown';
 import initDiverganceGraph from '~/branches/divergence_graph';
-import initDeleteBranchButton from '~/branches/init_delete_branch_button';
 import initDeleteBranchModal from '~/branches/init_delete_branch_modal';
 import initDeleteMergedBranches from '~/branches/init_delete_merged_branches';
+import initBranchMoreActions from '~/branches/init_branch_more_actions';
 
 const { divergingCountsEndpoint, defaultBranch } = document.querySelector(
   '.js-branch-list',
@@ -14,8 +14,6 @@ BranchSortDropdown();
 initDeprecatedRemoveRowBehavior();
 initDeleteMergedBranches();
 
-document
-  .querySelectorAll('.js-delete-branch-button')
-  .forEach((elem) => initDeleteBranchButton(elem));
+document.querySelectorAll('.js-branch-more-actions').forEach((elem) => initBranchMoreActions(elem));
 
 initDeleteBranchModal();
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index dbc1fe24d96391..ce7eca7e7a0a20 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,51 +1,68 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
 - merge_project = merge_request_source_project_for_project(@project)
-%li{ class: "branch-item gl-py-3! js-branch-item js-branch-#{branch.name}", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
-  .branch-item-content.gl-display-flex.gl-align-items-center.gl-px-3.gl-py-2
-    .branch-info
-      .gl-display-flex.gl-align-items-center
-        = sprite_icon('branch', size: 12, css_class: 'gl-flex-shrink-0')
-        = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3', data: { qa_selector: 'branch_link' } do
-          = branch.name
-        = clipboard_button(text: branch.name, title: _("Copy branch name"))
-        - if branch.name == @repository.root_ref
-          = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :info, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
-        - elsif merged
-          = gl_badge_tag s_('Branches|merged'), { variant: :info, size: :sm }, { class: 'gl-ml-2', title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref }, data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
-        - if protected_branch?(@project, branch)
-          = gl_badge_tag s_('Branches|protected'), { variant: :success, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
-
-        = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
-
-      .block-truncated
-        - if commit
-          = render 'projects/branches/commit', commit: commit, project: @project
-        - else
-          = s_('Branches|Can’t find HEAD commit for this branch')
-
-    - if branch.name != @repository.root_ref
-      .js-branch-divergence-graph
-
-    .controls.d-none.d-md-block<
-      - if commit_status
-        = render 'ci/status/icon', size: 24, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
-      - elsif show_commit_status
-        .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
-          %svg.s24
-
-      - if merge_project && create_mr_button?(from: branch.name, source_project: @project)
-        = render Pajamas::ButtonComponent.new(href: create_mr_path(from: branch.name, source_project: @project)) do
-          = _('Merge request')
-
-      - if branch.name != @repository.root_ref
-        = link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
-          class: "gl-button btn btn-default js-onboarding-compare-branches #{'gl-ml-3' unless merge_project}",
-          method: :post,
-          title: s_('Branches|Compare') do
-          = s_('Branches|Compare')
-
-      = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], class: 'gl-vertical-align-top'
-
-      - if can?(current_user, :push_code, @project)
-        = render 'projects/branches/delete_branch_modal_button', project: @project, branch: branch, merged: merged
+- merge_request = false
+- @project.merge_requests.each_with_index do |mr, index|
+  - if mr.source_branch == branch.name && mr.target_branch == @repository.root_ref
+    - merge_request = @project.merge_requests[index]
+- merge_request_closed = merge_request && !merge_request.closed?
+%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
+  .branch-info
+    .gl-display-flex.gl-align-items-center
+      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
+        = branch.name
+      = clipboard_button(text: branch.name, title: _("Copy branch name"))
+      - if branch.name == @repository.root_ref
+        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :neutral, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+      - if protected_branch?(@project, branch)
+        = gl_badge_tag s_('Branches|protected'), { variant: :muted, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
+
+      = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
+
+    .block-truncated
+      - if commit
+        = render 'projects/branches/commit', commit: commit, project: @project
+      - else
+        = s_('Branches|Can’t find HEAD commit for this branch')
+
+  - if branch.name != @repository.root_ref
+    .js-branch-divergence-graph
+
+  .pipeline-status.d-none.d-md-block<
+    - if commit_status
+      = render 'ci/status/icon', size: 16, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
+    - elsif show_commit_status
+      .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
+        %svg.s16
+
+  - if merge_request && merge_request.source_branch == branch.name && merge_request.target_branch == @repository.root_ref && !merge_request.closed?
+    .issuable-reference.gl-display-flex.gl-justify-content-end.gl-w-10.gl-ml-5.gl-mr-4
+      - if merge_request.open?
+        - variant = :success
+        - if merge_request.draft?
+          - variant = :warning
+        - mr_icon = 'merge-request-open'
+        - mr_status = _('Open')
+      - elsif merge_request.merged?
+        - variant = :info
+        - mr_icon = 'merge'
+        - mr_status = _('Merged')
+      = gl_badge_tag issuable_reference(merge_request), { icon: mr_icon, variant: variant, size: :md, href: merge_request_path(merge_request) }, { class: 'gl-mr-2', title: mr_status + ' - ' + merge_request.title, data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
+
+  .controls.d-none.d-md-block<
+    - if merge_project && !merge_request_closed && create_mr_button?(from: branch.name, source_project: @project)
+      = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip gl-mr-2!', title: _('New merge request') }) do
+        = _('New')
+
+    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], css_class: 'gl-mr-1!'
+
+    .js-branch-more-actions{ data: {
+        branch_name: branch.name,
+        default_branch_name: @repository.root_ref,
+        can_push_code: can?(current_user, :push_code, @project).to_s,
+        can_delete_branch: can?(current_user, :push_to_delete_protected_branch, @project).to_s,
+        is_protected_branch: protected_branch?(@project, branch).to_s,
+        merged: merged.to_s,
+        compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
+        delete_path: project_branch_path(@project, branch.name),
+    } }
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
index cfa0cf6d07bf96..6bbd06175984e5 100644
--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
@@ -1,9 +1,7 @@
-.branch-commit.cgray
-  .icon-container.commit-icon
-    = custom_icon("icon_commit")
+.branch-commit.gl-font-sm.gl-text-gray-500
   = link_to commit.short_id, project_commit_path(project, commit.id), class: "commit-sha"
   &middot;
   %span.str-truncated
-    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message cgray"
+    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message gl-text-gray-500!"
   &middot;
   %span.gl-text-secondary= time_ago_with_tooltip(commit.committed_date)
diff --git a/app/views/projects/branches/_delete_branch_modal_button.html.haml b/app/views/projects/branches/_delete_branch_modal_button.html.haml
deleted file mode 100644
index 829a459ad2ca73..00000000000000
--- a/app/views/projects/branches/_delete_branch_modal_button.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- if branch.name == @project.repository.root_ref
-  .js-delete-branch-button{ data: { tooltip: s_('Branches|The default branch cannot be deleted'),
-    disabled: true.to_s } }
-- elsif protected_branch?(@project, branch)
-  - if can?(current_user, :push_to_delete_protected_branch, @project)
-    .js-delete-branch-button{ data: { branch_name: branch.name,
-      is_protected_branch: true.to_s,
-      merged: merged.to_s,
-      default_branch_name: @project.repository.root_ref,
-      delete_path: project_branch_path(@project, branch.name) } }
-  - else
-    .js-delete-branch-button{ data: { is_protected_branch: true.to_s,
-      disabled: true.to_s } }
-- else
-  .js-delete-branch-button{ data: { branch_name: branch.name,
-    merged: merged.to_s,
-    default_branch_name: @project.repository.root_ref,
-    delete_path: project_branch_path(@project, branch.name) } }
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 1fbc399c3ff064..bbee7d66dcb3f4 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,10 +1,11 @@
 - project = local_assigns.fetch(:project)
 - ref = local_assigns.fetch(:ref)
 - pipeline = local_assigns.fetch(:pipeline) { project.latest_successful_pipeline_for(ref) }
+- css_class = local_assigns.fetch(:css_class, '')
 
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
-  .project-action-button.dropdown.gl-dropdown.inline>
+  .project-action-button.dropdown.gl-dropdown.inline{ class: css_class }>
     %button.gl-button.btn.btn-default.dropdown-toggle.gl-dropdown-toggle.dropdown-icon-only.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
       = sprite_icon('download', css_class: 'gl-icon dropdown-icon')
       %span.sr-only=  _('Select Archive Format')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0be9d2bbdf16e7..e079f46dadce38 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8107,9 +8107,6 @@ msgstr ""
 msgid "Branches|Filter by branch name"
 msgstr ""
 
-msgid "Branches|Merged into %{default_branch}"
-msgstr ""
-
 msgid "Branches|New branch"
 msgstr ""
 
@@ -8200,9 +8197,6 @@ msgstr ""
 msgid "Branches|diverged from upstream"
 msgstr ""
 
-msgid "Branches|merged"
-msgstr ""
-
 msgid "Branches|protected"
 msgstr ""
 
diff --git a/qa/qa/page/project/branches/show.rb b/qa/qa/page/project/branches/show.rb
index a97d0afd1607df..af328f876f76d4 100644
--- a/qa/qa/page/project/branches/show.rb
+++ b/qa/qa/page/project/branches/show.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Branches
         class Show < Page::Base
-          view 'app/assets/javascripts/branches/components/delete_branch_button.vue' do
+          view 'app/assets/javascripts/branches/components/branch_more_actions.vue' do
             element :delete_branch_button
           end
 
diff --git a/spec/features/projects/branches/user_deletes_branch_spec.rb b/spec/features/projects/branches/user_deletes_branch_spec.rb
index d120ea36a555ed..bb1d7c008a0807 100644
--- a/spec/features/projects/branches/user_deletes_branch_spec.rb
+++ b/spec/features/projects/branches/user_deletes_branch_spec.rb
@@ -23,6 +23,8 @@
     branch_search.native.send_keys(:enter)
 
     page.within(".js-branch-improve\\/awesome") do
+      find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle').click
+      wait_for_requests
       find('.js-delete-branch-button').click
     end
 
diff --git a/spec/features/projects/branches/user_views_branches_spec.rb b/spec/features/projects/branches/user_views_branches_spec.rb
index 322e1fa0ac1d48..516a74d672b8d3 100644
--- a/spec/features/projects/branches/user_views_branches_spec.rb
+++ b/spec/features/projects/branches/user_views_branches_spec.rb
@@ -25,7 +25,7 @@
     end
 
     it "displays a disabled button with a tooltip for the default branch that cannot be deleted", :js do
-      expect(page).to have_button('The default branch cannot be deleted', disabled: true)
+      expect(page).not_to have_button('Delete branch')
     end
   end
 
diff --git a/spec/features/projects/branches_spec.rb b/spec/features/projects/branches_spec.rb
index 7cfb7240db66e6..b468c860b71e63 100644
--- a/spec/features/projects/branches_spec.rb
+++ b/spec/features/projects/branches_spec.rb
@@ -231,7 +231,7 @@
       visit project_branches_path(project)
 
       page.within first('.all-branches li') do
-        expect(page).to have_content 'Merge request'
+        expect(page).to have_content 'New'
       end
     end
 
@@ -242,7 +242,7 @@
         visit project_branches_path(project)
 
         page.within first('.all-branches li') do
-          expect(page).not_to have_content 'Merge request'
+          expect(page).not_to have_content 'New'
         end
       end
 
@@ -266,7 +266,7 @@
 
     it 'does not show merge request button' do
       page.within first('.all-branches li') do
-        expect(page).not_to have_content 'Merge request'
+        expect(page).not_to have_content 'New'
       end
     end
   end
@@ -294,7 +294,7 @@
 
     it 'displays a placeholder when not available' do
       page.all('.all-branches li') do |li|
-        expect(li).to have_css 'svg.s24'
+        expect(li).to have_css '.pipeline-status svg.s16'
       end
     end
   end
@@ -306,7 +306,7 @@
 
     it 'does not show placeholder or pipeline status' do
       page.all('.all-branches') do |branches|
-        expect(branches).not_to have_css 'svg.s24'
+        expect(branches).not_to have_css '.pipeline-status svg.s16'
       end
     end
   end
@@ -322,6 +322,8 @@
         visit project_branches_path(project)
 
         page.within first('.all-branches li') do
+          wait_for_requests
+          find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle').click
           click_link 'Compare'
         end
 
@@ -329,7 +331,7 @@
       end
     end
 
-    context 'on a read-only instance' do
+    context 'on a read-only instance', :js do
       before do
         allow(Gitlab::Database).to receive(:read_only?).and_return(true)
       end
@@ -337,7 +339,7 @@
       it_behaves_like 'compares branches'
     end
 
-    context 'on a read-write instance' do
+    context 'on a read-write instance', :js do
       it_behaves_like 'compares branches'
     end
   end
@@ -364,7 +366,9 @@ def search_for_branch(name)
   end
 
   def delete_branch_and_confirm
-    find('.js-delete-branch-button', match: :first).click
+    wait_for_requests
+    find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle', match: :first).click
+    find('.js-delete-branch-button').click
 
     within '.modal-footer' do
       click_button 'Yes, delete branch'
diff --git a/spec/features/projects/environments/environment_spec.rb b/spec/features/projects/environments/environment_spec.rb
index 346268af972846..910ca44dd21f34 100644
--- a/spec/features/projects/environments/environment_spec.rb
+++ b/spec/features/projects/environments/environment_spec.rb
@@ -479,7 +479,10 @@ def auto_stop_button_selector
       visit project_branches_filtered_path(project, state: 'all', search: 'feature')
 
       remove_branch_with_hooks(project, user, 'feature') do
-        page.within('.js-branch-feature') { find('.js-delete-branch-button').click }
+        page.within('.js-branch-feature') do
+          find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle').click
+          find('.js-delete-branch-button').click
+        end
       end
 
       visit_environment(environment)
diff --git a/spec/features/projects/merge_request_button_spec.rb b/spec/features/projects/merge_request_button_spec.rb
index e5c927af96c1d4..6d6d850342ad7b 100644
--- a/spec/features/projects/merge_request_button_spec.rb
+++ b/spec/features/projects/merge_request_button_spec.rb
@@ -50,10 +50,17 @@
         end
 
         it 'does not show Create merge request button' do
+          href = project_new_merge_request_path(
+            project,
+            merge_request: {
+              source_branch: 'feature'
+            }.merge(extra_mr_params)
+          )
+
           visit url
 
           within('#content-body') do
-            expect(page).not_to have_link(label)
+            expect(page).not_to have_link(label, href: href)
           end
         end
       end
@@ -105,7 +112,7 @@
 
   context 'on branches page' do
     it_behaves_like 'Merge request button only shown when allowed' do
-      let(:label) { 'Merge request' }
+      let(:label) { 'New' }
       let(:url) { project_branches_filtered_path(project, state: 'all', search: 'feature') }
       let(:fork_url) { project_branches_filtered_path(forked_project, state: 'all', search: 'feature') }
     end
diff --git a/spec/features/protected_branches_spec.rb b/spec/features/protected_branches_spec.rb
index e4a64d391b0e21..4713099c4fd0a5 100644
--- a/spec/features/protected_branches_spec.rb
+++ b/spec/features/protected_branches_spec.rb
@@ -27,7 +27,7 @@
         find('input[data-testid="branch-search"]').set('fix')
         find('input[data-testid="branch-search"]').native.send_keys(:enter)
 
-        expect(page).to have_button('Only a project maintainer or owner can delete a protected branch', disabled: true)
+        expect(page).not_to have_button('Delete protected branch')
       end
     end
   end
@@ -64,6 +64,8 @@
         expect(page).to have_content('fix')
         expect(find('.all-branches')).to have_selector('li', count: 1)
 
+        find('[data-testid="branch-more-actions"] button').click
+        wait_for_requests
         expect(page).to have_button('Delete protected branch', disabled: false)
 
         page.find('.js-delete-branch-button').click
diff --git a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
index 300b6f4a39aa47..0254f814827737 100644
--- a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
+++ b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
@@ -4,7 +4,7 @@ exports[`Delete merged branches component Delete merged branches confirmation mo
 <div>
   <gl-base-dropdown-stub
     category="tertiary"
-    class="gl-disclosure-dropdown"
+    class="gl-disclosure-dropdown gl-display-none gl-md-display-block!"
     data-qa-selector="delete_merged_branches_dropdown_button"
     icon="ellipsis_v"
     nocaret="true"
@@ -31,6 +31,27 @@ exports[`Delete merged branches component Delete merged branches confirmation mo
      
   </gl-base-dropdown-stub>
    
+  <b-button-stub
+    class="gl-display-block gl-md-display-none! gl-button btn-danger-secondary"
+    data-qa-selector="delete_merged_branches_button"
+    size="md"
+    tag="button"
+    type="button"
+    variant="danger"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      
+    Delete merged branches
+  
+    </span>
+  </b-button-stub>
+   
   <div>
     <form
       action="/namespace/project/-/merged_branches"
diff --git a/spec/frontend/branches/components/delete_branch_button_spec.js b/spec/frontend/branches/components/branch_more_actions.js
similarity index 95%
rename from spec/frontend/branches/components/delete_branch_button_spec.js
rename to spec/frontend/branches/components/branch_more_actions.js
index 5b2ec443c59dc6..431c26e7c03af2 100644
--- a/spec/frontend/branches/components/delete_branch_button_spec.js
+++ b/spec/frontend/branches/components/branch_more_actions.js
@@ -1,13 +1,13 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import DeleteBranchButton from '~/branches/components/delete_branch_button.vue';
+import BranchMoreDropdown from '~/branches/components/branch_more_actions.vue';
 import eventHub from '~/branches/event_hub';
 
 let wrapper;
 let findDeleteButton;
 
 const createComponent = (props = {}) => {
-  wrapper = shallowMount(DeleteBranchButton, {
+  wrapper = shallowMount(BranchMoreDropdown, {
     propsData: {
       branchName: 'test',
       deletePath: '/path/to/branch',
-- 
GitLab


From 1272e725f8454242b0aa86fefe59288ee69a85f1 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Wed, 10 May 2023 15:35:23 +0200
Subject: [PATCH 02/11] Preload merge requests for related branches

---
 .../projects/branches_controller.rb           |  9 ++++++
 app/helpers/branches_helper.rb                | 19 ++++++++++++
 app/models/merge_request.rb                   |  6 ++++
 app/views/projects/branches/_branch.html.haml | 29 +++++++------------
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 1e17dd586c73ca..9c5d4a2c026167 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -27,6 +27,7 @@ def index
 
         # Fetch branches for the specified mode
         fetch_branches_by_mode
+        fetch_merge_requests_for_branches
 
         @refs_pipelines = @project.ci_pipelines.latest_successful_for_refs(@branches.map(&:name))
         @merged_branch_names = repository.merged_branch_names(@branches.map(&:name))
@@ -199,6 +200,14 @@ def fetch_branches_by_mode
       Projects::BranchesByModeService.new(@project, params.merge(sort: @sort, mode: @mode)).execute
   end
 
+  def fetch_merge_requests_for_branches
+    @related_merge_requests = @project
+                                .source_of_merge_requests
+                                .by_target_branch(@project.default_branch)
+                                .group_by_source_branches(@branches.map(&:name))
+                                .group_by(&:source_branch)
+  end
+
   def fetch_branches_for_overview
     # Here we get one more branch to indicate if there are more data we're not showing
     limit = @overview_max_branches + 1
diff --git a/app/helpers/branches_helper.rb b/app/helpers/branches_helper.rb
index a500a695029d6e..0014e0cf3529ef 100644
--- a/app/helpers/branches_helper.rb
+++ b/app/helpers/branches_helper.rb
@@ -20,6 +20,25 @@ def access_levels_data(access_levels)
       end
     end
   end
+
+  def merge_request_status(merge_request)
+    return unless merge_request.present?
+    return if merge_request.closed?
+
+    if merge_request.open?
+      variant = :success
+      variant = :warning if merge_request.draft?
+
+      mr_icon = 'merge-request-open'
+      mr_status = _('Open')
+    elsif merge_request.merged?
+      variant = :info
+      mr_icon = 'merge'
+      mr_status = _('Merged')
+    end
+
+    { icon: mr_icon, title: "#{mr_status} - #{merge_request.title}", variant: variant }
+  end
 end
 
 BranchesHelper.prepend_mod_with('BranchesHelper')
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index e4b2b81005c56e..fbce298cde6bbe 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -307,6 +307,12 @@ def public_merge_status
   scope :open_and_closed, -> { with_states(:opened, :closed) }
   scope :drafts, -> { where(draft: true) }
   scope :from_source_branches, ->(branches) { where(source_branch: branches) }
+  scope :group_by_source_branches, ->(branches) do
+    includes(:target_project)
+      .from_source_branches(branches)
+      .distinct(:source_branch)
+      .order(source_branch: :asc, id: :desc)
+  end
   scope :by_commit_sha, ->(sha) do
     where('EXISTS (?)', MergeRequestDiff.select(1).where('merge_requests.latest_merge_request_diff_id = merge_request_diffs.id').by_commit_sha(sha)).reorder(nil)
   end
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index ce7eca7e7a0a20..6158c42decf0e4 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,11 +1,9 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
 - merge_project = merge_request_source_project_for_project(@project)
-- merge_request = false
-- @project.merge_requests.each_with_index do |mr, index|
-  - if mr.source_branch == branch.name && mr.target_branch == @repository.root_ref
-    - merge_request = @project.merge_requests[index]
-- merge_request_closed = merge_request && !merge_request.closed?
+- related_merge_request = @related_merge_requests[branch.name]&.first
+- mr_status = merge_request_status(related_merge_request)
+
 %li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
   .branch-info
     .gl-display-flex.gl-align-items-center
@@ -35,22 +33,15 @@
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
         %svg.s16
 
-  - if merge_request && merge_request.source_branch == branch.name && merge_request.target_branch == @repository.root_ref && !merge_request.closed?
-    .issuable-reference.gl-display-flex.gl-justify-content-end.gl-w-10.gl-ml-5.gl-mr-4
-      - if merge_request.open?
-        - variant = :success
-        - if merge_request.draft?
-          - variant = :warning
-        - mr_icon = 'merge-request-open'
-        - mr_status = _('Open')
-      - elsif merge_request.merged?
-        - variant = :info
-        - mr_icon = 'merge'
-        - mr_status = _('Merged')
-      = gl_badge_tag issuable_reference(merge_request), { icon: mr_icon, variant: variant, size: :md, href: merge_request_path(merge_request) }, { class: 'gl-mr-2', title: mr_status + ' - ' + merge_request.title, data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
+
+  - if mr_status.present?
+    .issuable-reference.gl-display-flex.gl-justify-content-end.gl-min-w-10.gl-ml-5.gl-mr-4
+      = gl_badge_tag issuable_reference(related_merge_request),
+        { icon: mr_status[:icon], variant: mr_status[:variant], size: :md, href: merge_request_path(related_merge_request) },
+        { class: 'gl-mr-2', title: mr_status[:title], data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
 
   .controls.d-none.d-md-block<
-    - if merge_project && !merge_request_closed && create_mr_button?(from: branch.name, source_project: @project)
+    - if mr_status.nil? && merge_project && create_mr_button?(from: branch.name, source_project: @project)
       = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip gl-mr-2!', title: _('New merge request') }) do
         = _('New')
 
-- 
GitLab


From 8d51f15078a108c7000a33f62fc5627b38a803e4 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Wed, 10 May 2023 17:26:41 +0200
Subject: [PATCH 03/11] Fix test

---
 spec/views/projects/branches/index.html.haml_spec.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/views/projects/branches/index.html.haml_spec.rb b/spec/views/projects/branches/index.html.haml_spec.rb
index 9954d9ecaec598..e137a8519a7537 100644
--- a/spec/views/projects/branches/index.html.haml_spec.rb
+++ b/spec/views/projects/branches/index.html.haml_spec.rb
@@ -16,6 +16,7 @@
     assign(:mode, 'overview')
     assign(:active_branches, [active_branch])
     assign(:stale_branches, [stale_branch])
+    assign(:related_merge_requests, [])
     assign(:overview_max_branches, 5)
     assign(:branch_pipeline_statuses, {})
     assign(:refs_pipelines, {})
-- 
GitLab


From fdf7f08403d7e69a462c35b659d5b2d2cfd25f70 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Thu, 11 May 2023 14:48:53 +0200
Subject: [PATCH 04/11] Fix tests

---
 spec/views/projects/branches/index.html.haml_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/views/projects/branches/index.html.haml_spec.rb b/spec/views/projects/branches/index.html.haml_spec.rb
index e137a8519a7537..b2b96866904bd3 100644
--- a/spec/views/projects/branches/index.html.haml_spec.rb
+++ b/spec/views/projects/branches/index.html.haml_spec.rb
@@ -16,7 +16,7 @@
     assign(:mode, 'overview')
     assign(:active_branches, [active_branch])
     assign(:stale_branches, [stale_branch])
-    assign(:related_merge_requests, [])
+    assign(:related_merge_requests, {})
     assign(:overview_max_branches, 5)
     assign(:branch_pipeline_statuses, {})
     assign(:refs_pipelines, {})
-- 
GitLab


From 966cb4a4e5e0683c849354054ddf16a5f60451a5 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Thu, 11 May 2023 14:49:30 +0200
Subject: [PATCH 05/11] Add missing tests

---
 .../projects/branches_controller.rb           |  2 +-
 app/models/merge_request.rb                   |  3 +-
 spec/helpers/branches_helper_spec.rb          | 39 ++++++++++++++++++-
 spec/models/merge_request_spec.rb             | 20 ++++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 9c5d4a2c026167..f682e9e7c60102 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -204,7 +204,7 @@ def fetch_merge_requests_for_branches
     @related_merge_requests = @project
                                 .source_of_merge_requests
                                 .by_target_branch(@project.default_branch)
-                                .group_by_source_branches(@branches.map(&:name))
+                                .by_sorted_source_branches(@branches.map(&:name))
                                 .group_by(&:source_branch)
   end
 
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index fbce298cde6bbe..225bc286939161 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -307,10 +307,9 @@ def public_merge_status
   scope :open_and_closed, -> { with_states(:opened, :closed) }
   scope :drafts, -> { where(draft: true) }
   scope :from_source_branches, ->(branches) { where(source_branch: branches) }
-  scope :group_by_source_branches, ->(branches) do
+  scope :by_sorted_source_branches, ->(branches) do
     includes(:target_project)
       .from_source_branches(branches)
-      .distinct(:source_branch)
       .order(source_branch: :asc, id: :desc)
   end
   scope :by_commit_sha, ->(sha) do
diff --git a/spec/helpers/branches_helper_spec.rb b/spec/helpers/branches_helper_spec.rb
index 2ad15adff59225..0195ec730ce9d9 100644
--- a/spec/helpers/branches_helper_spec.rb
+++ b/spec/helpers/branches_helper_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe BranchesHelper do
+RSpec.describe BranchesHelper, feature_category: :source_code_management do
   describe '#access_levels_data' do
     subject { helper.access_levels_data(access_levels) }
 
@@ -47,4 +47,41 @@
       end
     end
   end
+
+  describe '#merge_request_status' do
+    subject { helper.merge_request_status(merge_request) }
+
+    let(:merge_request) { build(:merge_request, title: title) }
+    let(:title) { 'Test MR' }
+
+    context 'when merge request is missing' do
+      let(:merge_request) { nil }
+
+      it { is_expected.to be_nil }
+    end
+
+    context 'when merge request is closed' do
+      before do
+        merge_request.close
+      end
+
+      it { is_expected.to be_nil }
+    end
+
+    context 'when merge request is open' do
+      it { is_expected.to eq(icon: 'merge-request-open', title: "Open - #{title}", variant: :success) }
+    end
+
+    context 'when merge request is draft' do
+      let(:title) { 'Draft: Test MR' }
+
+      it { is_expected.to eq(icon: 'merge-request-open', title: "Open - #{title}", variant: :warning) }
+    end
+
+    context 'when merge request is merged' do
+      let(:merge_request) { build(:merge_request, :merged, title: title) }
+
+      it { is_expected.to eq(icon: 'merge', title: "Merged - #{title}", variant: :info) }
+    end
+  end
 end
diff --git a/spec/models/merge_request_spec.rb b/spec/models/merge_request_spec.rb
index a5e68829c5d830..f0ea8db9e81dcb 100644
--- a/spec/models/merge_request_spec.rb
+++ b/spec/models/merge_request_spec.rb
@@ -180,6 +180,26 @@
       end
     end
 
+    describe '.by_sorted_source_branches' do
+      let(:fork_for_project) { fork_project(project) }
+
+      let!(:merge_request_to_master) { create(:merge_request, :closed, target_project: project, source_branch: 'a-feature') }
+      let!(:merge_request_to_other_branch) { create(:merge_request, target_project: project, source_branch: 'b-feature') }
+      let!(:merge_request_to_master2) { create(:merge_request, target_project: project, source_branch: 'a-feature') }
+      let!(:merge_request_from_fork_to_master) { create(:merge_request, source_project: fork_for_project, target_project: project, source_branch: 'b-feature') }
+
+      it 'returns merge requests sorted by name and id' do
+        expect(described_class.by_sorted_source_branches(%w[a-feature b-feature non-existing-feature])).to eq(
+          [
+            merge_request_to_master2,
+            merge_request_to_master,
+            merge_request_from_fork_to_master,
+            merge_request_to_other_branch
+          ]
+        )
+      end
+    end
+
     describe '.without_hidden', feature_category: :insider_threat do
       let_it_be(:banned_user) { create(:user, :banned) }
       let_it_be(:hidden_merge_request) { create(:merge_request, :unique_branches, author: banned_user) }
-- 
GitLab


From 5022425f980ca5a6bf8338bf930ae4c176694046 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Mon, 15 May 2023 15:24:24 +0200
Subject: [PATCH 06/11] Apply code review suggestions

---
 app/helpers/branches_helper.rb                | 2 +-
 app/views/projects/branches/_branch.html.haml | 3 +--
 spec/helpers/branches_helper_spec.rb          | 6 ++++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/helpers/branches_helper.rb b/app/helpers/branches_helper.rb
index 0014e0cf3529ef..fcb63888a92c3a 100644
--- a/app/helpers/branches_helper.rb
+++ b/app/helpers/branches_helper.rb
@@ -25,7 +25,7 @@ def merge_request_status(merge_request)
     return unless merge_request.present?
     return if merge_request.closed?
 
-    if merge_request.open?
+    if merge_request.open? || merge_request.locked?
       variant = :success
       variant = :warning if merge_request.draft?
 
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 6158c42decf0e4..2c556d5cdb2d0c 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,6 +1,5 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
-- merge_project = merge_request_source_project_for_project(@project)
 - related_merge_request = @related_merge_requests[branch.name]&.first
 - mr_status = merge_request_status(related_merge_request)
 
@@ -41,7 +40,7 @@
         { class: 'gl-mr-2', title: mr_status[:title], data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
 
   .controls.d-none.d-md-block<
-    - if mr_status.nil? && merge_project && create_mr_button?(from: branch.name, source_project: @project)
+    - if mr_status.nil? && create_mr_button?(from: branch.name, source_project: @project)
       = render Pajamas::ButtonComponent.new(icon: 'merge-request', href: create_mr_path(from: branch.name, source_project: @project), button_options: { class: 'has-tooltip gl-mr-2!', title: _('New merge request') }) do
         = _('New')
 
diff --git a/spec/helpers/branches_helper_spec.rb b/spec/helpers/branches_helper_spec.rb
index 0195ec730ce9d9..e2b01e8c82d764 100644
--- a/spec/helpers/branches_helper_spec.rb
+++ b/spec/helpers/branches_helper_spec.rb
@@ -72,6 +72,12 @@
       it { is_expected.to eq(icon: 'merge-request-open', title: "Open - #{title}", variant: :success) }
     end
 
+    context 'when merge request is locked' do
+      let(:merge_request) { build(:merge_request, :locked, title: title) }
+
+      it { is_expected.to eq(icon: 'merge-request-open', title: "Open - #{title}", variant: :success) }
+    end
+
     context 'when merge request is draft' do
       let(:title) { 'Draft: Test MR' }
 
-- 
GitLab


From d60fd196ecefcfec697e6905afa5c82749049998 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Mon, 15 May 2023 18:24:36 +0200
Subject: [PATCH 07/11] Extract target_project eager load into a separate scope

---
 app/controllers/projects/branches_controller.rb | 1 +
 app/models/merge_request.rb                     | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index f682e9e7c60102..e60544129ff164 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -203,6 +203,7 @@ def fetch_branches_by_mode
   def fetch_merge_requests_for_branches
     @related_merge_requests = @project
                                 .source_of_merge_requests
+                                .including_target_project
                                 .by_target_branch(@project.default_branch)
                                 .by_sorted_source_branches(@branches.map(&:name))
                                 .group_by(&:source_branch)
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 225bc286939161..d6e9be11d36f0d 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -308,10 +308,12 @@ def public_merge_status
   scope :drafts, -> { where(draft: true) }
   scope :from_source_branches, ->(branches) { where(source_branch: branches) }
   scope :by_sorted_source_branches, ->(branches) do
-    includes(:target_project)
-      .from_source_branches(branches)
+    from_source_branches(branches)
       .order(source_branch: :asc, id: :desc)
   end
+  scope :including_target_project, -> do
+    includes(:target_project)
+  end
   scope :by_commit_sha, ->(sha) do
     where('EXISTS (?)', MergeRequestDiff.select(1).where('merge_requests.latest_merge_request_diff_id = merge_request_diffs.id').by_commit_sha(sha)).reorder(nil)
   end
-- 
GitLab


From f614bd1953a49847e2320f931379072d94bf11b8 Mon Sep 17 00:00:00 2001
From: Vasilii Iakliushin <viakliushin@gitlab.com>
Date: Tue, 16 May 2023 11:59:10 +0200
Subject: [PATCH 08/11] Apply code review suggestions

---
 .../components/branch_more_actions.vue        | 43 +++------
 .../branches/init_branch_more_actions.js      |  2 -
 app/helpers/branches_helper.rb                |  2 +
 app/views/projects/branches/_branch.html.haml |  1 -
 locale/gitlab.pot                             |  3 -
 .../branches/user_deletes_branch_spec.rb      |  5 +-
 spec/features/projects/branches_spec.rb       |  2 +-
 .../projects/environments/environment_spec.rb |  2 +-
 spec/features/protected_branches_spec.rb      |  2 +-
 .../components/branch_more_actions.js         | 92 -------------------
 .../components/branch_more_actions_spec.js    | 92 +++++++++++++++++++
 spec/helpers/branches_helper_spec.rb          |  6 ++
 12 files changed, 116 insertions(+), 136 deletions(-)
 delete mode 100644 spec/frontend/branches/components/branch_more_actions.js
 create mode 100644 spec/frontend/branches/components/branch_more_actions_spec.js

diff --git a/app/assets/javascripts/branches/components/branch_more_actions.vue b/app/assets/javascripts/branches/components/branch_more_actions.vue
index a5759fc1f44c5a..6eab5b3d9f733d 100644
--- a/app/assets/javascripts/branches/components/branch_more_actions.vue
+++ b/app/assets/javascripts/branches/components/branch_more_actions.vue
@@ -13,42 +13,30 @@ export default {
     branchName: {
       type: String,
       required: true,
-      default: '',
     },
     defaultBranchName: {
       type: String,
       required: true,
-      default: '',
     },
     canPushCode: {
       type: Boolean,
       required: true,
-      default: false,
-    },
-    canDeleteBranch: {
-      type: Boolean,
-      required: true,
-      default: false,
     },
     isProtectedBranch: {
       type: Boolean,
       required: true,
-      default: false,
     },
     merged: {
       type: Boolean,
       required: true,
-      default: false,
     },
     comparePath: {
       type: String,
       required: true,
-      default: '',
     },
     deletePath: {
       type: String,
       required: true,
-      default: '',
     },
   },
   i18n: {
@@ -61,21 +49,20 @@ export default {
     isDefaultBranch() {
       return this.branchName === this.defaultBranchName;
     },
+    canDeleteNotDefaultBranch() {
+      return !this.isDefaultBranch && this.canPushCode;
+    },
     deleteBranchText() {
       return this.isProtectedBranch
         ? this.$options.i18n.deleteProtectedBranch
         : this.$options.i18n.deleteBranch;
     },
     deleteBranchTitle() {
-      if (this.isDefaultBranch) {
-        return s__('Branches|The default branch cannot be deleted');
-      } else if (this.isProtectedBranch && !this.canDeleteBranch) {
-        return s__('Branches|Only a project maintainer or owner can delete a protected branch');
-      } else if (this.isProtectedBranch) {
-        return s__('Branches|Delete protected branch');
+      if (this.isProtectedBranch) {
+        return this.$options.i18n.deleteProtectedBranch;
       }
 
-      return s__('Branches|Delete branch');
+      return this.$options.i18n.deleteBranch;
     },
     dropdownItems() {
       const items = [];
@@ -91,26 +78,18 @@ export default {
         });
       }
 
-      if (this.canPushCode && (!this.isDefaultBranch || !this.canDeleteBranch)) {
-        let deleteClasses = 'js-delete-branch-button';
-        deleteClasses +=
-          !this.isDefaultBranch || !this.canDeleteBranch
-            ? // eslint-disable-next-line @gitlab/require-i18n-strings
-              ' gl-text-red-500!'
-            : // eslint-disable-next-line @gitlab/require-i18n-strings
-              ' gl-text-gray-400!';
-
+      if (this.canDeleteNotDefaultBranch) {
         items.push({
           text: this.deleteBranchText,
-          title: this.deleteBranchTitle,
           action: () => {
             this.openModal();
           },
           extraAttrs: {
-            class: deleteClasses,
-            disabled: this.isDefaultBranch,
-            'data-qa-selector': 'delete_branch_button',
+            class: 'js-delete-branch-button gl-text-red-500!',
+            title: this.deleteBranchTitle,
             'aria-label': this.deleteBranchTitle,
+            'data-testid': 'delete-branch-button',
+            'data-qa-selector': 'delete_branch_button',
           },
         });
       }
diff --git a/app/assets/javascripts/branches/init_branch_more_actions.js b/app/assets/javascripts/branches/init_branch_more_actions.js
index 4476ac658b3410..2eca6fde144208 100644
--- a/app/assets/javascripts/branches/init_branch_more_actions.js
+++ b/app/assets/javascripts/branches/init_branch_more_actions.js
@@ -11,7 +11,6 @@ export default function initBranchMoreActions(el) {
     branchName,
     defaultBranchName,
     canPushCode,
-    canDeleteBranch,
     isProtectedBranch,
     merged,
     comparePath,
@@ -26,7 +25,6 @@ export default function initBranchMoreActions(el) {
           branchName,
           defaultBranchName,
           canPushCode: parseBoolean(canPushCode),
-          canDeleteBranch: parseBoolean(canDeleteBranch),
           isProtectedBranch: parseBoolean(isProtectedBranch),
           merged: parseBoolean(merged),
           comparePath,
diff --git a/app/helpers/branches_helper.rb b/app/helpers/branches_helper.rb
index fcb63888a92c3a..9fadd5ece14eda 100644
--- a/app/helpers/branches_helper.rb
+++ b/app/helpers/branches_helper.rb
@@ -35,6 +35,8 @@ def merge_request_status(merge_request)
       variant = :info
       mr_icon = 'merge'
       mr_status = _('Merged')
+    else
+      return
     end
 
     { icon: mr_icon, title: "#{mr_status} - #{merge_request.title}", variant: variant }
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 2c556d5cdb2d0c..d0e25adf1485df 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -50,7 +50,6 @@
         branch_name: branch.name,
         default_branch_name: @repository.root_ref,
         can_push_code: can?(current_user, :push_code, @project).to_s,
-        can_delete_branch: can?(current_user, :push_to_delete_protected_branch, @project).to_s,
         is_protected_branch: protected_branch?(@project, branch).to_s,
         merged: merged.to_s,
         compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e079f46dadce38..420a55b366b083 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8155,9 +8155,6 @@ msgstr ""
 msgid "Branches|The branch could not be updated automatically because it has diverged from its upstream counterpart."
 msgstr ""
 
-msgid "Branches|The default branch cannot be deleted"
-msgstr ""
-
 msgid "Branches|This branch hasn't been merged into %{defaultBranchName}. To avoid data loss, consider merging this branch before deleting it."
 msgstr ""
 
diff --git a/spec/features/projects/branches/user_deletes_branch_spec.rb b/spec/features/projects/branches/user_deletes_branch_spec.rb
index bb1d7c008a0807..f458c94353a5a8 100644
--- a/spec/features/projects/branches/user_deletes_branch_spec.rb
+++ b/spec/features/projects/branches/user_deletes_branch_spec.rb
@@ -23,9 +23,8 @@
     branch_search.native.send_keys(:enter)
 
     page.within(".js-branch-improve\\/awesome") do
-      find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle').click
-      wait_for_requests
-      find('.js-delete-branch-button').click
+      find('[data-testid="branch-more-actions"] button').click
+      find('[data-testid="delete-branch-button"]').click
     end
 
     accept_gl_confirm(button_text: 'Yes, delete branch')
diff --git a/spec/features/projects/branches_spec.rb b/spec/features/projects/branches_spec.rb
index b468c860b71e63..6a13d5637af3ae 100644
--- a/spec/features/projects/branches_spec.rb
+++ b/spec/features/projects/branches_spec.rb
@@ -368,7 +368,7 @@ def search_for_branch(name)
   def delete_branch_and_confirm
     wait_for_requests
     find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle', match: :first).click
-    find('.js-delete-branch-button').click
+    find('[data-testid="delete-branch-button"]').click
 
     within '.modal-footer' do
       click_button 'Yes, delete branch'
diff --git a/spec/features/projects/environments/environment_spec.rb b/spec/features/projects/environments/environment_spec.rb
index 910ca44dd21f34..0f903901984415 100644
--- a/spec/features/projects/environments/environment_spec.rb
+++ b/spec/features/projects/environments/environment_spec.rb
@@ -481,7 +481,7 @@ def auto_stop_button_selector
       remove_branch_with_hooks(project, user, 'feature') do
         page.within('.js-branch-feature') do
           find('[data-testid="branch-more-actions"] .gl-new-dropdown-toggle').click
-          find('.js-delete-branch-button').click
+          find('[data-testid="delete-branch-button"]').click
         end
       end
 
diff --git a/spec/features/protected_branches_spec.rb b/spec/features/protected_branches_spec.rb
index 4713099c4fd0a5..9244cafbc0b77d 100644
--- a/spec/features/protected_branches_spec.rb
+++ b/spec/features/protected_branches_spec.rb
@@ -68,7 +68,7 @@
         wait_for_requests
         expect(page).to have_button('Delete protected branch', disabled: false)
 
-        page.find('.js-delete-branch-button').click
+        find('[data-testid="delete-branch-button"]').click
         fill_in 'delete_branch_input', with: 'fix'
         click_button 'Yes, delete protected branch'
 
diff --git a/spec/frontend/branches/components/branch_more_actions.js b/spec/frontend/branches/components/branch_more_actions.js
deleted file mode 100644
index 431c26e7c03af2..00000000000000
--- a/spec/frontend/branches/components/branch_more_actions.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import BranchMoreDropdown from '~/branches/components/branch_more_actions.vue';
-import eventHub from '~/branches/event_hub';
-
-let wrapper;
-let findDeleteButton;
-
-const createComponent = (props = {}) => {
-  wrapper = shallowMount(BranchMoreDropdown, {
-    propsData: {
-      branchName: 'test',
-      deletePath: '/path/to/branch',
-      defaultBranchName: 'main',
-      ...props,
-    },
-  });
-};
-
-describe('Delete branch button', () => {
-  let eventHubSpy;
-
-  beforeEach(() => {
-    findDeleteButton = () => wrapper.findComponent(GlButton);
-    eventHubSpy = jest.spyOn(eventHub, '$emit');
-  });
-
-  it('renders the button with default tooltip, style, and icon', () => {
-    createComponent();
-
-    expect(findDeleteButton().attributes()).toMatchObject({
-      title: 'Delete branch',
-      variant: 'default',
-      icon: 'remove',
-    });
-  });
-
-  it('renders a different tooltip for a protected branch', () => {
-    createComponent({ isProtectedBranch: true });
-
-    expect(findDeleteButton().attributes()).toMatchObject({
-      title: 'Delete protected branch',
-      variant: 'default',
-      icon: 'remove',
-    });
-  });
-
-  it('renders a different protected tooltip when it is both protected and disabled', () => {
-    createComponent({ isProtectedBranch: true, disabled: true });
-
-    expect(findDeleteButton().attributes()).toMatchObject({
-      title: 'Only a project maintainer or owner can delete a protected branch',
-      variant: 'default',
-    });
-  });
-
-  it('emits the data to eventHub when button is clicked', () => {
-    createComponent({ merged: true });
-
-    findDeleteButton().vm.$emit('click');
-
-    expect(eventHubSpy).toHaveBeenCalledWith('openModal', {
-      branchName: 'test',
-      defaultBranchName: 'main',
-      deletePath: '/path/to/branch',
-      isProtectedBranch: false,
-      merged: true,
-    });
-  });
-
-  describe('#disabled', () => {
-    it('does not disable the button by default when mounted', () => {
-      createComponent();
-
-      expect(findDeleteButton().attributes()).toMatchObject({
-        title: 'Delete branch',
-        variant: 'default',
-      });
-    });
-
-    // Used for unallowed users and for the default branch.
-    it('disables the button when mounted for a disabled modal', () => {
-      createComponent({ disabled: true, tooltip: 'The default branch cannot be deleted' });
-
-      expect(findDeleteButton().attributes()).toMatchObject({
-        title: 'The default branch cannot be deleted',
-        disabled: 'true',
-        variant: 'default',
-      });
-    });
-  });
-});
diff --git a/spec/frontend/branches/components/branch_more_actions_spec.js b/spec/frontend/branches/components/branch_more_actions_spec.js
new file mode 100644
index 00000000000000..8c35510493a5d2
--- /dev/null
+++ b/spec/frontend/branches/components/branch_more_actions_spec.js
@@ -0,0 +1,92 @@
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import BranchMoreDropdown from '~/branches/components/branch_more_actions.vue';
+import eventHub from '~/branches/event_hub';
+
+describe('Delete branch button', () => {
+  let wrapper;
+  let eventHubSpy;
+
+  const findDeleteButton = () => wrapper.findByTestId('delete-branch-button');
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(BranchMoreDropdown, {
+      propsData: {
+        branchName: 'test',
+        defaultBranchName: 'main',
+        canPushCode: true,
+        isProtectedBranch: false,
+        merged: false,
+        comparePath: '/path/to/branch',
+        deletePath: '/path/to/branch',
+        ...props,
+      },
+      stubs: {
+        GlDisclosureDropdown,
+        GlDisclosureDropdownItem,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    eventHubSpy = jest.spyOn(eventHub, '$emit');
+  });
+
+  it('renders the button with default title, style, and icon', () => {
+    createComponent();
+
+    expect(findDeleteButton().attributes()).toMatchObject({
+      title: 'Delete branch',
+    });
+  });
+
+  it('renders a different title for a protected branch', () => {
+    createComponent({ isProtectedBranch: true });
+
+    expect(findDeleteButton().attributes()).toMatchObject({
+      title: 'Delete protected branch',
+    });
+  });
+
+  it('emits the data to eventHub when button is clicked', () => {
+    createComponent({ merged: true });
+
+    findDeleteButton().trigger('click');
+
+    expect(eventHubSpy).toHaveBeenCalledWith('openModal', {
+      branchName: 'test',
+      defaultBranchName: 'main',
+      deletePath: '/path/to/branch',
+      isProtectedBranch: false,
+      merged: true,
+    });
+  });
+
+  describe('#disabled', () => {
+    it('does render the delete button by default', () => {
+      createComponent();
+
+      expect(findDeleteButton().attributes()).toMatchObject({
+        title: 'Delete branch',
+      });
+    });
+
+    it('disables the delete button for the default branch', () => {
+      createComponent({ branchName: 'main' });
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+
+    it('doesn`t render the delete button when user cannot delete branch', () => {
+      createComponent({ canPushCode: false });
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+
+    it('doesn`t render the delete button when it is both protected and user cannot delete branch', () => {
+      createComponent({ isProtectedBranch: true, canPushCode: false });
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/helpers/branches_helper_spec.rb b/spec/helpers/branches_helper_spec.rb
index e2b01e8c82d764..3375686765382e 100644
--- a/spec/helpers/branches_helper_spec.rb
+++ b/spec/helpers/branches_helper_spec.rb
@@ -89,5 +89,11 @@
 
       it { is_expected.to eq(icon: 'merge', title: "Merged - #{title}", variant: :info) }
     end
+
+    context 'when merge request status is unsupported' do
+      let(:merge_request) { build(:merge_request, state_id: -1) }
+
+      it { is_expected.to be_nil }
+    end
   end
 end
-- 
GitLab


From 0d419228be4bf08d24db8dd682d6081c211c9be0 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 23 May 2023 14:09:17 +0200
Subject: [PATCH 09/11] Fix locale

---
 locale/gitlab.pot | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 420a55b366b083..d3079e82da832c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8113,9 +8113,6 @@ msgstr ""
 msgid "Branches|No branches to show"
 msgstr ""
 
-msgid "Branches|Only a project maintainer or owner can delete a protected branch"
-msgstr ""
-
 msgid "Branches|Overview"
 msgstr ""
 
-- 
GitLab


From ba959698054451db4140eaf0890e2d33b006e973 Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Date: Wed, 31 May 2023 11:21:20 -0400
Subject: [PATCH 10/11] Simplify branches' "More actions" dropdown
 implementation

Refactors the `BranchMoreActions` component to delegate more logic to
the backend. The branch deletion permission check is now done with the
`can_delete_branch?` helper, which should ensure that the client-side
component always stays in sync with permission policies.
Additionally, the conditional rendering is now done in the HAML view.
The condition for not rendering the dropdown ultimately only checked
whether or now the branch was the default, which we do not need to do
client-side.
The test-coverage has been increased as necessary.
---
 .../components/branch_more_actions.vue        | 46 ++++----------
 .../branches/init_branch_more_actions.js      |  4 +-
 app/views/projects/branches/_branch.html.haml | 25 ++++----
 .../branches/user_views_branches_spec.rb      | 43 ++++++++++---
 .../components/branch_more_actions_spec.js    | 60 ++++++-------------
 5 files changed, 81 insertions(+), 97 deletions(-)

diff --git a/app/assets/javascripts/branches/components/branch_more_actions.vue b/app/assets/javascripts/branches/components/branch_more_actions.vue
index 6eab5b3d9f733d..c646dab276086c 100644
--- a/app/assets/javascripts/branches/components/branch_more_actions.vue
+++ b/app/assets/javascripts/branches/components/branch_more_actions.vue
@@ -18,7 +18,7 @@ export default {
       type: String,
       required: true,
     },
-    canPushCode: {
+    canDeleteBranch: {
       type: Boolean,
       required: true,
     },
@@ -46,39 +46,25 @@ export default {
     deleteProtectedBranch: s__('Branches|Delete protected branch'),
   },
   computed: {
-    isDefaultBranch() {
-      return this.branchName === this.defaultBranchName;
-    },
-    canDeleteNotDefaultBranch() {
-      return !this.isDefaultBranch && this.canPushCode;
-    },
     deleteBranchText() {
       return this.isProtectedBranch
         ? this.$options.i18n.deleteProtectedBranch
         : this.$options.i18n.deleteBranch;
     },
-    deleteBranchTitle() {
-      if (this.isProtectedBranch) {
-        return this.$options.i18n.deleteProtectedBranch;
-      }
-
-      return this.$options.i18n.deleteBranch;
-    },
     dropdownItems() {
-      const items = [];
-
-      if (!this.isDefaultBranch) {
-        items.push({
+      const items = [
+        {
           text: this.$options.i18n.compare,
           href: this.comparePath,
           extraAttrs: {
             class: 'js-onboarding-compare-branches',
+            'data-testid': 'compare-branch-button',
             'data-method': 'post',
           },
-        });
-      }
+        },
+      ];
 
-      if (this.canDeleteNotDefaultBranch) {
+      if (this.canDeleteBranch) {
         items.push({
           text: this.deleteBranchText,
           action: () => {
@@ -86,8 +72,7 @@ export default {
           },
           extraAttrs: {
             class: 'js-delete-branch-button gl-text-red-500!',
-            title: this.deleteBranchTitle,
-            'aria-label': this.deleteBranchTitle,
+            'aria-label': this.deleteBranchText,
             'data-testid': 'delete-branch-button',
             'data-qa-selector': 'delete_branch_button',
           },
@@ -96,13 +81,6 @@ export default {
 
       return items;
     },
-    dropdownItemsCheck() {
-      if (this.dropdownItems.length === 0) {
-        return false;
-      }
-
-      return true;
-    },
   },
   methods: {
     openModal() {
@@ -120,19 +98,17 @@ export default {
 
 <template>
   <gl-disclosure-dropdown
-    v-if="dropdownItemsCheck"
     v-gl-tooltip.hover.top="{
       title: $options.i18n.toggleText,
       boundary: 'viewport',
     }"
+    :items="dropdownItems"
     :toggle-text="$options.i18n.toggleText"
-    text-sr-only
     icon="ellipsis_v"
     category="tertiary"
-    no-caret
     placement="right"
     data-testid="branch-more-actions"
-    :items="dropdownItems"
+    text-sr-only
+    no-caret
   />
-  <div v-else class="gl-display-inline-flex gl-w-7">&nbsp;</div>
 </template>
diff --git a/app/assets/javascripts/branches/init_branch_more_actions.js b/app/assets/javascripts/branches/init_branch_more_actions.js
index 2eca6fde144208..62f3c314c43399 100644
--- a/app/assets/javascripts/branches/init_branch_more_actions.js
+++ b/app/assets/javascripts/branches/init_branch_more_actions.js
@@ -10,7 +10,7 @@ export default function initBranchMoreActions(el) {
   const {
     branchName,
     defaultBranchName,
-    canPushCode,
+    canDeleteBranch,
     isProtectedBranch,
     merged,
     comparePath,
@@ -24,7 +24,7 @@ export default function initBranchMoreActions(el) {
         props: {
           branchName,
           defaultBranchName,
-          canPushCode: parseBoolean(canPushCode),
+          canDeleteBranch: parseBoolean(canDeleteBranch),
           isProtectedBranch: parseBoolean(isProtectedBranch),
           merged: parseBoolean(merged),
           comparePath,
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index d0e25adf1485df..adff64fad5ad39 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -2,6 +2,7 @@
 - commit = @repository.commit(branch.dereferenced_target)
 - related_merge_request = @related_merge_requests[branch.name]&.first
 - mr_status = merge_request_status(related_merge_request)
+- is_default_branch = branch.name == @repository.root_ref
 
 %li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
   .branch-info
@@ -9,7 +10,7 @@
       = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
         = branch.name
       = clipboard_button(text: branch.name, title: _("Copy branch name"))
-      - if branch.name == @repository.root_ref
+      - if is_default_branch
         = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :neutral, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
       - if protected_branch?(@project, branch)
         = gl_badge_tag s_('Branches|protected'), { variant: :muted, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
@@ -46,12 +47,16 @@
 
     = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], css_class: 'gl-mr-1!'
 
-    .js-branch-more-actions{ data: {
-        branch_name: branch.name,
-        default_branch_name: @repository.root_ref,
-        can_push_code: can?(current_user, :push_code, @project).to_s,
-        is_protected_branch: protected_branch?(@project, branch).to_s,
-        merged: merged.to_s,
-        compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
-        delete_path: project_branch_path(@project, branch.name),
-    } }
+    - if !is_default_branch
+      .js-branch-more-actions{ data: {
+          branch_name: branch.name,
+          default_branch_name: @repository.root_ref,
+          can_delete_branch: user_access(@project).can_delete_branch?(branch.name).to_s,
+          is_protected_branch: protected_branch?(@project, branch).to_s,
+          merged: merged.to_s,
+          compare_path: project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
+          delete_path: project_branch_path(@project, branch.name),
+      } }
+    - else
+      .gl-display-inline-flex.gl-w-7
+        &nbsp;
diff --git a/spec/features/projects/branches/user_views_branches_spec.rb b/spec/features/projects/branches/user_views_branches_spec.rb
index 516a74d672b8d3..09c2c0dd125ebc 100644
--- a/spec/features/projects/branches/user_views_branches_spec.rb
+++ b/spec/features/projects/branches/user_views_branches_spec.rb
@@ -10,22 +10,41 @@
     sign_in(user)
   end
 
-  context "all branches", :js do
+  context "all branches" do
     before do
       visit(project_branches_path(project))
-      branch_search = find('input[data-testid="branch-search"]')
-      branch_search.set('master')
-      branch_search.native.send_keys(:enter)
     end
 
-    it "shows branches" do
-      expect(page).to have_content("Branches").and have_content("master")
+    describe 'default branch' do
+      before do
+        search_branches('master')
+      end
 
-      expect(page.all(".graph-side")).to all(have_content(/\d+/))
+      it "shows the default branch" do
+        expect(page).to have_content("Branches").and have_content("master")
+
+        expect(page.all(".graph-side")).to all(have_content(/\d+/))
+      end
+
+      it "does not show the \"More actions\" dropdown" do
+        expect(page).not_to have_selector('[data-testid="branch-more-actions"]')
+      end
     end
 
-    it "displays a disabled button with a tooltip for the default branch that cannot be deleted", :js do
-      expect(page).not_to have_button('Delete branch')
+    describe 'non-default branch' do
+      before do
+        search_branches('feature')
+      end
+
+      it "shows the branches" do
+        expect(page).to have_content("Branches").and have_content("feature")
+
+        expect(page.all(".graph-side")).to all(have_content(/\d+/))
+      end
+
+      it "shows the \"More actions\" dropdown" do
+        expect(page).to have_selector('[data-testid="branch-more-actions"]')
+      end
     end
   end
 
@@ -42,4 +61,10 @@
       end
     end
   end
+
+  def search_branches(query)
+    branch_search = find('input[data-testid="branch-search"]')
+    branch_search.set(query)
+    branch_search.native.send_keys(:enter)
+  end
 end
diff --git a/spec/frontend/branches/components/branch_more_actions_spec.js b/spec/frontend/branches/components/branch_more_actions_spec.js
index 8c35510493a5d2..1707cacb09bcf5 100644
--- a/spec/frontend/branches/components/branch_more_actions_spec.js
+++ b/spec/frontend/branches/components/branch_more_actions_spec.js
@@ -1,5 +1,4 @@
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BranchMoreDropdown from '~/branches/components/branch_more_actions.vue';
 import eventHub from '~/branches/event_hub';
 
@@ -7,24 +6,21 @@ describe('Delete branch button', () => {
   let wrapper;
   let eventHubSpy;
 
+  const findCompareButton = () => wrapper.findByTestId('compare-branch-button');
   const findDeleteButton = () => wrapper.findByTestId('delete-branch-button');
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMountExtended(BranchMoreDropdown, {
+    wrapper = mountExtended(BranchMoreDropdown, {
       propsData: {
         branchName: 'test',
         defaultBranchName: 'main',
-        canPushCode: true,
+        canDeleteBranch: true,
         isProtectedBranch: false,
         merged: false,
         comparePath: '/path/to/branch',
         deletePath: '/path/to/branch',
         ...props,
       },
-      stubs: {
-        GlDisclosureDropdown,
-        GlDisclosureDropdownItem,
-      },
     });
   };
 
@@ -32,20 +28,24 @@ describe('Delete branch button', () => {
     eventHubSpy = jest.spyOn(eventHub, '$emit');
   });
 
-  it('renders the button with default title, style, and icon', () => {
+  it('renders the compare action', () => {
     createComponent();
 
-    expect(findDeleteButton().attributes()).toMatchObject({
-      title: 'Delete branch',
-    });
+    expect(findCompareButton().exists()).toBe(true);
+    expect(findCompareButton().text()).toBe('Compare');
   });
 
-  it('renders a different title for a protected branch', () => {
+  it('renders the delete action', () => {
+    createComponent();
+
+    expect(findDeleteButton().exists()).toBe(true);
+    expect(findDeleteButton().text()).toBe('Delete branch');
+  });
+
+  it('renders a different text for a protected branch', () => {
     createComponent({ isProtectedBranch: true });
 
-    expect(findDeleteButton().attributes()).toMatchObject({
-      title: 'Delete protected branch',
-    });
+    expect(findDeleteButton().text()).toBe('Delete protected branch');
   });
 
   it('emits the data to eventHub when button is clicked', () => {
@@ -62,31 +62,9 @@ describe('Delete branch button', () => {
     });
   });
 
-  describe('#disabled', () => {
-    it('does render the delete button by default', () => {
-      createComponent();
-
-      expect(findDeleteButton().attributes()).toMatchObject({
-        title: 'Delete branch',
-      });
-    });
+  it('doesn`t render the delete action when user cannot delete branch', () => {
+    createComponent({ canDeleteBranch: false });
 
-    it('disables the delete button for the default branch', () => {
-      createComponent({ branchName: 'main' });
-
-      expect(findDeleteButton().exists()).toBe(false);
-    });
-
-    it('doesn`t render the delete button when user cannot delete branch', () => {
-      createComponent({ canPushCode: false });
-
-      expect(findDeleteButton().exists()).toBe(false);
-    });
-
-    it('doesn`t render the delete button when it is both protected and user cannot delete branch', () => {
-      createComponent({ isProtectedBranch: true, canPushCode: false });
-
-      expect(findDeleteButton().exists()).toBe(false);
-    });
+    expect(findDeleteButton().exists()).toBe(false);
   });
 });
-- 
GitLab


From 246d6ae9820968c97d4c03ea56f251825c3e8c8e Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Date: Fri, 2 Jun 2023 09:23:59 -0400
Subject: [PATCH 11/11] Apply Vitaly's suggestions

---
 spec/features/projects/branches/user_deletes_branch_spec.rb   | 2 +-
 spec/features/projects/branches/user_views_branches_spec.rb   | 2 +-
 spec/frontend/branches/components/branch_more_actions_spec.js | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/spec/features/projects/branches/user_deletes_branch_spec.rb b/spec/features/projects/branches/user_deletes_branch_spec.rb
index f458c94353a5a8..7e7ab4b2a474b2 100644
--- a/spec/features/projects/branches/user_deletes_branch_spec.rb
+++ b/spec/features/projects/branches/user_deletes_branch_spec.rb
@@ -23,7 +23,7 @@
     branch_search.native.send_keys(:enter)
 
     page.within(".js-branch-improve\\/awesome") do
-      find('[data-testid="branch-more-actions"] button').click
+      click_button 'More actions'
       find('[data-testid="delete-branch-button"]').click
     end
 
diff --git a/spec/features/projects/branches/user_views_branches_spec.rb b/spec/features/projects/branches/user_views_branches_spec.rb
index 09c2c0dd125ebc..52327cc6543a49 100644
--- a/spec/features/projects/branches/user_views_branches_spec.rb
+++ b/spec/features/projects/branches/user_views_branches_spec.rb
@@ -43,7 +43,7 @@
       end
 
       it "shows the \"More actions\" dropdown" do
-        expect(page).to have_selector('[data-testid="branch-more-actions"]')
+        expect(page).to have_button('More actions')
       end
     end
   end
diff --git a/spec/frontend/branches/components/branch_more_actions_spec.js b/spec/frontend/branches/components/branch_more_actions_spec.js
index 1707cacb09bcf5..32b850a62a0add 100644
--- a/spec/frontend/branches/components/branch_more_actions_spec.js
+++ b/spec/frontend/branches/components/branch_more_actions_spec.js
@@ -48,10 +48,10 @@ describe('Delete branch button', () => {
     expect(findDeleteButton().text()).toBe('Delete protected branch');
   });
 
-  it('emits the data to eventHub when button is clicked', () => {
+  it('emits the data to eventHub when button is clicked', async () => {
     createComponent({ merged: true });
 
-    findDeleteButton().trigger('click');
+    await findDeleteButton().trigger('click');
 
     expect(eventHubSpy).toHaveBeenCalledWith('openModal', {
       branchName: 'test',
-- 
GitLab