Migrate resolved threads dropdown to gl-disclosure-dropdown

Migrate GlDropdown to GlDisclosureDropdown
- app/assets/javascripts/notes/components/discussion_counter.vue

Changelog: changed

app/assets/javascripts/notes/components/discussion_counter.vue

 <script>
-import {
-  GlTooltipDirective,
-  GlButton,
-  GlButtonGroup,
-  GlDropdown,
-  GlDropdownItem,
-  GlIcon,
-} from '@gitlab/ui';
-import { mapGetters, mapActions } from 'vuex';
+import { GlButton, GlButtonGroup, GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
 import { throttle } from 'lodash';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -18,11 +11,9 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
+    GlDisclosureDropdown,
     GlButton,
     GlButtonGroup,
-    GlDropdown,
-    GlDropdownItem,
-    GlIcon,
   },
   mixins: [glFeatureFlagsMixin(), discussionNavigation],
   props: {
@@ -56,6 +47,29 @@ export default {
     resolveAllDiscussionsIssuePath() {
       return this.getNoteableData.create_issue_to_resolve_discussions_path;
     },
+    threadOptions() {
+      const options = [
+        {
+          text: this.toggleThreadsLabel,
+          action: this.handleExpandDiscussions,
+          extraAttrs: {
+            'data-testid': 'toggle-all-discussions-btn',
+          },
+        },
+      ];
+
+      if (this.resolveAllDiscussionsIssuePath && !this.allResolved) {
+        options.push({
+          text: __('Resolve all with new issue'),
+          href: this.resolveAllDiscussionsIssuePath,
+          extraAttrs: {
+            'data-testid': 'resolve-all-with-issue-link',
+          },
+        });
+      }
+
+      return options;
+    },
   },
   methods: {
     ...mapActions(['setExpandDiscussions']),
@@ -86,32 +100,25 @@ export default {
     >
       <template v-if="allResolved">
         {{ __('All threads resolved!') }}
-        <gl-dropdown
-          v-gl-tooltip:discussionCounter.hover.bottom
+        <gl-disclosure-dropdown
+          v-gl-tooltip:discussionCounter.hover.top
+          icon="ellipsis_v"
           size="small"
           category="tertiary"
-          right
+          placement="right"
+          no-caret
           :title="__('Thread options')"
           :aria-label="__('Thread options')"
           toggle-class="btn-icon"
           class="gl-pt-0! gl-px-2 gl-h-full gl-ml-2"
-        >
-          <template #button-content>
-            <gl-icon name="ellipsis_v" class="mr-0" />
-          </template>
-          <gl-dropdown-item
-            data-testid="toggle-all-discussions-btn"
-            @click="handleExpandDiscussions"
-          >
-            {{ toggleThreadsLabel }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          :items="threadOptions"
+        />
       </template>
       <template v-else>
         {{ n__('%d unresolved thread', '%d unresolved threads', unresolvedDiscussionsCount) }}
         <gl-button-group class="gl-ml-3">
           <gl-button
-            v-gl-tooltip:discussionCounter.hover.bottom
+            v-gl-tooltip:discussionCounter.hover.top
             :title="__('Go to previous unresolved thread')"
             :aria-label="__('Go to previous unresolved thread')"
             class="discussion-previous-btn gl-rounded-base! gl-px-2!"
@@ -123,7 +130,7 @@ export default {
             @click="jumpPrevious"
           />
           <gl-button
-            v-gl-tooltip:discussionCounter.hover.bottom
+            v-gl-tooltip:discussionCounter.hover.top
             :title="__('Go to next unresolved thread')"
             :aria-label="__('Go to next unresolved thread')"
             class="discussion-next-btn gl-rounded-base! gl-px-2!"
@@ -134,32 +141,19 @@ export default {
             category="tertiary"
             @click="jumpNext"
           />
-          <gl-dropdown
-            v-gl-tooltip:discussionCounter.hover.bottom
+          <gl-disclosure-dropdown
+            v-gl-tooltip:discussionCounter.hover.top
+            icon="ellipsis_v"
             size="small"
             category="tertiary"
-            right
+            placement="right"
+            no-caret
             :title="__('Thread options')"
             :aria-label="__('Thread options')"
             toggle-class="btn-icon"
             class="gl-pt-0! gl-px-2"
-          >
-            <template #button-content>
-              <gl-icon name="ellipsis_v" class="mr-0" />
-            </template>
-            <gl-dropdown-item
-              data-testid="toggle-all-discussions-btn"
-              @click="handleExpandDiscussions"
-            >
-              {{ toggleThreadsLabel }}
-            </gl-dropdown-item>
-            <gl-dropdown-item
-              v-if="resolveAllDiscussionsIssuePath && !allResolved"
-              :href="resolveAllDiscussionsIssuePath"
-            >
-              {{ __('Resolve all with new issue') }}
-            </gl-dropdown-item>
-          </gl-dropdown>
+            :items="threadOptions"
+          />
         </gl-button-group>
       </template>
     </div>

spec/features/issues/create_issue_for_discussions_in_merge_request_spec.rb

@@ -30,7 +30,7 @@ def resolve_all_discussions_link_selector(title: "")
     end
 
     it 'shows a button to resolve all threads by creating a new issue' do
-      find('.discussions-counter .dropdown-toggle').click
+      find('.discussions-counter .gl-new-dropdown-toggle').click
 
       within('.discussions-counter') do
         expect(page).to have_link(_("Resolve all with new issue"), href: new_project_issue_path(project, merge_request_to_resolve_discussions_of: merge_request.iid))
@@ -49,7 +49,7 @@ def resolve_all_discussions_link_selector(title: "")
 
     context 'creating an issue for threads' do
       before do
-        find('.discussions-counter .dropdown-toggle').click
+        find('.discussions-counter .gl-new-dropdown-toggle').click
         find(resolve_all_discussions_link_selector).click
       end
 
@@ -65,7 +65,7 @@ def resolve_all_discussions_link_selector(title: "")
         before do
           project.project_feature.update_attribute(:issues_access_level, ProjectFeature::DISABLED)
           visit project_merge_request_path(project, merge_request)
-          find('.discussions-counter .dropdown-toggle').click
+          find('.discussions-counter .gl-new-dropdown-toggle').click
         end
 
         it 'does not show a link to create a new issue' do

spec/frontend/notes/components/discussion_counter_spec.js

-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import DiscussionCounter from '~/notes/components/discussion_counter.vue';
 import notesModule from '~/notes/stores/modules';
 import * as types from '~/notes/stores/mutation_types';
-import { noteableDataMock, discussionMock, notesDataMock, userDataMock } from '../mock_data';
+import { discussionMock, noteableDataMock, notesDataMock, userDataMock } from '../mock_data';
 
 describe('DiscussionCounter component', () => {
   let store;
@@ -101,9 +101,24 @@ describe('DiscussionCounter component', () => {
     `('renders correctly if $title', async ({ resolved, groupLength }) => {
       updateStore({ resolvable: true, resolved });
       wrapper = mount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
-      await wrapper.find('.dropdown-toggle').trigger('click');
+      await wrapper.findComponent(GlDisclosureDropdown).trigger('click');
 
-      expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(groupLength);
+      expect(wrapper.findAllComponents(GlDisclosureDropdownItem)).toHaveLength(groupLength);
+    });
+
+    describe('resolve all with new issue link', () => {
+      it('has correct href prop', async () => {
+        updateStore({ resolvable: true });
+        wrapper = mount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
+
+        const resolveDiscussionsPath =
+          store.getters.getNoteableData.create_issue_to_resolve_discussions_path;
+
+        await wrapper.findComponent(GlDisclosureDropdown).trigger('click');
+        const resolveAllLink = wrapper.find('[data-testid="resolve-all-with-issue-link"]');
+
+        expect(resolveAllLink.attributes('href')).toBe(resolveDiscussionsPath);
+      });
     });
   });
 
@@ -114,7 +129,7 @@ describe('DiscussionCounter component', () => {
       store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [discussion]);
       store.dispatch('updateResolvableDiscussionsCounts');
       wrapper = mount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
-      await wrapper.find('.dropdown-toggle').trigger('click');
+      await wrapper.findComponent(GlDisclosureDropdown).trigger('click');
       toggleAllButton = wrapper.find('[data-testid="toggle-all-discussions-btn"]');
     };