Merge branch 'afontaine/enironment-touch-ups' into 'master'

Minor environment touch ups

See merge request gitlab-org/gitlab!81033

app/assets/javascripts/environments/components/delete_environment_modal.vue

@@ -62,7 +62,8 @@ export default {
             mutation: deleteEnvironmentMutation,
             variables: { environment: this.environment },
           })
-          .then(([message]) => {
+          .then(({ data }) => {
+            const [message] = data?.deleteEvironment?.errors ?? [];
             if (message) {
               createFlash({ message });
             }

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/delete_environment_modal_spec.js

@@ -5,8 +5,11 @@ import VueApollo from 'vue-apollo';
 import { s__, sprintf } from '~/locale';
 import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
 import { resolvedEnvironment } from './graphql/mock_data';
 
+jest.mock('~/flash');
 Vue.use(VueApollo);
 
 describe('~/environments/components/delete_environment_modal.vue', () => {
@@ -54,6 +57,34 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
 
     await nextTick();
 
+    expect(createFlash).not.toHaveBeenCalled();
+
+    expect(deleteResolver).toHaveBeenCalledWith(
+      expect.anything(),
+      { environment: resolvedEnvironment },
+      expect.anything(),
+      expect.anything(),
+    );
+  });
+
+  it('should flash a message on error', async () => {
+    createComponent({ apolloProvider: mockApollo });
+
+    deleteResolver.mockRejectedValue();
+
+    wrapper.findComponent(GlModal).vm.$emit('primary');
+
+    await waitForPromises();
+
+    expect(createFlash).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: s__(
+          'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
+        ),
+        captureError: true,
+      }),
+    );
+
     expect(deleteResolver).toHaveBeenCalledWith(
       expect.anything(),
       { environment: resolvedEnvironment },

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', () => {