diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 11:10:13 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 11:10:13 +0000 |
commit | 0ea3fcec397b69815975647f5e2aa5fe944a8486 (patch) | |
tree | 7979381b89d26011bcf9bdc989a40fcc2f1ed4ff /app/assets/javascripts/notes/components | |
parent | 72123183a20411a36d607d70b12d57c484394c8e (diff) | |
download | gitlab-ce-0ea3fcec397b69815975647f5e2aa5fe944a8486.tar.gz |
Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/notes/components')
14 files changed, 126 insertions, 100 deletions
diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue index 9638c20e28c..84bda1b0b5c 100644 --- a/app/assets/javascripts/notes/components/comment_field_layout.vue +++ b/app/assets/javascripts/notes/components/comment_field_layout.vue @@ -14,7 +14,7 @@ export default { type: Object, required: true, }, - noteIsConfidential: { + isInternalNote: { type: Boolean, required: false, default: false, @@ -44,7 +44,7 @@ export default { return this.noteableData.issue_email_participants?.map(({ email }) => email) || []; }, showEmailParticipantsWarning() { - return this.emailParticipants.length && !this.noteIsConfidential; + return this.emailParticipants.length && !this.isInternalNote; }, }, }; diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 8ef071034e5..e7ac27c5e3e 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -60,7 +60,7 @@ export default { note: '', noteType: constants.COMMENT, errors: [], - noteIsConfidential: false, + noteIsInternal: false, isSubmitting: false, }; }, @@ -91,13 +91,13 @@ export default { }, commentButtonTitle() { const { comment, internalComment, startThread, startInternalThread } = this.$options.i18n; - if (this.noteIsConfidential) { + if (this.noteIsInternal) { return this.noteType === constants.COMMENT ? internalComment : startInternalThread; } return this.noteType === constants.COMMENT ? comment : startThread; }, textareaPlaceholder() { - return this.noteIsConfidential + return this.noteIsInternal ? this.$options.i18n.bodyPlaceholderInternal : this.$options.i18n.bodyPlaceholder; }, @@ -110,7 +110,7 @@ export default { canCreateNote() { return this.getNoteableData.current_user.can_create_note; }, - canSetConfidential() { + canSetInternalNote() { return this.getNoteableData.current_user.can_update && (this.isIssue || this.isEpic); }, issueActionButtonTitle() { @@ -172,7 +172,7 @@ export default { trackingLabel() { return slugifyWithUnderscore(`${this.commentButtonTitle} button`); }, - confidentialNotesEnabled() { + internalNotesEnabled() { return Boolean(this.glFeatures.confidentialNotes); }, disableSubmitButton() { @@ -217,7 +217,11 @@ export default { note: { noteable_type: this.noteableType, noteable_id: this.getNoteableData.id, - confidential: this.noteIsConfidential, + // Internal notes were identified as `confidential` + // before we decided to treat them as _internal_ + // so now until API is updated we need to use `confidential` + // in request payload. + confidential: this.noteIsInternal, note: this.note, }, merge_request_diff_head_sha: this.getNoteableData.diff_head_sha, @@ -292,7 +296,7 @@ export default { if (shouldClear) { this.note = ''; - this.noteIsConfidential = false; + this.noteIsInternal = false; this.resizeTextarea(); this.$refs.markdownField.previewMarkdown = false; } @@ -356,7 +360,7 @@ export default { <comment-field-layout :with-alert-container="true" :noteable-data="getNoteableData" - :note-is-confidential="noteIsConfidential" + :is-internal-note="noteIsInternal" :noteable-type="noteableType" > <markdown-field @@ -410,17 +414,17 @@ export default { </template> <template v-else> <gl-form-checkbox - v-if="confidentialNotesEnabled && canSetConfidential" - v-model="noteIsConfidential" - class="gl-mb-6" - data-testid="confidential-note-checkbox" + v-if="internalNotesEnabled && canSetInternalNote" + v-model="noteIsInternal" + class="gl-mb-2" + data-testid="internal-note-checkbox" > - {{ $options.i18n.confidential }} + {{ $options.i18n.internal }} <gl-icon v-gl-tooltip:tooltipcontainer.bottom name="question" :size="16" - :title="$options.i18n.confidentialVisibility" + :title="$options.i18n.internalVisibility" class="gl-text-gray-500" /> </gl-form-checkbox> @@ -429,7 +433,7 @@ export default { class="gl-mr-3" :disabled="disableSubmitButton" :tracking-label="trackingLabel" - :is-internal-note="noteIsConfidential" + :is-internal-note="noteIsInternal" :noteable-display-name="noteableDisplayName" :discussions-require-resolution="discussionsRequireResolution" @click="handleSave" diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue index 5210d2ca287..0e213028c7c 100644 --- a/app/assets/javascripts/notes/components/diff_discussion_header.vue +++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue @@ -97,14 +97,17 @@ export default { </script> <template> - <div class="discussion-header note-wrapper"> - <div v-once class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-mr-4"> + <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-ml-3 gl-mr-4" + > <user-avatar-link v-if="author" :link-href="author.path" :img-src="author.avatar_url" :img-alt="author.name" - :img-size="32" + :img-size="24" :img-css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (https://gitlab.com/groups/gitlab-org/-/epics/7731) */" /> </div> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index e2b0c7fee32..3bdf8349a12 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -1,8 +1,5 @@ <script> -import { - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue'; @@ -16,7 +13,7 @@ const FIRST_CHAR_REGEX = /^(\+|-| )/; export default { components: { DiffFileHeader, - GlSkeletonLoading, + GlSkeletonLoader, DiffViewer, ImageDiffOverlay, }, @@ -107,7 +104,7 @@ export default { <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block"> {{ __('Unable to load the diff') }} <button - class="btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button" + class="gl-button btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button gl-reset-font-size!" @click="fetchDiff" > {{ __('Try again') }} @@ -115,7 +112,7 @@ export default { </td> <td v-else class="line_content js-success-lazy-load"> <span></span> - <gl-skeleton-loading /> + <gl-skeleton-loader /> <span></span> </td> </tr> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index f746f7ed0ed..eedcb0c09d4 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -75,25 +75,25 @@ export default { <gl-button-group class="gl-ml-3"> <gl-button v-gl-tooltip.hover - :title="__('Jump to previous unresolved thread')" - :aria-label="__('Jump to previous unresolved thread')" + :title="__('Go to previous unresolved thread')" + :aria-label="__('Go to previous unresolved thread')" class="discussion-previous-btn gl-rounded-base! gl-px-2!" data-track-action="click_button" data-track-label="mr_previous_unresolved_thread" data-track-property="click_previous_unresolved_thread_top" - icon="angle-up" + icon="chevron-lg-up" category="tertiary" @click="jumpToPreviousDiscussion" /> <gl-button v-gl-tooltip.hover - :title="__('Jump to next unresolved thread')" - :aria-label="__('Jump to next unresolved thread')" + :title="__('Go to next unresolved thread')" + :aria-label="__('Go to next unresolved thread')" class="discussion-next-btn gl-rounded-base! gl-px-2!" data-track-action="click_button" data-track-label="mr_next_unresolved_thread" data-track-property="click_next_unresolved_thread_top" - icon="angle-down" + icon="chevron-lg-down" category="tertiary" @click="jumpToNextDiscussion" /> diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue index ecf42fce1d2..1875d48e7b2 100644 --- a/app/assets/javascripts/notes/components/email_participants_warning.vue +++ b/app/assets/javascripts/notes/components/email_participants_warning.vue @@ -58,7 +58,7 @@ export default { <div class="issuable-note-warning" data-testid="email-participants-warning"> <gl-sprintf :message="message"> <template #andMore> - <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants"> + <button type="button" class="gl-button btn-link" @click="showMoreParticipants"> {{ moreLabel }} </button> </template> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 1bd2f879e6c..10e3f57a56d 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -294,14 +294,20 @@ export default { /> <emoji-picker v-if="canAwardEmoji" - toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!" + toggle-class="note-action-button note-emoji-button btn-icon btn-default-tertiary" data-testid="note-emoji-button" @click="setAwardEmoji" > <template #button-content> - <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" /> - <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" /> - <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" /> + <gl-icon class="award-control-icon-neutral gl-button-icon gl-icon" name="slight-smile" /> + <gl-icon + class="award-control-icon-positive gl-button-icon gl-icon gl-left-3!" + name="smiley" + /> + <gl-icon + class="award-control-icon-super-positive gl-button-icon gl-icon gl-left-3!" + name="smile" + /> </template> </emoji-picker> <reply-button diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 6c9bc4461c2..cc74c2ee605 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -8,6 +8,7 @@ import { __ } from '~/locale'; import '~/behaviors/markdown/render_gfm'; import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; import autosave from '../mixins/autosave'; +import { INTERNAL_NOTE_CLASSES } from '../constants'; import noteAttachment from './note_attachment.vue'; import noteAwardsList from './note_awards_list.vue'; import noteEditedText from './note_edited_text.vue'; @@ -54,6 +55,11 @@ export default { required: false, default: '', }, + isInternalNote: { + type: Boolean, + required: false, + default: false, + }, }, computed: { ...mapGetters(['getDiscussion', 'suggestionsCount', 'getSuggestionsFilePaths']), @@ -95,6 +101,12 @@ export default { return escape(suggestion); }, + internalNoteContainerClasses() { + if (this.isInternalNote && !this.isEditing) { + return INTERNAL_NOTE_CLASSES; + } + return ''; + }, }, mounted() { this.renderGFM(); @@ -160,53 +172,61 @@ export default { </script> <template> - <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body"> - <suggestions - v-if="hasSuggestion && !isEditing" - :suggestions="note.suggestions" - :suggestions-count="suggestionsCount" - :batch-suggestions-info="batchSuggestionsInfo" - :note-html="note.note_html" - :line-type="lineType" - :help-page-path="helpPagePath" - :default-commit-message="commitMessage" - :failed-to-load-metadata="failedToLoadMetadata" - @apply="applySuggestion" - @applyBatch="applySuggestionBatch" - @addToBatch="addSuggestionToBatch" - @removeFromBatch="removeSuggestionFromBatch" - /> - <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div> - <note-form - v-if="isEditing" - ref="noteForm" - :note-body="noteBody" - :note-id="note.id" - :line="line" - :note="note" - :save-button-title="saveButtonTitle" - :help-page-path="helpPagePath" - :discussion="discussion" - :resolve-discussion="note.resolve_discussion" - @handleFormUpdate="handleFormUpdate" - @cancelForm="formCancelHandler" - /> - <!-- eslint-disable vue/no-mutating-props --> - <textarea - v-if="canEdit" - v-model="note.note" - :data-update-url="note.path" - class="hidden js-task-list-field" - dir="auto" - ></textarea> - <!-- eslint-enable vue/no-mutating-props --> - <note-edited-text - v-if="note.last_edited_at" - :edited-at="note.last_edited_at" - :edited-by="note.last_edited_by" - action-text="Edited" - class="note_edited_ago" - /> + <div + ref="note-body" + :class="{ + 'js-task-list-container': canEdit, + }" + class="note-body" + > + <div :class="internalNoteContainerClasses" data-testid="note-internal-container"> + <suggestions + v-if="hasSuggestion && !isEditing" + :suggestions="note.suggestions" + :suggestions-count="suggestionsCount" + :batch-suggestions-info="batchSuggestionsInfo" + :note-html="note.note_html" + :line-type="lineType" + :help-page-path="helpPagePath" + :default-commit-message="commitMessage" + :failed-to-load-metadata="failedToLoadMetadata" + @apply="applySuggestion" + @applyBatch="applySuggestionBatch" + @addToBatch="addSuggestionToBatch" + @removeFromBatch="removeSuggestionFromBatch" + /> + <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div> + <note-form + v-if="isEditing" + ref="noteForm" + :note-body="noteBody" + :note-id="note.id" + :line="line" + :note="note" + :save-button-title="saveButtonTitle" + :help-page-path="helpPagePath" + :discussion="discussion" + :resolve-discussion="note.resolve_discussion" + @handleFormUpdate="handleFormUpdate" + @cancelForm="formCancelHandler" + /> + <!-- eslint-disable vue/no-mutating-props --> + <textarea + v-if="canEdit" + v-model="note.note" + :data-update-url="note.path" + class="hidden js-task-list-field" + dir="auto" + ></textarea> + <!-- eslint-enable vue/no-mutating-props --> + <note-edited-text + v-if="note.last_edited_at" + :edited-at="note.last_edited_at" + :edited-by="note.last_edited_by" + action-text="Edited" + class="note_edited_ago" + /> + </div> <note-awards-list v-if="note.award_emoji && note.award_emoji.length" :note-id="note.id" diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index 5dd032abd72..a4cd20e6db8 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -329,7 +329,7 @@ export default { <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form"> <comment-field-layout :noteable-data="getNoteableData" - :note-is-confidential="discussion.confidential" + :is-internal-note="discussion.confidential" > <markdown-field :markdown-preview-path="markdownPreviewPath" diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 1ad9d593ccc..9917249f0db 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -67,7 +67,7 @@ export default { required: false, default: true, }, - isConfidential: { + isInternalNote: { type: Boolean, required: false, default: false, @@ -110,7 +110,7 @@ export default { authorName() { return this.author.name; }, - noteConfidentialityTooltip() { + internalNoteTooltip() { return s__('Notes|This internal note will always remain confidential'); }, }, @@ -231,12 +231,13 @@ export default { <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" /> </template> <gl-badge - v-if="isConfidential" + v-if="isInternalNote" v-gl-tooltip:tooltipcontainer.bottom data-testid="internalNoteIndicator" variant="warning" size="sm" - :title="noteConfidentialityTooltip" + class="gl-mb-3 gl-ml-2" + :title="internalNoteTooltip" > {{ __('Internal note') }} </gl-badge> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 0f5a517a4c5..c5d174ed890 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -108,7 +108,7 @@ export default { return this.discussion.notes.slice(0, 1)[0]; }, saveButtonTitle() { - return this.discussion.confidential ? __('Reply internally') : __('Comment'); + return this.discussion.confidential ? __('Reply internally') : __('Reply'); }, shouldShowJumpToNextDiscussion() { return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion'); diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index cda22b58c5b..af0c1e9619e 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -447,7 +447,7 @@ export default { :author="author" :created-at="note.created_at" :note-id="note.id" - :is-confidential="note.confidential" + :is-internal-note="note.confidential" :noteable-type="noteableType" > <template #note-header-info> @@ -493,9 +493,10 @@ export default { <note-body ref="noteBody" :note="note" + :can-edit="note.current_user.can_edit" + :is-internal-note="note.confidential" :line="line" :file="diffFile" - :can-edit="note.current_user.can_edit" :is-editing="isEditing" :help-page-path="helpPagePath" @handleFormUpdate="formUpdateHandler" diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 7d8d23335e0..754c2917182 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -3,7 +3,6 @@ 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'; @@ -169,7 +168,6 @@ export default { updated() { this.$nextTick(() => { highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')); - initUserPopovers(this.$el.querySelectorAll('.js-user-link')); }); }, beforeDestroy() { @@ -212,10 +210,6 @@ export default { this.setFetchingState(true); - if (this.glFeatures.paginatedNotes) { - return this.initPolling(); - } - return this.fetchDiscussions(this.getFetchDiscussionsConfig()) .then(this.initPolling) .then(() => { diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index 65b3fd6f8b3..8cd4477a3bb 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -72,7 +72,7 @@ export default { {{ replies.length }} {{ n__('reply', 'replies', replies.length) }} </gl-button> {{ __('Last reply by') }} - <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2"> + <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button"> {{ lastReply.author.name }} </a> <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" /> |