Refactor alert details sidebar CSS

- Remove/Override .right-sidebar influence
  - on alert sidebar assignees
  - on alert sidebar status
  - on alert sidebar todo
- update tests

Changelog: added

app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue

@@ -64,6 +64,7 @@ export default {
       <sidebar-status
         :project-path="projectPath"
         :alert="alert"
+        :sidebar-collapsed="sidebarStatus"
         @toggle-sidebar="$emit('toggle-sidebar')"
         @alert-error="$emit('alert-error', $event)"
       />

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue

@@ -192,21 +192,38 @@ export default {
 </script>
 
 <template>
-  <div class="block alert-assignees">
-    <div ref="assignees" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')">
-      <gl-icon name="user" :size="14" />
-      <gl-loading-icon v-if="isUpdating" />
-    </div>
-    <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
-      <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
-        <template #assignees>
-          {{ userName }}
-        </template>
-      </gl-sprintf>
-    </gl-tooltip>
+  <div
+    class="alert-assignees gl-py-5"
+    :class="{
+      'gl-border-b-1': !sidebarCollapsed,
+      'gl-border-b-solid': !sidebarCollapsed,
+      'gl-border-b-gray-100': !sidebarCollapsed,
+    }"
+    style="width: 70%"
+  >
+    <template v-if="sidebarCollapsed">
+      <div
+        ref="assignees"
+        class="gl-mb-6 gl-ml-6"
+        data-testid="assignees-icon"
+        @click="$emit('toggle-sidebar')"
+      >
+        <gl-icon name="user" />
+        <gl-loading-icon v-if="isUpdating" />
+      </div>
+      <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
+        <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
+          <template #assignees>
+            {{ userName }}
+          </template>
+        </gl-sprintf>
+      </gl-tooltip>
+    </template>
 
-    <div class="hide-collapsed">
-      <p class="title gl-display-flex gl-justify-content-space-between">
+    <div v-else>
+      <p
+        class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
+      >
         {{ __('Assignee') }}
         <a
           v-if="isEditable"

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <div class="block gl-display-flex gl-justify-content-space-between">
+  <div class="block gl-display-flex gl-justify-content-space-between gl-border-b-gray-100!">
     <span class="issuable-header-text hide-collapsed">
       {{ __('To Do') }}
     </span>

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -30,6 +30,10 @@ export default {
       required: false,
       default: true,
     },
+    sidebarCollapsed: {
+      type: Boolean,
+      required: false,
+    },
   },
   data() {
     return {
@@ -61,21 +65,33 @@ export default {
 </script>
 
 <template>
-  <div class="block alert-status">
-    <div ref="status" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')">
-      <gl-icon name="status" :size="14" />
-      <gl-loading-icon v-if="isUpdating" />
-    </div>
-    <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
-      <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
-        <template #status>
-          {{ alert.status.toLowerCase() }}
-        </template>
-      </gl-sprintf>
-    </gl-tooltip>
+  <div
+    class="alert-status gl-py-5"
+    :class="{
+      'gl-border-b-1': !sidebarCollapsed,
+      'gl-border-b-solid': !sidebarCollapsed,
+      'gl-border-b-gray-100': !sidebarCollapsed,
+    }"
+    style="width: 70%"
+  >
+    <template v-if="sidebarCollapsed">
+      <div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">
+        <gl-icon name="status" />
+        <gl-loading-icon v-if="isUpdating" />
+      </div>
+      <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
+        <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
+          <template #status>
+            {{ alert.status.toLowerCase() }}
+          </template>
+        </gl-sprintf>
+      </gl-tooltip>
+    </template>
 
-    <div class="hide-collapsed">
-      <p class="title gl-display-flex justify-content-between">
+    <div v-else>
+      <p
+        class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
+      >
         {{ s__('AlertManagement|Status') }}
         <a
           v-if="isEditable"

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue

@@ -134,7 +134,12 @@ export default {
 </script>
 
 <template>
-  <div :class="{ 'block todo': sidebarCollapsed, 'gl-ml-auto': !sidebarCollapsed }">
+  <div
+    :class="{
+      'block todo': sidebarCollapsed,
+      'gl-ml-auto': !sidebarCollapsed,
+    }"
+  >
     <todo
       data-testid="alert-todo-button"
       :collapsed="sidebarCollapsed"

ee/changelogs/unreleased/287755-make-alert-details-sidebar-components-reuseable.yml

+---
+title: Refactor alert details sidebar CSS
+merge_request: 60960
+author:
+type: other

spec/frontend/vue_shared/alert_details/sidebar/alert_managment_sidebar_assignees_spec.js → spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js

 import { GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
 import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
 import AlertSetAssignees from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql';
@@ -13,6 +13,27 @@ describe('Alert Details Sidebar Assignees', () => {
   let wrapper;
   let mock;
 
+  const mockPath = '/-/autocomplete/users.json';
+  const mockUsers = [
+    {
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      id: 1,
+      name: 'User 1',
+      username: 'root',
+    },
+    {
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      id: 2,
+      name: 'User 2',
+      username: 'not-root',
+    },
+  ];
+
+  const findDropdown = () => wrapper.findComponent(GlDropdownItem);
+  const findSidebarIcon = () => wrapper.findByTestId('assignees-icon');
+
   function mountComponent({
     data,
     users = [],
@@ -21,7 +42,7 @@ describe('Alert Details Sidebar Assignees', () => {
     loading = false,
     stubs = {},
   } = {}) {
-    wrapper = shallowMount(SidebarAssignees, {
+    wrapper = shallowMountExtended(SidebarAssignees, {
       data() {
         return {
           users,
@@ -59,7 +80,7 @@ describe('Alert Details Sidebar Assignees', () => {
   const findAssigned = () => wrapper.find('[data-testid="assigned-users"]');
   const findUnassigned = () => wrapper.find('[data-testid="unassigned-users"]');
 
-  describe('updating the alert status', () => {
+  describe('sidebar expanded', () => {
     const mockUpdatedMutationResult = {
       data: {
         alertSetAssignees: {
@@ -73,30 +94,13 @@ describe('Alert Details Sidebar Assignees', () => {
 
     beforeEach(() => {
       mock = new MockAdapter(axios);
-      const path = '/-/autocomplete/users.json';
-      const users = [
-        {
-          avatar_url:
-            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-          id: 1,
-          name: 'User 1',
-          username: 'root',
-        },
-        {
-          avatar_url:
-            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-          id: 2,
-          name: 'User 2',
-          username: 'not-root',
-        },
-      ];
 
-      mock.onGet(path).replyOnce(200, users);
+      mock.onGet(mockPath).replyOnce(200, mockUsers);
       mountComponent({
         data: { alert: mockAlert },
         sidebarCollapsed: false,
         loading: false,
-        users,
+        users: mockUsers,
         stubs: {
           SidebarAssignee,
         },
@@ -106,7 +110,11 @@ describe('Alert Details Sidebar Assignees', () => {
     it('renders a unassigned option', async () => {
       wrapper.setData({ isDropdownSearching: false });
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
+      expect(findDropdown().text()).toBe('Unassigned');
+    });
+
+    it('does not display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(false);
     });
 
     it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', async () => {
@@ -170,4 +178,28 @@ describe('Alert Details Sidebar Assignees', () => {
       expect(findAssigned().find('.dropdown-menu-user-username').text()).toBe('@root');
     });
   });
+
+  describe('sidebar collapsed', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      mock.onGet(mockPath).replyOnce(200, mockUsers);
+
+      mountComponent({
+        data: { alert: mockAlert },
+        loading: false,
+        users: mockUsers,
+        stubs: {
+          SidebarAssignee,
+        },
+      });
+    });
+    it('does not display the status dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
+    });
+
+    it('does display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(true);
+    });
+  });
 });

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
@@ -13,9 +13,10 @@ describe('Alert Details Sidebar Status', () => {
   const findStatusDropdown = () => wrapper.find(GlDropdown);
   const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
+  const findStatusDropdownHeader = () => wrapper.findByTestId('dropdown-header');
   const findAlertStatus = () => wrapper.findComponent(AlertStatus);
-  const findStatus = () => wrapper.find('[data-testid="status"]');
+  const findStatus = () => wrapper.findByTestId('status');
+  const findSidebarIcon = () => wrapper.findByTestId('status-icon');
 
   function mountComponent({
     data,
@@ -24,7 +25,7 @@ describe('Alert Details Sidebar Status', () => {
     stubs = {},
     provide = {},
   } = {}) {
-    wrapper = mount(AlertSidebarStatus, {
+    wrapper = mountExtended(AlertSidebarStatus, {
       propsData: {
         alert: { ...mockAlert },
         ...data,
@@ -52,7 +53,7 @@ describe('Alert Details Sidebar Status', () => {
     }
   });
 
-  describe('Alert Sidebar Dropdown Status', () => {
+  describe('sidebar expanded', () => {
     beforeEach(() => {
       mountComponent({
         data: { alert: mockAlert },
@@ -69,6 +70,10 @@ describe('Alert Details Sidebar Status', () => {
       expect(findStatusDropdownHeader().exists()).toBe(true);
     });
 
+    it('does not display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(false);
+    });
+
     describe('updating the alert status', () => {
       const mockUpdatedMutationResult = {
         data: {
@@ -109,22 +114,40 @@ describe('Alert Details Sidebar Status', () => {
         expect(findStatusLoadingIcon().exists()).toBe(false);
         expect(findStatus().text()).toBe('Triggered');
       });
+
+      it('renders default translated statuses', () => {
+        mountComponent({ sidebarCollapsed: false });
+        expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
+        expect(findStatus().text()).toBe('Triggered');
+      });
+
+      it('renders translated statuses', () => {
+        const status = 'TEST';
+        const statuses = { [status]: 'Test' };
+        mountComponent({
+          data: { alert: { ...mockAlert, status } },
+          provide: { statuses },
+          sidebarCollapsed: false,
+        });
+        expect(findAlertStatus().props('statuses')).toBe(statuses);
+        expect(findStatus().text()).toBe(statuses.TEST);
+      });
     });
   });
 
-  describe('Statuses', () => {
-    it('renders default translated statuses', () => {
-      mountComponent({});
-      expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
-      expect(findStatus().text()).toBe('Triggered');
+  describe('sidebar collapsed', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { alert: mockAlert },
+        loading: false,
+      });
+    });
+    it('does not display the status dropdown', () => {
+      expect(findStatusDropdown().exists()).toBe(false);
     });
 
-    it('renders translated statuses', () => {
-      const status = 'TEST';
-      const statuses = { [status]: 'Test' };
-      mountComponent({ data: { alert: { ...mockAlert, status } }, provide: { statuses } });
-      expect(findAlertStatus().props('statuses')).toBe(statuses);
-      expect(findStatus().text()).toBe(statuses.TEST);
+    it('does display the collapsed sidebar icon', () => {
+      expect(findSidebarIcon().exists()).toBe(true);
     });
   });
 });