Merge branch...

Merge branch 'Replace-GIDeprecatedDropdown-in-app/assets/javascripts/alert_management' into 'master'

Replace GlDeprecatedDropdown in app/assets/javascripts/alertmanagement

See merge request gitlab-org/gitlab!41409

app/assets/javascripts/alert_management/components/alert_status.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { trackAlertStatusUpdateOptions } from '../constants';
@@ -18,9 +18,8 @@ export default {
     RESOLVED: s__('AlertManagement|Resolved'),
   },
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlButton,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     projectPath: {
@@ -91,39 +90,30 @@ export default {
 
 <template>
   <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-    <gl-deprecated-dropdown
+    <gl-dropdown
       ref="dropdown"
       right
       :text="$options.statuses[alert.status]"
       class="w-100"
       toggle-class="dropdown-menu-toggle"
-      variant="outline-default"
       @keydown.esc.native="$emit('hide-dropdown')"
       @hide="$emit('hide-dropdown')"
     >
-      <div v-if="isSidebar" class="dropdown-title gl-display-flex">
-        <span class="alert-title gl-ml-auto">{{ s__('AlertManagement|Assign status') }}</span>
-        <gl-button
-          :aria-label="__('Close')"
-          variant="link"
-          class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!"
-          icon="close"
-          @click="$emit('hide-dropdown')"
-        />
-      </div>
+      <p v-if="isSidebar" class="gl-new-dropdown-header-top" data-testid="dropdown-header">
+        {{ s__('AlertManagement|Assign status') }}
+      </p>
       <div class="dropdown-content dropdown-body">
-        <gl-deprecated-dropdown-item
+        <gl-dropdown-item
           v-for="(label, field) in $options.statuses"
           :key="field"
           data-testid="statusDropdownItem"
-          class="gl-vertical-align-middle"
           :active="label.toUpperCase() === alert.status"
           :active-class="'is-active'"
           @click="updateAlertStatus(label)"
         >
           {{ label }}
-        </gl-deprecated-dropdown-item>
+        </gl-dropdown-item>
       </div>
-    </gl-deprecated-dropdown>
+    </gl-dropdown>
   </div>
 </template>

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue

 <script>
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDeprecatedDropdownItem,
+    GlDropdownItem,
   },
   props: {
     user: {
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown-item
+  <gl-dropdown-item
     :key="user.username"
     data-testid="assigneeDropdownItem"
     class="assignee-dropdown-item gl-vertical-align-middle"
@@ -47,5 +47,5 @@ export default {
       </strong>
       <span class="dropdown-menu-user-username"> {{ user.username }}</span>
     </span>
-  </gl-deprecated-dropdown-item>
+  </gl-dropdown-item>
 </template>

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue

 <script>
 import {
   GlIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
+  GlSearchBoxByType,
   GlLoadingIcon,
   GlTooltip,
   GlButton,
@@ -33,10 +34,11 @@ export default {
   },
   components: {
     GlIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownHeader,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
+    GlSearchBoxByType,
     GlLoadingIcon,
     GlTooltip,
     GlButton,
@@ -216,48 +218,36 @@ export default {
       </p>
 
       <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-        <gl-deprecated-dropdown
+        <gl-dropdown
           ref="dropdown"
           :text="userName"
           class="w-100"
           toggle-class="dropdown-menu-toggle"
-          variant="outline-default"
           @keydown.esc.native="hideDropdown"
           @hide="hideDropdown"
         >
-          <div class="dropdown-title gl-display-flex">
-            <span class="alert-title gl-ml-auto">{{ __('Assign To') }}</span>
-            <gl-button
-              :aria-label="__('Close')"
-              variant="link"
-              class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!"
-              icon="close"
-              @click="hideDropdown"
-            />
-          </div>
-          <div class="dropdown-input">
-            <input
+          <p class="gl-new-dropdown-header-top">
+            {{ __('Assign To') }}
+          </p>
+          <gl-search-box-by-type
             v-model.trim="search"
-              class="dropdown-input-field"
-              type="search"
+            class="m-2"
             :placeholder="__('Search users')"
           />
-            <gl-icon name="search" class="dropdown-input-search ic-search" data-hidden="true" />
-          </div>
           <div class="dropdown-content dropdown-body">
             <template v-if="userListValid">
-              <gl-deprecated-dropdown-item
+              <gl-dropdown-item
                 :active="!userName"
                 active-class="is-active"
                 @click="updateAlertAssignees('')"
               >
                 {{ __('Unassigned') }}
-              </gl-deprecated-dropdown-item>
-              <gl-deprecated-dropdown-divider />
+              </gl-dropdown-item>
+              <gl-dropdown-divider />
 
-              <gl-deprecated-dropdown-header class="mt-0">
+              <gl-dropdown-section-header>
                 {{ __('Assignee') }}
-              </gl-deprecated-dropdown-header>
+              </gl-dropdown-section-header>
               <sidebar-assignee
                 v-for="user in sortedUsers"
                 :key="user.username"
@@ -266,12 +256,12 @@ export default {
                 @update-alert-assignees="updateAlertAssignees"
               />
             </template>
-            <gl-deprecated-dropdown-item v-else-if="userListEmpty">
+            <p v-else-if="userListEmpty" class="mx-3 my-2">
               {{ __('No Matching Results') }}
-            </gl-deprecated-dropdown-item>
+            </p>
             <gl-loading-icon v-else />
           </div>
-        </gl-deprecated-dropdown>
+        </gl-dropdown>
       </div>
 
       <gl-loading-icon v-if="isUpdating" :inline="true" />

changelogs/unreleased/Replace-GIDeprecatedDropdown-in-app-assets-javascripts-alert_management.yml

+---
+title: Replace-GIDeprecatedDropdown-in-app/assets/javascripts/alert_management
+merge_request: 41409
+author: nuwe1
+type: other

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -3,8 +3,8 @@ import {
   GlTable,
   GlAlert,
   GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlIcon,
   GlTabs,
   GlTab,
@@ -34,12 +34,12 @@ describe('AlertManagementTable', () => {
   const findAlerts = () => wrapper.findAll('table tbody tr');
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
-  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findStatusDropdown = () => wrapper.find(GlDropdown);
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findStatusTabs = () => wrapper.find(GlTabs);
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
-  const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
+  const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
   const findPagination = () => wrapper.find(GlPagination);
   const findSearch = () => wrapper.find(GlSearchBoxByType);
   const findSeverityColumnHeader = () =>

spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js

 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue';
 import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
 import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql';
@@ -106,7 +106,7 @@ describe('Alert Details Sidebar Assignees', () => {
     it('renders a unassigned option', async () => {
       wrapper.setData({ isDropdownSearching: false });
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
+      expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
     });
 
     it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', async () => {

spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js

 import { mount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
 import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue';
 import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql';
@@ -10,9 +10,10 @@ const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const findStatusDropdownItem = () => wrapper.find(GlDeprecatedDropdownItem);
+  const findStatusDropdown = () => wrapper.find(GlDropdown);
+  const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
 
   function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {
     wrapper = mount(AlertSidebarStatus, {
@@ -56,11 +57,7 @@ describe('Alert Details Sidebar Status', () => {
     });
 
     it('displays the dropdown status header', () => {
-      expect(
-        findStatusDropdown()
-          .find('.dropdown-title')
-          .exists(),
-      ).toBe(true);
+      expect(findStatusDropdownHeader().exists()).toBe(true);
     });
 
     describe('updating the alert status', () => {