diff options
Diffstat (limited to 'app/assets/javascripts/projects/components')
3 files changed, 153 insertions, 108 deletions
diff --git a/app/assets/javascripts/projects/components/project_delete_button.vue b/app/assets/javascripts/projects/components/project_delete_button.vue new file mode 100644 index 00000000000..4b27c5e3d30 --- /dev/null +++ b/app/assets/javascripts/projects/components/project_delete_button.vue @@ -0,0 +1,52 @@ +<script> +import { GlAlert, GlSprintf } from '@gitlab/ui'; +import { __ } from '~/locale'; +import SharedDeleteButton from './shared/delete_button.vue'; + +export default { + components: { + GlSprintf, + GlAlert, + SharedDeleteButton, + }, + props: { + confirmPhrase: { + type: String, + required: true, + }, + formPath: { + type: String, + required: true, + }, + }, + strings: { + alertTitle: __('You are about to permanently delete this project'), + alertBody: __( + 'Once a project is permanently deleted it %{strongStart}cannot be recovered%{strongEnd}. Permanently deleting this project will %{strongStart}immediately delete%{strongEnd} its respositories and %{strongStart}all related resources%{strongEnd} including issues, merge requests etc.', + ), + modalBody: __( + "This action cannot be undone. You will lose the project's respository and all conent: issues, merge requests, etc.", + ), + }, +}; +</script> + +<template> + <shared-delete-button v-bind="{ confirmPhrase, formPath }"> + <template #modal-body> + <gl-alert + class="gl-mb-5" + variant="danger" + :title="$options.strings.alertTitle" + :dismissible="false" + > + <gl-sprintf :message="$options.strings.alertBody"> + <template #strong="{ content }"> + <strong>{{ content }}</strong> + </template> + </gl-sprintf> + </gl-alert> + <p>{{ $options.strings.modalBody }}</p> + </template> + </shared-delete-button> +</template> diff --git a/app/assets/javascripts/projects/components/remove_modal.vue b/app/assets/javascripts/projects/components/remove_modal.vue deleted file mode 100644 index 37f58efcb30..00000000000 --- a/app/assets/javascripts/projects/components/remove_modal.vue +++ /dev/null @@ -1,108 +0,0 @@ -<script> -import { GlModal, GlModalDirective, GlSprintf, GlFormInput, GlButton } from '@gitlab/ui'; -import { __ } from '~/locale'; -import { rstrip } from '~/lib/utils/common_utils'; -import csrf from '~/lib/utils/csrf'; - -export default { - components: { - GlModal, - GlSprintf, - GlFormInput, - GlButton, - }, - directives: { - GlModal: GlModalDirective, - }, - props: { - confirmPhrase: { - type: String, - required: true, - }, - warningMessage: { - type: String, - required: true, - }, - formPath: { - type: String, - required: true, - }, - }, - data() { - return { - userInput: null, - }; - }, - computed: { - buttonDisabled() { - return rstrip(this.userInput) !== this.confirmPhrase; - }, - csrfToken() { - return csrf.token; - }, - }, - methods: { - submitForm() { - this.$refs.form.submit(); - }, - }, - strings: { - removeProject: __('Remove project'), - title: __('Confirmation required'), - confirm: __('Confirm'), - dataLoss: __( - 'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.', - ), - confirmText: __('Please type %{phrase_code} to proceed or close this modal to cancel.'), - }, - modalId: 'remove-project-modal', -}; -</script> - -<template> - <form ref="form" :action="formPath" method="post"> - <input type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <gl-button v-gl-modal="$options.modalId" category="primary" variant="danger">{{ - $options.strings.removeProject - }}</gl-button> - <gl-modal - ref="removeModal" - :modal-id="$options.modalId" - size="sm" - ok-variant="danger" - footer-class="bg-gray-light gl-p-5" - > - <template #modal-title>{{ $options.strings.title }}</template> - <template #modal-footer> - <div class="gl-w-full gl-display-flex gl-just-content-start gl-m-0"> - <gl-button - :disabled="buttonDisabled" - category="primary" - variant="danger" - @click="submitForm" - > - {{ $options.strings.confirm }} - </gl-button> - </div> - </template> - <div> - <p class="gl-text-red-500 gl-font-weight-bold">{{ warningMessage }}</p> - <p class="gl-mb-0">{{ $options.strings.dataLoss }}</p> - <p> - <gl-sprintf :message="$options.strings.confirmText"> - <template #phrase_code> - <code>{{ confirmPhrase }}</code> - </template> - </gl-sprintf> - </p> - <gl-form-input - id="confirm_name_input" - v-model="userInput" - name="confirm_name_input" - type="text" - /> - </div> - </gl-modal> - </form> -</template> diff --git a/app/assets/javascripts/projects/components/shared/delete_button.vue b/app/assets/javascripts/projects/components/shared/delete_button.vue new file mode 100644 index 00000000000..e3f4500d404 --- /dev/null +++ b/app/assets/javascripts/projects/components/shared/delete_button.vue @@ -0,0 +1,101 @@ +<script> +import { uniqueId } from 'lodash'; +import { GlModal, GlModalDirective, GlFormInput, GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; +import csrf from '~/lib/utils/csrf'; + +export default { + components: { + GlModal, + GlFormInput, + GlButton, + }, + directives: { + GlModal: GlModalDirective, + }, + props: { + confirmPhrase: { + type: String, + required: true, + }, + formPath: { + type: String, + required: true, + }, + }, + data() { + return { + userInput: null, + modalId: uniqueId('delete-project-modal-'), + }; + }, + computed: { + confirmDisabled() { + return this.userInput !== this.confirmPhrase; + }, + csrfToken() { + return csrf.token; + }, + modalActionProps() { + return { + primary: { + text: __('Yes, delete project'), + attributes: [{ variant: 'danger' }, { disabled: this.confirmDisabled }], + }, + cancel: { + text: __('Cancel, keep project'), + }, + }; + }, + }, + methods: { + submitForm() { + this.$refs.form.submit(); + }, + }, + strings: { + deleteProject: __('Delete project'), + title: __('Delete project. Are you ABSOLUTELY SURE?'), + confirmText: __('Please type the following to confirm:'), + }, +}; +</script> + +<template> + <form ref="form" :action="formPath" method="post"> + <input type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + + <gl-button v-gl-modal="modalId" category="primary" variant="danger">{{ + $options.strings.deleteProject + }}</gl-button> + + <gl-modal + ref="removeModal" + :modal-id="modalId" + size="sm" + ok-variant="danger" + footer-class="gl-bg-gray-10 gl-p-5" + title-class="gl-text-red-500" + :action-primary="modalActionProps.primary" + :action-cancel="modalActionProps.cancel" + @ok="submitForm" + > + <template #modal-title>{{ $options.strings.title }}</template> + <div> + <slot name="modal-body"></slot> + <p class="gl-mb-1">{{ $options.strings.confirmText }}</p> + <p> + <code>{{ confirmPhrase }}</code> + </p> + <gl-form-input + id="confirm_name_input" + v-model="userInput" + name="confirm_name_input" + type="text" + /> + <slot name="modal-footer"></slot> + </div> + </gl-modal> + </form> +</template> |