diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
5 files changed, 41 insertions, 44 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 4323499ef1f..253e1e3b70e 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -23,9 +23,7 @@ import { ALERT_OVERFLOW_HIDDEN, ALERT_MERGE_CONFLICT, ALERT_COLLAPSED_FILES, - EVT_VIEW_FILE_BY_FILE, } from '../constants'; -import eventHub from '../event_hub'; import { reviewStatuses } from '../utils/file_reviews'; import { diffsApp } from '../utils/performance'; @@ -127,7 +125,7 @@ export default { required: false, default: '', }, - mrReviews: { + rehydratedMrReviews: { type: Object, required: false, default: () => ({}), @@ -166,6 +164,7 @@ export default { 'canMerge', 'hasConflicts', 'viewDiffsFileByFile', + 'mrReviews', ]), ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']), ...mapGetters(['isNotesFetched', 'getNoteableData']), @@ -270,7 +269,7 @@ export default { showSuggestPopover: this.showSuggestPopover, viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference), defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage, - mrReviews: this.mrReviews || {}, + mrReviews: this.rehydratedMrReviews, }); if (this.shouldShow) { @@ -332,16 +331,11 @@ export default { subscribeToEvents() { notesEventHub.$once('fetchDiffData', this.fetchData); notesEventHub.$on('refetchDiffData', this.refetchDiffData); - eventHub.$on(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener); }, unsubscribeFromEvents() { - eventHub.$off(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener); notesEventHub.$off('refetchDiffData', this.refetchDiffData); notesEventHub.$off('fetchDiffData', this.fetchData); }, - fileByFileListener({ setting } = {}) { - this.setFileByFile({ fileByFile: setting }); - }, navigateToDiffFileNumber(number) { this.navigateToDiffFileIndex(number - 1); }, @@ -520,7 +514,7 @@ export default { v-for="(file, index) in diffs" :key="file.newPath" :file="file" - :reviewed="fileReviews[index]" + :reviewed="fileReviews[file.id]" :is-first-file="index === 0" :is-last-file="index === diffFilesLength - 1" :help-page-path="helpPagePath" diff --git a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue index 9027d0c8aa4..3766c125325 100644 --- a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue +++ b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue @@ -35,8 +35,9 @@ export default { <slot v-if="hasForm" name="form"></slot> <template v-else-if="renderReplyPlaceholder"> <reply-placeholder - :button-text="__('Start a new discussion...')" - @onClick="$emit('showNewDiscussionForm')" + :placeholder-text="__('Start a new discussion…')" + :label-text="__('New discussion')" + @focus="$emit('showNewDiscussionForm')" /> </template> </template> diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index f77c8d7406b..ca4543f7002 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -150,6 +150,11 @@ export default { }, }, watch: { + 'file.id': { + handler: function fileIdHandler() { + this.manageViewedEffects(); + }, + }, 'file.file_hash': { handler: function hashChangeWatch(newHash, oldHash) { this.isCollapsed = isCollapsed(this.file); @@ -186,9 +191,7 @@ export default { this.postRender(); } - if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) { - this.handleToggle(); - } + this.manageViewedEffects(); }, beforeDestroy() { eventHub.$off(EVT_EXPAND_ALL_FILES, this.expandAllListener); @@ -200,6 +203,11 @@ export default { 'setRenderIt', 'setFileCollapsedByUser', ]), + manageViewedEffects() { + if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) { + this.handleToggle(); + } + }, expandAllListener() { if (this.isCollapsed) { this.handleToggle(); diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 1195a7f2565..1f50b3a38a6 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -339,14 +339,12 @@ export default { v-if="isReviewable && showLocalFileReviews" v-gl-tooltip.hover data-testid="fileReviewCheckbox" - class="gl-mb-0" + class="gl-mr-5 gl-display-flex gl-align-items-center" :title="$options.i18n.fileReviewTooltip" :checked="reviewed" @change="toggleReview" > - <span class="gl-line-height-20"> - {{ $options.i18n.fileReviewLabel }} - </span> + {{ $options.i18n.fileReviewLabel }} </gl-form-checkbox> <gl-button-group class="gl-pt-0!"> <gl-button diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 7d74e81257a..879922f86a2 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,9 +1,6 @@ <script> import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; - -import { EVT_VIEW_FILE_BY_FILE } from '../constants'; -import eventHub from '../event_hub'; import { SETTINGS_DROPDOWN } from '../i18n'; export default { @@ -24,9 +21,13 @@ export default { 'setParallelDiffViewType', 'setRenderTreeList', 'setShowWhitespace', + 'setFileByFile', ]), toggleFileByFile() { - eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile }); + this.setFileByFile({ fileByFile: !this.viewDiffsFileByFile }); + }, + toggleWhitespace(updatedSetting) { + this.setShowWhitespace({ showWhitespace: updatedSetting, pushState: true }); }, }, }; @@ -82,26 +83,21 @@ export default { </gl-button> </gl-button-group> </div> - <div class="gl-mt-3 gl-px-3"> - <label class="gl-mb-0"> - <input - id="show-whitespace" - type="checkbox" - :checked="showWhitespace" - @change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })" - /> - {{ __('Show whitespace changes') }} - </label> - </div> - <div class="gl-mt-3 gl-px-3"> - <gl-form-checkbox - data-testid="file-by-file" - class="gl-mb-0" - :checked="viewDiffsFileByFile" - @input="toggleFileByFile" - > - {{ $options.i18n.fileByFile }} - </gl-form-checkbox> - </div> + <gl-form-checkbox + data-testid="show-whitespace" + class="gl-mt-3 gl-ml-3" + :checked="showWhitespace" + @input="toggleWhitespace" + > + {{ $options.i18n.whitespace }} + </gl-form-checkbox> + <gl-form-checkbox + data-testid="file-by-file" + class="gl-ml-3 gl-mb-0" + :checked="viewDiffsFileByFile" + @input="toggleFileByFile" + > + {{ $options.i18n.fileByFile }} + </gl-form-checkbox> </gl-dropdown> </template> |