... @@ -2,11 +2,11 @@
... @@ -2,11 +2,11 @@
import { mapState , mapGetters , mapActions } from ' vuex ' ;
import { mapState , mapGetters , mapActions } from ' vuex ' ;
import { GlLoadingIcon } from ' @gitlab/ui ' ;
import { GlLoadingIcon } from ' @gitlab/ui ' ;
import Mousetrap from ' mousetrap ' ;
import Mousetrap from ' mousetrap ' ;
import Icon from ' ~/vue_shared/components/icon.vue ' ;
import { __ } from ' ~/locale ' ;
import { __ } from ' ~/locale ' ;
import createFlash from ' ~/flash ' ;
import createFlash from ' ~/flash ' ;
import PanelResizer from ' ~/vue_shared/components/panel_resizer.vue ' ;
import PanelResizer from ' ~/vue_shared/components/panel_resizer.vue ' ;
import glFeatureFlagsMixin from ' ~/vue_shared/mixins/gl_feature_flags_mixin ' ;
import glFeatureFlagsMixin from ' ~/vue_shared/mixins/gl_feature_flags_mixin ' ;
import { isSingleViewStyle } from ' ~/helpers/diffs_helper ' ;
import eventHub from ' ../../notes/event_hub ' ;
import eventHub from ' ../../notes/event_hub ' ;
import CompareVersions from ' ./compare_versions.vue ' ;
import CompareVersions from ' ./compare_versions.vue ' ;
import DiffFile from ' ./diff_file.vue ' ;
import DiffFile from ' ./diff_file.vue ' ;
... @@ -27,7 +27,6 @@ import {
... @@ -27,7 +27,6 @@ import {
export default {
export default {
name : ' DiffsApp ' ,
name : ' DiffsApp ' ,
components : {
components : {
Icon ,
CompareVersions ,
CompareVersions ,
DiffFile ,
DiffFile ,
NoChanges ,
NoChanges ,
... @@ -95,8 +94,8 @@ export default {
... @@ -95,8 +94,8 @@ export default {
parseInt ( localStorage . getItem ( TREE_LIST_WIDTH_STORAGE_KEY ), 10 ) || INITIAL_TREE_WIDTH ;
parseInt ( localStorage . getItem ( TREE_LIST_WIDTH_STORAGE_KEY ), 10 ) || INITIAL_TREE_WIDTH ;
return {
return {
assignedDiscussions : false ,
treeWidth ,
treeWidth ,
diffFilesLength : 0 ,
};
};
},
},
computed : {
computed : {
... @@ -114,6 +113,7 @@ export default {
... @@ -114,6 +113,7 @@ export default {
numVisibleFiles : state => state . diffs . size ,
numVisibleFiles : state => state . diffs . size ,
plainDiffPath : state => state . diffs . plainDiffPath ,
plainDiffPath : state => state . diffs . plainDiffPath ,
emailPatchPath : state => state . diffs . emailPatchPath ,
emailPatchPath : state => state . diffs . emailPatchPath ,
retrievingBatches : state => state . diffs . retrievingBatches ,
}),
}),
... mapState ( ' diffs ' , [ ' showTreeList ' , ' isLoading ' , ' startVersion ' ]),
... mapState ( ' diffs ' , [ ' showTreeList ' , ' isLoading ' , ' startVersion ' ]),
... mapGetters ( ' diffs ' , [ ' isParallelView ' , ' currentDiffIndex ' ]),
... mapGetters ( ' diffs ' , [ ' isParallelView ' , ' currentDiffIndex ' ]),
... @@ -144,12 +144,12 @@ export default {
... @@ -144,12 +144,12 @@ export default {
isLimitedContainer () {
isLimitedContainer () {
return ! this . showTreeList && ! this . isParallelView && ! this . isFluidLayout ;
return ! this . showTreeList && ! this . isParallelView && ! this . isFluidLayout ;
},
},
shouldSetDiscussions () {
return this . isNotesFetched && ! this . assignedDiscussions && ! this . isLoading ;
},
},
},
watch : {
watch : {
diffViewType () {
diffViewType () {
if ( this . needsReload () || this . needsFirstLoad ()) {
this . refetchDiffData ();
}
this . adjustView ();
this . adjustView ();
},
},
shouldShow () {
shouldShow () {
... @@ -163,11 +163,6 @@ export default {
... @@ -163,11 +163,6 @@ export default {
},
},
isLoading : ' adjustView ' ,
isLoading : ' adjustView ' ,
showTreeList : ' adjustView ' ,
showTreeList : ' adjustView ' ,
shouldSetDiscussions ( newVal ) {
if ( newVal ) {
this . setDiscussions ();
}
},
},
},
mounted () {
mounted () {
this . setBaseConfig ({
this . setBaseConfig ({
... @@ -192,10 +187,24 @@ export default {
... @@ -192,10 +187,24 @@ export default {
},
},
created () {
created () {
this . adjustView ();
this . adjustView ();
eventHub . $once ( ' fetchedNotesData ' , this . setDiscussions );
eventHub . $once ( ' fetchDiffData ' , this . fetchData );
eventHub . $once ( ' fetchDiffData ' , this . fetchData );
eventHub . $on ( ' refetchDiffData ' , this . refetchDiffData );
eventHub . $on ( ' refetchDiffData ' , this . refetchDiffData );
this . CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES ;
this . CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES ;
this . unwatchDiscussions = this . $watch (
() => ` ${ this . diffFiles . length } : ${ this . $store . state . notes . discussions . length } ` ,
() => this . setDiscussions (),
);
this . unwatchRetrievingBatches = this . $watch (
() => ` ${ this . retrievingBatches } : ${ this . $store . state . notes . discussions . length } ` ,
() => {
if ( ! this . retrievingBatches && this . $store . state . notes . discussions . length ) {
this . unwatchDiscussions ();
this . unwatchRetrievingBatches ();
}
},
);
},
},
beforeDestroy () {
beforeDestroy () {
eventHub . $off ( ' fetchDiffData ' , this . fetchData );
eventHub . $off ( ' fetchDiffData ' , this . fetchData );
... @@ -217,7 +226,6 @@ export default {
... @@ -217,7 +226,6 @@ export default {
' toggleShowTreeList ' ,
' toggleShowTreeList ' ,
]),
]),
refetchDiffData () {
refetchDiffData () {
this . assignedDiscussions = false ;
this . fetchData ( false );
this . fetchData ( false );
},
},
startDiffRendering () {
startDiffRendering () {
... @@ -228,10 +236,21 @@ export default {
... @@ -228,10 +236,21 @@ export default {
{ timeout : 1000 },
{ timeout : 1000 },
);
);
},
},
needsReload () {
return (
this . glFeatures . singleMrDiffView &&
this . diffFiles . length &&
isSingleViewStyle ( this . diffFiles [ 0 ])
);
},
needsFirstLoad () {
return this . glFeatures . singleMrDiffView && ! this . diffFiles . length ;
},
fetchData ( toggleTree = true ) {
fetchData ( toggleTree = true ) {
if ( this . glFeatures . diffsBatchLoad ) {
if ( this . glFeatures . diffsBatchLoad ) {
this . fetchDiffFilesMeta ()
this . fetchDiffFilesMeta ()
. then (() => {
. then (({ real_size }) => {
this . diffFilesLength = parseInt ( real_size , 10 );
if ( toggleTree ) this . hideTreeListIfJustOneFile ();
if ( toggleTree ) this . hideTreeListIfJustOneFile ();
this . startDiffRendering ();
this . startDiffRendering ();
... @@ -241,19 +260,28 @@ export default {
... @@ -241,19 +260,28 @@ export default {
});
});
this . fetchDiffFilesBatch ()
this . fetchDiffFilesBatch ()
. then (() => {
// Guarantee the discussions are assigned after the batch finishes.
// Just watching the length of the discussions or the diff files
// isn't enough, because with split diff loading, neither will
// change when loading the other half of the diff files.
this . setDiscussions ();
})
. then (() => this . startDiffRendering ())
. then (() => this . startDiffRendering ())
. catch (() => {
. catch (() => {
createFlash ( __ ( ' Something went wrong on our end. Please try again! ' ));
createFlash ( __ ( ' Something went wrong on our end. Please try again! ' ));
});
});
} else {
} else {
this . fetchDiffFiles ()
this . fetchDiffFiles ()
. then (() => {
. then (({ real_size }) => {
this . diffFilesLength = parseInt ( real_size , 10 );
if ( toggleTree ) {
if ( toggleTree ) {
this . hideTreeListIfJustOneFile ();
this . hideTreeListIfJustOneFile ();
}
}
requestIdleCallback (
requestIdleCallback (
() => {
() => {
this . setDiscussions ();
this . startRenderDiffsQueue ();
this . startRenderDiffsQueue ();
},
},
{ timeout : 1000 },
{ timeout : 1000 },
... @@ -269,9 +297,6 @@ export default {
... @@ -269,9 +297,6 @@ export default {
}
}
},
},
setDiscussions () {
setDiscussions () {
if ( this . shouldSetDiscussions ) {
this . assignedDiscussions = true ;
requestIdleCallback (
requestIdleCallback (
() =>
() =>
this . assignDiscussionsToDiff ()
this . assignDiscussionsToDiff ()
... @@ -279,7 +304,6 @@ export default {
... @@ -279,7 +304,6 @@ export default {
. then ( this . startTaskList ),
. then ( this . startTaskList ),
{ timeout : 1000 },
{ timeout : 1000 },
);
);
}
},
},
adjustView () {
adjustView () {
if ( this . shouldShow ) {
if ( this . shouldShow ) {
... @@ -337,6 +361,7 @@ export default {
... @@ -337,6 +361,7 @@ export default {
:merge-request-diff= "mergeRequestDiff"
:merge-request-diff= "mergeRequestDiff"
:target-branch= "targetBranch"
:target-branch= "targetBranch"
:is-limited-container= "isLimitedContainer"
:is-limited-container= "isLimitedContainer"
:diff-files-length= "diffFilesLength"
/>
/>
<hidden-files-warning
<hidden-files-warning
... @@ -349,7 +374,7 @@ export default {
... @@ -349,7 +374,7 @@ export default {
<div
<div
:data-can-create-note= "getNoteableData.current_user.can_create_note"
:data-can-create-note= "getNoteableData.current_user.can_create_note"
class= "files d-flex prepend-top-default "
class= "files d-flex"
>
>
<div
<div
v-show= "showTreeList"
v-show= "showTreeList"
...
...
... ...