diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-05 03:08:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-05 03:08:11 +0300 |
commit | 59429d48eb1cf7032cf12363b83a045743f02a1e (patch) | |
tree | e4281f1f60bc0f71d315c1eb1bcacd57b9b72590 /app/assets/javascripts/design_management | |
parent | 484a245a95e97ae97f558a3d242f599853eb6d3c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/design_management')
-rw-r--r-- | app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue | 71 |
1 files changed, 35 insertions, 36 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue index 4faeba3983b..5a6b220e532 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlModal } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import $ from 'jquery'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; @@ -7,13 +7,23 @@ import Autosave from '~/autosave'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; export default { name: 'DesignReplyForm', + i18n: { + primaryBtn: s__('DesignManagement|Discard changes'), + cancelBtnCreate: s__('DesignManagement|Continue creating'), + cancelBtnUpdate: s__('DesignManagement|Continue editing'), + cancelCreate: s__('DesignManagement|Are you sure you want to cancel creating this comment?'), + cancelUpdate: s__('DesignManagement|Are you sure you want to cancel editing this comment?'), + newCommentButton: s__('DesignManagement|Comment'), + updateCommentButton: s__('DesignManagement|Save comment'), + }, + markdownDocsPath: helpPagePath('user/markdown'), components: { MarkdownField, GlButton, - GlModal, }, props: { markdownPreviewPath: { @@ -54,29 +64,10 @@ export default { hasValue() { return this.value.trim().length > 0; }, - modalSettings() { - if (this.isNewComment) { - return { - title: s__('DesignManagement|Cancel comment confirmation'), - okTitle: s__('DesignManagement|Discard comment'), - cancelTitle: s__('DesignManagement|Keep comment'), - content: s__('DesignManagement|Are you sure you want to cancel creating this comment?'), - }; - } - return { - title: s__('DesignManagement|Cancel comment update confirmation'), - okTitle: s__('DesignManagement|Cancel changes'), - cancelTitle: s__('DesignManagement|Keep changes'), - content: s__('DesignManagement|Are you sure you want to cancel changes to this comment?'), - }; - }, buttonText() { return this.isNewComment - ? s__('DesignManagement|Comment') - : s__('DesignManagement|Save comment'); - }, - markdownDocsPath() { - return helpPagePath('user/markdown'); + ? this.$options.i18n.newCommentButton + : this.$options.i18n.updateCommentButton; }, shortDiscussionId() { return isGid(this.discussionId) ? getIdFromGraphQLId(this.discussionId) : this.discussionId; @@ -94,12 +85,30 @@ export default { }, cancelComment() { if (this.hasValue && this.formText !== this.value) { - this.$refs.cancelCommentModal.show(); + this.confirmCancelCommentModal(); } else { this.$emit('cancel-form'); } }, - confirmCancelCommentModal() { + async confirmCancelCommentModal() { + const msg = this.isNewComment + ? this.$options.i18n.cancelCreate + : this.$options.i18n.cancelUpdate; + + const cancelBtn = this.isNewComment + ? this.$options.i18n.cancelBtnCreate + : this.$options.i18n.cancelBtnUpdate; + + const confirmed = await confirmAction(msg, { + primaryBtnText: this.$options.i18n.primaryBtn, + cancelBtnText: cancelBtn, + primaryBtnVariant: 'danger', + }); + + if (!confirmed) { + return; + } + this.$emit('cancel-form'); this.autosaveDiscussion.reset(); }, @@ -126,7 +135,7 @@ export default { :markdown-preview-path="markdownPreviewPath" :enable-autocomplete="true" :textarea-value="value" - :markdown-docs-path="markdownDocsPath" + :markdown-docs-path="$options.markdownDocsPath" class="bordered-box" > <template #textarea> @@ -171,15 +180,5 @@ export default { >{{ __('Cancel') }}</gl-button > </div> - <gl-modal - ref="cancelCommentModal" - ok-variant="danger" - :title="modalSettings.title" - :ok-title="modalSettings.okTitle" - :cancel-title="modalSettings.cancelTitle" - modal-id="cancel-comment-modal" - @ok="confirmCancelCommentModal" - >{{ modalSettings.content }} - </gl-modal> </form> </template> |