diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
15 files changed, 107 insertions, 100 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index bf35d5c3b25..0d7ff022f8f 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -5,7 +5,7 @@ import $ from 'jquery'; import { mapActions, mapGetters, mapState } from 'vuex'; import Autosave from '~/autosave'; import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { badgeState } from '~/issuable/components/status_box.vue'; import httpStatusCodes from '~/lib/utils/http_status'; import { @@ -111,7 +111,10 @@ export default { return this.getNoteableData.current_user.can_create_note; }, canSetInternalNote() { - return this.getNoteableData.current_user.can_update && (this.isIssue || this.isEpic); + return ( + this.getNoteableData.current_user.can_create_confidential_note && + (this.isIssue || this.isEpic) + ); }, issueActionButtonTitle() { const openOrClose = this.isOpen ? 'close' : 'reopen'; @@ -276,7 +279,7 @@ export default { .then(() => badgeState.updateStatus && badgeState.updateStatus()) .then(refreshUserMergeRequestCounts) .catch(() => - createFlash({ + createAlert({ message: constants.toggleStateErrorMessage[this.noteableType][this.openState], }), ); diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue index 1b1923a90f7..cf6474270a2 100644 --- a/app/assets/javascripts/notes/components/diff_discussion_header.vue +++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue @@ -84,8 +84,8 @@ export default { return sprintf(text, { commitDisplay, linkStart, linkEnd }, false); }, - adaptiveAvatarSize() { - return { default: 24, md: 32 }; + toggleClass() { + return this.discussion.expanded ? 'expanded' : 'collapsed'; }, }, methods: { @@ -98,16 +98,13 @@ export default { </script> <template> - <div class="discussion-header gl-display-flex gl-align-items-center gl-p-5"> - <div - v-once - class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-mx-3 gl-md-ml-2 gl-md-mr-5" - > + <div class="discussion-header gl-display-flex gl-align-items-center"> + <div v-once class="timeline-avatar gl-align-self-start gl-flex-shrink-0 gl-flex-shrink"> <gl-avatar-link v-if="author" :href="author.path"> - <gl-avatar :src="author.avatar_url" :alt="author.name" :size="adaptiveAvatarSize" /> + <gl-avatar :src="author.avatar_url" :alt="author.name" :size="32" /> </gl-avatar-link> </div> - <div class="timeline-content w-100"> + <div class="timeline-content w-100 gl-ml-3" :class="toggleClass"> <note-header :author="author" :created-at="firstNote.created_at" @@ -123,14 +120,14 @@ export default { :edited-at="discussion.resolved_at" :edited-by="discussion.resolved_by" :action-text="resolvedText" - class-name="discussion-headline-light js-discussion-headline gl-pl-2" + class-name="discussion-headline-light js-discussion-headline gl-pl-3" /> <note-edited-text v-else-if="lastUpdatedAt" :edited-at="lastUpdatedAt" :edited-by="lastUpdatedBy" :action-text="__('Last updated')" - class-name="discussion-headline-light js-discussion-headline gl-pl-2" + class-name="discussion-headline-light js-discussion-headline gl-pl-3" /> </div> </div> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index 6521b86edbb..37935e9c3c6 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -81,16 +81,18 @@ export default { :class="{ 'gl-bg-orange-50': blocksMerge && !allResolved, 'gl-bg-gray-50': !blocksMerge || allResolved, - 'gl-pr-2': !allResolved, }" data-testid="discussions-counter-text" > <template v-if="allResolved"> {{ __('All threads resolved!') }} <gl-dropdown + v-gl-tooltip:discussionCounter.hover.bottom size="small" category="tertiary" right + :title="__('Thread options')" + :aria-label="__('Thread options')" toggle-class="btn-icon" class="gl-pt-0! gl-px-2 gl-h-full gl-ml-2" > @@ -133,9 +135,12 @@ export default { @click="jumpNext" /> <gl-dropdown + v-gl-tooltip:discussionCounter.hover.bottom size="small" category="tertiary" right + :title="__('Thread options')" + :aria-label="__('Thread options')" toggle-class="btn-icon" class="gl-pt-0! gl-px-2" > diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue index 8a42fb6bd85..21b48a2a666 100644 --- a/app/assets/javascripts/notes/components/discussion_filter.vue +++ b/app/assets/javascripts/notes/components/discussion_filter.vue @@ -168,7 +168,7 @@ export default { id="discussion-preferences-dropdown" class="full-width-mobile" data-qa-selector="discussion_preferences_dropdown" - text="Sort or filter" + :text="__('Sort or filter')" :disabled="isLoading" right > diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue index 61af0b06535..39b3df899a5 100644 --- a/app/assets/javascripts/notes/components/discussion_filter_note.vue +++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue @@ -31,7 +31,7 @@ export default { <div class="timeline-icon d-none d-lg-flex"> <gl-icon name="comment" /> </div> - <div class="timeline-content"> + <div class="timeline-content gl-pl-8"> <div data-testid="discussion-filter-timeline-content"> <gl-sprintf :message="$options.i18n.information"> <template #bold="{ content }"> diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue index 6fcfa66ea49..2dbc9b10836 100644 --- a/app/assets/javascripts/notes/components/discussion_notes.vue +++ b/app/assets/javascripts/notes/components/discussion_notes.vue @@ -142,7 +142,7 @@ export default { :edited-at="discussion.resolved_at" :edited-by="discussion.resolved_by" :action-text="resolvedText" - class-name="discussion-headline-light js-discussion-headline discussion-resolved-text" + class-name="discussion-headline-light js-discussion-headline discussion-resolved-text gl-mb-2 gl-ml-3" /> </template> <template #avatar-badge> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 9806f8e5dc2..930876e90b1 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, mapState } from 'vuex'; import Api from '~/api'; import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { __, sprintf } from '~/locale'; import eventHub from '~/sidebar/event_hub'; @@ -238,7 +238,7 @@ export default { }) .then(() => this.handleAssigneeUpdate(assignees)) .catch(() => - createFlash({ + createAlert({ message: __('Something went wrong while updating assignees'), }), ); @@ -281,6 +281,7 @@ export default { > {{ __('Contributor') }} </user-access-role-badge> + <span class="note-actions__mobile-spacer"></span> <gl-button v-if="canResolve" ref="resolveButton" diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue index 835750cc137..9d59994788e 100644 --- a/app/assets/javascripts/notes/components/note_awards_list.vue +++ b/app/assets/javascripts/notes/components/note_awards_list.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapGetters } from 'vuex'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __ } from '~/locale'; import AwardsList from '~/vue_shared/components/awards_list.vue'; @@ -49,7 +49,7 @@ export default { }; this.toggleAwardRequest(data).catch(() => - createFlash({ + createAlert({ 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 f700802d6bc..f3530344181 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -9,8 +9,6 @@ import { import { mapActions } from 'vuex'; import { __, s__ } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, @@ -21,13 +19,11 @@ export default { GlIcon, GlBadge, GlLoadingIcon, - UserNameWithStatus, }, directives: { SafeHtml, GlTooltip: GlTooltipDirective, }, - mixins: [glFeatureFlagsMixin()], props: { author: { type: Object, @@ -74,12 +70,15 @@ export default { required: false, default: false, }, + isSystemNote: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { isUsernameLinkHovered: false, - emojiTitle: '', - authorStatusHasTooltip: false, }; }, computed: { @@ -100,15 +99,6 @@ export default { 'js-user-link': true, }; }, - authorStatus() { - if (this.author?.show_status) { - return this.author.status_tooltip_html; - } - return false; - }, - emojiElement() { - return this.$refs?.authorStatus?.querySelector('gl-emoji'); - }, authorName() { return this.author.name; }, @@ -116,14 +106,6 @@ export default { return s__('Notes|This internal note will always remain confidential'); }, }, - mounted() { - this.emojiTitle = this.emojiElement ? this.emojiElement.getAttribute('title') : ''; - - const authorStatusTitle = this.$refs?.authorStatus - ?.querySelector('.user-status-emoji') - ?.getAttribute('title'); - this.authorStatusHasTooltip = authorStatusTitle && authorStatusTitle !== ''; - }, methods: { ...mapActions(['setTargetNoteHash']), handleToggle() { @@ -134,12 +116,6 @@ export default { this.setTargetNoteHash(this.noteTimestampLink); } }, - removeEmojiTitle() { - this.emojiElement.removeAttribute('title'); - }, - addEmojiTitle() { - this.emojiElement.setAttribute('title', this.emojiTitle); - }, handleUsernameMouseEnter() { this.$refs.authorNameLink.dispatchEvent(new Event('mouseenter')); this.isUsernameLinkHovered = true; @@ -148,9 +124,6 @@ export default { this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave')); this.isUsernameLinkHovered = false; }, - userAvailability(selectedAuthor) { - return selectedAuthor?.availability || ''; - }, }, i18n: { showThread: __('Show thread'), @@ -185,35 +158,11 @@ export default { :data-user-id="author.id" :data-username="author.username" > - <span - v-if="glFeatures.removeUserAttributesProjects || glFeatures.removeUserAttributesGroups" - class="note-header-author-name gl-font-weight-bold" - > + <span class="note-header-author-name gl-font-weight-bold"> {{ authorName }} </span> - <user-name-with-status - v-else - :name="authorName" - :availability="userAvailability(author)" - container-classes="note-header-author-name gl-font-weight-bold" - /> </a> - <span - v-if=" - authorStatus && - !glFeatures.removeUserAttributesProjects && - !glFeatures.removeUserAttributesGroups - " - ref="authorStatus" - v-safe-html:[$options.safeHtmlConfig]="authorStatus" - v-on=" - authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {} - " - ></span> - <span - v-if="!glFeatures.removeUserAttributesProjects && !glFeatures.removeUserAttributesGroups" - class="text-nowrap author-username" - > + <span v-if="!isSystemNote" class="text-nowrap author-username"> <a ref="authorUsernameLink" class="author-username-link" @@ -252,7 +201,7 @@ export default { data-testid="internalNoteIndicator" variant="warning" size="sm" - class="gl-mb-3 gl-ml-2" + class="gl-ml-2" :title="internalNoteTooltip" > {{ __('Internal note') }} diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index afa5e39d8b0..50d166b6db5 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -2,7 +2,7 @@ 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 { createAlert } from '~/flash'; import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; @@ -247,7 +247,7 @@ export default { const msg = __( 'Your comment could not be submitted! Please check your network connection and try again.', ); - createFlash({ + createAlert({ message: msg, parent: this.$el, }); diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index e51969f95c7..c4b3111b919 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -5,7 +5,7 @@ import { escape, isEmpty } from 'lodash'; import { mapGetters, mapActions } from 'vuex'; import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import httpStatusCodes from '~/lib/utils/http_status'; import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending'; import { truncateSha } from '~/lib/utils/text_utility'; @@ -199,9 +199,6 @@ export default { isMRDiffView() { return this.line && !this.isOverviewTab; }, - authorAvatarAdaptiveSize() { - return { default: 24, md: 32 }; - }, }, created() { const line = this.note.position?.line_range?.start || this.line; @@ -273,7 +270,7 @@ export default { this.isDeleting = false; }) .catch(() => { - createFlash({ + createAlert({ message: __('Something went wrong while deleting your note. Please try again.'), }); this.isDeleting = false; @@ -352,7 +349,7 @@ export default { }, handleUpdateError() { const msg = __('Something went wrong while editing your comment. Please try again.'); - createFlash({ + createAlert({ message: msg, parent: this.$el, }); @@ -409,13 +406,13 @@ export default { :class="{ ...classNameBindings, 'internal-note': note.internal }" :data-award-url="note.toggle_award_path" :data-note-id="note.id" - class="note note-wrapper" + class="note note-wrapper note-comment" data-qa-selector="noteable_note_container" > <div v-if="showMultiLineComment" data-testid="multiline-comment" - class="gl-mb-5 gl-text-gray-500 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-4" + class="gl-text-gray-500 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-px-5 gl-py-3" > <gl-sprintf :message="__('Comment on lines %{startLine} to %{endLine}')"> <template #startLine> @@ -427,7 +424,7 @@ export default { </gl-sprintf> </div> - <div v-if="isMRDiffView" class="gl-float-left gl-mt-n1 gl-mr-3"> + <div v-if="isMRDiffView" class="timeline-avatar gl-float-left gl-pt-2"> <gl-avatar-link :href="author.path"> <gl-avatar :src="author.avatar_url" @@ -440,13 +437,13 @@ export default { </gl-avatar-link> </div> - <div v-else class="gl-float-left gl-pl-3 gl-md-pl-2"> + <div v-else class="timeline-avatar gl-float-left"> <gl-avatar-link :href="author.path"> <gl-avatar :src="author.avatar_url" :entity-name="author.username" :alt="author.name" - :size="authorAvatarAdaptiveSize" + :size="32" /> <slot name="avatar-badge"></slot> diff --git a/app/assets/javascripts/notes/components/notes_activity_header.vue b/app/assets/javascripts/notes/components/notes_activity_header.vue new file mode 100644 index 00000000000..e4f88962731 --- /dev/null +++ b/app/assets/javascripts/notes/components/notes_activity_header.vue @@ -0,0 +1,38 @@ +<script> +import DiscussionFilter from './discussion_filter.vue'; + +export default { + components: { + TimelineToggle: () => import('./timeline_toggle.vue'), + DiscussionFilter, + }, + inject: { + showTimelineViewToggle: { + default: false, + }, + }, + props: { + notesFilters: { + type: Array, + required: true, + }, + notesFilterValue: { + type: Number, + default: undefined, + required: false, + }, + }, +}; +</script> + +<template> + <div + class="gl-display-flex gl-sm-align-items-center gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between gl-pt-5 gl-mt-5 gl-border-t" + > + <h2 class="gl-font-size-h1 gl-m-0">{{ __('Activity') }}</h2> + <div class="gl-display-flex gl-gap-3 gl-w-full gl-sm-w-auto gl-mt-3 gl-sm-mt-0"> + <timeline-toggle v-if="showTimelineViewToggle" /> + <discussion-filter :filters="notesFilters" :selected-value="notesFilterValue" /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 37bc8bad305..9c2ff2c3e7f 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -1,7 +1,7 @@ <script> import { mapGetters, mapActions } from 'vuex'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __ } from '~/locale'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; @@ -19,10 +19,12 @@ import DiscussionFilterNote from './discussion_filter_note.vue'; import NoteableDiscussion from './noteable_discussion.vue'; import NoteableNote from './noteable_note.vue'; import SidebarSubscription from './sidebar_subscription.vue'; +import NotesActivityHeader from './notes_activity_header.vue'; export default { name: 'NotesApp', components: { + NotesActivityHeader, NoteableNote, NoteableDiscussion, SystemNote, @@ -46,6 +48,15 @@ export default { type: Object, required: true, }, + notesFilters: { + type: Array, + required: true, + }, + notesFilterValue: { + type: Number, + default: undefined, + required: false, + }, userData: { type: Object, required: false, @@ -221,7 +232,7 @@ export default { .catch(() => { this.setLoadingState(false); this.setNotesFetchedState(true); - createFlash({ + createAlert({ message: __('Something went wrong while fetching comments. Please try again.'), }); }); @@ -281,6 +292,7 @@ export default { <template> <div v-show="shouldShow" id="notes"> <sidebar-subscription :iid="noteableData.iid" :noteable-data="noteableData" /> + <notes-activity-header :notes-filters="notesFilters" :notes-filter-value="notesFilterValue" /> <ordered-layout :slot-keys="slotKeys"> <template #form> <comment-form @@ -292,7 +304,11 @@ export default { <template #comments> <ul id="notes-list" class="notes main-notes-list timeline"> <template v-for="discussion in allDiscussions"> - <skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" /> + <skeleton-loading-container + v-if="discussion.isSkeletonNote" + :key="discussion.id" + class="note-skeleton" + /> <timeline-entry-item v-else-if="discussion.isDraft" :key="discussion.id"> <draft-note :draft="discussion" /> </timeline-entry-item> @@ -327,7 +343,7 @@ export default { :help-page-path="helpPagePath" /> </template> - <discussion-filter-note v-show="commentsDisabled" /> + <discussion-filter-note v-if="commentsDisabled" /> </ul> </template> </ordered-layout> diff --git a/app/assets/javascripts/notes/components/timeline_toggle.vue b/app/assets/javascripts/notes/components/timeline_toggle.vue index 8632eea5d8e..59a3cc2d306 100644 --- a/app/assets/javascripts/notes/components/timeline_toggle.vue +++ b/app/assets/javascripts/notes/components/timeline_toggle.vue @@ -53,6 +53,7 @@ export default { :selected="timelineEnabled" :title="tooltip" :aria-label="tooltip" + data-testid="timeline-toggle-button" @click="toggleTimeline" /> </template> diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index 2bd3488ae1b..734e08dd586 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -61,7 +61,7 @@ export default { <template> <li :class="liClasses" - class="gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border-t" + class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border" > <gl-button ref="toggle" @@ -75,7 +75,7 @@ export default { <user-avatar-link v-for="author in uniqueAuthors" :key="author.username" - class="gl-mr-3" + class="gl-mr-3 reply-author-avatar" :link-href="author.path" :img-alt="author.name" img-css-classes="gl-mr-0!" |