diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
8 files changed, 153 insertions, 26 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 08306312c2e..924c515ee2d 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -3,6 +3,7 @@ import { GlLoadingIcon, GlPagination, GlSprintf, GlAlert } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; // eslint-disable-next-line no-restricted-imports import { mapState, mapGetters, mapActions } from 'vuex'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import api from '~/api'; import { @@ -22,6 +23,7 @@ import { __ } from '~/locale'; import notesEventHub from '~/notes/event_hub'; import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller'; +import { sortFindingsByFile } from '../utils/sort_findings_by_file'; import { MR_TREE_SHOW_KEY, ALERT_OVERFLOW_HIDDEN, @@ -42,7 +44,7 @@ import { import diffsEventHub from '../event_hub'; import { reviewStatuses } from '../utils/file_reviews'; import { diffsApp } from '../utils/performance'; -import { updateChangesTabCount } from '../utils/merge_request'; +import { updateChangesTabCount, extractFileHash } from '../utils/merge_request'; import { queueRedisHllEvents } from '../utils/queue_events'; import FindingsDrawer from './shared/findings_drawer.vue'; import CollapsedFilesWarning from './collapsed_files_warning.vue'; @@ -53,6 +55,7 @@ import HiddenFilesWarning from './hidden_files_warning.vue'; import NoChanges from './no_changes.vue'; import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync'; import DiffsFileTree from './diffs_file_tree.vue'; +import getMRCodequalityReports from './graphql/get_mr_codequality_reports.query.graphql'; export default { name: 'DiffsApp', @@ -75,6 +78,7 @@ export default { GenerateTestFileDrawer: () => import('ee_component/ai/components/generate_test_file_drawer.vue'), }, + mixins: [glFeatureFlagsMixin()], alerts: { ALERT_OVERFLOW_HIDDEN, ALERT_MERGE_CONFLICT, @@ -86,6 +90,16 @@ export default { required: false, default: '', }, + projectPath: { + type: String, + required: false, + default: '', + }, + iid: { + type: String, + required: false, + default: '', + }, endpointSast: { type: String, required: false, @@ -123,6 +137,32 @@ export default { subscribedToVirtualScrollingEvents: false, }; }, + apollo: { + getMRCodequalityReports: { + query: getMRCodequalityReports, + variables() { + return { fullPath: this.projectPath, iid: this.iid }; + }, + skip() { + return !this.endpointCodequality || !this.sastReportsInInlineDiff; + }, + update(data) { + if (data?.project?.mergeRequest?.codequalityReportsComparer?.report?.newErrors) { + this.$store.commit( + 'diffs/SET_CODEQUALITY_DATA', + sortFindingsByFile( + data.project.mergeRequest.codequalityReportsComparer.report.newErrors, + ), + ); + } + }, + error() { + createAlert({ + message: __('Something went wrong fetching the CodeQuality Findings. Please try again!'), + }); + }, + }, + }, computed: { ...mapState('diffs', { numTotalFiles: 'realSize', @@ -220,6 +260,9 @@ export default { resourceId() { return convertToGraphQLId('MergeRequest', this.getNoteableData.id); }, + sastReportsInInlineDiff() { + return this.glFeatures.sastReportsInInlineDiff; + }, }, watch: { commit(newCommit, oldCommit) { @@ -344,12 +387,13 @@ export default { ...mapActions(['startTaskList']), ...mapActions('diffs', [ 'moveToNeighboringCommit', - 'setBaseConfig', 'setCodequalityEndpoint', 'setSastEndpoint', 'fetchDiffFilesMeta', 'fetchDiffFilesBatch', 'fetchFileByFile', + 'loadCollapsedDiff', + 'setFileForcedOpen', 'fetchCoverageFiles', 'fetchCodequality', 'fetchSast', @@ -373,15 +417,34 @@ export default { notesEventHub.$on('refetchDiffData', this.refetchDiffData); notesEventHub.$on('fetchedNotesData', this.rereadNoteHash); diffsEventHub.$on('diffFilesModified', this.setDiscussions); + diffsEventHub.$on('doneLoadingBatches', this.autoScroll); diffsEventHub.$on(EVT_MR_PREPARED, this.fetchData); }, unsubscribeFromEvents() { diffsEventHub.$off(EVT_MR_PREPARED, this.fetchData); + diffsEventHub.$off('doneLoadingBatches', this.autoScroll); diffsEventHub.$off('diffFilesModified', this.setDiscussions); notesEventHub.$off('fetchedNotesData', this.rereadNoteHash); notesEventHub.$off('refetchDiffData', this.refetchDiffData); notesEventHub.$off('fetchDiffData', this.fetchData); }, + autoScroll() { + const lineCode = window.location.hash; + const sha1InHash = extractFileHash({ input: lineCode }); + + if (sha1InHash) { + const idx = this.diffs.findIndex((diffFile) => diffFile.file_hash === sha1InHash); + const file = this.diffs[idx]; + + this.loadCollapsedDiff({ file }) + .then(() => { + this.setDiscussions(); + this.scrollVirtualScrollerToIndex(idx); + this.setFileForcedOpen({ filePath: file.new_path }); + }) + .catch(() => {}); + } + }, navigateToDiffFileNumber(number) { this.navigateToDiffFileIndex(number - 1); }, @@ -445,7 +508,7 @@ export default { this.fetchCoverageFiles(); } - if (this.endpointCodequality) { + if (this.endpointCodequality && !this.sastReportsInInlineDiff) { this.fetchCodequality(); } @@ -623,9 +686,13 @@ export default { page-mode > <template #default="{ item, index, active }"> - <dynamic-scroller-item :item="item" :active="active" :class="{ active }"> + <dynamic-scroller-item + v-if="active" + :item="item" + :active="active" + :class="{ active }" + > <diff-file - v-if="active" :file="item" :reviewed="fileReviews[item.id]" :is-first-file="index === 0" diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue index 4501988ee4f..74b872d8bc4 100644 --- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue +++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue @@ -26,7 +26,7 @@ export default { <template> <gl-dropdown :text="selectedVersionName" - data-qa-selector="dropdown_content" + data-testid="version-dropdown-content" size="small" category="tertiary" > diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index bc2376fec09..13388307955 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -90,7 +90,7 @@ export default { variant="default" icon="file-tree" class="gl-mr-3 js-toggle-tree-list btn-icon" - data-qa-selector="file_tree_button" + data-testid="file-tree-button" :title="toggleFileBrowserTitle" :aria-label="toggleFileBrowserTitle" :selected="showTreeList" @@ -141,7 +141,7 @@ export default { <compare-dropdown-layout :versions="diffCompareDropdownTargetVersions" class="mr-version-compare-dropdown" - data-qa-selector="target_version_dropdown" + data-testid="target-version-dropdown" /> </template> <template #source> diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index f99edced361..c74a4b47fcb 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -161,6 +161,9 @@ export default { manuallyCollapsed() { return collapsedType(this.file) === DIFF_FILE_MANUAL_COLLAPSE; }, + forcedOpen() { + return this.file.viewer.forceOpen; + }, showBody() { return !this.isCollapsed || this.automaticallyCollapsed; }, @@ -174,6 +177,10 @@ export default { return Boolean(gon.current_user_id); }, isCollapsed() { + if (this.forcedOpen) { + return false; + } + if (collapsedType(this.file) !== DIFF_FILE_MANUAL_COLLAPSE) { return this.viewDiffsFileByFile ? false : this.file.viewer?.automaticallyCollapsed; } @@ -201,6 +208,11 @@ export default { this.manageViewedEffects(); }, }, + 'file.viewer.forceOpen': { + handler: function fileForcedOpenHandler() { + this.handleToggle(); + }, + }, 'file.file_hash': { handler: function hashChangeWatch(newHash, oldHash) { if ( @@ -390,23 +402,23 @@ export default { <div v-if="idState.forkMessageVisible" - class="js-file-fork-suggestion-section file-fork-suggestion" + class="js-file-fork-suggestion-section file-fork-suggestion gl-border-1 gl-border-solid gl-border-gray-100 gl-border-top-0" > <span v-safe-html="forkMessage" class="file-fork-suggestion-note"></span> <gl-button :href="file.fork_path" - class="js-fork-suggestion-button" + class="js-fork-suggestion-button gl-mr-3" category="secondary" variant="confirm" >{{ $options.i18n.fork }}</gl-button > - <button - class="js-cancel-fork-suggestion-button btn btn-grouped" - type="button" + <gl-button + class="js-cancel-fork-suggestion-button" + category="secondary" @click="hideForkMessage" > {{ $options.i18n.cancel }} - </button> + </gl-button> </div> <template v-else> <div diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index a9e63ad53bb..20f82500a02 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -232,10 +232,15 @@ export default { 'setCurrentFileHash', 'reviewFile', 'setFileCollapsedByUser', + 'setFileForcedOpen', 'setGenerateTestFilePath', 'toggleFileCommentForm', ]), handleToggleFile() { + this.setFileForcedOpen({ + filePath: this.diffFile.file_path, + forced: false, + }); this.$emit('toggleFile'); }, showForkMessage(e) { @@ -278,6 +283,10 @@ export default { } if ((open && reviewed) || (closed && !reviewed)) { + this.setFileForcedOpen({ + filePath: this.diffFile.file_path, + forced: false, + }); this.$emit('toggleFile'); } }, @@ -293,7 +302,7 @@ export default { 'is-sidebar-moved': glFeatures.movedMrSidebar, }" class="js-file-title file-title file-title-flex-parent gl-border" - data-qa-selector="file_title_container" + data-testid="file-title-container" :data-qa-file-name="filePath" @click.self="handleToggleFile" > @@ -423,7 +432,7 @@ export default { right toggle-class="btn-icon js-diff-more-actions" class="gl-pt-0!" - data-qa-selector="dropdown_button" + data-testid="options-dropdown-button" lazy @show="setMoreActionsShown(true)" @hidden="setMoreActionsShown(false)" @@ -450,7 +459,7 @@ export default { ref="ideEditButton" :href="diffFile.ide_edit_path" class="js-ide-edit-blob" - data-qa-selector="edit_in_ide_button" + data-testid="edit-in-ide-button" target="_blank" > {{ __('Open in Web IDE') }} @@ -482,7 +491,7 @@ export default { <gl-dropdown-item v-if="diffHasDiscussions(diffFile)" ref="toggleDiscussionsButton" - data-qa-selector="toggle_comments_button" + data-testid="toggle-comments-button" @click="toggleFileDiscussionWrappers(diffFile)" > <template v-if="diffHasExpandedDiscussions(diffFile)"> diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index ee6e9a2fc94..3dad7a1a8e4 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -248,7 +248,6 @@ export default { :class="$options.classNameMapCellLeft(props)" data-testid="left-line-number" class="diff-td diff-line-num" - data-qa-selector="new_diff_line_link" > <span v-if=" @@ -266,7 +265,6 @@ export default { :draggable="!props.line.left.commentsDisabled" type="button" class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button" - data-qa-selector="diff_comment_button" :disabled="props.line.left.commentsDisabled" :aria-disabled="props.line.left.commentsDisabled" @click=" diff --git a/app/assets/javascripts/diffs/components/graphql/get_mr_codequality_reports.query.graphql b/app/assets/javascripts/diffs/components/graphql/get_mr_codequality_reports.query.graphql new file mode 100644 index 00000000000..b6920d0f6ec --- /dev/null +++ b/app/assets/javascripts/diffs/components/graphql/get_mr_codequality_reports.query.graphql @@ -0,0 +1,46 @@ +query getMRCodequalityReports($fullPath: ID!, $iid: String!) { + project(fullPath: $fullPath) { + id + mergeRequest(iid: $iid) { + id + title + codequalityReportsComparer { + report { + status + newErrors { + description + fingerprint + severity + filePath + line + webUrl + engineName + } + resolvedErrors { + description + fingerprint + severity + filePath + line + webUrl + engineName + } + existingErrors { + description + fingerprint + severity + filePath + line + webUrl + engineName + } + summary { + errored + resolved + total + } + } + } + } + } +} diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index 7a661d51c9b..f4715c591b2 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -164,11 +164,7 @@ export default { </script> <template> - <div - ref="wrapper" - class="tree-list-holder d-flex flex-column" - data-qa-selector="file_tree_container" - > + <div ref="wrapper" class="tree-list-holder d-flex flex-column" data-testid="file-tree-container"> <div class="gl-pb-3 position-relative tree-list-search d-flex"> <div class="flex-fill d-flex"> <gl-icon name="search" class="gl-absolute gl-top-3 gl-left-3 tree-list-icon" /> @@ -181,7 +177,6 @@ export default { name="diff-tree-search" class="form-control" data-testid="diff-tree-search" - data-qa-selector="diff_tree_search" /> <button v-show="search" |