Updates component with mutation

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

@@ -4,19 +4,22 @@ import {
   GlAlert,
   GlIcon,
   GlLoadingIcon,
-  GlNewDropdown,
-  GlNewDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlSprintf,
   GlTabs,
   GlTab,
   GlButton,
 } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
 import query from '../graphql/queries/details.query.graphql';
 import { fetchPolicies } from '~/lib/graphql';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ALERTS_SEVERITY_LABELS } from '../constants';
+import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql'
 
 export default {
   statuses: {
@@ -38,9 +41,9 @@ export default {
     GlAlert,
     GlIcon,
     GlLoadingIcon,
-    GlNewDropdown,
-    GlNewDropdownItem,
     GlSprintf,
+    GlDropdown,
+    GlDropdownItem,
     GlTab,
     GlTabs,
     GlButton,
@@ -97,9 +100,28 @@ export default {
     },
   },
   methods: {
+    capitalizeFirstCharacter,
     dismissError() {
       this.isErrorDismissed = true;
     },
+    updateAlertStatus(status) {
+      this.$apollo
+      .mutate({
+        mutation: updateAlertStatus,
+        variables: {
+          iid: this.alertId,
+          status: status.toUpperCase(),
+          projectPath: this.projectPath,
+        },
+      })
+      .catch(() => {
+        createFlash(
+            s__(
+              'AlertManagement|There was an error while updating the status of the alert. Please try again.',
+            ),
+         );
+      });
+    },
   },
 };
 </script>
@@ -148,15 +170,24 @@ export default {
         class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
       >
         <h2 data-testid="title">{{ alert.title }}</h2>
-        <gl-new-dropdown right>
-          <gl-new-dropdown-item
+        <gl-dropdown :text="capitalizeFirstCharacter(alert.status.toLowerCase())" class="mt-2 mb-n2" right>
+          <gl-dropdown-item
             v-for="(label, field) in $options.statuses"
             :key="field"
             data-testid="statusDropdownItem"
             class="gl-vertical-align-middle"
-            >{{ label }}
-          </gl-new-dropdown-item>
-        </gl-new-dropdown>
+            @click="updateAlertStatus(label)"
+            >
+            <span class="d-flex">
+              <gl-icon
+                class="flex-shrink-0 append-right-4"
+                :class="{ invisible: label.toUpperCase() !== alert.status }"
+                name="mobile-issue-close"
+                />
+              {{ label }}
+            </span>
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
       <gl-tabs v-if="alert" data-testid="alertDetailsTabs">
         <gl-tab data-testid="overviewTab" :title="$options.i18n.overviewTitle">

app/assets/javascripts/alert_management/details.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import AlertDetails from './components/alert_details.vue';
 
 Vue.use(VueApollo);
@@ -10,7 +11,20 @@ export default selector => {
   const { alertId, projectPath, newIssuePath } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient(
+      {},
+      {
+        cacheConfig: {
+          dataIdFromObject: object => {
+            // eslint-disable-next-line no-underscore-dangle
+            if (object.__typename === 'AlertManagementAlert') {
+              return object.iid;
+            }
+            return defaultDataIdFromObject(object);
+          },
+        },
+      },
+    ),
   });
 
   // eslint-disable-next-line no-new