diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/confirm_rollback_modal.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/confirm_rollback_modal.vue | 135 |
1 files changed, 88 insertions, 47 deletions
diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index 76ad74e04d0..4783b92942c 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -1,29 +1,46 @@ <script> -/* eslint-disable vue/no-v-html */ /** * Render modal to confirm rollback/redeploy. */ - -import { GlModal } from '@gitlab/ui'; +import { GlModal, GlSprintf, GlLink } 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'; export default { name: 'ConfirmRollbackModal', - components: { GlModal, + GlSprintf, + GlLink, + }, + 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, + }, + retryUrl: { + type: String, + required: false, + default: null, + }, }, - computed: { modalTitle() { const title = this.environment.isLastDeployment @@ -34,58 +51,47 @@ export default { name: escape(this.environment.name), }); }, - commitShortSha() { - const { last_deployment } = this.environment; - return this.commitData(last_deployment, 'short_id'); - }, - - 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, 'short_id'); + } - commitTitle() { - const { last_deployment } = this.environment; - return this.commitData(last_deployment, 'title'); + return this.environment.commitShortSha; }, + commitUrl() { + if (this.hasMultipleCommits) { + const { last_deployment } = this.environment; + return this.commitData(last_deployment, 'commit_path'); + } - 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 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?', - ) - : s__( - '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?', - ); - return sprintf( - body, - { - commitId, - linkStart, - linkEnd, - name, - }, - false, - ); + return this.environment.commitUrl; }, - 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, + }; + }, + }, methods: { + handleChange(event) { + this.$emit('change', event); + }, onOk() { eventHub.$emit('rollbackEnvironment', this.environment); }, - commitData(lastDeployment, key) { if (lastDeployment && lastDeployment.commit) { return lastDeployment.commit[key]; @@ -94,16 +100,51 @@ 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" > - <p v-html="modalText"></p> + <gl-sprintf + v-if="environment.isLastDeployment" + :message=" + 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?', + ) + " + > + <template #link> + <gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{ + commitShortSha + }}</gl-link> + </template> + </gl-sprintf> + <gl-sprintf + v-else + :message=" + s__( + '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?', + ) + " + > + <template #name>{{ environment.name }}</template> + <template #link> + <gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{ + commitShortSha + }}</gl-link> + </template> + </gl-sprintf> </gl-modal> </template> |