GlDeprecatedDropdown to GlDropdown in app/assets/javascripts/boards

app/assets/javascripts/boards/components/boards_selector.vue

@@ -3,10 +3,10 @@ import { throttle } from 'lodash';
 import {
   GlLoadingIcon,
   GlSearchBoxByType,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
 } from '@gitlab/ui';
 
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -26,10 +26,10 @@ export default {
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
   },
   props: {
     currentBoard: {
@@ -235,22 +235,17 @@ export default {
 <template>
   <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <gl-deprecated-dropdown
+      <gl-dropdown
         data-qa-selector="boards_dropdown"
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
         menu-class="flex-column dropdown-extended-height"
         :text="board.name"
         @show="loadBoards"
       >
-        <div>
-          <div class="dropdown-title mb-0" @mousedown.prevent>
-            {{ s__('IssueBoards|Switch board') }}
-          </div>
-        </div>
-
-        <gl-deprecated-dropdown-header class="mt-0">
-          <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
-        </gl-deprecated-dropdown-header>
+        <p class="gl-new-dropdown-header-top" @mousedown.prevent>
+          {{ s__('IssueBoards|Switch board') }}
+        </p>
+        <gl-search-box-by-type ref="searchBox" v-model="filterTerm" class="m-2" />
 
         <div
           v-if="!loading"
@@ -259,49 +254,50 @@ export default {
           class="dropdown-content flex-fill"
           @scroll.passive="throttledSetScrollFade"
         >
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-show="filteredBoards.length === 0"
             class="gl-pointer-events-none text-secondary"
           >
             {{ s__('IssueBoards|No matching boards found') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
 
-          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+          <gl-dropdown-section-header v-if="showRecentSection">
             {{ __('Recent') }}
-          </h6>
+          </gl-dropdown-section-header>
 
           <template v-if="showRecentSection">
-            <gl-deprecated-dropdown-item
+            <gl-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
               class="js-dropdown-item"
               :href="`${boardBaseUrl}/${recentBoard.id}`"
             >
               {{ recentBoard.name }}
-            </gl-deprecated-dropdown-item>
+            </gl-dropdown-item>
           </template>
 
-          <hr v-if="showRecentSection" class="my-1" />
+          <gl-dropdown-divider v-if="showRecentSection" />
 
-          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+          <gl-dropdown-section-header v-if="showRecentSection">
             {{ __('All') }}
-          </h6>
+          </gl-dropdown-section-header>
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
             class="js-dropdown-item"
             :href="`${boardBaseUrl}/${otherBoard.id}`"
           >
             {{ otherBoard.name }}
-          </gl-deprecated-dropdown-item>
-          <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+          </gl-dropdown-item>
+
+          <gl-dropdown-item v-if="hasMissingBoards" class="no-pointer-events">
             {{
               s__(
                 'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
               )
             }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </div>
 
         <div
@@ -313,25 +309,25 @@ export default {
         <gl-loading-icon v-if="loading" />
 
         <div v-if="canAdminBoard">
-          <gl-deprecated-dropdown-divider />
+          <gl-dropdown-divider />
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-if="multipleIssueBoardsAvailable"
             data-qa-selector="create_new_board_button"
             @click.prevent="showPage('new')"
           >
             {{ s__('IssueBoards|Create new board') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-if="showDelete"
             class="text-danger js-delete-board"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </div>
-      </gl-deprecated-dropdown>
+      </gl-dropdown>
 
       <board-form
         v-if="currentPage"

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-bo.yml

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/boards
+merge_request: 41410
+author: nuwe1
+type: other

ee/app/assets/javascripts/boards/components/weight_select.vue

 <script>
-import { GlButton, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 const ANY_WEIGHT = 'Any weight';
 const NO_WEIGHT = 'None';
@@ -7,8 +7,8 @@ const NO_WEIGHT = 'None';
 export default {
   components: {
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     board: {
@@ -49,17 +49,15 @@ export default {
       this.dropdownHidden = false;
       this.$refs.dropdown.$children[0].show();
     },
-    selectWeight({ target: { value: weight } }) {
+    selectWeight(weight) {
       this.board.weight = this.weightInt(weight);
       this.dropdownHidden = true;
     },
     weightInt(weight) {
-      if (weight > 0) {
-        return parseInt(weight, 10);
+      if (weight >= 0) {
+        return weight;
       } else if (weight === NO_WEIGHT) {
         return -2;
-      } else if (weight === '0') {
-        return 0;
       }
       return -1;
     },
@@ -77,19 +75,21 @@ export default {
     </div>
     <div :class="valueClass" :hidden="!dropdownHidden" class="value">{{ valueText }}</div>
 
-    <gl-deprecated-dropdown
+    <gl-dropdown
       ref="dropdown"
       :hidden="dropdownHidden"
       :text="valueText"
-      class="w-100"
-      menu-class="w-100"
+      block
       toggle-class="d-flex justify-content-between"
     >
-      <div ref="weight-select" @click="selectWeight">
-        <gl-deprecated-dropdown-item v-for="weight in weights" :key="weight" :value="weight">
-          {{ weight }}
-        </gl-deprecated-dropdown-item>
-      </div>
-    </gl-deprecated-dropdown>
+      <gl-dropdown-item
+        v-for="weight in weights"
+        :key="weight"
+        :value="weight"
+        @click="selectWeight(weight)"
+      >
+        {{ weight }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>

ee/spec/frontend/boards/components/weight_select_spec.js

-import { GlButton, GlDeprecatedDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import WeightSelect from 'ee/boards/components/weight_select.vue';
+import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 describe('WeightSelect', () => {
   let wrapper;
 
   const editButton = () => wrapper.find(GlButton);
   const valueContainer = () => wrapper.find('.value');
-  const weightDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const weightSelect = () => wrapper.find({ ref: 'weight-select' });
-
+  const weightDropdown = () => wrapper.find(GlDropdown);
+  const getWeightItemAtIndex = index =>
+    weightDropdown()
+      .findAll(GlDropdownItem)
+      .at(index);
   const defaultProps = {
     weights: ['Any', 'None', 0, 1, 2, 3],
     board: {
@@ -81,15 +83,16 @@ describe('WeightSelect', () => {
 
       describe('and a weight has been selected', () => {
         beforeEach(() => {
-          weightSelect().trigger('click');
+          editButton().trigger('click');
+          getWeightItemAtIndex(0).vm.$emit('click');
         });
 
         it('shows the value text', () => {
-          expect(valueContainer().isVisible()).toBeTruthy();
+          expect(valueContainer().isVisible()).toBe(true);
         });
 
         it('hides the weight dropdown', () => {
-          expect(weightDropdown().isVisible()).toBeFalsy();
+          expect(weightDropdown().isVisible()).toBe(false);
         });
       });
     });

spec/frontend/boards/components/boards_selector_spec.js

 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
 import boardsStore from '~/boards/stores/boards_store';
@@ -34,8 +34,9 @@ describe('BoardsSelector', () => {
   };
 
   const getDropdownItems = () => wrapper.findAll('.js-dropdown-item');
-  const getDropdownHeaders = () => wrapper.findAll('.dropdown-bold-header');
+  const getDropdownHeaders = () => wrapper.findAll(GlDropdownSectionHeader);
   const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findDropdown = () => wrapper.find(GlDropdown);
 
   beforeEach(() => {
     const $apollo = {
@@ -103,7 +104,7 @@ describe('BoardsSelector', () => {
     });
 
     // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-    wrapper.find(GlDeprecatedDropdown).vm.$emit('show');
+    findDropdown().vm.$emit('show');
   });
 
   afterEach(() => {