diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
11 files changed, 87 insertions, 28 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 530f3a3a7f7..f5c0776ca35 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -331,6 +331,8 @@ export default { mrReviews: this.rehydratedMrReviews, }); + this.interfaceWithDOM(); + if (this.endpointCodequality) { this.setCodequalityEndpoint(this.endpointCodequality); } @@ -445,6 +447,16 @@ export default { notesEventHub.$off('refetchDiffData', this.refetchDiffData); notesEventHub.$off('fetchDiffData', this.fetchData); }, + interfaceWithDOM() { + this.diffsTab = document.querySelector('.js-diffs-tab'); + }, + updateChangesTabCount() { + const badge = this.diffsTab.querySelector('.gl-badge'); + + if (this.diffsTab && badge) { + badge.textContent = this.diffFilesLength; + } + }, navigateToDiffFileNumber(number) { this.navigateToDiffFileIndex(number - 1); }, @@ -461,7 +473,11 @@ export default { this.fetchDiffFilesMeta() .then(({ real_size }) => { this.diffFilesLength = parseInt(real_size, 10); - if (toggleTree) this.setTreeDisplay(); + if (toggleTree) { + this.setTreeDisplay(); + } + + this.updateChangesTabCount(); }) .catch(() => { createFlash({ @@ -641,6 +657,7 @@ export default { <div v-if="renderFileTree" :style="{ width: `${treeWidth}px` }" + :class="{ 'is-sidebar-moved': glFeatures.movedMrSidebar }" class="diff-tree-list js-diff-tree-list gl-px-5" > <panel-resizer diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue index fd219a7d00f..4501988ee4f 100644 --- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue +++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue @@ -37,7 +37,7 @@ export default { :class="{ 'is-active': version.selected, }" - :is-check-item="true" + is-check-item :is-checked="version.selected" :href="version.href" > diff --git a/app/assets/javascripts/diffs/components/diff_code_quality.vue b/app/assets/javascripts/diffs/components/diff_code_quality.vue index f339b108a11..8498724740f 100644 --- a/app/assets/javascripts/diffs/components/diff_code_quality.vue +++ b/app/assets/javascripts/diffs/components/diff_code_quality.vue @@ -5,10 +5,6 @@ import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/c export default { components: { GlButton, GlIcon }, props: { - line: { - type: Number, - required: true, - }, codeQuality: { type: Array, required: true, @@ -33,7 +29,7 @@ export default { <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" + 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-font-regular" > <gl-icon :size="12" @@ -50,7 +46,7 @@ export default { size="small" icon="close" class="gl-absolute gl-right-2 gl-top-2" - @click="$emit('hideCodeQualityFindings', line)" + @click="$emit('hideCodeQualityFindings')" /> </div> </template> diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue index 70071a3ff53..d7b63d205dc 100644 --- a/app/assets/javascripts/diffs/components/diff_content.vue +++ b/app/assets/javascripts/diffs/components/diff_content.vue @@ -11,7 +11,7 @@ import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_prev import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue'; import NoteForm from '~/notes/components/note_form.vue'; import eventHub from '~/notes/event_hub'; -import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import { IMAGE_DIFF_POSITION_TYPE } from '../constants'; import { getDiffMode } from '../store/utils'; import DiffDiscussions from './diff_discussions.vue'; @@ -28,7 +28,7 @@ export default { ImageDiffOverlay, NotDiffableViewer, NoPreviewViewer, - userAvatarLink, + UserAvatarLink, DiffFileDrafts, }, mixins: [diffLineNoteFormMixin, draftCommentsMixin], diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index b39b50c4cdc..25d3bda147b 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -2,11 +2,11 @@ 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'; +import NoteableDiscussion from '~/notes/components/noteable_discussion.vue'; export default { components: { - noteableDiscussion, + NoteableDiscussion, GlIcon, DesignNotePin, }, diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 07316f9433a..705b43a222d 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -19,6 +19,7 @@ import { scrollToElement } from '~/lib/utils/common_utils'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { DIFF_FILE_AUTOMATIC_COLLAPSE } from '../constants'; import { DIFF_FILE_HEADER } from '../i18n'; @@ -45,7 +46,7 @@ export default { GlTooltip: GlTooltipDirective, SafeHtml: GlSafeHtmlDirective, }, - mixins: [IdState({ idProp: (vm) => vm.diffFile.file_hash })], + mixins: [IdState({ idProp: (vm) => vm.diffFile.file_hash }), glFeatureFlagsMixin()], i18n: { ...DIFF_FILE_HEADER, compareButtonLabel: __('Compare submodule commit revisions'), @@ -276,7 +277,10 @@ export default { <template> <div ref="header" - :class="{ 'gl-z-dropdown-menu!': idState.moreActionsShown }" + :class="{ + 'gl-z-dropdown-menu!': idState.moreActionsShown, + 'is-sidebar-moved': glFeatures.movedMrSidebar, + }" class="js-file-title file-title file-title-flex-parent" data-qa-selector="file_title_container" :data-qa-file-name="filePath" diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue index a077c8ae3af..8553bdd3020 100644 --- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue +++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue @@ -4,6 +4,7 @@ import { truncate } from '~/lib/utils/text_utility'; import { n__ } from '~/locale'; import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants'; +import { HIDE_COMMENTS } from '../i18n'; export default { components: { @@ -55,6 +56,9 @@ export default { return `${noteData.author.name}: ${note}`; }, }, + i18n: { + HIDE_COMMENTS, + }, }; </script> @@ -62,8 +66,10 @@ export default { <div class="diff-comment-avatar-holders"> <button v-if="discussionsExpanded" + v-gl-tooltip + :title="$options.i18n.HIDE_COMMENTS" type="button" - :aria-label="__('Show comments')" + :aria-label="$options.i18n.HIDE_COMMENTS" class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button" @click="$emit('toggleLineDiscussions')" > diff --git a/app/assets/javascripts/diffs/components/diff_line.vue b/app/assets/javascripts/diffs/components/diff_line.vue new file mode 100644 index 00000000000..448272549d3 --- /dev/null +++ b/app/assets/javascripts/diffs/components/diff_line.vue @@ -0,0 +1,35 @@ +<script> +import DiffCodeQuality from './diff_code_quality.vue'; + +export default { + components: { + DiffCodeQuality, + }, + props: { + line: { + type: Object, + required: true, + }, + }, + computed: { + parsedCodeQuality() { + return (this.line.left ?? this.line.right)?.codequality; + }, + codeQualityLineNumber() { + return this.parsedCodeQuality[0].line; + }, + }, + methods: { + hideCodeQualityFindings() { + this.$emit('hideCodeQualityFindings', this.codeQualityLineNumber); + }, + }, +}; +</script> + +<template> + <diff-code-quality + :code-quality="parsedCodeQuality" + @hideCodeQualityFindings="hideCodeQualityFindings" + /> +</template> diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index 467a0f8d2db..f63ab1bb067 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -7,7 +7,7 @@ import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue'; import { commentLineOptions, formatLineRange } from '~/notes/components/multiline_comment_utils'; -import noteForm from '~/notes/components/note_form.vue'; +import NoteForm from '~/notes/components/note_form.vue'; import autosave from '~/notes/mixins/autosave'; import { DIFF_NOTE_TYPE, @@ -18,7 +18,7 @@ import { export default { components: { - noteForm, + NoteForm, MultilineCommentForm, }, mixins: [autosave, diffLineNoteFormMixin, glFeatureFlagsMixin()], diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index 63c5aedd7ce..e5695c4390f 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -64,6 +64,11 @@ export default { type: Function, required: true, }, + codeQualityExpanded: { + type: Boolean, + required: false, + default: false, + }, }, classNameMap: memoize( (props) => { @@ -272,6 +277,7 @@ export default { <component :is="$options.CodeQualityGutterIcon" v-if="$options.showCodequalityLeft(props)" + :code-quality-expanded="props.codeQualityExpanded" :codequality="props.line.left.codequality" :file-path="props.filePath" @showCodeQualityFindings=" diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index ea94df1ad5b..91bf3283379 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -9,7 +9,7 @@ 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 DiffLine from './diff_line.vue'; import DiffExpansionCell from './diff_expansion_cell.vue'; import DiffRow from './diff_row.vue'; import { isHighlighted } from './diff_row_utils'; @@ -18,8 +18,8 @@ export default { components: { DiffExpansionCell, DiffRow, + DiffLine, DiffCommentCell, - DiffCodeQuality, DraftNote, }, directives: { @@ -96,10 +96,6 @@ export default { } this.idState.dragStart = line; }, - parseCodeQuality(line) { - return (line.left ?? line.right)?.codequality; - }, - hideCodeQualityFindings(line) { const index = this.codeQualityExpandedLines.indexOf(line); if (index > -1) { @@ -179,7 +175,7 @@ export default { ); }, getCodeQualityLine(line) { - return this.parseCodeQuality(line)?.[0]?.line; + return (line.left ?? line.right)?.codequality?.[0]?.line; }, }, userColorScheme: window.gon.user_color_scheme, @@ -234,6 +230,7 @@ export default { :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine" :inline="inline" :index="index" + :code-quality-expanded="codeQualityExpandedLines.includes(getCodeQualityLine(line))" :is-highlighted="isHighlighted(line)" :file-line-coverage="fileLineCoverage" :coverage-loaded="coverageLoaded" @@ -248,15 +245,13 @@ export default { @startdragging="onStartDragging" @stopdragging="onStopDragging" /> - - <diff-code-quality + <diff-line v-if=" glFeatures.refactorCodeQualityInlineFindings && codeQualityExpandedLines.includes(getCodeQualityLine(line)) " :key="line.line_code" - :line="getCodeQualityLine(line)" - :code-quality="parseCodeQuality(line)" + :line="line" @hideCodeQualityFindings="hideCodeQualityFindings" /> <div |