1 files changed, 25 insertions, 2 deletions
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 0d4a1e76eb8..17a70fd0c34 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -8,6 +8,8 @@ import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
+import setEnvironmentToStopMutation from '../graphql/mutations/set_environment_to_stop.mutation.graphql';
+import isEnvironmentStoppingQuery from '../graphql/queries/is_environment_stopping.query.graphql';
 
 export default {
   components: {
@@ -22,6 +24,19 @@ export default {
       type: Object,
       required: true,
     },
+    graphql: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  apollo: {
+    isEnvironmentStopping: {
+      query: isEnvironmentStoppingQuery,
+      variables() {
+        return { environment: this.environment };
+      },
+    },
   },
   i18n: {
     title: s__('Environments|Stop environment'),
@@ -30,6 +45,7 @@ export default {
   data() {
     return {
       isLoading: false,
+      isEnvironmentStopping: false,
     };
   },
   mounted() {
@@ -41,7 +57,14 @@ export default {
   methods: {
     onClick() {
       this.$root.$emit(BV_HIDE_TOOLTIP, this.$options.stopEnvironmentTooltipId);
-      eventHub.$emit('requestStopEnvironment', this.environment);
+      if (this.graphql) {
+        this.$apollo.mutate({
+          mutation: setEnvironmentToStopMutation,
+          variables: { environment: this.environment },
+        });
+      } else {
+        eventHub.$emit('requestStopEnvironment', this.environment);
+      }
     },
     onStopEnvironment(environment) {
       if (this.environment.id === environment.id) {
@@ -56,7 +79,7 @@ export default {
   <gl-button
     v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }"
     v-gl-modal-directive="'stop-environment-modal'"
-    :loading="isLoading"
+    :loading="isLoading || isEnvironmentStopping"
     :title="$options.i18n.title"
     :aria-label="$options.i18n.title"
     icon="stop"