diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
9 files changed, 129 insertions, 34 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 6a3f5993a22..61946d345e3 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -12,7 +12,7 @@ import { MR_COMMITS_NEXT_COMMIT, MR_COMMITS_PREVIOUS_COMMIT, } from '~/behaviors/shortcuts/keybindings'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { isSingleViewStyle } from '~/helpers/diffs_helper'; import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils'; import { updateHistory } from '~/lib/utils/url_utility'; @@ -181,7 +181,6 @@ 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', @@ -425,7 +424,9 @@ export default { if (toggleTree) this.setTreeDisplay(); }) .catch(() => { - createFlash(__('Something went wrong on our end. Please try again!')); + createFlash({ + message: __('Something went wrong on our end. Please try again!'), + }); }); this.fetchDiffFilesBatch() @@ -438,7 +439,9 @@ export default { this.setDiscussions(); }) .catch(() => { - createFlash(__('Something went wrong on our end. Please try again!')); + createFlash({ + message: __('Something went wrong on our end. Please try again!'), + }); }); if (this.endpointCoverage) { diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue index 283dbc6031c..cb74c7dc7cd 100644 --- a/app/assets/javascripts/diffs/components/diff_content.vue +++ b/app/assets/javascripts/diffs/components/diff_content.vue @@ -1,6 +1,7 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; +import { mapInline, mapParallel } from 'ee_else_ce/diffs/components/diff_row_utils'; import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue'; import draftCommentsMixin from '~/diffs/mixins/draft_comments'; import { diffViewerModes } from '~/ide/constants'; @@ -15,7 +16,6 @@ import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_ import { IMAGE_DIFF_POSITION_TYPE } from '../constants'; import { getDiffMode } from '../store/utils'; import DiffDiscussions from './diff_discussions.vue'; -import { mapInline, mapParallel } from './diff_row_utils'; import DiffView from './diff_view.vue'; import ImageDiffOverlay from './image_diff_overlay.vue'; import InlineDiffView from './inline_diff_view.vue'; @@ -55,6 +55,7 @@ export default { 'isParallelView', 'getCommentFormForDiffFile', 'diffLines', + 'fileLineCodequality', ]), ...mapGetters(['getNoteableData', 'noteableType', 'getUserData']), diffMode() { diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index 67900af8789..edff2e67b20 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -1,7 +1,7 @@ <script> import { GlIcon } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { s__, sprintf } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, INLINE_DIFF_LINES_KEY } from '../constants'; @@ -95,7 +95,9 @@ export default { this.isRequesting = false; }) .catch(() => { - createFlash(s__('Diffs|Something went wrong while fetching diff lines.')); + createFlash({ + message: s__('Diffs|Something went wrong while fetching diff lines.'), + }); this.isRequesting = false; }); }, diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index ce867dbb9e0..ed8455f0c1c 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -2,7 +2,7 @@ import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml, GlSprintf } from '@gitlab/ui'; import { escape } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { hasDiff } from '~/helpers/diffs_helper'; import { diffViewerErrors } from '~/ide/constants'; import { scrollToElement } from '~/lib/utils/common_utils'; @@ -270,7 +270,9 @@ export default { }) .catch(() => { this.isLoadingCollapsedDiff = false; - createFlash(this.$options.i18n.genericError); + createFlash({ + message: this.$options.i18n.genericError, + }); }); }, showForkMessage() { diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 676c9a3c7bc..45c7fe35f03 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -202,6 +202,9 @@ export default { externalUrlLabel() { return sprintf(__('View on %{url}'), { url: this.diffFile.formatted_external_url }); }, + showCodequalityBadge() { + return this.codequalityDiff?.length > 0 && !this.glFeatures.codequalityMrDiffAnnotations; + }, }, methods: { ...mapActions('diffs', [ @@ -334,7 +337,7 @@ export default { /> <code-quality-badge - v-if="codequalityDiff.length" + v-if="showCodequalityBadge" :file-name="filePath" :codequality-diff="codequalityDiff" class="gl-mr-2" @@ -351,7 +354,11 @@ export default { v-if="!diffFile.submodule && addMergeRequestButtons" class="file-actions d-flex align-items-center gl-ml-auto gl-align-self-start" > - <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" /> + <diff-stats + :diff-file="diffFile" + :added-lines="diffFile.added_lines" + :removed-lines="diffFile.removed_lines" + /> <gl-form-checkbox v-if="isReviewable && showLocalFileReviews" v-gl-tooltip.hover diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index d4a1a9e0e46..37dd7941b2e 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -24,6 +24,8 @@ import * as utils from './diff_row_utils'; export default { components: { DiffGutterAvatars, + CodeQualityGutterIcon: () => + import('ee_component/diffs/components/code_quality_gutter_icon.vue'), }, directives: { GlTooltip: GlTooltipDirective, @@ -89,6 +91,20 @@ export default { if (!this.line.right) return {}; return this.fileLineCoverage(this.filePath, this.line.right.new_line); }, + showCodequalityLeft() { + return ( + this.glFeatures.codequalityMrDiffAnnotations && + this.inline && + this.line.left?.codequality?.length > 0 + ); + }, + showCodequalityRight() { + return ( + this.glFeatures.codequalityMrDiffAnnotations && + !this.inline && + this.line.right?.codequality?.length > 0 + ); + }, classNameMapCellLeft() { return utils.classNameMapCell({ line: this.line.left, @@ -269,6 +285,13 @@ export default { :class="[...parallelViewLeftLineType, coverageStateLeft.class]" class="diff-td line-coverage left-side" ></div> + <div class="diff-td line-codequality left-side" :class="[...parallelViewLeftLineType]"> + <code-quality-gutter-icon + v-if="showCodequalityLeft" + :file-path="filePath" + :codequality="line.left.codequality" + /> + </div> <div :id="line.left.line_code" :key="line.left.line_code" @@ -299,6 +322,11 @@ export default { :class="emptyCellLeftClassMap" ></div> <div + v-if="inline" + class="diff-td line-codequality left-side empty-cell" + :class="emptyCellLeftClassMap" + ></div> + <div class="diff-td line_content with-coverage left-side empty-cell" :class="[emptyCellLeftClassMap, { parallel: !inline }]" ></div> @@ -371,6 +399,16 @@ export default { class="diff-td line-coverage right-side" ></div> <div + class="diff-td line-codequality right-side" + :class="[line.right.type, { hll: isHighlighted, hll: isCommented }]" + > + <code-quality-gutter-icon + v-if="showCodequalityRight" + :file-path="filePath" + :codequality="line.right.codequality" + /> + </div> + <div :id="line.right.line_code" :key="line.right.rich_text" :class="[ @@ -406,6 +444,10 @@ export default { :class="emptyCellRightClassMap" ></div> <div + class="diff-td line-codequality right-side empty-cell" + :class="emptyCellRightClassMap" + ></div> + <div class="diff-td line_content with-coverage right-side empty-cell" :class="[emptyCellRightClassMap, { parallel: !inline }]" ></div> diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue index 0303700f42a..05d4fbe7c20 100644 --- a/app/assets/javascripts/diffs/components/diff_stats.vue +++ b/app/assets/javascripts/diffs/components/diff_stats.vue @@ -2,10 +2,16 @@ import { GlIcon } from '@gitlab/ui'; import { isNumber } from 'lodash'; import { n__ } from '~/locale'; +import { isNotDiffable, stats } from '../utils/diff_file'; export default { components: { GlIcon }, props: { + diffFile: { + type: Object, + required: false, + default: () => null, + }, addedLines: { type: Number, required: true, @@ -33,6 +39,12 @@ export default { hasDiffFiles() { return isNumber(this.diffFilesLength) && this.diffFilesLength >= 0; }, + notDiffable() { + return isNotDiffable(this.diffFile); + }, + fileStats() { + return stats(this.diffFile); + }, }, }; </script> @@ -41,27 +53,32 @@ export default { <div class="diff-stats" :class="{ - 'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader, - 'd-none d-sm-inline-flex': !isCompareVersionsHeader, + 'is-compare-versions-header gl-display-none gl-lg-display-inline-flex': isCompareVersionsHeader, + 'gl-display-none gl-sm-display-inline-flex': !isCompareVersionsHeader, }" > - <div v-if="hasDiffFiles" class="diff-stats-group"> - <gl-icon name="doc-code" class="diff-stats-icon text-secondary" /> - <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span> - </div> - <div - class="diff-stats-group cgreen d-flex align-items-center" - :class="{ bold: isCompareVersionsHeader }" - > - <span>+</span> - <span class="js-file-addition-line">{{ addedLines }}</span> + <div v-if="notDiffable" :class="fileStats.classes"> + {{ fileStats.text }} </div> - <div - class="diff-stats-group cred d-flex align-items-center" - :class="{ bold: isCompareVersionsHeader }" - > - <span>-</span> - <span class="js-file-deletion-line">{{ removedLines }}</span> + <div v-else class="diff-stats-contents"> + <div v-if="hasDiffFiles" class="diff-stats-group"> + <gl-icon name="doc-code" class="diff-stats-icon text-secondary" /> + <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span> + </div> + <div + class="diff-stats-group gl-text-green-600 gl-display-flex gl-align-items-center" + :class="{ bold: isCompareVersionsHeader }" + > + <span>+</span> + <span data-testid="js-file-addition-line">{{ addedLines }}</span> + </div> + <div + class="diff-stats-group gl-text-red-500 gl-display-flex gl-align-items-center" + :class="{ bold: isCompareVersionsHeader }" + > + <span>-</span> + <span data-testid="js-file-deletion-line">{{ removedLines }}</span> + </div> </div> </div> </template> diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index 43cfa22073f..a2a6ebaeedf 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -3,6 +3,7 @@ import { mapGetters, mapState, mapActions } from 'vuex'; 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 glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import DiffCommentCell from './diff_comment_cell.vue'; import DiffExpansionCell from './diff_expansion_cell.vue'; import DiffRow from './diff_row.vue'; @@ -14,7 +15,7 @@ export default { DiffCommentCell, DraftNote, }, - mixins: [draftCommentsMixin], + mixins: [draftCommentsMixin, glFeatureFlagsMixin()], props: { diffFile: { type: Object, @@ -43,6 +44,7 @@ export default { }, computed: { ...mapGetters('diffs', ['commitId']), + ...mapState('diffs', ['codequalityDiff']), ...mapState({ selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition, selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover, @@ -56,6 +58,12 @@ export default { this.diffLines, ); }, + hasCodequalityChanges() { + return ( + this.glFeatures.codequalityMrDiffAnnotations && + this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0 + ); + }, }, methods: { ...mapActions(['setSelectedCommentPosition']), @@ -98,7 +106,7 @@ export default { <template> <div - :class="[$options.userColorScheme, { inline }]" + :class="[$options.userColorScheme, { inline, 'with-codequality': hasCodequalityChanges }]" :data-commit-id="commitId" class="diff-grid diff-table code diff-wrap-lines js-syntax-highlight text-file" > diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 879922f86a2..178f93b651e 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,10 +1,19 @@ <script> -import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui'; +import { + GlButtonGroup, + GlButton, + GlDropdown, + GlFormCheckbox, + GlTooltipDirective, +} from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { SETTINGS_DROPDOWN } from '../i18n'; export default { i18n: SETTINGS_DROPDOWN, + directives: { + GlTooltip: GlTooltipDirective, + }, components: { GlButtonGroup, GlButton, @@ -27,7 +36,7 @@ export default { this.setFileByFile({ fileByFile: !this.viewDiffsFileByFile }); }, toggleWhitespace(updatedSetting) { - this.setShowWhitespace({ showWhitespace: updatedSetting, pushState: true }); + this.setShowWhitespace({ showWhitespace: updatedSetting }); }, }, }; @@ -35,9 +44,13 @@ export default { <template> <gl-dropdown + v-gl-tooltip icon="settings" - :text="__('Diff view settings')" + :title="$options.i18n.preferences" + :text="$options.i18n.preferences" :text-sr-only="true" + :aria-label="$options.i18n.preferences" + :header-text="$options.i18n.preferences" toggle-class="js-show-diff-settings" right > |