Set isEnvironmentStopping to true upon stopping

This one was somehow missed while converting the actions over, but
before an environment is stopping, we set a loading indicator to ensure
environments aren't double-stopped.

We don't unset it on success, as polling will remove the environment
from the page once the stopping has completed.

app/assets/javascripts/environments/graphql/resolvers.js

@@ -11,6 +11,7 @@ import environmentToRollbackQuery from './queries/environment_to_rollback.query.
 import environmentToStopQuery from './queries/environment_to_stop.query.graphql';
 import environmentToDeleteQuery from './queries/environment_to_delete.query.graphql';
 import environmentToChangeCanaryQuery from './queries/environment_to_change_canary.query.graphql';
+import isEnvironmentStoppingQuery from './queries/is_environment_stopping.query.graphql';
 import pageInfoQuery from './queries/page_info.query.graphql';
 
 const buildErrors = (errors = []) => ({
@@ -71,11 +72,21 @@ export const resolvers = (endpoint) => ({
     },
   },
   Mutation: {
-    stopEnvironment(_, { environment }) {
+    stopEnvironment(_, { environment }, { client }) {
+      client.writeQuery({
+        query: isEnvironmentStoppingQuery,
+        variables: { environment },
+        data: { isEnvironmentStopping: true },
+      });
       return axios
         .post(environment.stopPath)
         .then(() => buildErrors())
         .catch(() => {
+          client.writeQuery({
+            query: isEnvironmentStoppingQuery,
+            variables: { environment },
+            data: { isEnvironmentStopping: false },
+          });
           return buildErrors([
             s__('Environments|An error occurred while stopping the environment, please try again'),
           ]);

spec/frontend/environments/graphql/resolvers_spec.js

@@ -7,6 +7,7 @@ import environmentToDelete from '~/environments/graphql/queries/environment_to_d
 import environmentToStopQuery from '~/environments/graphql/queries/environment_to_stop.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import pollIntervalQuery from '~/environments/graphql/queries/poll_interval.query.graphql';
+import isEnvironmentStoppingQuery from '~/environments/graphql/queries/is_environment_stopping.query.graphql';
 import pageInfoQuery from '~/environments/graphql/queries/page_info.query.graphql';
 import { TEST_HOST } from 'helpers/test_constants';
 import {
@@ -136,11 +137,36 @@ describe('~/frontend/environments/graphql/resolvers', () => {
     it('should post to the stop environment path', async () => {
       mock.onPost(ENDPOINT).reply(200);
 
-      await mockResolvers.Mutation.stopEnvironment(null, { environment: { stopPath: ENDPOINT } });
+      const client = { writeQuery: jest.fn() };
+      const environment = { stopPath: ENDPOINT };
+      await mockResolvers.Mutation.stopEnvironment(null, { environment }, { client });
 
       expect(mock.history.post).toContainEqual(
         expect.objectContaining({ url: ENDPOINT, method: 'post' }),
       );
+
+      expect(client.writeQuery).toHaveBeenCalledWith({
+        query: isEnvironmentStoppingQuery,
+        variables: { environment },
+        data: { isEnvironmentStopping: true },
+      });
+    });
+    it('should set is stopping to false if stop fails', async () => {
+      mock.onPost(ENDPOINT).reply(500);
+
+      const client = { writeQuery: jest.fn() };
+      const environment = { stopPath: ENDPOINT };
+      await mockResolvers.Mutation.stopEnvironment(null, { environment }, { client });
+
+      expect(mock.history.post).toContainEqual(
+        expect.objectContaining({ url: ENDPOINT, method: 'post' }),
+      );
+
+      expect(client.writeQuery).toHaveBeenCalledWith({
+        query: isEnvironmentStoppingQuery,
+        variables: { environment },
+        data: { isEnvironmentStopping: false },
+      });
     });
   });
   describe('rollbackEnvironment', () => {