Hide dropdown header on list view

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,18 +42,7 @@ describe('Alert Details Sidebar Status', () => {
     }
   });
 
-  describe('updating the alert status', () => {
-    const mockUpdatedMutationResult = {
-      data: {
-        updateAlertStatus: {
-          errors: [],
-          alert: {
-            status: 'acknowledged',
-          },
-        },
-      },
-    };
-
+  describe('Alert Sidebar Dropdown Status', () => {
     beforeEach(() => {
       mountComponent({
         data: { alert: mockAlert },
@@ -61,46 +51,78 @@ describe('Alert Details Sidebar Status', () => {
       });
     });
 
-    it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
-      findStatusDropdownItem().vm.$emit('click');
+    it('displays status dropdown', () => {
+      expect(findStatusDropdown().exists()).toBe(true);
+    });
+
+    it('displays the dropdown status header', () => {
+      expect(findStatusDropdown().contains('.dropdown-title')).toBe(true);
+    });
 
-      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-        mutation: updateAlertStatus,
-        variables: {
-          iid: '1527542',
-          status: 'TRIGGERED',
-          projectPath: 'projectPath',
+    describe('updating the alert status', () => {
+      const mockUpdatedMutationResult = {
+        data: {
+          updateAlertStatus: {
+            errors: [],
+            alert: {
+              status: 'acknowledged',
+            },
+          },
         },
+      };
+
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: mockAlert },
+          sidebarCollapsed: false,
+          loading: false,
+        });
       });
-    });
 
-    it('stops updating when the request fails', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
-      findStatusDropdownItem().vm.$emit('click');
-      expect(findStatusLoadingIcon().exists()).toBe(false);
-      expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered');
-    });
-  });
+      it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+        findStatusDropdownItem().vm.$emit('click');
 
-  describe('Snowplow tracking', () => {
-    beforeEach(() => {
-      jest.spyOn(Tracking, 'event');
-      mountComponent({
-        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alert: mockAlert },
-        loading: false,
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation: updateAlertStatus,
+          variables: {
+            iid: '1527542',
+            status: 'TRIGGERED',
+            projectPath: 'projectPath',
+          },
+        });
+      });
+
+      it('stops updating when the request fails', () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
+        findStatusDropdownItem().vm.$emit('click');
+        expect(findStatusLoadingIcon().exists()).toBe(false);
+        expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered');
       });
     });
 
-    it('should track alert status updates', () => {
-      Tracking.event.mockClear();
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
-      findStatusDropdownItem().vm.$emit('click');
-      const status = findStatusDropdownItem().text();
-      setImmediate(() => {
-        const { category, action, label } = trackAlertStatusUpdateOptions;
-        expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status });
+    describe('Snowplow tracking', () => {
+      beforeEach(() => {
+        jest.spyOn(Tracking, 'event');
+        mountComponent({
+          props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+          data: { alert: mockAlert },
+          loading: false,
+        });
+      });
+
+      it('should track alert status updates', () => {
+        Tracking.event.mockClear();
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
+        findStatusDropdownItem().vm.$emit('click');
+        const status = findStatusDropdownItem().text();
+        setImmediate(() => {
+          const { category, action, label } = trackAlertStatusUpdateOptions;
+          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];