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,11 +23,15 @@ 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 }) => {
+    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;
       });
@@ -40,13 +44,15 @@ describe('Confirm Rollback Modal Component', () => {
               isLastDeployment: false,
             },
             hasMultipleCommits,
+            retryUrl,
           },
         });
         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.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?');
       });
@@ -65,7 +71,7 @@ describe('Confirm Rollback Modal Component', () => {
 
         expect(modal.attributes('title')).toContain('Re-deploy');
         expect(modal.attributes('title')).toContain('test');
-      expect(modal.attributes('ok-title')).toBe('Re-deploy');
+        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?');
       });
@@ -84,5 +90,6 @@ describe('Confirm Rollback Modal Component', () => {
 
         expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
       });
-  });
+    },
+  );
 });