diff options
Diffstat (limited to 'app/assets/javascripts/diffs')
16 files changed, 155 insertions, 223 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')" diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js index 93961b07e2e..bbe27c0dbd6 100644 --- a/app/assets/javascripts/diffs/constants.js +++ b/app/assets/javascripts/diffs/constants.js @@ -29,8 +29,6 @@ export const UNFOLD_COUNT = 20; export const COUNT_OF_AVATARS_IN_GUTTER = 3; export const LENGTH_OF_AVATAR_TOOLTIP = 17; -export const LINES_TO_BE_RENDERED_DIRECTLY = 100; - export const DIFF_FILE_SYMLINK_MODE = '120000'; export const DIFF_FILE_DELETED_MODE = '0'; @@ -42,7 +40,6 @@ export const TREE_LIST_WIDTH_STORAGE_KEY = 'mr_tree_list_width'; export const INITIAL_TREE_WIDTH = 320; export const MIN_TREE_WIDTH = 240; -export const MAX_TREE_WIDTH = 400; export const TREE_HIDE_STATS_WIDTH = 260; export const OLD_LINE_KEY = 'old_line'; @@ -50,9 +47,6 @@ export const NEW_LINE_KEY = 'new_line'; export const TYPE_KEY = 'type'; export const LEFT_LINE_KEY = 'left'; -export const CENTERED_LIMITED_CONTAINER_CLASSES = - 'container-limited limit-container-width mx-lg-auto px-3'; - export const MAX_RENDERING_DIFF_LINES = 500; export const MAX_RENDERING_BULK_ROWS = 30; export const MIN_RENDERING_MS = 2; diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js index 260ebdf2141..1691da34c6d 100644 --- a/app/assets/javascripts/diffs/index.js +++ b/app/assets/javascripts/diffs/index.js @@ -1,8 +1,7 @@ -import Cookies from 'js-cookie'; import Vue from 'vue'; import { mapActions, mapState, mapGetters } from 'vuex'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import { getParameterValues } from '~/lib/utils/url_utility'; +import { getCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils'; + import eventHub from '../notes/event_hub'; import diffsApp from './components/app.vue'; @@ -58,14 +57,14 @@ export default function initDiffsApp(store) { // Check for cookie and save that setting for future use. // Then delete the cookie as we are phasing it out and using the database as SSOT. // NOTE: This can/should be removed later - if (Cookies.get(DIFF_WHITESPACE_COOKIE_NAME)) { - const hideWhitespace = Cookies.get(DIFF_WHITESPACE_COOKIE_NAME); + if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) { + const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME); this.setShowWhitespace({ url: this.endpointUpdateUser, showWhitespace: hideWhitespace !== '1', trackClick: false, }); - Cookies.remove(DIFF_WHITESPACE_COOKIE_NAME); + removeCookie(DIFF_WHITESPACE_COOKIE_NAME); } else { // This is only to set the the user preference in Vuex for use later this.setShowWhitespace({ @@ -74,11 +73,6 @@ export default function initDiffsApp(store) { trackClick: false, }); } - - const vScrollingParam = getParameterValues('virtual_scrolling')[0]; - if (vScrollingParam === 'false' || vScrollingParam === 'true') { - Cookies.set('diffs_virtual_scrolling', vScrollingParam); - } }, methods: { ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']), diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index 692cb913a57..e967be23f42 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -1,9 +1,14 @@ -import Cookies from 'js-cookie'; import Vue from 'vue'; +import { + setCookie, + handleLocationHash, + historyPushState, + scrollToElement, +} from '~/lib/utils/common_utils'; import createFlash from '~/flash'; import { diffViewerModes } from '~/ide/constants'; import axios from '~/lib/utils/axios_utils'; -import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils'; + import httpStatusCodes from '~/lib/utils/http_status'; import Poll from '~/lib/utils/poll'; import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility'; @@ -120,7 +125,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => { commit(types.SET_DIFF_DATA_BATCH, { diff_files }); commit(types.SET_BATCH_LOADING_STATE, 'loaded'); - if (window.gon?.features?.diffsVirtualScrolling && !scrolledVirtualScroller) { + if (!scrolledVirtualScroller) { const index = state.diffFiles.findIndex( (f) => f.file_hash === hash || f[INLINE_DIFF_LINES_KEY].find((l) => l.line_code === hash), @@ -190,9 +195,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => { commit(types.SET_BATCH_LOADING_STATE, 'error'); }); - return getBatch().then( - () => !window.gon?.features?.diffsVirtualScrolling && handleLocationHash(), - ); + return getBatch(); }; export const fetchDiffFilesMeta = ({ commit, state }) => { @@ -369,7 +372,7 @@ export const setRenderIt = ({ commit }, file) => commit(types.RENDER_FILE, file) export const setInlineDiffViewType = ({ commit }) => { commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE); - Cookies.set(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE); + setCookie(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE); const url = mergeUrlParams({ view: INLINE_DIFF_VIEW_TYPE }, window.location.href); historyPushState(url); @@ -381,7 +384,7 @@ export const setInlineDiffViewType = ({ commit }) => { export const setParallelDiffViewType = ({ commit }) => { commit(types.SET_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE); - Cookies.set(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE); + setCookie(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE); const url = mergeUrlParams({ view: PARALLEL_DIFF_VIEW_TYPE }, window.location.href); historyPushState(url); @@ -524,7 +527,7 @@ export const setCurrentFileHash = ({ commit }, hash) => { commit(types.SET_CURRENT_DIFF_FILE, hash); }; -export const scrollToFile = ({ state, commit, getters }, { path, setHash = true }) => { +export const scrollToFile = ({ state, commit, getters }, { path }) => { if (!state.treeEntries[path]) return; const { fileHash } = state.treeEntries[path]; @@ -534,11 +537,9 @@ export const scrollToFile = ({ state, commit, getters }, { path, setHash = true if (getters.isVirtualScrollingEnabled) { eventHub.$emit('scrollToFileHash', fileHash); - if (setHash) { - setTimeout(() => { - window.history.replaceState(null, null, `#${fileHash}`); - }); - } + setTimeout(() => { + window.history.replaceState(null, null, `#${fileHash}`); + }); } else { document.location.hash = fileHash; diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js index ca85be5d829..3a85c1a9fe1 100644 --- a/app/assets/javascripts/diffs/store/getters.js +++ b/app/assets/javascripts/diffs/store/getters.js @@ -1,6 +1,5 @@ -import Cookies from 'js-cookie'; -import { getParameterValues } from '~/lib/utils/url_utility'; import { __, n__ } from '~/locale'; +import { getParameterValues } from '~/lib/utils/url_utility'; import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE, @@ -175,21 +174,11 @@ export function suggestionCommitMessage(state, _, rootState) { } export const isVirtualScrollingEnabled = (state) => { - const vSrollerCookie = Cookies.get('diffs_virtual_scrolling'); - - if (state.disableVirtualScroller) { + if (state.disableVirtualScroller || getParameterValues('virtual_scrolling')[0] === 'false') { return false; } - if (vSrollerCookie) { - return vSrollerCookie === 'true'; - } - - return ( - !state.viewDiffsFileByFile && - (window.gon?.features?.diffsVirtualScrolling || - getParameterValues('virtual_scrolling')[0] === 'true') - ); + return !state.viewDiffsFileByFile; }; export const isBatchLoading = (state) => state.batchLoadingState === 'loading'; diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js index 5f66360a040..329db1fe2cf 100644 --- a/app/assets/javascripts/diffs/store/modules/diff_state.js +++ b/app/assets/javascripts/diffs/store/modules/diff_state.js @@ -1,10 +1,10 @@ -import Cookies from 'js-cookie'; +import { getCookie } from '~/lib/utils/common_utils'; import { getParameterValues } from '~/lib/utils/url_utility'; import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants'; const getViewTypeFromQueryString = () => getParameterValues('view')[0]; -const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME); +const viewTypeFromCookie = getCookie(DIFF_VIEW_COOKIE_NAME); const defaultViewType = INLINE_DIFF_VIEW_TYPE; export default () => ({ diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js index 3f1af68e37a..f2028892a5f 100644 --- a/app/assets/javascripts/diffs/store/utils.js +++ b/app/assets/javascripts/diffs/store/utils.js @@ -9,7 +9,6 @@ import { NEW_LINE_TYPE, OLD_LINE_TYPE, MATCH_LINE_TYPE, - LINES_TO_BE_RENDERED_DIRECTLY, INLINE_DIFF_LINES_KEY, CONFLICT_OUR, CONFLICT_THEIR, @@ -380,16 +379,9 @@ function prepareDiffFileLines(file) { return file; } -function finalizeDiffFile(file, index) { - let renderIt = Boolean(window.gon?.features?.diffsVirtualScrolling); - - if (!window.gon?.features?.diffsVirtualScrolling) { - renderIt = - index < 3 ? file[INLINE_DIFF_LINES_KEY].length < LINES_TO_BE_RENDERED_DIRECTLY : false; - } - +function finalizeDiffFile(file) { Object.assign(file, { - renderIt, + renderIt: true, isShowingFullFile: false, isLoadingFullFile: false, discussions: [], @@ -417,15 +409,13 @@ export function prepareDiffData({ diff, priorFiles = [], meta = false }) { .map((file, index, allFiles) => prepareRawDiffFile({ file, allFiles, meta })) .map(ensureBasicDiffFileLines) .map(prepareDiffFileLines) - .map((file, index) => finalizeDiffFile(file, priorFiles.length + index)); + .map((file) => finalizeDiffFile(file)); return deduplicateFilesList([...priorFiles, ...cleanedFiles]); } export function getDiffPositionByLineCode(diffFiles) { - let lines = []; - - lines = diffFiles.reduce((acc, diffFile) => { + const lines = diffFiles.reduce((acc, diffFile) => { diffFile[INLINE_DIFF_LINES_KEY].forEach((line) => { acc.push({ file: diffFile, line }); }); |