Replace gl deprecated dropdown with gl dropdown in app/assets/javascripts/vue...

Replace gl deprecated dropdown with gl dropdown in app/assets/javascripts/vue shared/components/split button.vue

app/assets/javascripts/vue_shared/components/split_button.vue

 <script>
 import { isString } from 'lodash';
-import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownItem,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui';
 
 const isValidItem = item =>
   isString(item.eventName) && isString(item.title) && isString(item.description);
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
   },
 
   props: {
@@ -32,7 +28,7 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: 'secondary',
+      default: 'default',
     },
   },
 
@@ -61,8 +57,8 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown
-    :menu-class="`dropdown-menu-selectable ${menuClass}`"
+  <gl-dropdown
+    :menu-class="menuClass"
     split
     :text="dropdownToggleText"
     :variant="variant"
@@ -70,20 +66,20 @@ export default {
     @click="triggerEvent"
   >
     <template v-for="(item, itemIndex) in actionItems">
-      <gl-deprecated-dropdown-item
+      <gl-dropdown-item
         :key="item.eventName"
-        :active="selectedItem === item"
-        active-class="is-active"
+        :is-check-item="true"
+        :is-checked="selectedItem === item"
         @click="changeSelectedItem(item)"
       >
         <strong>{{ item.title }}</strong>
         <div>{{ item.description }}</div>
-      </gl-deprecated-dropdown-item>
+      </gl-dropdown-item>
 
-      <gl-deprecated-dropdown-divider
+      <gl-dropdown-divider
         v-if="itemIndex < actionItems.length - 1"
         :key="`${item.eventName}-divider`"
       />
     </template>
-  </gl-deprecated-dropdown>
+  </gl-dropdown>
 </template>

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

+---
+title: Replace `GlDeprecatedDropdown` with `GlDropdown` in app/assets/javascripts/vue_shared/components/split_button.vue
+merge_request: 41433
+author: nuwe1
+type: other

spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap

@@ -5,14 +5,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
   class="gl-display-flex gl-justify-content-end"
 >
   <div
-    class="dropdown b-dropdown gl-dropdown btn-group"
+    class="dropdown b-dropdown gl-new-dropdown btn-group"
+    menu-class="dropdown-menu-large"
   >
     <button
-      class="btn btn-danger"
+      class="btn btn-danger btn-md gl-button split-content-button"
       type="button"
     >
+      <!---->
+       
       <span
-        class="gl-dropdown-toggle-text"
+        class="gl-new-dropdown-button-text"
       >
         Remove integration and resources
       </span>
@@ -22,7 +25,7 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      class="btn dropdown-toggle btn-danger dropdown-toggle-split"
+      class="btn dropdown-toggle btn-danger btn-md gl-button gl-dropdown-toggle dropdown-toggle-split"
       type="button"
     >
       <span
@@ -32,17 +35,39 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
       </span>
     </button>
     <ul
-      class="dropdown-menu dropdown-menu-selectable dropdown-menu-large"
+      class="dropdown-menu dropdown-menu-large"
       role="menu"
       tabindex="-1"
     >
+      <!---->
+       
       <li
+        class="gl-new-dropdown-item"
         role="presentation"
       >
         <button
-          class="dropdown-item is-active"
+          class="dropdown-item"
           role="menuitem"
           type="button"
+        >
+          <svg
+            class="gl-icon s16 gl-new-dropdown-item-check-icon"
+            data-testid="mobile-issue-close-icon"
+          >
+            <use
+              href="#mobile-issue-close"
+            />
+          </svg>
+           
+          <!---->
+           
+          <!---->
+           
+          <div
+            class="gl-new-dropdown-item-text-wrapper"
+          >
+            <p
+              class="gl-new-dropdown-item-text-primary"
             >
               <strong>
                 Remove integration and resources
@@ -51,10 +76,17 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
               <div>
                 Deletes all GitLab resources attached to this cluster during removal
               </div>
+            </p>
+             
+            <!---->
+          </div>
+           
+          <!---->
         </button>
       </li>
        
       <li
+        class="gl-new-dropdown-divider"
         role="presentation"
       >
         <hr
@@ -64,12 +96,32 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
         />
       </li>
       <li
+        class="gl-new-dropdown-item"
         role="presentation"
       >
         <button
           class="dropdown-item"
           role="menuitem"
           type="button"
+        >
+          <svg
+            class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden"
+            data-testid="mobile-issue-close-icon"
+          >
+            <use
+              href="#mobile-issue-close"
+            />
+          </svg>
+           
+          <!---->
+           
+          <!---->
+           
+          <div
+            class="gl-new-dropdown-item-text-wrapper"
+          >
+            <p
+              class="gl-new-dropdown-item-text-primary"
             >
               <strong>
                 Remove integration
@@ -78,6 +130,12 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
               <div>
                 Removes cluster from project but keeps associated resources
               </div>
+            </p>
+             
+            <!---->
+          </div>
+           
+          <!---->
         </button>
       </li>
        

spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplitButton renders actionItems 1`] = `
-<gl-deprecated-dropdown-stub
-  menu-class="dropdown-menu-selectable "
+<gl-dropdown-stub
+  category="tertiary"
+  headertext=""
+  menu-class=""
+  size="medium"
   split="true"
   text="professor"
-  variant="secondary"
+  variant="default"
 >
-  <gl-deprecated-dropdown-item-stub
-    active="true"
-    active-class="is-active"
+  <gl-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischecked="true"
+    ischeckitem="true"
+    secondarytext=""
   >
     <strong>
       professor
@@ -18,11 +26,16 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       very symphonic
     </div>
-  </gl-deprecated-dropdown-item-stub>
+  </gl-dropdown-item-stub>
    
-  <gl-deprecated-dropdown-divider-stub />
-  <gl-deprecated-dropdown-item-stub
-    active-class="is-active"
+  <gl-dropdown-divider-stub />
+  <gl-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischeckitem="true"
+    secondarytext=""
   >
     <strong>
       captain
@@ -31,8 +44,8 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       warp drive
     </div>
-  </gl-deprecated-dropdown-item-stub>
+  </gl-dropdown-item-stub>
    
   <!---->
-</gl-deprecated-dropdown-stub>
+</gl-dropdown-stub>
 `;

spec/frontend/vue_shared/components/split_button_spec.js

-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import SplitButton from '~/vue_shared/components/split_button.vue';
@@ -25,10 +25,10 @@ describe('SplitButton', () => {
     });
   };
 
-  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findDropdown = () => wrapper.find(GlDropdown);
   const findDropdownItem = (index = 0) =>
     findDropdown()
-      .findAll(GlDeprecatedDropdownItem)
+      .findAll(GlDropdownItem)
       .at(index);
   const selectItem = index => {
     findDropdownItem(index).vm.$emit('click');