diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
10 files changed, 126 insertions, 162 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 66d06a3a1b6..5707e4d67f9 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -26,10 +26,8 @@ import { TREE_LIST_WIDTH_STORAGE_KEY, INITIAL_TREE_WIDTH, MIN_TREE_WIDTH, - MAX_TREE_WIDTH, TREE_HIDE_STATS_WIDTH, MR_TREE_SHOW_KEY, - CENTERED_LIMITED_CONTAINER_CLASSES, ALERT_OVERFLOW_HIDDEN, ALERT_MERGE_CONFLICT, ALERT_COLLAPSED_FILES, @@ -55,6 +53,7 @@ import DiffFile from './diff_file.vue'; import HiddenFilesWarning from './hidden_files_warning.vue'; import NoChanges from './no_changes.vue'; import TreeList from './tree_list.vue'; +import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync'; export default { name: 'DiffsApp', @@ -64,8 +63,7 @@ export default { DynamicScrollerItem: () => import('vendor/vue-virtual-scroller').then(({ DynamicScrollerItem }) => DynamicScrollerItem), PreRenderer: () => import('./pre_renderer.vue').then((PreRenderer) => PreRenderer), - VirtualScrollerScrollSync: () => - import('./virtual_scroller_scroll_sync').then((VSSSync) => VSSSync), + VirtualScrollerScrollSync, CompareVersions, DiffFile, NoChanges, @@ -253,13 +251,6 @@ export default { hideFileStats() { return this.treeWidth <= TREE_HIDE_STATS_WIDTH; }, - isLimitedContainer() { - if (this.glFeatures.mrChangesFluidLayout) { - return false; - } - - return !this.renderFileTree && !this.isParallelView && !this.isFluidLayout; - }, isFullChangeset() { return this.startVersion === null && this.latestDiff; }, @@ -395,8 +386,6 @@ export default { this.adjustView(); this.subscribeToEvents(); - this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES; - this.unwatchDiscussions = this.$watch( () => `${this.diffFiles.length}:${this.$store.state.notes.discussions.length}`, () => this.setDiscussions(), @@ -417,10 +406,8 @@ export default { this.unsubscribeFromEvents(); this.removeEventListeners(); - if (window.gon?.features?.diffsVirtualScrolling) { - diffsEventHub.$off('scrollToFileHash', this.scrollVirtualScrollerToFileHash); - diffsEventHub.$off('scrollToIndex', this.scrollVirtualScrollerToIndex); - } + diffsEventHub.$off('scrollToFileHash', this.scrollVirtualScrollerToFileHash); + diffsEventHub.$off('scrollToIndex', this.scrollVirtualScrollerToIndex); }, methods: { ...mapActions(['startTaskList']), @@ -533,32 +520,27 @@ export default { ); } - if ( - window.gon?.features?.diffsVirtualScrolling || - window.gon?.features?.diffSearchingUsageData - ) { - let keydownTime; - Mousetrap.bind(['mod+f', 'mod+g'], () => { - keydownTime = new Date().getTime(); - }); + let keydownTime; + Mousetrap.bind(['mod+f', 'mod+g'], () => { + keydownTime = new Date().getTime(); + }); - window.addEventListener('blur', () => { - if (keydownTime) { - const delta = new Date().getTime() - keydownTime; + window.addEventListener('blur', () => { + if (keydownTime) { + const delta = new Date().getTime() - keydownTime; - // To make sure the user is using the find function we need to wait for blur - // and max 1000ms to be sure it the search box is filtered - if (delta >= 0 && delta < 1000) { - this.disableVirtualScroller(); + // To make sure the user is using the find function we need to wait for blur + // and max 1000ms to be sure it the search box is filtered + if (delta >= 0 && delta < 1000) { + this.disableVirtualScroller(); - if (window.gon?.features?.diffSearchingUsageData) { - api.trackRedisHllUserEvent('i_code_review_user_searches_diff'); - api.trackRedisCounterEvent('diff_searches'); - } + if (window.gon?.features?.usageDataDiffSearches) { + api.trackRedisHllUserEvent('i_code_review_user_searches_diff'); + api.trackRedisCounterEvent('diff_searches'); } } - }); - } + } + }); }, removeEventListeners() { Mousetrap.unbind(keysFor(MR_PREVIOUS_FILE_IN_DIFF)); @@ -600,8 +582,6 @@ export default { this.virtualScrollCurrentIndex = -1; }, scrollVirtualScrollerToDiffNote() { - if (!window.gon?.features?.diffsVirtualScrolling) return; - const id = window?.location?.hash; if (id.startsWith('#note_')) { @@ -616,11 +596,7 @@ export default { } }, subscribeToVirtualScrollingEvents() { - if ( - window.gon?.features?.diffsVirtualScrolling && - this.shouldShow && - !this.subscribedToVirtualScrollingEvents - ) { + if (this.shouldShow && !this.subscribedToVirtualScrollingEvents) { diffsEventHub.$on('scrollToFileHash', this.scrollVirtualScrollerToFileHash); diffsEventHub.$on('scrollToIndex', this.scrollVirtualScrollerToIndex); @@ -632,7 +608,7 @@ export default { }, }, minTreeWidth: MIN_TREE_WIDTH, - maxTreeWidth: MAX_TREE_WIDTH, + maxTreeWidth: window.innerWidth / 2, howToMergeDocsPath: helpPagePath('user/project/merge_requests/reviews/index.md', { anchor: 'checkout-merge-requests-locally-through-the-head-ref', }), @@ -643,10 +619,7 @@ export default { <div v-show="shouldShow"> <div v-if="isLoading || !isTreeLoaded" class="loading"><gl-loading-icon size="lg" /></div> <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane"> - <compare-versions - :is-limited-container="isLimitedContainer" - :diff-files-count-text="numTotalFiles" - /> + <compare-versions :diff-files-count-text="numTotalFiles" /> <template v-if="!isBatchLoadingError"> <hidden-files-warning @@ -656,10 +629,7 @@ export default { :plain-diff-path="plainDiffPath" :email-patch-path="emailPatchPath" /> - <collapsed-files-warning - v-if="visibleWarning == $options.alerts.ALERT_COLLAPSED_FILES" - :limited="isLimitedContainer" - /> + <collapsed-files-warning v-if="visibleWarning == $options.alerts.ALERT_COLLAPSED_FILES" /> </template> <div @@ -669,7 +639,7 @@ export default { <div v-if="renderFileTree" :style="{ width: `${treeWidth}px` }" - class="diff-tree-list js-diff-tree-list px-3 pr-md-0" + class="diff-tree-list js-diff-tree-list gl-px-5" > <panel-resizer :size.sync="treeWidth" @@ -681,12 +651,7 @@ export default { /> <tree-list :hide-file-stats="hideFileStats" /> </div> - <div - class="col-12 col-md-auto diff-files-holder" - :class="{ - [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer, - }" - > + <div class="col-12 col-md-auto diff-files-holder"> <commit-widget v-if="commit" :commit="commit" :collapsible="false" /> <gl-alert v-if="isBatchLoadingError" diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue index 240f102e600..b7eea32e699 100644 --- a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue +++ b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue @@ -2,7 +2,7 @@ import { GlAlert, GlButton } from '@gitlab/ui'; import { mapState } from 'vuex'; -import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants'; +import { EVT_EXPAND_ALL_FILES } from '../constants'; import eventHub from '../event_hub'; export default { @@ -11,11 +11,6 @@ export default { GlButton, }, props: { - limited: { - type: Boolean, - required: false, - default: false, - }, dismissed: { type: Boolean, required: false, @@ -29,11 +24,6 @@ export default { }, computed: { ...mapState('diffs', ['diffFiles']), - containerClasses() { - return { - [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited, - }; - }, shouldDisplay() { return !this.isDismissed && this.diffFiles.length > 1; }, @@ -53,7 +43,7 @@ export default { </script> <template> - <div v-if="shouldDisplay" data-testid="root" :class="containerClasses" class="col-12"> + <div v-if="shouldDisplay" data-testid="root" class="col-12"> <gl-alert :dismissible="true" :title="__('Some changes are not shown')" diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index e54fde72847..df7cf83b3f0 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -155,9 +155,11 @@ export default { <gl-button v-if="commit.description_html && collapsible" + v-gl-tooltip class="js-toggle-button" size="small" icon="ellipsis_h" + :title="__('Toggle commit description')" :aria-label="__('Toggle commit description')" /> diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 442807587d5..2b871680d5e 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -3,7 +3,7 @@ import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf 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 { EVT_EXPAND_ALL_FILES } from '../constants'; import eventHub from '../event_hub'; import CompareDropdownLayout from './compare_dropdown_layout.vue'; import DiffStats from './diff_stats.vue'; @@ -24,11 +24,6 @@ export default { GlTooltip: GlTooltipDirective, }, props: { - isLimitedContainer: { - type: Boolean, - required: false, - default: false, - }, diffFilesCountText: { type: String, required: false, @@ -73,9 +68,6 @@ export default { return this.commit && (this.commit.next_commit_id || this.commit.prev_commit_id); }, }, - created() { - this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES; - }, methods: { ...mapActions('diffs', ['setInlineDiffViewType', 'setParallelDiffViewType', 'setShowTreeList']), expandAllFiles() { @@ -88,12 +80,7 @@ export default { <template> <div class="mr-version-controls border-top"> - <div - class="mr-version-menus-container content-block" - :class="{ - [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer, - }" - > + <div class="mr-version-menus-container content-block"> <gl-button v-if="hasChanges" v-gl-tooltip.hover diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index 5e05ec87f84..47a05ce11cc 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -1,12 +1,14 @@ <script> import { GlIcon } from '@gitlab/ui'; import { mapActions } from 'vuex'; +import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; import noteableDiscussion from '../../notes/components/noteable_discussion.vue'; export default { components: { noteableDiscussion, GlIcon, + DesignNotePin, }, props: { discussions: { @@ -62,20 +64,22 @@ export default { <ul :data-discussion-id="discussion.id" class="notes"> <template v-if="shouldCollapseDiscussions"> <button - :class="{ - 'diff-notes-collapse': discussion.expanded, - 'btn-transparent badge badge-pill': !discussion.expanded, - }" + v-if="discussion.expanded" + class="diff-notes-collapse js-diff-notes-toggle" 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" /> - <template v-else> - {{ index + 1 }} - </template> + <gl-icon name="collapse" class="collapse-icon" /> </button> + <design-note-pin + v-else + :label="index + 1" + :is-resolved="discussion.resolved" + size="sm" + class="js-diff-notes-toggle gl-translate-x-n50" + @click="toggleDiscussion({ discussionId: discussion.id })" + /> </template> <noteable-discussion v-show="isExpanded(discussion)" @@ -87,9 +91,12 @@ export default { @noteDeleted="deleteNoteHandler" > <template v-if="renderAvatarBadge" #avatar-badge> - <span class="badge badge-pill"> - {{ index + 1 }} - </span> + <design-note-pin + :label="index + 1" + class="user-avatar" + :is-resolved="discussion.resolved" + size="sm" + /> </template> </noteable-discussion> </ul> diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index edff2e67b20..4c7b8e8f667 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -223,25 +223,31 @@ export default { <template> <div class="content js-line-expansion-content"> - <a - v-if="canExpandDown" - class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4" + <button + type="button" + :disabled="!canExpandDown" + class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer" @click="handleExpandLines(EXPAND_DOWN)" > <gl-icon :size="12" name="expand-down" /> <span>{{ $options.i18n.showMore }}</span> - </a> - <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()"> + </button> + <button + type="button" + class="js-unfold-all gl-mx-2 gl-py-4 gl-cursor-pointer" + @click="handleExpandLines()" + > <gl-icon :size="12" name="expand" /> <span>{{ $options.i18n.showAll }}</span> - </a> - <a - v-if="canExpandUp" - class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4" + </button> + <button + type="button" + :disabled="!canExpandUp" + class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer" @click="handleExpandLines(EXPAND_UP)" > <gl-icon :size="12" name="expand-up" /> <span>{{ $options.i18n.showMore }}</span> - </a> + </button> </div> </template> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 238f07ac22c..3cf1f69b08c 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -3,6 +3,7 @@ import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, + GlBadge, GlButton, GlButtonGroup, GlDropdown, @@ -34,6 +35,7 @@ export default { GlIcon, FileIcon, DiffStats, + GlBadge, GlButton, GlButtonGroup, GlDropdown, @@ -207,7 +209,7 @@ export default { handler(val) { const el = this.$el.closest('.vue-recycle-scroller__item-view'); - if (this.glFeatures.diffsVirtualScrolling && el) { + if (el) { // We can't add a style with Vue because of the way the virtual // scroller library renders the diff files el.style.zIndex = val ? '1' : null; @@ -349,7 +351,9 @@ export default { {{ diffFile.a_mode }} → {{ diffFile.b_mode }} </small> - <span v-if="isUsingLfs" class="badge label label-lfs gl-mr-2"> {{ __('LFS') }} </span> + <gl-badge v-if="isUsingLfs" variant="neutral" class="gl-mr-2" data-testid="label-lfs">{{ + __('LFS') + }}</gl-badge> </div> <div diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index 8562a1d44e7..333bf1b356c 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -153,21 +153,38 @@ export default { @mousedown="handleParallelLineMouseDown" > <template v-for="(line, index) in diffLines"> - <div - v-if="line.isMatchLineLeft || line.isMatchLineRight" - :key="`expand-${index}`" - class="diff-tr line_expansion match" - > - <div class="diff-td text-center gl-font-regular"> - <diff-expansion-cell - :file-hash="diffFile.file_hash" - :context-lines-path="diffFile.context_lines_path" - :line="line.left" - :is-top="index === 0" - :is-bottom="index + 1 === diffLinesLength" - /> + <template v-if="line.isMatchLineLeft || line.isMatchLineRight"> + <div :key="`expand-${index}`" class="diff-tr line_expansion match"> + <div class="diff-td text-center gl-font-regular"> + <diff-expansion-cell + :file-hash="diffFile.file_hash" + :context-lines-path="diffFile.context_lines_path" + :line="line.left" + :is-top="index === 0" + :is-bottom="index + 1 === diffLinesLength" + /> + </div> </div> - </div> + <div + v-if="line.left.rich_text" + :key="`expand-definition-${index}`" + class="diff-grid-row diff-tr line_holder match" + > + <div class="diff-grid-left diff-grid-3-col left-side"> + <div class="diff-td diff-line-num"></div> + <div v-if="inline" class="diff-td diff-line-num"></div> + <div class="diff-td line_content left-side gl-white-space-normal!"> + {{ line.left.rich_text }} + </div> + </div> + <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side"> + <div class="diff-td diff-line-num"></div> + <div class="diff-td line_content right-side gl-white-space-normal!"> + {{ line.left.rich_text }} + </div> + </div> + </div> + </template> <diff-row v-if="!line.isMatchLineLeft && !line.isMatchLineRight" :key="line.line_code" diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue index eede8e52292..8871be1f9af 100644 --- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue +++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue @@ -1,8 +1,8 @@ <script> -import { GlIcon } from '@gitlab/ui'; import { isArray } from 'lodash'; import { mapActions, mapGetters } from 'vuex'; import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff'; +import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; function calcPercent(pos, renderedSize) { return (100 * pos) / renderedSize; @@ -11,7 +11,7 @@ function calcPercent(pos, renderedSize) { export default { name: 'ImageDiffOverlay', components: { - GlIcon, + DesignNotePin, }, mixins: [imageDiffMixin], props: { @@ -36,7 +36,7 @@ export default { badgeClass: { type: String, required: false, - default: 'badge badge-pill', + default: '', }, shouldToggleDiscussion: { type: Boolean, @@ -114,30 +114,28 @@ export default { > <span class="sr-only"> {{ __('Add image comment') }} </span> </button> - <button + + <design-note-pin v-for="(discussion, index) in allDiscussions" :key="discussion.id" - :style="getPosition(discussion)" - :class="[badgeClass, { 'is-draft': discussion.isDraft }]" - :disabled="!shouldToggleDiscussion" - class="js-image-badge" - type="button" + :label="showCommentIcon ? null : toggleText(discussion, index)" + :position="getPosition(discussion)" :aria-label="__('Show comments')" + class="js-image-badge" + :class="badgeClass" + :is-draft="discussion.isDraft" + :is-resolved="discussion.resolved" + is-on-image + :disabled="!shouldToggleDiscussion" @click="clickedToggle(discussion)" - > - <gl-icon v-if="showCommentIcon" name="image-comment-dark" :size="24" /> - <template v-else> - {{ toggleText(discussion, index) }} - </template> - </button> - <button + /> + + <design-note-pin v-if="canComment && currentCommentForm" - :style="{ left: `${currentCommentForm.xPercent}%`, top: `${currentCommentForm.yPercent}%` }" - :aria-label="__('Comment form position')" - class="btn-transparent comment-indicator position-absolute" - type="button" - > - <gl-icon name="image-comment-dark" :size="24" /> - </button> + :position="{ + left: `${currentCommentForm.xPercent}%`, + top: `${currentCommentForm.yPercent}%`, + }" + /> </div> </template> diff --git a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue index 587efd6ed41..6e1e6f5c2d0 100644 --- a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue +++ b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue @@ -1,6 +1,5 @@ <script> import { GlButton, GlAlert, GlModalDirective } from '@gitlab/ui'; -import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants'; export default { components: { @@ -11,10 +10,6 @@ export default { GlModalDirective, }, props: { - limited: { - type: Boolean, - required: true, - }, mergeable: { type: Boolean, required: true, @@ -24,18 +19,11 @@ export default { required: true, }, }, - computed: { - containerClasses() { - return { - [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited, - }; - }, - }, }; </script> <template> - <div :class="containerClasses"> + <div> <gl-alert :dismissible="false" :title="__('There are merge conflicts')" |