2018-06-21 12:22:40 +00:00
< script >
2018-10-03 09:05:43 +00:00
import { mapActions , mapGetters , mapState } from 'vuex' ;
2020-04-21 18:09:31 +00:00
import { escape } from 'lodash' ;
2019-12-09 12:07:58 +00:00
import { GlLoadingIcon } from '@gitlab/ui' ;
2020-07-28 12:09:49 +00:00
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin' ;
2018-06-21 12:22:40 +00:00
import { _ _ , sprintf } from '~/locale' ;
import createFlash from '~/flash' ;
2020-01-14 12:07:41 +00:00
import { hasDiff } from '~/helpers/diffs_helper' ;
2018-12-08 07:19:03 +00:00
import eventHub from '../../notes/event_hub' ;
2018-06-21 12:22:40 +00:00
import DiffFileHeader from './diff_file_header.vue' ;
import DiffContent from './diff_content.vue' ;
2019-02-15 17:56:50 +00:00
import { diffViewerErrors } from '~/ide/constants' ;
2018-06-21 12:22:40 +00:00
export default {
components : {
DiffFileHeader ,
DiffContent ,
2018-11-07 10:06:15 +00:00
GlLoadingIcon ,
2018-06-21 12:22:40 +00:00
} ,
2020-07-28 12:09:49 +00:00
mixins : [ glFeatureFlagsMixin ( ) ] ,
2018-06-21 12:22:40 +00:00
props : {
file : {
type : Object ,
required : true ,
} ,
2018-07-17 15:47:02 +00:00
canCurrentUserFork : {
type : Boolean ,
2018-06-21 12:22:40 +00:00
required : true ,
} ,
2018-12-13 19:17:19 +00:00
helpPagePath : {
type : String ,
required : false ,
default : '' ,
} ,
2020-07-15 06:09:35 +00:00
viewDiffsFileByFile : {
type : Boolean ,
required : true ,
} ,
2018-06-21 12:22:40 +00:00
} ,
data ( ) {
return {
isLoadingCollapsedDiff : false ,
forkMessageVisible : false ,
2019-02-15 17:56:50 +00:00
isCollapsed : this . file . viewer . collapsed || false ,
2018-06-21 12:22:40 +00:00
} ;
} ,
computed : {
2018-10-03 09:05:43 +00:00
... mapState ( 'diffs' , [ 'currentDiffFileId' ] ) ,
2018-10-19 13:09:16 +00:00
... mapGetters ( [ 'isNotesFetched' ] ) ,
2018-11-13 13:42:04 +00:00
... mapGetters ( 'diffs' , [ 'getDiffFileDiscussions' ] ) ,
2018-06-21 12:22:40 +00:00
viewBlobLink ( ) {
return sprintf (
_ _ ( 'You can %{linkStart}view the blob%{linkEnd} instead.' ) ,
{
2020-04-21 18:09:31 +00:00
linkStart : ` <a href=" ${ escape ( this . file . view _path ) } "> ` ,
2018-06-21 12:22:40 +00:00
linkEnd : '</a>' ,
} ,
false ,
) ;
} ,
2018-08-14 08:23:07 +00:00
showLoadingIcon ( ) {
2019-02-18 15:16:04 +00:00
return this . isLoadingCollapsedDiff || ( ! this . file . renderIt && ! this . isCollapsed ) ;
2018-08-14 08:23:07 +00:00
} ,
2019-10-29 18:06:15 +00:00
hasDiff ( ) {
2020-01-14 12:07:41 +00:00
return hasDiff ( this . file ) ;
2018-11-13 13:42:04 +00:00
} ,
2019-02-15 17:56:50 +00:00
isFileTooLarge ( ) {
return this . file . viewer . error === diffViewerErrors . too _large ;
} ,
errorMessage ( ) {
return this . file . viewer . error _message ;
} ,
2019-07-16 02:48:40 +00:00
forkMessage ( ) {
return sprintf (
_ _ (
"You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request." ,
) ,
{
tag _start : '<span class="js-file-fork-suggestion-section-action">' ,
tag _end : '</span>' ,
} ,
false ,
) ;
} ,
2018-11-13 13:42:04 +00:00
} ,
watch : {
2019-02-15 17:56:50 +00:00
isCollapsed : function fileCollapsedWatch ( newVal , oldVal ) {
2019-10-29 18:06:15 +00:00
if ( ! newVal && oldVal && ! this . hasDiff ) {
2018-11-13 13:42:04 +00:00
this . handleLoadCollapsedDiff ( ) ;
}
2019-03-11 13:09:36 +00:00
this . setFileCollapsed ( { filePath : this . file . file _path , collapsed : newVal } ) ;
} ,
2020-07-28 12:09:49 +00:00
'file.file_hash' : {
handler : function watchFileHash ( ) {
if (
this . glFeatures . autoExpandCollapsedDiffs &&
this . viewDiffsFileByFile &&
this . file . viewer . collapsed
) {
this . isCollapsed = false ;
this . handleLoadCollapsedDiff ( ) ;
} else {
this . isCollapsed = this . file . viewer . collapsed || false ;
}
} ,
immediate : true ,
} ,
2019-03-11 13:09:36 +00:00
'file.viewer.collapsed' : function setIsCollapsed ( newVal ) {
2020-07-28 12:09:49 +00:00
if ( ! this . viewDiffsFileByFile && ! this . glFeatures . autoExpandCollapsedDiffs ) {
this . isCollapsed = newVal ;
}
2018-11-13 13:42:04 +00:00
} ,
2018-06-21 12:22:40 +00:00
} ,
2018-12-08 07:19:03 +00:00
created ( ) {
eventHub . $on ( ` loadCollapsedDiff/ ${ this . file . file _hash } ` , this . handleLoadCollapsedDiff ) ;
} ,
2018-06-21 12:22:40 +00:00
methods : {
2019-03-11 13:09:36 +00:00
... mapActions ( 'diffs' , [
'loadCollapsedDiff' ,
'assignDiscussionsToDiff' ,
'setRenderIt' ,
'setFileCollapsed' ,
] ) ,
2018-06-21 12:22:40 +00:00
handleToggle ( ) {
2019-10-29 18:06:15 +00:00
if ( ! this . hasDiff ) {
2018-06-21 12:22:40 +00:00
this . handleLoadCollapsedDiff ( ) ;
} else {
2019-02-15 17:56:50 +00:00
this . isCollapsed = ! this . isCollapsed ;
2019-02-18 15:16:04 +00:00
this . setRenderIt ( this . file ) ;
2018-06-21 12:22:40 +00:00
}
} ,
handleLoadCollapsedDiff ( ) {
this . isLoadingCollapsedDiff = true ;
this . loadCollapsedDiff ( this . file )
. then ( ( ) => {
this . isLoadingCollapsedDiff = false ;
2019-02-15 17:56:50 +00:00
this . isCollapsed = false ;
2019-02-18 15:16:04 +00:00
this . setRenderIt ( this . file ) ;
2018-06-21 12:22:40 +00:00
} )
2018-09-05 08:28:49 +00:00
. then ( ( ) => {
requestIdleCallback (
( ) => {
2018-11-13 13:42:04 +00:00
this . assignDiscussionsToDiff ( this . getDiffFileDiscussions ( this . file ) ) ;
2018-09-05 08:28:49 +00:00
} ,
{ timeout : 1000 } ,
) ;
} )
2018-06-21 12:22:40 +00:00
. catch ( ( ) => {
this . isLoadingCollapsedDiff = false ;
createFlash ( _ _ ( 'Something went wrong on our end. Please try again!' ) ) ;
} ) ;
} ,
showForkMessage ( ) {
this . forkMessageVisible = true ;
} ,
hideForkMessage ( ) {
this . forkMessageVisible = false ;
} ,
} ,
} ;
< / script >
< template >
< div
2018-11-09 19:48:41 +00:00
: id = "file.file_hash"
2018-10-03 09:05:43 +00:00
: class = " {
2020-03-24 21:07:54 +00:00
'is-active' : currentDiffFileId === file . file _hash ,
2020-08-18 15:10:33 +00:00
'comments-disabled' : Boolean ( file . brokenSymlink ) ,
2018-10-03 09:05:43 +00:00
} "
2020-04-09 06:09:30 +00:00
: data - path = "file.new_path"
2018-06-21 12:22:40 +00:00
class = "diff-file file-holder"
>
< diff -file -header
2018-07-17 15:47:02 +00:00
: can - current - user - fork = "canCurrentUserFork"
2018-06-21 12:22:40 +00:00
: diff - file = "file"
: collapsible = "true"
: expanded = "!isCollapsed"
: add - merge - request - buttons = "true"
2020-07-15 06:09:35 +00:00
: view - diffs - file - by - file = "viewDiffsFileByFile"
2018-06-21 12:22:40 +00:00
class = "js-file-title file-title"
@ toggleFile = "handleToggle"
@ showForkMessage = "showForkMessage"
/ >
2018-11-16 20:07:38 +00:00
< div v-if ="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion" >
2019-07-16 02:48:40 +00:00
< span class = "file-fork-suggestion-note" v-html ="forkMessage" > < / span >
2018-06-21 12:22:40 +00:00
< a
2018-11-09 19:48:41 +00:00
: href = "file.fork_path"
2018-06-21 12:22:40 +00:00
class = "js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
2019-06-26 07:33:14 +00:00
> { { _ _ ( 'Fork' ) } } < / a
2018-06-21 12:22:40 +00:00
>
< button
class = "js-cancel-fork-suggestion-button btn btn-grouped"
type = "button"
@ click = "hideForkMessage"
>
2019-06-26 07:33:14 +00:00
{ { _ _ ( 'Cancel' ) } }
2018-06-21 12:22:40 +00:00
< / button >
< / div >
2018-11-16 20:07:38 +00:00
< gl -loading -icon v -if = " showLoadingIcon " class = "diff-content loading" / >
2019-02-15 17:56:50 +00:00
< template v-else >
2019-03-25 15:13:22 +00:00
< div :id ="`diff-content-${file.file_hash}`" >
< div v-if ="errorMessage" class="diff-viewer" >
< div class = "nothing-here-block" v-html ="errorMessage" > < / div >
< / div >
2020-03-05 21:08:13 +00:00
< template v-else >
< div v-show ="isCollapsed" class="nothing-here-block diff-collapsed" >
{ { _ _ ( 'This diff is collapsed.' ) } }
< a class = "click-to-expand js-click-to-expand" href = "#" @click.prevent ="handleToggle" > { {
_ _ ( 'Click to expand it.' )
} } < / a >
< / div >
< diff -content
v - show = "!isCollapsed && !isFileTooLarge"
: diff - file = "file"
: help - page - path = "helpPagePath"
/ >
< / template >
2019-02-15 17:56:50 +00:00
< / div >
< / template >
2018-06-21 12:22:40 +00:00
< / div >
< / template >
2018-10-03 09:05:43 +00:00
< style >
@ keyframes shadow - fade {
from {
box - shadow : 0 0 4 px # 919191 ;
}
to {
box - shadow : 0 0 0 # dfdfdf ;
}
}
. diff - file . is - active {
box - shadow : 0 0 0 # dfdfdf ;
animation : shadow - fade 1.2 s 0.1 s 1 ;
}
< / style >