Merge branch 'alert-list-dropdown-header' into 'master'

Hide dropdown header on list view

See merge request gitlab-org/gitlab!35954

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

@@ -88,7 +88,7 @@ export default {
       @keydown.esc.native="$emit('hide-dropdown')"
       @hide="$emit('hide-dropdown')"
     >
-      <div class="dropdown-title text-center">
+      <div v-if="isSidebar" class="dropdown-title text-center">
         <span class="alert-title">{{ s__('AlertManagement|Assign status') }}</span>
         <gl-button
           :aria-label="__('Close')"

changelogs/unreleased/alert-list-dropdown-header.yml

+---
+title: Hide dropdown header on list view
+merge_request: 35954
+author:
+type: other

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -207,6 +207,15 @@ describe('AlertManagementList', () => {
       expect(findStatusDropdown().exists()).toBe(true);
     });
 
+    it('does not display a dropdown status header', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        loading: false,
+      });
+      expect(findStatusDropdown().contains('.dropdown-title')).toBe(false);
+    });
+
     it('shows correct severity icons', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },

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

@@ -5,7 +5,7 @@ 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';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from '../../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 

spec/frontend/alert_management/components/alert_sidebar_spec.js → spec/frontend/alert_management/components/sidebar/alert_sidebar_spec.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import AlertSidebar from '~/alert_management/components/alert_sidebar.vue';
 import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from '../../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 

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

 import { mount } from '@vue/test-utils';
-import { GlDropdownItem, 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';
 import Tracking from '~/tracking';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from '../../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
+  const findStatusDropdown = () => wrapper.find(GlDropdown);
   const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
@@ -41,6 +42,23 @@ describe('Alert Details Sidebar Status', () => {
     }
   });
 
+  describe('Alert Sidebar Dropdown Status', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { alert: mockAlert },
+        sidebarCollapsed: false,
+        loading: false,
+      });
+    });
+
+    it('displays status dropdown', () => {
+      expect(findStatusDropdown().exists()).toBe(true);
+    });
+
+    it('displays the dropdown status header', () => {
+      expect(findStatusDropdown().contains('.dropdown-title')).toBe(true);
+    });
+
     describe('updating the alert status', () => {
       const mockUpdatedMutationResult = {
         data: {
@@ -100,7 +118,11 @@ describe('Alert Details Sidebar Status', () => {
         const status = findStatusDropdownItem().text();
         setImmediate(() => {
           const { category, action, label } = trackAlertStatusUpdateOptions;
-        expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status });
+          expect(Tracking.event).toHaveBeenCalledWith(category, action, {
+            label,
+            property: status,
+          });
+        });
       });
     });
   });

spec/frontend/alert_management/components/alert_management_system_note_spec.js → spec/frontend/alert_management/components/system_notes/alert_management_system_note_spec.js

 import { shallowMount } from '@vue/test-utils';
 import SystemNote from '~/alert_management/components/system_notes/system_note.vue';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from '../../mocks/alerts.json';
 
 const mockAlert = mockAlerts[1];