diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
8 files changed, 70 insertions, 29 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 7213658bdf2..9504ed78778 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -14,7 +14,7 @@ import $ from 'jquery'; import { mapActions, mapGetters, mapState } from 'vuex'; import Autosave from '~/autosave'; import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; -import { deprecatedCreateFlash as Flash } from '~/flash'; +import createFlash from '~/flash'; import { statusBoxState } from '~/issuable/components/status_box.vue'; import httpStatusCodes from '~/lib/utils/http_status'; import { @@ -293,7 +293,11 @@ export default { toggleState() .then(() => statusBoxState.updateStatus && statusBoxState.updateStatus()) .then(refreshUserMergeRequestCounts) - .catch(() => Flash(constants.toggleStateErrorMessage[this.noteableType][this.openState])); + .catch(() => + createFlash({ + message: constants.toggleStateErrorMessage[this.noteableType][this.openState], + }), + ); }, discard(shouldClear = true) { // `blur` is needed to clear slash commands autocomplete cache if event fired. diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue index dfe2763d8bd..0892276ff3b 100644 --- a/app/assets/javascripts/notes/components/discussion_notes.vue +++ b/app/assets/javascripts/notes/components/discussion_notes.vue @@ -130,15 +130,18 @@ export default { @handleDeleteNote="$emit('deleteNote')" @startReplying="$emit('startReplying')" > - <note-edited-text - v-if="discussion.resolved" - slot="discussion-resolved-text" - :edited-at="discussion.resolved_at" - :edited-by="discussion.resolved_by" - :action-text="resolvedText" - class-name="discussion-headline-light js-discussion-headline discussion-resolved-text" - /> - <slot slot="avatar-badge" name="avatar-badge"></slot> + <template #discussion-resolved-text> + <note-edited-text + v-if="discussion.resolved" + :edited-at="discussion.resolved_at" + :edited-by="discussion.resolved_by" + :action-text="resolvedText" + class-name="discussion-headline-light js-discussion-headline discussion-resolved-text" + /> + </template> + <template #avatar-badge> + <slot name="avatar-badge"></slot> + </template> </component> <discussion-notes-replies-wrapper :is-diff-discussion="discussion.diff_discussion"> <toggle-replies-widget @@ -175,7 +178,9 @@ export default { :discussion-resolve-path="discussion.resolve_path" @handleDeleteNote="$emit('deleteNote')" > - <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot> + <template #avatar-badge> + <slot v-if="index === 0" name="avatar-badge"></slot> + </template> </component> <slot :show-replies="isExpanded || !hasReplies" name="footer"></slot> </template> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 0f72b4f2dba..44d0c741d5a 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -3,7 +3,7 @@ import { GlTooltipDirective, GlIcon, GlButton, GlDropdownItem } from '@gitlab/ui import { mapActions, mapGetters } from 'vuex'; import Api from '~/api'; import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status'; -import { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { __, sprintf } from '~/locale'; import eventHub from '~/sidebar/event_hub'; @@ -234,7 +234,11 @@ export default { assignee_ids: assignees.map((assignee) => assignee.id), }) .then(() => this.handleAssigneeUpdate(assignees)) - .catch(() => flash(__('Something went wrong while updating assignees'))); + .catch(() => + createFlash({ + message: __('Something went wrong while updating assignees'), + }), + ); } }, setAwardEmoji(awardName) { diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue index 9eb7b928ea4..835750cc137 100644 --- a/app/assets/javascripts/notes/components/note_awards_list.vue +++ b/app/assets/javascripts/notes/components/note_awards_list.vue @@ -1,8 +1,8 @@ <script> import { mapActions, mapGetters } from 'vuex'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import AwardsList from '~/vue_shared/components/awards_list.vue'; -import { deprecatedCreateFlash as Flash } from '../../flash'; export default { components: { @@ -48,7 +48,11 @@ export default { awardName, }; - this.toggleAwardRequest(data).catch(() => Flash(__('Something went wrong on our end.'))); + this.toggleAwardRequest(data).catch(() => + createFlash({ + message: __('Something went wrong on our end.'), + }), + ); }, }, }; diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 6932af61c69..1a4a6c137a6 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -216,6 +216,7 @@ export default { <gl-loading-icon v-if="showSpinner" ref="spinner" + size="sm" class="editing-spinner" :label="__('Comment is being updated')" /> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 1af9e4be373..b99579fb9a7 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -2,11 +2,12 @@ import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { mapActions, mapGetters } from 'vuex'; import DraftNote from '~/batch_comments/components/draft_note.vue'; +import createFlash from '~/flash'; import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave'; +import { isLoggedIn } from '~/lib/utils/common_utils'; import { s__, __ } from '~/locale'; import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; -import { deprecatedCreateFlash as Flash } from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import eventHub from '../event_hub'; import noteable from '../mixins/noteable'; @@ -85,7 +86,7 @@ export default { return this.getUserData; }, isLoggedIn() { - return Boolean(gon.current_user_id); + return isLoggedIn(); }, autosaveKey() { return getDiscussionReplyKey(this.firstNote.noteable_type, this.discussion.id); @@ -220,7 +221,10 @@ export default { const msg = __( 'Your comment could not be submitted! Please check your network connection and try again.', ); - Flash(msg, 'alert', this.$el); + createFlash({ + message: msg, + parent: this.$el, + }); this.$refs.noteForm.note = noteText; callback(err); }); @@ -262,7 +266,9 @@ export default { @startReplying="showReplyForm" @deleteNote="deleteNoteHandler" > - <slot slot="avatar-badge" name="avatar-badge"></slot> + <template #avatar-badge> + <slot name="avatar-badge"></slot> + </template> <template #footer="{ showReplies }"> <draft-note v-if="showDraft(discussion.reply_id)" diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index 0feb77be653..5ea431224ce 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -4,15 +4,16 @@ import $ from 'jquery'; import { escape, isEmpty } from 'lodash'; import { mapGetters, mapActions } from 'vuex'; import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants'; +import createFlash from '~/flash'; import httpStatusCodes from '~/lib/utils/http_status'; import { truncateSha } from '~/lib/utils/text_utility'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; -import { deprecatedCreateFlash as Flash } from '../../flash'; import { __, s__, sprintf } from '../../locale'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import eventHub from '../event_hub'; import noteable from '../mixins/noteable'; import resolvable from '../mixins/resolvable'; +import { renderMarkdown } from '../utils'; import { getStartLineNumber, getEndLineNumber, @@ -247,7 +248,9 @@ export default { this.isDeleting = false; }) .catch(() => { - Flash(__('Something went wrong while deleting your note. Please try again.')); + createFlash({ + message: __('Something went wrong while deleting your note. Please try again.'), + }); this.isDeleting = false; }); } @@ -298,7 +301,7 @@ export default { this.isRequesting = true; this.oldContent = this.note.note_html; // eslint-disable-next-line vue/no-mutating-props - this.note.note_html = escape(noteText); + this.note.note_html = renderMarkdown(noteText); this.updateNote(data) .then(() => { @@ -316,7 +319,10 @@ export default { this.setSelectedCommentPositionHover(); this.$nextTick(() => { const msg = __('Something went wrong while editing your comment. Please try again.'); - Flash(msg, 'alert', this.$el); + createFlash({ + message: msg, + parent: this.$el, + }); this.recoverNoteContent(noteText); callback(); }); @@ -387,7 +393,9 @@ export default { :img-alt="author.name" :img-size="40" > - <slot slot="avatar-badge" name="avatar-badge"></slot> + <template #avatar-badge> + <slot name="avatar-badge"></slot> + </template> </user-avatar-link> </div> <div class="timeline-content"> @@ -398,7 +406,9 @@ export default { :note-id="note.id" :is-confidential="note.confidential" > - <slot slot="note-header-info" name="note-header-info"></slot> + <template #note-header-info> + <slot name="note-header-info"></slot> + </template> <span v-if="commit" v-safe-html="actionText"></span> <span v-else-if="note.created_at" class="d-none d-sm-inline">·</span> </note-header> diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 433f75a752d..29c60b96d8a 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -1,13 +1,13 @@ <script> import { mapGetters, mapActions } from 'vuex'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import initUserPopovers from '~/user_popovers'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import draftNote from '../../batch_comments/components/draft_note.vue'; -import { deprecatedCreateFlash as Flash } from '../../flash'; import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility'; import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; @@ -66,6 +66,7 @@ export default { data() { return { currentFilter: null, + renderSkeleton: !this.shouldShow, }; }, computed: { @@ -93,7 +94,7 @@ export default { return this.noteableData.noteableType; }, allDiscussions() { - if (this.isLoading) { + if (this.renderSkeleton || this.isLoading) { const prerenderedNotesCount = parseInt(this.notesData.prerenderedNotesCount, 10) || 0; return new Array(prerenderedNotesCount).fill({ @@ -122,6 +123,10 @@ export default { if (!this.isNotesFetched) { this.fetchNotes(); } + + setTimeout(() => { + this.renderSkeleton = !this.shouldShow; + }); }, discussionTabCounterText(val) { if (this.discussionsCount) { @@ -216,7 +221,9 @@ export default { .catch(() => { this.setLoadingState(false); this.setNotesFetchedState(true); - Flash(__('Something went wrong while fetching comments. Please try again.')); + createFlash({ + message: __('Something went wrong while fetching comments. Please try again.'), + }); }); }, initPolling() { |