1 files changed, 38 insertions, 18 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
index 3822b9153a4..8715eb99518 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
@@ -30,6 +30,15 @@ export default {
       required: false,
       default: true,
     },
+    sidebarCollapsed: {
+      type: Boolean,
+      required: false,
+    },
+    textClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -48,34 +57,44 @@ export default {
     },
     toggleFormDropdown() {
       this.isDropdownShowing = !this.isDropdownShowing;
-      const { dropdown } = this.$children[2].$refs.dropdown.$refs;
+      const { dropdown } = this.$refs.status.$refs.dropdown.$refs;
       if (dropdown && this.isDropdownShowing) {
         dropdown.show();
       }
     },
-    handleUpdating(updating) {
-      this.isUpdating = updating;
+    handleUpdating(isMutationInProgress) {
+      if (!isMutationInProgress) {
+        this.$emit('alert-update');
+      }
+      this.isUpdating = isMutationInProgress;
     },
   },
 };
 </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 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }"
+  >
+    <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"
@@ -90,6 +109,7 @@ export default {
       </p>
 
       <alert-status
+        ref="status"
         :alert="alert"
         :project-path="projectPath"
         :is-dropdown-showing="isDropdownShowing"
@@ -106,7 +126,7 @@ export default {
         class="value gl-m-0"
         :class="{ 'no-value': !statuses[alert.status] }"
       >
-        <span v-if="statuses[alert.status]" class="gl-text-gray-500" data-testid="status">
+        <span v-if="statuses[alert.status]" :class="textClass" data-testid="status">
           {{ statuses[alert.status] }}
         </span>
         <span v-else>