Commit fa74a193 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch...

Merge branch '254268-replace-bootstrap-modal-in-app-views-projects-deployments-_rollback-haml' into 'master'

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

See merge request gitlab-org/gitlab!66808
parents 2c58b606 d1fc1fee
......@@ -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>
......
<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>
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);
import initConfirmRollBackModal from '~/environments/init_confirm_rollback_modal';
import { initHeader } from '~/environments/mount_show';
initHeader();
initConfirmRollBackModal();
- 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')
- 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
......@@ -12626,9 +12626,6 @@ msgstr ""
msgid "Environments|Re-deploy"
msgstr ""
msgid "Environments|Re-deploy environment %{environment_name}?"
msgstr ""
msgid "Environments|Re-deploy environment %{name}?"
msgstr ""
......@@ -12641,9 +12638,6 @@ msgstr ""
msgid "Environments|Rollback environment"
msgstr ""
msgid "Environments|Rollback environment %{environment_name}?"
msgstr ""
msgid "Environments|Rollback environment %{name}?"
msgstr ""
......@@ -12665,15 +12659,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 ""
......
......@@ -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);
});
});
});
# 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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment