diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-21 03:08:43 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-21 03:08:43 +0300 |
commit | 92ea86691a2a6b3df4b36c7ff00001410303a701 (patch) | |
tree | 9b3764b56303c9b65e17007c589a297775834b28 /app/assets/javascripts/diffs | |
parent | 991c66333dc7bdb0fd6f7a0b7f7bdf8383285975 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/diffs')
3 files changed, 116 insertions, 9 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_code_quality.vue b/app/assets/javascripts/diffs/components/diff_code_quality.vue new file mode 100644 index 00000000000..f339b108a11 --- /dev/null +++ b/app/assets/javascripts/diffs/components/diff_code_quality.vue @@ -0,0 +1,56 @@ +<script> +import { GlButton, GlIcon } from '@gitlab/ui'; +import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/constants'; + +export default { + components: { GlButton, GlIcon }, + props: { + line: { + type: Number, + required: true, + }, + codeQuality: { + type: Array, + required: true, + }, + }, + methods: { + severityClass(severity) { + return SEVERITY_CLASSES[severity] || SEVERITY_CLASSES.unknown; + }, + severityIcon(severity) { + return SEVERITY_ICONS[severity] || SEVERITY_ICONS.unknown; + }, + }, +}; +</script> + +<template> + <div data-testid="diff-codequality" class="gl-relative"> + <ul + class="gl-list-style-none gl-mb-0 gl-p-0 codequality-findings-list gl-border-top-1 gl-border-bottom-1 gl-bg-gray-10" + > + <li + v-for="finding in codeQuality" + :key="finding.description" + class="gl-pt-1 gl-pb-1 gl-pl-3 gl-border-solid gl-border-bottom-0 gl-border-right-0 gl-border-1 gl-border-gray-100" + > + <gl-icon + :size="12" + :name="severityIcon(finding.severity)" + :class="severityClass(finding.severity)" + class="codequality-severity-icon" + /> + {{ finding.description }} + </li> + </ul> + <gl-button + data-testid="diff-codequality-close" + category="tertiary" + size="small" + icon="close" + class="gl-absolute gl-right-2 gl-top-2" + @click="$emit('hideCodeQualityFindings', line)" + /> + </div> +</template> diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index 1b07b00d725..63c5aedd7ce 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -274,6 +274,9 @@ export default { v-if="$options.showCodequalityLeft(props)" :codequality="props.line.left.codequality" :file-path="props.filePath" + @showCodeQualityFindings=" + listeners.toggleCodeQualityFindings(props.line.left.codequality[0].line) + " /> </div> <div @@ -395,6 +398,9 @@ export default { :codequality="props.line.right.codequality" :file-path="props.filePath" data-testid="codeQualityIcon" + @showCodeQualityFindings=" + listeners.toggleCodeQualityFindings(props.line.right.codequality[0].line) + " /> </div> <div diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index d740d5adcb6..bbb41cef854 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -2,12 +2,14 @@ import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapGetters, mapState, mapActions } from 'vuex'; import { IdState } from 'vendor/vue-virtual-scroller'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import DraftNote from '~/batch_comments/components/draft_note.vue'; import draftCommentsMixin from '~/diffs/mixins/draft_comments'; import { getCommentedLines } from '~/notes/components/multiline_comment_utils'; import { hide } from '~/tooltips'; import { pickDirection } from '../utils/diff_line'; import DiffCommentCell from './diff_comment_cell.vue'; +import DiffCodeQuality from './diff_code_quality.vue'; import DiffExpansionCell from './diff_expansion_cell.vue'; import DiffRow from './diff_row.vue'; import { isHighlighted } from './diff_row_utils'; @@ -17,12 +19,17 @@ export default { DiffExpansionCell, DiffRow, DiffCommentCell, + DiffCodeQuality, DraftNote, }, directives: { SafeHtml, }, - mixins: [draftCommentsMixin, IdState({ idProp: (vm) => vm.diffFile.file_hash })], + mixins: [ + draftCommentsMixin, + IdState({ idProp: (vm) => vm.diffFile.file_hash }), + glFeatureFlagsMixin(), + ], props: { diffFile: { type: Object, @@ -43,6 +50,11 @@ export default { default: false, }, }, + data() { + return { + codeQualityExpandedLines: [], + }; + }, idState() { return { dragStart: null, @@ -84,6 +96,23 @@ export default { } this.idState.dragStart = line; }, + parseCodeQuality(line) { + return line.left?.codequality ?? line.right.codequality; + }, + + hideCodeQualityFindings(line) { + const index = this.codeQualityExpandedLines.indexOf(line); + if (index > -1) { + this.codeQualityExpandedLines.splice(index, 1); + } + }, + toggleCodeQualityFindings(line) { + if (!this.codeQualityExpandedLines.includes(line)) { + this.codeQualityExpandedLines.push(line); + } else { + this.hideCodeQualityFindings(line); + } + }, onDragOver(line) { if (line.chunk !== this.idState.dragStart.chunk) return; @@ -125,15 +154,16 @@ export default { }, handleParallelLineMouseDown(e) { const line = e.target.closest('.diff-td'); - const table = line.closest('.diff-table'); - - table.classList.remove('left-side-selected', 'right-side-selected'); - const [lineClass] = ['left-side', 'right-side'].filter((name) => - line.classList.contains(name), - ); + if (line) { + const table = line.closest('.diff-table'); + table.classList.remove('left-side-selected', 'right-side-selected'); + const [lineClass] = ['left-side', 'right-side'].filter((name) => + line.classList.contains(name), + ); - if (lineClass) { - table.classList.add(`${lineClass}-selected`); + if (lineClass) { + table.classList.add(`${lineClass}-selected`); + } } }, getCountBetweenIndex(index) { @@ -148,6 +178,9 @@ export default { Number(this.diffLines[index - 1].left.new_line) ); }, + getCodeQualityLine(line) { + return this.parseCodeQuality(line)?.[0]?.line; + }, }, userColorScheme: window.gon.user_color_scheme, }; @@ -190,6 +223,7 @@ export default { :coverage-loaded="coverageLoaded" @showCommentForm="(code) => singleLineComment(code, line)" @setHighlightedRow="setHighlightedRow" + @toggleCodeQualityFindings="toggleCodeQualityFindings" @toggleLineDiscussions=" ({ lineCode, expanded }) => toggleLineDiscussions({ lineCode, fileHash: diffFile.file_hash, expanded }) @@ -198,6 +232,17 @@ export default { @startdragging="onStartDragging" @stopdragging="onStopDragging" /> + + <diff-code-quality + v-if=" + glFeatures.refactorCodeQualityInlineFindings && + codeQualityExpandedLines.includes(getCodeQualityLine(line)) + " + :key="line.line_code" + :line="getCodeQualityLine(line)" + :code-quality="parseCodeQuality(line)" + @hideCodeQualityFindings="hideCodeQualityFindings" + /> <div v-if="line.renderCommentRow" :key="`dcr-${line.line_code || index}`" |