diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
11 files changed, 201 insertions, 110 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 253e1e3b70e..7c610968209 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -3,6 +3,13 @@ import { GlLoadingIcon, GlPagination, GlSprintf } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import Mousetrap from 'mousetrap'; import { mapState, mapGetters, mapActions } from 'vuex'; +import { + keysFor, + MR_PREVIOUS_FILE_IN_DIFF, + MR_NEXT_FILE_IN_DIFF, + MR_COMMITS_NEXT_COMMIT, + MR_COMMITS_PREVIOUS_COMMIT, +} from '~/behaviors/shortcuts/keybindings'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { isSingleViewStyle } from '~/helpers/diffs_helper'; import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils'; @@ -77,6 +84,16 @@ export default { required: false, default: '', }, + endpointCodequality: { + type: String, + required: false, + default: '', + }, + endpointUpdateUser: { + type: String, + required: false, + default: '', + }, projectPath: { type: String, required: true, @@ -153,6 +170,7 @@ export default { plainDiffPath: (state) => state.diffs.plainDiffPath, emailPatchPath: (state) => state.diffs.emailPatchPath, retrievingBatches: (state) => state.diffs.retrievingBatches, + codequalityDiff: (state) => state.diffs.codequalityDiff, }), ...mapState('diffs', [ 'showTreeList', @@ -167,6 +185,7 @@ export default { 'mrReviews', ]), ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']), + ...mapGetters('batchComments', ['draftsCount']), ...mapGetters(['isNotesFetched', 'getNoteableData']), diffs() { if (!this.viewDiffsFileByFile) { @@ -264,6 +283,7 @@ export default { endpointMetadata: this.endpointMetadata, endpointBatch: this.endpointBatch, endpointCoverage: this.endpointCoverage, + endpointUpdateUser: this.endpointUpdateUser, projectPath: this.projectPath, dismissEndpoint: this.dismissEndpoint, showSuggestPopover: this.showSuggestPopover, @@ -272,6 +292,10 @@ export default { mrReviews: this.rehydratedMrReviews, }); + if (this.endpointCodequality) { + this.setCodequalityEndpoint(this.endpointCodequality); + } + if (this.shouldShow) { this.fetchData(); } @@ -316,9 +340,11 @@ export default { ...mapActions('diffs', [ 'moveToNeighboringCommit', 'setBaseConfig', + 'setCodequalityEndpoint', 'fetchDiffFilesMeta', 'fetchDiffFilesBatch', 'fetchCoverageFiles', + 'fetchCodequality', 'startRenderDiffsQueue', 'assignDiscussionsToDiff', 'setHighlightedRow', @@ -342,14 +368,6 @@ export default { refetchDiffData() { this.fetchData(false); }, - startDiffRendering() { - requestIdleCallback( - () => { - this.startRenderDiffsQueue(); - }, - { timeout: 1000 }, - ); - }, needsReload() { return this.diffFiles.length && isSingleViewStyle(this.diffFiles[0]); }, @@ -361,8 +379,6 @@ export default { .then(({ real_size }) => { this.diffFilesLength = parseInt(real_size, 10); if (toggleTree) this.setTreeDisplay(); - - this.startDiffRendering(); }) .catch(() => { createFlash(__('Something went wrong on our end. Please try again!')); @@ -377,7 +393,6 @@ export default { // change when loading the other half of the diff files. this.setDiscussions(); }) - .then(() => this.startDiffRendering()) .catch(() => { createFlash(__('Something went wrong on our end. Please try again!')); }); @@ -386,6 +401,10 @@ export default { this.fetchCoverageFiles(); } + if (this.endpointCodequality) { + this.fetchCodequality(); + } + if (!this.isNotesFetched) { notesEventHub.$emit('fetchNotesData'); } @@ -406,30 +425,23 @@ export default { } }, setEventListeners() { - Mousetrap.bind(['[', 'k', ']', 'j'], (e, combo) => { - switch (combo) { - case '[': - case 'k': - this.jumpToFile(-1); - break; - case ']': - case 'j': - this.jumpToFile(+1); - break; - default: - break; - } - }); + Mousetrap.bind(keysFor(MR_PREVIOUS_FILE_IN_DIFF), () => this.jumpToFile(-1)); + Mousetrap.bind(keysFor(MR_NEXT_FILE_IN_DIFF), () => this.jumpToFile(+1)); if (this.commit) { - Mousetrap.bind('c', () => this.moveToNeighboringCommit({ direction: 'next' })); - Mousetrap.bind('x', () => this.moveToNeighboringCommit({ direction: 'previous' })); + Mousetrap.bind(keysFor(MR_COMMITS_NEXT_COMMIT), () => + this.moveToNeighboringCommit({ direction: 'next' }), + ); + Mousetrap.bind(keysFor(MR_COMMITS_PREVIOUS_COMMIT), () => + this.moveToNeighboringCommit({ direction: 'previous' }), + ); } }, removeEventListeners() { - Mousetrap.unbind(['[', 'k', ']', 'j']); - Mousetrap.unbind('c'); - Mousetrap.unbind('x'); + Mousetrap.unbind(keysFor(MR_PREVIOUS_FILE_IN_DIFF)); + Mousetrap.unbind(keysFor(MR_NEXT_FILE_IN_DIFF)); + Mousetrap.unbind(keysFor(MR_COMMITS_NEXT_COMMIT)); + Mousetrap.unbind(keysFor(MR_COMMITS_PREVIOUS_COMMIT)); }, jumpToFile(step) { const targetIndex = this.currentDiffIndex + step; @@ -489,6 +501,7 @@ export default { <div v-if="renderFileTree" :style="{ width: `${treeWidth}px` }" + :class="{ 'review-bar-visible': draftsCount > 0 }" class="diff-tree-list js-diff-tree-list px-3 pr-md-0" > <panel-resizer diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index 92b317eb3f0..bc0f2fb0b69 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -1,7 +1,6 @@ <script> /* eslint-disable vue/no-v-html */ -import { GlButtonGroup, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; -import { mapActions } from 'vuex'; +import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui'; import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; @@ -9,7 +8,6 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { setUrlParams } from '../../lib/utils/url_utility'; import initUserPopovers from '../../user_popovers'; /** @@ -24,14 +22,6 @@ import initUserPopovers from '../../user_popovers'; * coexist, but there is an issue to remove the duplication. * https://gitlab.com/gitlab-org/gitlab-foss/issues/51613 * - * EXCEPTION WARNING - * 1. The commit navigation buttons (next neighbor, previous neighbor) - * are not duplicated because: - * - We don't have the same data available on the Rails side (yet, - * without backend work) - * - This Vue component should always be what's used when in the - * context of an MR diff, so the HAML should never have any idea - * about navigating among commits. */ export default { @@ -42,7 +32,6 @@ export default { CommitPipelineStatus, GlButtonGroup, GlButton, - GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -94,28 +83,12 @@ export default { // Strip the newline at the beginning return this.commit.description_html.replace(/^
/, ''); }, - nextCommitUrl() { - return this.commit.next_commit_id - ? setUrlParams({ commit_id: this.commit.next_commit_id }) - : ''; - }, - previousCommitUrl() { - return this.commit.prev_commit_id - ? setUrlParams({ commit_id: this.commit.prev_commit_id }) - : ''; - }, - hasNeighborCommits() { - return this.commit.next_commit_id || this.commit.prev_commit_id; - }, }, created() { this.$nextTick(() => { initUserPopovers(this.$el.querySelectorAll('.js-user-link')); }); }, - methods: { - ...mapActions('diffs', ['moveToNeighboringCommit']), - }, }; </script> @@ -146,38 +119,6 @@ export default { class="input-group-text" /> </gl-button-group> - <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3"> - <gl-button-group> - <gl-button - :href="previousCommitUrl" - :disabled="!commit.prev_commit_id" - @click.prevent="moveToNeighboringCommit({ direction: 'previous' })" - > - <span - v-if="!commit.prev_commit_id" - v-gl-tooltip - class="h-100 w-100 position-absolute" - :title="__('You\'re at the first commit')" - ></span> - <gl-icon name="chevron-left" /> - {{ __('Prev') }} - </gl-button> - <gl-button - :href="nextCommitUrl" - :disabled="!commit.next_commit_id" - @click.prevent="moveToNeighboringCommit({ direction: 'next' })" - > - <span - v-if="!commit.next_commit_id" - v-gl-tooltip - class="h-100 w-100 position-absolute" - :title="__('You\'re at the last commit')" - ></span> - {{ __('Next') }} - <gl-icon name="chevron-right" /> - </gl-button> - </gl-button-group> - </div> </div> <div> <div class="d-flex float-left align-items-center align-self-start"> diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 6b1e2bfb34e..7526c5347f7 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -1,7 +1,8 @@ <script> -import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { __ } from '~/locale'; +import { setUrlParams } from '../../lib/utils/url_utility'; import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants'; import eventHub from '../event_hub'; import CompareDropdownLayout from './compare_dropdown_layout.vue'; @@ -11,7 +12,9 @@ import SettingsDropdown from './settings_dropdown.vue'; export default { components: { CompareDropdownLayout, + GlIcon, GlLink, + GlButtonGroup, GlButton, GlSprintf, SettingsDropdown, @@ -56,6 +59,19 @@ export default { hasSourceVersions() { return this.diffCompareDropdownSourceVersions.length > 0; }, + nextCommitUrl() { + return this.commit.next_commit_id + ? setUrlParams({ commit_id: this.commit.next_commit_id }) + : ''; + }, + previousCommitUrl() { + return this.commit.prev_commit_id + ? setUrlParams({ commit_id: this.commit.prev_commit_id }) + : ''; + }, + hasNeighborCommits() { + return this.commit && (this.commit.next_commit_id || this.commit.prev_commit_id); + }, }, created() { this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES; @@ -65,6 +81,7 @@ export default { expandAllFiles() { eventHub.$emit(EVT_EXPAND_ALL_FILES); }, + ...mapActions('diffs', ['moveToNeighboringCommit']), }, }; </script> @@ -84,6 +101,7 @@ export default { icon="file-tree" class="gl-mr-3 js-toggle-tree-list" :title="toggleFileBrowserTitle" + :aria-label="toggleFileBrowserTitle" :selected="showTreeList" @click="setShowTreeList({ showTreeList: !showTreeList })" /> @@ -91,6 +109,38 @@ export default { {{ __('Viewing commit') }} <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link> </div> + <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3"> + <gl-button-group> + <gl-button + :href="previousCommitUrl" + :disabled="!commit.prev_commit_id" + @click.prevent="moveToNeighboringCommit({ direction: 'previous' })" + > + <span + v-if="!commit.prev_commit_id" + v-gl-tooltip + class="h-100 w-100 position-absolute position-top-0 position-left-0" + :title="__('You\'re at the first commit')" + ></span> + <gl-icon name="chevron-left" /> + {{ __('Prev') }} + </gl-button> + <gl-button + :href="nextCommitUrl" + :disabled="!commit.next_commit_id" + @click.prevent="moveToNeighboringCommit({ direction: 'next' })" + > + <span + v-if="!commit.next_commit_id" + v-gl-tooltip + class="h-100 w-100 position-absolute position-top-0 position-left-0" + :title="__('You\'re at the last commit')" + ></span> + {{ __('Next') }} + <gl-icon name="chevron-right" /> + </gl-button> + </gl-button-group> + </div> <gl-sprintf v-else-if="hasSourceVersions" class="d-flex align-items-center compare-versions-container" diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index d0d457d8582..5e05ec87f84 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -68,6 +68,7 @@ export default { }" type="button" class="js-diff-notes-toggle" + :aria-label="__('Show comments')" @click="toggleDiscussion({ discussionId: discussion.id })" > <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" /> diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index ca4543f7002..bdbc13a38c4 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -80,7 +80,7 @@ export default { genericError: GENERIC_ERROR, }, computed: { - ...mapState('diffs', ['currentDiffFileId']), + ...mapState('diffs', ['currentDiffFileId', 'codequalityDiff']), ...mapGetters(['isNotesFetched']), ...mapGetters('diffs', ['getDiffFileDiscussions']), viewBlobHref() { @@ -148,6 +148,11 @@ export default { return loggedIn && featureOn; }, + hasCodequalityChanges() { + return ( + this.codequalityDiff?.files && this.codequalityDiff?.files[this.file.file_path]?.length > 0 + ); + }, }, watch: { 'file.id': { @@ -294,6 +299,7 @@ export default { :add-merge-request-buttons="true" :view-diffs-file-by-file="viewDiffsFileByFile" :show-local-file-reviews="showLocalFileReviews" + :has-codequality-changes="hasCodequalityChanges" class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100" :class="hasBodyClasses.header" @toggleFile="handleToggle" diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 1f50b3a38a6..3b4e21ab61b 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -41,6 +41,7 @@ export default { GlDropdownDivider, GlFormCheckbox, GlLoadingIcon, + CodeQualityBadge: () => import('ee_component/diffs/components/code_quality_badge.vue'), }, directives: { GlTooltip: GlTooltipDirective, @@ -49,6 +50,7 @@ export default { mixins: [glFeatureFlagsMixin()], i18n: { ...DIFF_FILE_HEADER, + compareButtonLabel: s__('Compare submodule commit revisions'), }, props: { discussionPath: { @@ -94,6 +96,11 @@ export default { required: false, default: false, }, + hasCodequalityChanges: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -192,6 +199,9 @@ export default { isReviewable() { return reviewable(this.diffFile); }, + externalUrlLabel() { + return sprintf(__('View on %{url}'), { url: this.diffFile.formatted_external_url }); + }, }, methods: { ...mapActions('diffs', [ @@ -323,6 +333,8 @@ export default { data-track-property="diff_copy_file" /> + <code-quality-badge v-if="hasCodequalityChanges" class="gl-mr-2" /> + <small v-if="isModeChanged" ref="fileMode" class="mr-1"> {{ diffFile.a_mode }} → {{ diffFile.b_mode }} </small> @@ -352,7 +364,8 @@ export default { ref="externalLink" v-gl-tooltip.hover :href="diffFile.external_url" - :title="`View on ${diffFile.formatted_external_url}`" + :title="externalUrlLabel" + :aria-label="externalUrlLabel" target="_blank" data-track-event="click_toggle_external_button" data-track-label="diff_toggle_external_button" @@ -444,7 +457,8 @@ export default { v-gl-tooltip.hover v-safe-html="submoduleDiffCompareLinkText" class="submodule-compare" - :title="s__('Compare submodule commit revisions')" + :title="$options.i18n.compareButtonLabel" + :aria-label="$options.i18n.compareButtonLabel" :href="diffFile.submodule_compare.url" /> </div> diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index 2f09f2e24b2..51da1966630 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -10,7 +10,12 @@ import { } from '../../notes/components/multiline_comment_utils'; import noteForm from '../../notes/components/note_form.vue'; import autosave from '../../notes/mixins/autosave'; -import { DIFF_NOTE_TYPE, INLINE_DIFF_LINES_KEY, PARALLEL_DIFF_VIEW_TYPE } from '../constants'; +import { + DIFF_NOTE_TYPE, + INLINE_DIFF_LINES_KEY, + PARALLEL_DIFF_VIEW_TYPE, + OLD_LINE_TYPE, +} from '../constants'; export default { components: { @@ -113,6 +118,34 @@ export default { const lines = getDiffLines(); return commentLineOptions(lines, this.line, this.line.line_code, side); }, + commentLines() { + if (!this.selectedCommentPosition) return []; + + const lines = []; + const { start, end } = this.selectedCommentPosition; + const diffLines = this.diffFile[INLINE_DIFF_LINES_KEY]; + let isAdding = false; + + for (let i = 0, diffLinesLength = diffLines.length - 1; i <= diffLinesLength; i += 1) { + const line = diffLines[i]; + + if (start.line_code === line.line_code) { + isAdding = true; + } + + if (isAdding) { + if (line.type !== OLD_LINE_TYPE) { + lines.push(line); + } + + if (end.line_code === line.line_code) { + break; + } + } + } + + return lines; + }, }, mounted() { if (this.isLoggedIn) { @@ -177,6 +210,7 @@ export default { :is-editing="true" :line-code="line.line_code" :line="line" + :lines="commentLines" :help-page-path="helpPagePath" :diff-file="diffFile" :show-suggest-popover="showSuggestPopover" diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index ab6890d66b5..8d398a2ded4 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -1,5 +1,6 @@ <script> -import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +/* eslint-disable vue/no-v-html */ +import { GlTooltipDirective } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -12,17 +13,20 @@ import { CONFLICT_THEIR, CONFLICT_MARKER, } from '../constants'; +import { + getInteropInlineAttributes, + getInteropOldSideAttributes, + getInteropNewSideAttributes, +} from '../utils/interoperability'; import DiffGutterAvatars from './diff_gutter_avatars.vue'; import * as utils from './diff_row_utils'; export default { components: { - GlIcon, DiffGutterAvatars, }, directives: { GlTooltip: GlTooltipDirective, - SafeHtml, }, mixins: [glFeatureFlagsMixin()], props: { @@ -117,6 +121,16 @@ export default { isLeftConflictMarker() { return [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(this.line.left?.type); }, + interopLeftAttributes() { + if (this.inline) { + return getInteropInlineAttributes(this.line.left); + } + + return getInteropOldSideAttributes(this.line.left); + }, + interopRightAttributes() { + return getInteropNewSideAttributes(this.line.right); + }, }, mounted() { this.scrollToLineIfNeededParallel(this.line); @@ -182,6 +196,7 @@ export default { <div data-testid="left-side" class="diff-grid-left left-side" + v-bind="interopLeftAttributes" @dragover.prevent @dragenter="onDragEnter(line.left, index)" @dragend="onDragEnd" @@ -203,14 +218,13 @@ export default { <button :draggable="glFeatures.dragCommentSelection" type="button" - class="add-diff-note note-button js-add-diff-note-button qa-diff-comment" + class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button qa-diff-comment" + data-qa-selector="diff_comment_button" :class="{ 'gl-cursor-grab': dragging }" :disabled="line.left.commentsDisabled" @click="handleCommentButton(line.left)" @dragstart="onDragStart({ ...line.left, index })" - > - <gl-icon :size="12" name="comment" /> - </button> + ></button> </span> </template> <a @@ -258,7 +272,7 @@ export default { @mousedown="handleParallelLineMouseDown" > <strong v-if="isLeftConflictMarker">{{ conflictText(line.left) }}</strong> - <span v-else v-safe-html="line.left.rich_text"></span> + <span v-else v-html="line.left.rich_text"></span> </div> </template> <template v-else-if="!inline || (line.left && line.left.type === $options.CONFLICT_MARKER)"> @@ -288,6 +302,7 @@ export default { v-if="!inline" data-testid="right-side" class="diff-grid-right right-side" + v-bind="interopRightAttributes" @dragover.prevent @dragenter="onDragEnter(line.right, index)" @dragend="onDragEnd" @@ -305,14 +320,12 @@ export default { <button :draggable="glFeatures.dragCommentSelection" type="button" - class="add-diff-note note-button js-add-diff-note-button qa-diff-comment" + class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button qa-diff-comment" :class="{ 'gl-cursor-grab': dragging }" :disabled="line.right.commentsDisabled" @click="handleCommentButton(line.right)" @dragstart="onDragStart({ ...line.right, index })" - > - <gl-icon :size="12" name="comment" /> - </button> + ></button> </span> </template> <a @@ -349,7 +362,6 @@ export default { <div :id="line.right.line_code" :key="line.right.rich_text" - v-safe-html="line.right.rich_text" :class="[ line.right.type, { @@ -364,7 +376,7 @@ export default { <strong v-if="line.right.type === $options.CONFLICT_MARKER_THEIR">{{ conflictText(line.right) }}</strong> - <span v-else v-safe-html="line.right.rich_text"></span> + <span v-else v-html="line.right.rich_text"></span> </div> </template> <template v-else> diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue index 3d05202fb2d..5572338908f 100644 --- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue +++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue @@ -122,6 +122,7 @@ export default { :disabled="!shouldToggleDiscussion" class="js-image-badge" type="button" + :aria-label="__('Show comments')" @click="clickedToggle(discussion)" > <gl-icon v-if="showCommentIcon" name="image-comment-dark" :size="24" /> diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue index fb9202c5aab..25403b1547e 100644 --- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue +++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue @@ -2,6 +2,7 @@ import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { CONTEXT_LINE_CLASS_NAME } from '../constants'; +import { getInteropInlineAttributes } from '../utils/interoperability'; import DiffGutterAvatars from './diff_gutter_avatars.vue'; import { isHighlighted, @@ -96,6 +97,9 @@ export default { shouldShowAvatarsOnGutter() { return this.line.hasDiscussions; }, + interopAttrs() { + return getInteropInlineAttributes(this.line); + }, }, mounted() { this.scrollToLineIfNeededInline(this.line); @@ -124,6 +128,7 @@ export default { :id="inlineRowId" :class="classNameMap" class="line_holder" + v-bind="interopAttrs" @mouseover="handleMouseMove" @mouseout="handleMouseMove" > @@ -140,8 +145,8 @@ export default { ref="addDiffNoteButton" type="button" class="add-diff-note note-button js-add-diff-note-button" - data-qa-selector="diff_comment_button" :disabled="line.commentsDisabled" + :aria-label="addCommentTooltip" @click="handleCommentButton" > <gl-icon :size="12" name="comment" /> diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue index 3d20dfd0c9b..96946d0fd88 100644 --- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue +++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue @@ -3,6 +3,10 @@ import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gi import $ from 'jquery'; import { mapActions, mapGetters, mapState } from 'vuex'; import { CONTEXT_LINE_CLASS_NAME, PARALLEL_DIFF_VIEW_TYPE } from '../constants'; +import { + getInteropOldSideAttributes, + getInteropNewSideAttributes, +} from '../utils/interoperability'; import DiffGutterAvatars from './diff_gutter_avatars.vue'; import * as utils from './diff_row_utils'; @@ -108,6 +112,12 @@ export default { this.line.hasDiscussionsRight, ); }, + interopLeftAttributes() { + return getInteropOldSideAttributes(this.line.left); + }, + interopRightAttributes() { + return getInteropNewSideAttributes(this.line.right); + }, }, mounted() { this.scrollToLineIfNeededParallel(this.line); @@ -185,6 +195,7 @@ export default { type="button" class="add-diff-note note-button js-add-diff-note-button qa-diff-comment" :disabled="line.left.commentsDisabled" + :aria-label="addCommentTooltipLeft" @click="handleCommentButton(line.left)" > <gl-icon :size="12" name="comment" /> @@ -217,6 +228,7 @@ export default { :key="line.left.line_code" v-safe-html="line.left.rich_text" :class="parallelViewLeftLineType" + v-bind="interopLeftAttributes" class="line_content with-coverage parallel left-side" @mousedown="handleParallelLineMouseDown" ></td> @@ -241,6 +253,7 @@ export default { type="button" class="add-diff-note note-button js-add-diff-note-button qa-diff-comment" :disabled="line.right.commentsDisabled" + :aria-label="addCommentTooltipRight" @click="handleCommentButton(line.right)" > <gl-icon :size="12" name="comment" /> @@ -283,6 +296,7 @@ export default { hll: isHighlighted, }, ]" + v-bind="interopRightAttributes" class="line_content with-coverage parallel right-side" @mousedown="handleParallelLineMouseDown" ></td> |