diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
9 files changed, 32 insertions, 23 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index f5c0776ca35..bc49464a560 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -11,7 +11,7 @@ import { MR_COMMITS_NEXT_COMMIT, MR_COMMITS_PREVIOUS_COMMIT, } from '~/behaviors/shortcuts/keybindings'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { isSingleViewStyle } from '~/helpers/diffs_helper'; import { helpPagePath } from '~/helpers/help_page_helper'; import { parseBoolean } from '~/lib/utils/common_utils'; @@ -471,8 +471,8 @@ export default { }, fetchData(toggleTree = true) { this.fetchDiffFilesMeta() - .then(({ real_size }) => { - this.diffFilesLength = parseInt(real_size, 10); + .then(({ real_size = 0 }) => { + this.diffFilesLength = parseInt(real_size, 10) || 0; if (toggleTree) { this.setTreeDisplay(); } @@ -480,7 +480,7 @@ export default { this.updateChangesTabCount(); }) .catch(() => { - createFlash({ + createAlert({ message: __('Something went wrong on our end. Please try again!'), }); }); @@ -495,7 +495,7 @@ export default { this.setDiscussions(); }) .catch(() => { - createFlash({ + createAlert({ message: __('Something went wrong on our end. Please try again!'), }); }); diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index 0e5acd0928b..5a45797ed98 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -128,7 +128,7 @@ export default { :img-src="authorAvatar" :img-alt="authorName" :img-size="32" - class="avatar-cell d-none d-sm-block" + class="avatar-cell d-none d-sm-block gl-my-2 gl-mr-4" /> </div> <div @@ -172,7 +172,7 @@ export default { v-if="commit.description_html" v-safe-html:[$options.safeHtmlConfig]="commitDescription" :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }" - class="commit-row-description gl-mb-3 gl-text-body" + class="commit-row-description gl-mb-3 gl-text-body gl-white-space-pre-line" ></pre> </div> </li> diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue index b1a2b2a72ea..facfc553053 100644 --- a/app/assets/javascripts/diffs/components/commit_widget.vue +++ b/app/assets/javascripts/diffs/components/commit_widget.vue @@ -22,7 +22,7 @@ export default { <template> <div class="info-well mw-100 mx-0"> <div class="well-segment"> - <ul class="blob-commit-info"> + <ul class="gl-list-style-none gl-m-0 gl-p-0"> <commit-item :commit="commit" :collapsible="collapsible" /> </ul> </div> diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 8a5325cf218..6104a304fbd 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -80,7 +80,7 @@ export default { <template> <div class="mr-version-controls"> - <div class="mr-version-menus-container content-block"> + <div class="mr-version-menus-container gl-px-5 gl-pt-3 gl-pb-2"> <gl-button v-if="hasChanges" v-gl-tooltip.hover diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index 3082ba0f16f..b2098b9e82d 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 { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { mapActions } from 'vuex'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { s__, sprintf } from '~/locale'; import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants'; import * as utils from '../store/utils'; @@ -92,7 +92,7 @@ export default { ) { this.loadMoreLines({ endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers }) .catch(() => { - createFlash({ + createAlert({ message: s__('Diffs|Something went wrong while fetching diff lines.'), }); }) @@ -224,6 +224,7 @@ export default { <button v-if="showExpandDown" :title="s__('Diffs|Next 20 lines')" + :aria-label="s__('Diffs|Next 20 lines')" :disabled="loading.down" type="button" class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button" @@ -235,6 +236,7 @@ export default { <button v-if="lineCountBetween !== -1 && lineCountBetween < 20" :title="s__('Diffs|Expand all lines')" + :aria-label="s__('Diffs|Expand all lines')" :disabled="loading.all" type="button" class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button" @@ -246,6 +248,7 @@ export default { <button v-if="showExpandUp" :title="s__('Diffs|Previous 20 lines')" + :aria-label="s__('Diffs|Previous 20 lines')" :disabled="loading.up" type="button" class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button" diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index aec608007d5..422bf52a1fa 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -10,7 +10,7 @@ import { escape } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; import { IdState } from 'vendor/vue-virtual-scroller'; import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { hasDiff } from '~/helpers/diffs_helper'; import { diffViewerErrors } from '~/ide/constants'; import { scrollToElement } from '~/lib/utils/common_utils'; @@ -309,7 +309,7 @@ export default { }) .catch(() => { idState.isLoadingCollapsedDiff = false; - createFlash({ + createAlert({ message: this.$options.i18n.genericError, }); }); diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 705b43a222d..91c3df39e32 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -281,7 +281,7 @@ export default { 'gl-z-dropdown-menu!': idState.moreActionsShown, 'is-sidebar-moved': glFeatures.movedMrSidebar, }" - class="js-file-title file-title file-title-flex-parent" + class="js-file-title file-title file-title-flex-parent gl-border" data-qa-selector="file_title_container" :data-qa-file-name="filePath" @click.self="handleToggleFile" diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js index f610ac979ca..7732badde34 100644 --- a/app/assets/javascripts/diffs/components/diff_row_utils.js +++ b/app/assets/javascripts/diffs/components/diff_row_utils.js @@ -108,7 +108,7 @@ export const mapParallel = (content) => (line) => { ...left, renderDiscussion: hasExpandedDiscussionOnLeft, hasDraft: content.hasParallelDraftLeft(content.diffFile.file_hash, line), - lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'left'), + lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'left'), hasCommentForm: left.hasForm, isConflictMarker: line.left.type === CONFLICT_MARKER_OUR || line.left.type === CONFLICT_MARKER_THEIR, @@ -123,7 +123,7 @@ export const mapParallel = (content) => (line) => { hasExpandedDiscussionOnRight && right.type && right.type !== EXPANDED_LINE_TYPE, ), hasDraft: content.hasParallelDraftRight(content.diffFile.file_hash, line), - lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'right'), + lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'right'), hasCommentForm: Boolean(right.hasForm && right.type && right.type !== EXPANDED_LINE_TYPE), emptyCellClassMap: { conflict_their: line.left?.type === CONFLICT_OUR }, addCommentTooltip: addCommentTooltip(line.right), @@ -145,7 +145,7 @@ export const mapParallel = (content) => (line) => { lineCode: lineCode(line), isMetaLineLeft: isMetaLine(left?.type), isMetaLineRight: isMetaLine(right?.type), - draftRowClasses: left?.lineDraft > 0 || right?.lineDraft > 0 ? '' : 'js-temp-notes-holder', + draftRowClasses: left?.hasDraft || right?.hasDraft ? '' : 'js-temp-notes-holder', renderCommentRow, commentRowClasses: hasDiscussions(left) || hasDiscussions(right) ? '' : 'js-temp-notes-holder', }; diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index 91bf3283379..5ea118afe78 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -177,6 +177,12 @@ export default { getCodeQualityLine(line) { return (line.left ?? line.right)?.codequality?.[0]?.line; }, + lineDrafts(line, side) { + return (line[side]?.lineDrafts || []).filter((entry) => entry.isDraft); + }, + lineHasDrafts(line, side) { + return this.lineDrafts(line, side).length > 0; + }, }, userColorScheme: window.gon.user_color_scheme, }; @@ -297,19 +303,19 @@ export default { class="diff-grid-drafts diff-tr notes_holder" > <div - v-if="!inline || (line.left && line.left.lineDraft.isDraft)" + v-if="!inline || lineHasDrafts(line, 'left')" class="diff-td notes-content parallel old" > - <div v-if="line.left && line.left.lineDraft.isDraft" class="content"> - <draft-note :draft="line.left.lineDraft" :line="line.left" /> + <div v-for="draft in lineDrafts(line, 'left')" :key="draft.id" class="content"> + <draft-note :draft="draft" :line="line.left" /> </div> </div> <div - v-if="!inline || (line.right && line.right.lineDraft.isDraft)" + v-if="!inline || lineHasDrafts(line, 'right')" class="diff-td notes-content parallel new" > - <div v-if="line.right && line.right.lineDraft.isDraft" class="content"> - <draft-note :draft="line.right.lineDraft" :line="line.right" /> + <div v-for="draft in lineDrafts(line, 'right')" :key="draft.id" class="content"> + <draft-note :draft="draft" :line="line.right" /> </div> </div> </div> |