diff options
Diffstat (limited to 'app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue')
-rw-r--r-- | app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue | 69 |
1 files changed, 39 insertions, 30 deletions
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue index 8bb093da771..b92fc8d125d 100644 --- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue +++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue @@ -1,11 +1,14 @@ <script> +import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui'; import { escape } from 'lodash'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; -import { s__, sprintf } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; export default { components: { - DeprecatedModal, + GlModal, + }, + directives: { + SafeHtml, }, props: { deleteProjectUrl: { @@ -62,51 +65,57 @@ export default { false, ); }, - primaryButtonLabel() { - return s__('AdminProjects|Delete project'); - }, canSubmit() { return this.enteredProjectName === this.projectName; }, + primaryProps() { + return { + text: s__('Delete project'), + attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }], + }; + }, }, methods: { onCancel() { this.enteredProjectName = ''; }, onSubmit() { + if (!this.canSubmit) { + return; + } this.$refs.form.submit(); this.enteredProjectName = ''; }, }, + cancelProps: { + text: __('Cancel'), + }, }; </script> <template> - <deprecated-modal - id="delete-project-modal" + <gl-modal + modal-id="delete-project-modal" :title="title" - :text="text" - :primary-button-label="primaryButtonLabel" - :submit-disabled="!canSubmit" - kind="danger" - @submit="onSubmit" + :action-primary="primaryProps" + :action-cancel="$options.cancelProps" + :ok-disabled="!canSubmit" + @primary="onSubmit" @cancel="onCancel" > - <template #body="props"> - <p v-html="props.text"></p> - <p v-html="confirmationTextLabel"></p> - <form ref="form" :action="deleteProjectUrl" method="post"> - <input ref="method" type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <input - v-model="enteredProjectName" - name="projectName" - class="form-control" - type="text" - aria-labelledby="input-label" - autocomplete="off" - /> - </form> - </template> - </deprecated-modal> + <p v-safe-html="text"></p> + <p v-safe-html="confirmationTextLabel"></p> + <form ref="form" :action="deleteProjectUrl" method="post"> + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + <input + v-model="enteredProjectName" + name="projectName" + class="form-control" + type="text" + aria-labelledby="input-label" + autocomplete="off" + /> + </form> + </gl-modal> </template> |