Merge branch 'branches-list-actions' into 'master'

Branches list: move delete branches button into dropdown See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/119516 Merged-by: Himanshu Kapoor <info@fleon.org> Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com> Approved-by: Himanshu Kapoor <info@fleon.org> Approved-by: Tomas Vik (OOO back on 2023-05-10) <tvik@gitlab.com> Reviewed-by: Tomas Vik (OOO back on 2023-05-10) <tvik@gitlab.com> Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

Merge branch 'branches-list-actions' into 'master'
Branches list: move delete branches button into dropdown See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/119516 Merged-by: Himanshu Kapoor <info@fleon.org> Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com> Approved-by: Himanshu Kapoor <info@fleon.org> Approved-by: Tomas Vik (OOO back on 2023-05-10) <tvik@gitlab.com> Reviewed-by: Tomas Vik (OOO back on 2023-05-10) <tvik@gitlab.com> Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>
6d97a8bd · Himanshu Kapoor · 68c33c07 · c32ab435 · 6d97a8bd · 6d97a8bd
--- a/app/assets/javascripts/branches/components/delete_merged_branches.vue
+++ b/app/assets/javascripts/branches/components/delete_merged_branches.vue
 <script>
-import { GlButton, GlFormInput, GlModal, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlButton, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
 import { sprintf, s__, __ } from '~/locale';
 export const i18n = {
  deleteButtonText: s__('Branches|Delete merged branches'),
-  buttonTooltipText: s__("Branches|Delete all branches that are merged into '%{defaultBranch}'"),
  modalTitle: s__('Branches|Delete all merged branches?'),
  modalMessage: s__(
    'Branches|You are about to %{strongStart}delete all branches%{strongEnd} that were merged into %{codeStart}%{defaultBranch}%{codeEnd}.',
@@ -28,14 +27,12 @@ export const i18n = {
 export default {
  csrf,
  components: {
-    GlModal,
+    GlDisclosureDropdown,
    GlButton,
+    GlModal,
    GlFormInput,
    GlSprintf,
  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
  props: {
    formPath: {
      type: String,
@@ -53,9 +50,6 @@ export default {
    };
  },
  computed: {
-    buttonTooltipText() {
-      return sprintf(this.$options.i18n.buttonTooltipText, { defaultBranch: this.defaultBranch });
-    },
    modalMessage() {
      return sprintf(this.$options.i18n.modalMessage, {
        defaultBranch: this.defaultBranch,
@@ -67,6 +61,20 @@ export default {
    isDeleteButtonDisabled() {
      return !this.isDeletingConfirmed;
    },
+    dropdownItems() {
+      return [
+        {
+          text: this.$options.i18n.deleteButtonText,
+          action: () => {
+            this.openModal();
+          },
+          extraAttrs: {
+            'data-qa-selector': 'delete_merged_branches_button',
+            class: 'gl-text-red-500!',
+          },
+        },
+      ];
+    },
  },
  methods: {
    openModal() {
@@ -87,15 +95,15 @@ export default {
 <template>
  <div>
-    <gl-button
+    <gl-disclosure-dropdown
-      v-gl-tooltip="buttonTooltipText"
+      :toggle-text="$options.i18n.actionsToggleText"
-      class="gl-mr-3"
+      text-sr-only
-      data-qa-selector="delete_merged_branches_button"
+      icon="ellipsis_v"
-      category="secondary"
+      category="tertiary"
-      variant="danger"
+      no-caret
-      @click="openModal"
+      placement="right"
-      >{{ $options.i18n.deleteButtonText }}
+      :items="dropdownItems"
-    </gl-button>
+    />
    <gl-modal
      ref="modal"
      size="sm"

--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -24,11 +24,6 @@
        sorted_by: @sort }
    }
-    - if can_push_code
-      .js-delete-merged-branches{ data: {
-          default_branch: @project.repository.root_ref,
-          form_path: project_merged_branches_path(@project) }
-        }
    - if is_branch_rules_available
      = link_to project_settings_repository_path(@project, anchor: 'js-branch-rules'), class: 'gl-button btn btn-default' do
        = s_('Branches|View branch rules')
@@ -36,6 +31,10 @@
    - if can_push_code
      = link_to new_project_branch_path(@project), class: 'gl-button btn btn-confirm' do
        = s_('Branches|New branch')
+      .js-delete-merged-branches{ data: {
+          default_branch: @project.repository.root_ref,
+          form_path: project_merged_branches_path(@project) }
+        }
 = render_if_exists 'projects/commits/mirror_status'

--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7903,9 +7903,6 @@ msgstr ""
 msgid "Branches|Compare"
 msgstr ""
-msgid "Branches|Delete all branches that are merged into '%{defaultBranch}'"
-msgstr ""
 msgid "Branches|Delete all merged branches?"
 msgstr ""
--- a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
+++ b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
@@ -2,25 +2,33 @@
 exports[`Delete merged branches component Delete merged branches confirmation modal matches snapshot 1`] = `
 <div>
-  <b-button-stub
+  <gl-base-dropdown-stub
-    class="gl-mr-3 gl-button btn-danger-secondary"
+    category="tertiary"
-    data-qa-selector="delete_merged_branches_button"
+    class="gl-disclosure-dropdown"
-    size="md"
+    icon="ellipsis_v"
-    tag="button"
+    nocaret="true"
-    type="button"
+    placement="right"
-    variant="danger"
+    popperoptions="[object Object]"
+    size="medium"
+    textsronly="true"
+    toggleid="dropdown-toggle-btn-25"
+    toggletext=""
+    variant="default"
  >
-    <!---->
-    <!---->
-    <span
+    <ul
-      class="gl-button-text"
+      aria-labelledby="dropdown-toggle-btn-25"
+      class="gl-new-dropdown-contents"
+      data-testid="disclosure-content"
+      id="disclosure-26"
+      tabindex="-1"
    >
-      Delete merged branches
+      <gl-disclosure-dropdown-item-stub
+        item="[object Object]"
-    </span>
+      />
-  </b-button-stub>
+    </ul>
+  </gl-base-dropdown-stub>
  <div>
    <form

--- a/spec/frontend/branches/components/delete_merged_branches_spec.js
+++ b/spec/frontend/branches/components/delete_merged_branches_spec.js
-import { GlButton, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlButton, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DeleteMergedBranches, { i18n } from '~/branches/components/delete_merged_branches.vue';
 import { formPath, propsDataMock } from '../mock_data';
@@ -22,6 +21,7 @@ const stubsData = {
      hide: modalHideSpy,
    },
  }),
+  GlDisclosureDropdown,
  GlButton,
  GlFormInput,
  GlSprintf,
@@ -32,14 +32,12 @@ const createComponent = (mountFn = shallowMountExtended, stubs = {}) => {
    propsData: {
      ...propsDataMock,
    },
-    directives: {
-      GlTooltip: createMockDirective('gl-tooltip'),
-    },
    stubs,
  });
 };
-const findDeleteButton = () => wrapper.findComponent(GlButton);
+const findDeleteButton = () =>
+  wrapper.findComponent('[data-qa-selector="delete_merged_branches_button"]');
 const findModal = () => wrapper.findComponent(GlModal);
 const findConfirmationButton = () =>
  wrapper.findByTestId('delete-merged-branches-confirmation-button');
@@ -54,22 +52,11 @@ describe('Delete merged branches component', () => {
  });
  describe('Delete merged branches button', () => {
-    it('has correct attributes, text and tooltip', () => {
+    it('has correct text', () => {
-      expect(findDeleteButton().attributes()).toMatchObject({
+      createComponent(mount, stubsData);
-        category: 'secondary',
-        variant: 'danger',
-      });
      expect(findDeleteButton().text()).toBe(i18n.deleteButtonText);
    });
-    it('displays a tooltip', () => {
-      const tooltip = getBinding(findDeleteButton().element, 'gl-tooltip');
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value).toBe(wrapper.vm.buttonTooltipText);
-    });
    it('opens modal when clicked', () => {
      createComponent(mount, stubsData);
      findDeleteButton().trigger('click');
@@ -130,7 +117,6 @@ describe('Delete merged branches component', () => {
    it('submits form when correct amount is provided and the confirm button is clicked', async () => {
      findFormInput().vm.$emit('input', 'delete');
      await waitForPromises();
-      expect(findDeleteButton().props('disabled')).not.toBe(true);
      findConfirmationButton().trigger('click');
      expect(submitFormSpy()).toHaveBeenCalled();
    });