1 files changed, 15 insertions, 84 deletions

diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue
index 89dbbedd9c1..44a81aba828 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue
@@ -1,17 +1,7 @@
 <script>
-import {
-  GlIcon,
-  GlDropdown,
-  GlDropdownItem,
-  GlLoadingIcon,
-  GlTooltip,
-  GlButton,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Tracking from '~/tracking';
-import { trackAlertStatusUpdateOptions } from '../../constants';
-import updateAlertStatus from '../../graphql/mutations/update_alert_status.graphql';
+import AlertStatus from '../alert_status.vue';
 
 export default {
   statuses: {
@@ -21,12 +11,10 @@ export default {
   },
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
     GlLoadingIcon,
     GlTooltip,
-    GlButton,
     GlSprintf,
+    AlertStatus,
   },
   props: {
     projectPath: {
@@ -60,44 +48,13 @@ export default {
     },
     toggleFormDropdown() {
       this.isDropdownShowing = !this.isDropdownShowing;
-      const { dropdown } = this.$refs.dropdown.$refs;
+      const { dropdown } = this.$children[2].$refs.dropdown.$refs;
       if (dropdown && this.isDropdownShowing) {
         dropdown.show();
       }
     },
-    isSelected(status) {
-      return this.alert.status === status;
-    },
-    updateAlertStatus(status) {
-      this.isUpdating = true;
-      this.$apollo
-        .mutate({
-          mutation: updateAlertStatus,
-          variables: {
-            iid: this.alert.iid,
-            status: status.toUpperCase(),
-            projectPath: this.projectPath,
-          },
-        })
-        .then(() => {
-          this.trackStatusUpdate(status);
-          this.hideDropdown();
-        })
-        .catch(() => {
-          this.$emit(
-            'alert-sidebar-error',
-            s__(
-              'AlertManagement|There was an error while updating the status of the alert. Please try again.',
-            ),
-          );
-        })
-        .finally(() => {
-          this.isUpdating = false;
-        });
-    },
-    trackStatusUpdate(status) {
-      const { category, action, label } = trackAlertStatusUpdateOptions;
-      Tracking.event(category, action, { label, property: status });
+    handleUpdating(updating) {
+      this.isUpdating = updating;
     },
   },
 };
@@ -132,41 +89,15 @@ export default {
         </a>
       </p>
 
-      <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-        <gl-dropdown
-          ref="dropdown"
-          :text="$options.statuses[alert.status]"
-          class="w-100"
-          toggle-class="dropdown-menu-toggle"
-          variant="outline-default"
-          @keydown.esc.native="hideDropdown"
-          @hide="hideDropdown"
-        >
-          <div class="dropdown-title">
-            <span class="alert-title">{{ s__('AlertManagement|Assign status') }}</span>
-            <gl-button
-              :aria-label="__('Close')"
-              variant="link"
-              class="dropdown-title-button dropdown-menu-close"
-              icon="close"
-              @click="hideDropdown"
-            />
-          </div>
-          <div class="dropdown-content dropdown-body">
-            <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-dropdown-item>
-          </div>
-        </gl-dropdown>
-      </div>
+      <alert-status
+        :alert="alert"
+        :project-path="projectPath"
+        :is-dropdown-showing="isDropdownShowing"
+        :is-sidebar="true"
+        @alert-error="$emit('alert-error', $event)"
+        @hide-dropdown="hideDropdown"
+        @handle-updating="handleUpdating"
+      />
 
       <gl-loading-icon v-if="isUpdating" :inline="true" />
       <p