Merge branch 'afontaine/environment-auto-stop' into 'master'

Make environment pin work with GraphQL

See merge request gitlab-org/gitlab!79439

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

@@ -6,6 +6,7 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
+import cancelAutoStopMutation from '../graphql/mutations/cancel_auto_stop.mutation.graphql';
 
 export default {
   components: {
@@ -16,10 +17,22 @@ export default {
       type: String,
       required: true,
     },
+    graphql: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onPinClick() {
-      eventHub.$emit('cancelAutoStop', this.autoStopUrl);
+      if (this.graphql) {
+        this.$apollo.mutate({
+          mutation: cancelAutoStopMutation,
+          variables: { autoStopUrl: this.autoStopUrl },
+        });
+      } else {
+        eventHub.$emit('cancelAutoStop', this.autoStopUrl);
+      }
     },
   },
   title: __('Prevent auto-stopping'),

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

@@ -243,6 +243,7 @@ export default {
             <pin
               v-if="canShowAutoStopDate"
               :auto-stop-url="autoStopPath"
+              graphql
               data-track-action="click_button"
               data-track-label="environment_pin"
             />

app/assets/javascripts/environments/graphql/mutations/cancel_auto_stop.mutation.graphql

-mutation cancelAutoStop($environment: LocalEnvironment) {
-  cancelAutoStop(environment: $environment) @client {
+mutation cancelAutoStop($autoStopUrl: String!) {
+  cancelAutoStop(autoStopUrl: $autoStopUrl) @client {
     errors
   }
 }

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

@@ -134,9 +134,9 @@ export const resolvers = (endpoint) => ({
         data: { environmentToRollback: environment },
       });
     },
-    cancelAutoStop(_, { environment: { autoStopPath } }) {
+    cancelAutoStop(_, { autoStopUrl }) {
       return axios
-        .post(autoStopPath)
+        .post(autoStopUrl)
         .then(() => buildErrors())
         .catch((err) =>
           buildErrors([

app/assets/javascripts/environments/graphql/typedefs.graphql

@@ -77,7 +77,7 @@ extend type Mutation {
   stopEnvironment(environment: LocalEnvironmentInput): LocalErrors
   deleteEnvironment(environment: LocalEnvironmentInput): LocalErrors
   rollbackEnvironment(environment: LocalEnvironmentInput): LocalErrors
-  cancelAutoStop(environment: LocalEnvironmentInput): LocalErrors
+  cancelAutoStop(autoStopUrl: String!): LocalErrors
   setEnvironmentToDelete(environment: LocalEnvironmentInput): LocalErrors
   setEnvironmentToRollback(environment: LocalEnvironmentInput): LocalErrors
   setEnvironmentToStop(environment: LocalEnvironmentInput): LocalErrors

spec/frontend/environments/environment_pin_spec.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import cancelAutoStopMutation from '~/environments/graphql/mutations/cancel_auto_stop.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import PinComponent from '~/environments/components/environment_pin.vue';
 import eventHub from '~/environments/event_hub';
 
@@ -18,28 +22,66 @@ describe('Pin Component', () => {
 
   const autoStopUrl = '/root/auto-stop-env-test/-/environments/38/cancel_auto_stop';
 
-  beforeEach(() => {
-    factory({
-      propsData: {
-        autoStopUrl,
-      },
+  describe('without graphql', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          autoStopUrl,
+        },
+      });
     });
-  });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-  it('should render the component with descriptive text', () => {
-    expect(wrapper.text()).toBe('Prevent auto-stopping');
+    it('should render the component with descriptive text', () => {
+      expect(wrapper.text()).toBe('Prevent auto-stopping');
+    });
+
+    it('should emit onPinClick when clicked', () => {
+      const eventHubSpy = jest.spyOn(eventHub, '$emit');
+      const item = wrapper.find(GlDropdownItem);
+
+      item.vm.$emit('click');
+
+      expect(eventHubSpy).toHaveBeenCalledWith('cancelAutoStop', autoStopUrl);
+    });
   });
 
-  it('should emit onPinClick when clicked', () => {
-    const eventHubSpy = jest.spyOn(eventHub, '$emit');
-    const item = wrapper.find(GlDropdownItem);
+  describe('with graphql', () => {
+    Vue.use(VueApollo);
+    let mockApollo;
 
-    item.vm.$emit('click');
+    beforeEach(() => {
+      mockApollo = createMockApollo();
+      factory({
+        propsData: {
+          autoStopUrl,
+          graphql: true,
+        },
+        apolloProvider: mockApollo,
+      });
+    });
 
-    expect(eventHubSpy).toHaveBeenCalledWith('cancelAutoStop', autoStopUrl);
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should render the component with descriptive text', () => {
+      expect(wrapper.text()).toBe('Prevent auto-stopping');
+    });
+
+    it('should emit onPinClick when clicked', () => {
+      jest.spyOn(mockApollo.defaultClient, 'mutate');
+      const item = wrapper.find(GlDropdownItem);
+
+      item.vm.$emit('click');
+
+      expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith({
+        mutation: cancelAutoStopMutation,
+        variables: { autoStopUrl },
+      });
+    });
   });
 });

spec/frontend/environments/graphql/resolvers_spec.js

@@ -173,9 +173,7 @@ describe('~/frontend/environments/graphql/resolvers', () => {
     it('should post to the auto stop path', async () => {
       mock.onPost(ENDPOINT).reply(200);
 
-      await mockResolvers.Mutation.cancelAutoStop(null, {
-        environment: { autoStopPath: ENDPOINT },
-      });
+      await mockResolvers.Mutation.cancelAutoStop(null, { autoStopUrl: ENDPOINT });
 
       expect(mock.history.post).toContainEqual(
         expect.objectContaining({ url: ENDPOINT, method: 'post' }),

spec/frontend/environments/new_environment_item_spec.js

@@ -191,9 +191,9 @@ describe('~/environments/components/new_environment_item.vue', () => {
       });
 
       it('shows the option to pin the environment if there is an autostop date', () => {
-        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
 
-        expect(rollback.exists()).toBe(true);
+        expect(pin.exists()).toBe(true);
       });
 
       it('shows when the environment auto stops', () => {
@@ -211,9 +211,9 @@ describe('~/environments/components/new_environment_item.vue', () => {
       it('does not show the option to pin the environment if there is no autostop date', () => {
         wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
-        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
 
-        expect(rollback.exists()).toBe(false);
+        expect(pin.exists()).toBe(false);
       });
 
       it('does not show when the environment auto stops', () => {
@@ -246,9 +246,9 @@ describe('~/environments/components/new_environment_item.vue', () => {
       it('does not show the option to pin the environment if there is no autostop date', () => {
         wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
-        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+        const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
 
-        expect(rollback.exists()).toBe(false);
+        expect(pin.exists()).toBe(false);
       });
 
       it('does not show when the environment auto stops', () => {