diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-01-12 13:21:11 -0600 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-02-05 15:10:01 -0600 |
commit | db0c0ed8215c03ec6b299a3ba675b37e541f3cea (patch) | |
tree | 745c1ce12a932829d9471a4cf862b24c4aab930e | |
parent | c07b6b7793dd5414f4763240c462fe7cfe0b27da (diff) | |
download | gitlab-ce-41310-new-design-for-merged-branches-deletion-confirmation.tar.gz |
Added new design for the merged branches confirmation41310-new-design-for-merged-branches-deletion-confirmation
3 files changed, 88 insertions, 7 deletions
diff --git a/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue b/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue new file mode 100644 index 00000000000..39ee79a26b0 --- /dev/null +++ b/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue @@ -0,0 +1,53 @@ +<script> + import axios from '~/lib/utils/axios_utils'; + import { s__, sprintf } from '~/locale'; + import Flash from '~/flash'; + import modal from '~/vue_shared/components/modal.vue'; + import { redirectTo } from '~/lib/utils/url_utility'; + + export default { + components: { + modal, + }, + props: { + defaultBranch: { + type: String, + required: true, + }, + url: { + type: String, + required: true, + }, + }, + computed: { + modalText() { + return sprintf(s__(`You’re about to permanently delete all merged branches + that were merged into ‘%{defaultBranchName}’. + Once you confirm and press Delete merged branches, it cannot be undone or recovered.`), + { defaultBranchName: this.defaultBranch }); + }, + }, + methods: { + onSubmit() { + axios.delete(this.url) + .then((resp) => { + redirectTo(resp.request.responseURL); + }) + .catch(() => { + // TODO: Check with UX for the error message + Flash(s__('Branches|Deleting the merged branches failed')); + }); + }, + }, + }; +</script> +<template> + <modal + id="delete-merged-branches-modal" + :title="s__('Branches|Delete all merged branches?')" + :text="modalText" + kind="danger" + :primary-button-label="s__('Branches|Delete merged branches')" + @submit="onSubmit" + /> +</template> diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js index cee0f19bf2a..e813c4bc8d9 100644 --- a/app/assets/javascripts/pages/projects/branches/index/index.js +++ b/app/assets/javascripts/pages/projects/branches/index/index.js @@ -1,7 +1,34 @@ +import Vue from 'vue'; import AjaxLoadingSpinner from '~/ajax_loading_spinner'; -import DeleteModal from '~/branches/branches_delete_modal'; +import Translate from '~/vue_shared/translate'; +import deleteMergedBranchesModal from './components/delete_merged_brances_modal.vue'; + +Vue.use(Translate); + +function createDeleteMergedBranchesModal(props) { + // eslint-disable-next-line no-new + new Vue({ + el: '#delete-merged-branches-modal', + components: { + deleteMergedBranchesModal, + }, + render(createElement) { + return createElement('delete-merged-branches-modal', { + props, + }); + }, + }); +} export default () => { + const deleteMergedBranchesButton = document.getElementById('delete-merged-branches-button'); AjaxLoadingSpinner.init(); - new DeleteModal(); // eslint-disable-line no-new + deleteMergedBranchesButton.onclick = (event) => { + const button = event.currentTarget; + const props = { + defaultBranch: button.dataset.defaultBranch, + url: button.dataset.url, + }; + createDeleteMergedBranchesModal(props); + }; }; diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml index fb770764364..9ac3426d925 100644 --- a/app/views/projects/branches/index.html.haml +++ b/app/views/projects/branches/index.html.haml @@ -2,6 +2,7 @@ - page_title _('Branches') %div{ class: container_class } + #delete-merged-branches-modal .top-area.adjust - if can?(current_user, :admin_project, @project) .nav-text @@ -25,12 +26,12 @@ = link_to title, filter_branches_path(sort: value), class: ("is-active" if @sort == value) - if can? current_user, :push_code, @project - = link_to project_merged_branches_path(@project), - class: 'btn btn-inverted btn-remove has-tooltip', + %button#delete-merged-branches-button.btn.btn-inverted.btn-remove.has-tooltip{ type: 'button', title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref }, - method: :delete, - data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'), - container: 'body' } do + data: { toggle: 'modal', + default_branch: @project.repository.root_ref, + target: '#delete-merged-branches-modal', + url: project_merged_branches_path(@project) } } = s_('Branches|Delete merged branches') = link_to new_project_branch_path(@project), class: 'btn btn-create' do = s_('Branches|New branch') |