Replace bootstrap modal in app/views/projects/deployments/_rollback.haml

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

@@ -16,12 +16,25 @@ export default {
   components: {
     GlModal,
   },
-
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   props: {
     environment: {
       type: Object,
       required: true,
     },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasMultipleCommits: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   computed: {
@@ -36,25 +49,28 @@ export default {
     },
 
     commitShortSha() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'short_id');
+      if (this.hasMultipleCommits) {
+        const { last_deployment } = this.environment;
+        return this.commitData(last_deployment, 'short_id');
+      }
+
+      return this.environment.commitShortSha;
     },
 
     commitUrl() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'commit_path');
-    },
+      if (this.hasMultipleCommits) {
+        const { last_deployment } = this.environment;
+        return this.commitData(last_deployment, 'commit_path');
+      }
 
-    commitTitle() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'title');
+      return this.environment.commitUrl;
     },
 
     modalText() {
       const linkStart = `<a class="commit-sha mr-0" href="${escape(this.commitUrl)}">`;
       const commitId = escape(this.commitShortSha);
       const linkEnd = '</a>';
-      const name = escape(this.name);
+      const name = escape(this.environment.name);
       const body = this.environment.isLastDeployment
         ? s__(
             'Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?',
@@ -82,6 +98,10 @@ export default {
   },
 
   methods: {
+    handleChange(event) {
+      this.$emit('change', event);
+    },
+
     onOk() {
       eventHub.$emit('rollbackEnvironment', this.environment);
     },
@@ -99,10 +119,12 @@ export default {
 <template>
   <gl-modal
     :title="modalTitle"
+    :visible="visible"
     modal-id="confirm-rollback-modal"
     :ok-title="modalActionText"
     ok-variant="danger"
     @ok="onOk"
+    @change="handleChange"
   >
     <p v-html="modalText"></p>
   </gl-modal>

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 {
+  components: {
+    ConfirmRollbackModal,
+  },
+  props: {
+    selector: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      environment: null,
+      retryPath: '',
+      visible: false,
+    };
+  },
+  mounted() {
+    eventHub.$on('rollbackEnvironment', () => {
+      redirectTo(this.retryPath);
+    });
+
+    document.querySelectorAll(this.selector).forEach((button) => {
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+        const {
+          environmentName,
+          commitShortSha,
+          commitUrl,
+          isLastDeployment,
+          retryPath,
+        } = button.dataset;
+
+        this.environment = {
+          name: environmentName,
+          commitShortSha,
+          commitUrl,
+          isLastDeployment: parseBoolean(isLastDeployment),
+        };
+        this.retryPath = retryPath;
+        this.visible = true;
+      });
+    });
+  },
+};
+</script>
+
+<template>
+  <confirm-rollback-modal
+    v-if="environment"
+    v-model="visible"
+    :environment="environment"
+    :has-multiple-commits="false"
+  />
+  <div v-else></div>
+</template>

app/assets/javascripts/environments/init_confirm_rollback_modal.js

+import Vue from 'vue';
+import RollbackModalManager from './components/rollback_modal_manager.vue';
+
+const mountConfirmRollbackModal = (optionalProps) =>
+  new Vue({
+    render(h) {
+      return h(RollbackModalManager, {
+        props: {
+          selector: '.js-confirm-rollback-modal-button',
+          ...optionalProps,
+        },
+      });
+    },
+  }).$mount();
+
+export default (optionalProps = {}) => mountConfirmRollbackModal(optionalProps);

app/assets/javascripts/pages/projects/environments/show/index.js

+import initConfirmRollBackModal from '~/environments/init_confirm_rollback_modal';
 import { initHeader } from '~/environments/mount_show';
 
 initHeader();
+initConfirmRollBackModal();

app/views/projects/deployments/_confirm_rollback_modal.html.haml

-- commit_sha = link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha has-tooltip", title: h(deployment.commit_title)
-.modal.ws-normal.fade{ tabindex: -1, id: "confirm-rollback-modal-#{deployment.id}" }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h4.modal-title.d-flex.mw-100
-          - if deployment.last?
-            = s_("Environments|Re-deploy environment %{environment_name}?") % {environment_name: @environment.name}
-          - else
-            = s_("Environments|Rollback environment %{environment_name}?") % {environment_name: @environment.name}
-      .modal-body
-        - if deployment.last?
-          %p= s_('Environments|This action will relaunch the job for commit %{commit_id}, putting the environment in a previous version. Are you sure you want to continue?').html_safe % {commit_id: commit_sha}
-        - else
-          %p
-            = s_('Environments|This action will run the job defined by %{environment_name} for commit %{commit_id}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?').html_safe % {commit_id: commit_sha, environment_name: @environment.name}
-      .modal-footer
-        = button_tag _('Cancel'), type: 'button', class: 'btn gl-button btn-danger', data: { dismiss: 'modal' }
-        = link_to [:retry, @project, deployment.deployable], method: :post, class: 'btn gl-button btn-danger' do
-          - if deployment.last?
-            = s_('Environments|Re-deploy')
-          - else
-            = s_('Environments|Rollback')

app/views/projects/deployments/_rollback.haml

 - if deployment.deployable && can?(current_user, :create_deployment, deployment)
   - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment')
-  = button_tag class: 'gl-button btn btn-default btn-icon has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do
+  = button_tag class: 'js-confirm-rollback-modal-button gl-button btn btn-default btn-icon has-tooltip', type: 'button', data: { environment_name: @environment.name, commit_short_sha: deployment.short_sha, commit_url: project_commit_path(@project, deployment.sha), is_last_deployment: deployment.last?.to_s, retry_path: retry_project_job_path(@environment.project, deployment.deployable) }, title: tooltip do
     - if deployment.last?
       = sprite_icon('repeat', css_class: 'gl-icon')
     - else
       = sprite_icon('redo', css_class: 'gl-icon')
-  = render 'projects/deployments/confirm_rollback_modal', deployment: deployment

locale/gitlab.pot

@@ -12629,9 +12629,6 @@ msgstr ""
 msgid "Environments|Re-deploy"
 msgstr ""
 
-msgid "Environments|Re-deploy environment %{environment_name}?"
-msgstr ""
-
 msgid "Environments|Re-deploy environment %{name}?"
 msgstr ""
 
@@ -12644,9 +12641,6 @@ msgstr ""
 msgid "Environments|Rollback environment"
 msgstr ""
 
-msgid "Environments|Rollback environment %{environment_name}?"
-msgstr ""
-
 msgid "Environments|Rollback environment %{name}?"
 msgstr ""
 
@@ -12668,15 +12662,9 @@ msgstr ""
 msgid "Environments|There was an error fetching the logs. Please try again."
 msgstr ""
 
-msgid "Environments|This action will relaunch the job for commit %{commit_id}, putting the environment in a previous version. Are you sure you want to continue?"
-msgstr ""
-
 msgid "Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?"
 msgstr ""
 
-msgid "Environments|This action will run the job defined by %{environment_name} for commit %{commit_id}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?"
-msgstr ""
-
 msgid "Environments|This action will run the job defined by %{name} for commit %{linkStart}%{commitId}%{linkEnd} putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?"
 msgstr ""
 

spec/frontend/environments/confirm_rollback_modal_spec.js

@@ -6,65 +6,83 @@ import eventHub from '~/environments/event_hub';
 describe('Confirm Rollback Modal Component', () => {
   let environment;
 
-  beforeEach(() => {
-    environment = {
-      name: 'test',
-      last_deployment: {
-        commit: {
-          short_id: 'abc0123',
-        },
+  const envWithLastDeployment = {
+    name: 'test',
+    last_deployment: {
+      commit: {
+        short_id: 'abc0123',
       },
-      modalId: 'test',
-    };
-  });
+    },
+    modalId: 'test',
+  };
 
-  it('should show "Rollback" when isLastDeployment is false', () => {
-    const component = shallowMount(ConfirmRollbackModal, {
-      propsData: {
-        environment: {
-          ...environment,
-          isLastDeployment: false,
-        },
-      },
-    });
-    const modal = component.find(GlModal);
+  const envWithoutLastDeployment = {
+    name: 'test',
+    modalId: 'test',
+    commitShortSha: 'abc0123',
+    commitUrl: 'test/-/commit/abc0123',
+  };
 
-    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?');
-  });
+  describe.each`
+    hasMultipleCommits | environmentData
+    ${true}            | ${envWithLastDeployment}
+    ${false}           | ${envWithoutLastDeployment}
+  `('when hasMultipleCommits=$hasMultipleCommits', ({ hasMultipleCommits, environmentData }) => {
+    beforeEach(() => {
+      environment = environmentData;
+    });
 
-  it('should show "Re-deploy" when isLastDeployment is true', () => {
-    const component = shallowMount(ConfirmRollbackModal, {
-      propsData: {
-        environment: {
-          ...environment,
-          isLastDeployment: true,
+    it('should show "Rollback" when isLastDeployment is false', () => {
+      const component = shallowMount(ConfirmRollbackModal, {
+        propsData: {
+          environment: {
+            ...environment,
+            isLastDeployment: false,
+          },
+          hasMultipleCommits,
         },
-      },
+      });
+      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?');
     });
-    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 show "Re-deploy" when isLastDeployment is true', () => {
+      const component = shallowMount(ConfirmRollbackModal, {
+        propsData: {
+          environment: {
+            ...environment,
+            isLastDeployment: true,
+          },
+          hasMultipleCommits,
+        },
+      });
+      const modal = component.find(GlModal);
 
-  it('should emit the "rollback" event when "ok" is clicked', () => {
-    environment = { ...environment, isLastDeployment: true };
-    const component = shallowMount(ConfirmRollbackModal, {
-      propsData: {
-        environment,
-      },
+      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?');
     });
-    const eventHubSpy = jest.spyOn(eventHub, '$emit');
-    const modal = component.find(GlModal);
-    modal.vm.$emit('ok');
 
-    expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', environment);
+    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');
+
+      expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
+    });
   });
 });

spec/views/projects/deployments/_confirm_rollback_modal_spec.html_spec.rb

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'projects/deployments/_confirm_rollback_modal' do
-  let(:environment) { create(:environment, :with_review_app) }
-  let(:deployments) { environment.deployments }
-  let(:project) { environment.project }
-
-  before do
-    assign(:environment, environment)
-    assign(:deployments, deployments)
-    assign(:project, project)
-  end
-
-  context 'when re-deploying last deployment' do
-    let(:deployment) { deployments.first }
-
-    before do
-      allow(view).to receive(:deployment).and_return(deployment)
-    end
-
-    it 'shows "re-deploy"' do
-      render
-
-      expect(rendered).to have_selector('h4', text: "Re-deploy environment #{environment.name}?")
-      expect(rendered).to have_selector('p', text: "This action will relaunch the job for commit #{deployment.short_sha}, putting the environment in a previous version. Are you sure you want to continue?")
-      expect(rendered).to have_selector('a.btn-danger', text: 'Re-deploy')
-    end
-
-    it 'links to re-deploying the environment' do
-      expected_link = retry_project_job_path(environment.project, deployment.deployable)
-
-      render
-
-      expect(rendered).to have_selector("a[href='#{expected_link}']", text: 'Re-deploy')
-    end
-  end
-
-  context 'when rolling back to previous deployment' do
-    let(:deployment) { create(:deployment, environment: environment) }
-
-    before do
-      allow(view).to receive(:deployment).and_return(deployment)
-    end
-
-    it 'shows "rollback"' do
-      render
-
-      expect(rendered).to have_selector('h4', text: "Rollback environment #{environment.name}?")
-      expect(rendered).to have_selector('p', text: "This action will run the job defined by #{environment.name} for commit #{deployment.short_sha}, putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?")
-      expect(rendered).to have_selector('a.btn-danger', text: 'Rollback')
-    end
-
-    it 'links to re-deploying the environment' do
-      expected_link = retry_project_job_path(environment.project, deployment.deployable)
-
-      render
-
-      expect(rendered).to have_selector("a[href='#{expected_link}']", text: 'Rollback')
-    end
-  end
-end