Deployment rollback modal: Change form submit to POST

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

@@ -6,7 +6,8 @@
 
 import { GlModal } from '@gitlab/ui';
 import { escape } from 'lodash';
-import { s__, sprintf } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+import { __, s__, sprintf } from '~/locale';
 
 import eventHub from '../event_hub';
 
@@ -35,6 +36,11 @@ export default {
       required: false,
       default: true,
     },
+    retryUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   computed: {
@@ -66,6 +72,12 @@ export default {
       return this.environment.commitUrl;
     },
 
+    modalActionText() {
+      return this.environment.isLastDeployment
+        ? s__('Environments|Re-deploy')
+        : s__('Environments|Rollback');
+    },
+
     modalText() {
       const linkStart = `<a class="commit-sha mr-0" href="${escape(this.commitUrl)}">`;
       const commitId = escape(this.commitShortSha);
@@ -90,10 +102,17 @@ export default {
       );
     },
 
-    modalActionText() {
-      return this.environment.isLastDeployment
-        ? s__('Environments|Re-deploy')
-        : s__('Environments|Rollback');
+    primaryProps() {
+      let attributes = [{ variant: 'danger' }];
+
+      if (this.retryUrl) {
+        attributes = [...attributes, { 'data-method': 'post' }, { href: this.retryUrl }];
+      }
+
+      return {
+        text: this.modalActionText,
+        attributes,
+      };
     },
   },
 
@@ -114,15 +133,20 @@ export default {
       return '';
     },
   },
+  csrf,
+  cancelProps: {
+    text: __('Cancel'),
+    attributes: [{ variant: 'danger' }],
+  },
 };
 </script>
 <template>
   <gl-modal
     :title="modalTitle"
     :visible="visible"
+    :action-cancel="$options.cancelProps"
+    :action-primary="primaryProps"
     modal-id="confirm-rollback-modal"
-    :ok-title="modalActionText"
-    ok-variant="danger"
     @ok="onOk"
     @change="handleChange"
   >

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

 <script>
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { redirectTo } from '~/lib/utils/url_utility';
-import eventHub from '../event_hub';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 
 export default {
@@ -22,10 +20,6 @@ export default {
     };
   },
   mounted() {
-    eventHub.$on('rollbackEnvironment', () => {
-      redirectTo(this.retryPath);
-    });
-
     document.querySelectorAll(this.selector).forEach((button) => {
       button.addEventListener('click', (e) => {
         e.preventDefault();
@@ -57,6 +51,7 @@ export default {
     v-model="visible"
     :environment="environment"
     :has-multiple-commits="false"
+    :retry-url="retryPath"
   />
   <div v-else></div>
 </template>

spec/frontend/environments/confirm_rollback_modal_spec.js

@@ -23,66 +23,73 @@ describe('Confirm Rollback Modal Component', () => {
     commitUrl: 'test/-/commit/abc0123',
   };
 
+  const retryPath = 'test/-/jobs/123/retry';
+
   describe.each`
-    hasMultipleCommits | environmentData
-    ${true}            | ${envWithLastDeployment}
-    ${false}           | ${envWithoutLastDeployment}
-  `('when hasMultipleCommits=$hasMultipleCommits', ({ hasMultipleCommits, environmentData }) => {
-    beforeEach(() => {
-      environment = environmentData;
-    });
+    hasMultipleCommits | environmentData             | retryUrl     | primaryPropsAttrs
+    ${true}            | ${envWithLastDeployment}    | ${null}      | ${[{ variant: 'danger' }]}
+    ${false}           | ${envWithoutLastDeployment} | ${retryPath} | ${[{ variant: 'danger' }, { 'data-method': 'post' }, { href: retryPath }]}
+  `(
+    'when hasMultipleCommits=$hasMultipleCommits',
+    ({ hasMultipleCommits, environmentData, retryUrl, primaryPropsAttrs }) => {
+      beforeEach(() => {
+        environment = environmentData;
+      });
 
-    it('should show "Rollback" when isLastDeployment is false', () => {
-      const component = shallowMount(ConfirmRollbackModal, {
-        propsData: {
-          environment: {
-            ...environment,
-            isLastDeployment: false,
+      it('should show "Rollback" when isLastDeployment is false', () => {
+        const component = shallowMount(ConfirmRollbackModal, {
+          propsData: {
+            environment: {
+              ...environment,
+              isLastDeployment: false,
+            },
+            hasMultipleCommits,
+            retryUrl,
           },
-          hasMultipleCommits,
-        },
-      });
-      const modal = component.find(GlModal);
+        });
+        const modal = component.find(GlModal);
 
-      expect(modal.attributes('title')).toContain('Rollback');
-      expect(modal.attributes('title')).toContain('test');
-      expect(modal.attributes('ok-title')).toBe('Rollback');
-      expect(modal.text()).toContain('commit abc0123');
-      expect(modal.text()).toContain('Are you sure you want to continue?');
-    });
+        expect(modal.attributes('title')).toContain('Rollback');
+        expect(modal.attributes('title')).toContain('test');
+        expect(modal.props('actionPrimary').text).toBe('Rollback');
+        expect(modal.props('actionPrimary').attributes).toEqual(primaryPropsAttrs);
+        expect(modal.text()).toContain('commit abc0123');
+        expect(modal.text()).toContain('Are you sure you want to continue?');
+      });
 
-    it('should show "Re-deploy" when isLastDeployment is true', () => {
-      const component = shallowMount(ConfirmRollbackModal, {
-        propsData: {
-          environment: {
-            ...environment,
-            isLastDeployment: true,
+      it('should show "Re-deploy" when isLastDeployment is true', () => {
+        const component = shallowMount(ConfirmRollbackModal, {
+          propsData: {
+            environment: {
+              ...environment,
+              isLastDeployment: true,
+            },
+            hasMultipleCommits,
           },
-          hasMultipleCommits,
-        },
+        });
+        const modal = component.find(GlModal);
+
+        expect(modal.attributes('title')).toContain('Re-deploy');
+        expect(modal.attributes('title')).toContain('test');
+        expect(modal.props('actionPrimary').text).toBe('Re-deploy');
+        expect(modal.text()).toContain('commit abc0123');
+        expect(modal.text()).toContain('Are you sure you want to continue?');
       });
-      const modal = component.find(GlModal);
 
-      expect(modal.attributes('title')).toContain('Re-deploy');
-      expect(modal.attributes('title')).toContain('test');
-      expect(modal.attributes('ok-title')).toBe('Re-deploy');
-      expect(modal.text()).toContain('commit abc0123');
-      expect(modal.text()).toContain('Are you sure you want to continue?');
-    });
+      it('should emit the "rollback" event when "ok" is clicked', () => {
+        const env = { ...environmentData, isLastDeployment: true };
+        const component = shallowMount(ConfirmRollbackModal, {
+          propsData: {
+            environment: env,
+            hasMultipleCommits,
+          },
+        });
+        const eventHubSpy = jest.spyOn(eventHub, '$emit');
+        const modal = component.find(GlModal);
+        modal.vm.$emit('ok');
 
-    it('should emit the "rollback" event when "ok" is clicked', () => {
-      const env = { ...environmentData, isLastDeployment: true };
-      const component = shallowMount(ConfirmRollbackModal, {
-        propsData: {
-          environment: env,
-          hasMultipleCommits,
-        },
+        expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
       });
-      const eventHubSpy = jest.spyOn(eventHub, '$emit');
-      const modal = component.find(GlModal);
-      modal.vm.$emit('ok');
-
-      expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
-    });
-  });
+    },
+  );
 });