2018-06-21 08:22:40 -04:00
< script >
2018-10-03 05:05:43 -04:00
import { mapActions , mapGetters , mapState } from 'vuex' ;
2020-02-24 04:08:51 -05:00
import { escape as esc } from 'lodash' ;
2019-12-09 07:07:58 -05:00
import { GlLoadingIcon } from '@gitlab/ui' ;
2018-06-21 08:22:40 -04:00
import { _ _ , sprintf } from '~/locale' ;
import createFlash from '~/flash' ;
2020-01-14 07:07:41 -05:00
import { hasDiff } from '~/helpers/diffs_helper' ;
2018-12-08 02:19:03 -05:00
import eventHub from '../../notes/event_hub' ;
2018-06-21 08:22:40 -04:00
import DiffFileHeader from './diff_file_header.vue' ;
import DiffContent from './diff_content.vue' ;
2019-02-15 12:56:50 -05:00
import { diffViewerErrors } from '~/ide/constants' ;
2018-06-21 08:22:40 -04:00
export default {
components : {
DiffFileHeader ,
DiffContent ,
2018-11-07 05:06:15 -05:00
GlLoadingIcon ,
2018-06-21 08:22:40 -04:00
} ,
props : {
file : {
type : Object ,
required : true ,
} ,
2018-07-17 11:47:02 -04:00
canCurrentUserFork : {
type : Boolean ,
2018-06-21 08:22:40 -04:00
required : true ,
} ,
2018-12-13 14:17:19 -05:00
helpPagePath : {
type : String ,
required : false ,
default : '' ,
} ,
2018-06-21 08:22:40 -04:00
} ,
data ( ) {
return {
isLoadingCollapsedDiff : false ,
forkMessageVisible : false ,
2019-02-15 12:56:50 -05:00
isCollapsed : this . file . viewer . collapsed || false ,
2018-06-21 08:22:40 -04:00
} ;
} ,
computed : {
2018-10-03 05:05:43 -04:00
... mapState ( 'diffs' , [ 'currentDiffFileId' ] ) ,
2018-10-19 09:09:16 -04:00
... mapGetters ( [ 'isNotesFetched' ] ) ,
2018-11-13 08:42:04 -05:00
... mapGetters ( 'diffs' , [ 'getDiffFileDiscussions' ] ) ,
2018-06-21 08:22:40 -04:00
viewBlobLink ( ) {
return sprintf (
_ _ ( 'You can %{linkStart}view the blob%{linkEnd} instead.' ) ,
{
2020-02-24 04:08:51 -05:00
linkStart : ` <a href=" ${ esc ( this . file . view _path ) } "> ` ,
2018-06-21 08:22:40 -04:00
linkEnd : '</a>' ,
} ,
false ,
) ;
} ,
2018-08-14 04:23:07 -04:00
showLoadingIcon ( ) {
2019-02-18 10:16:04 -05:00
return this . isLoadingCollapsedDiff || ( ! this . file . renderIt && ! this . isCollapsed ) ;
2018-08-14 04:23:07 -04:00
} ,
2019-10-29 14:06:15 -04:00
hasDiff ( ) {
2020-01-14 07:07:41 -05:00
return hasDiff ( this . file ) ;
2018-11-13 08:42:04 -05:00
} ,
2019-02-15 12:56:50 -05:00
isFileTooLarge ( ) {
return this . file . viewer . error === diffViewerErrors . too _large ;
} ,
errorMessage ( ) {
return this . file . viewer . error _message ;
} ,
2019-07-15 22:48:40 -04: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 08:42:04 -05:00
} ,
watch : {
2019-02-15 12:56:50 -05:00
isCollapsed : function fileCollapsedWatch ( newVal , oldVal ) {
2019-10-29 14:06:15 -04:00
if ( ! newVal && oldVal && ! this . hasDiff ) {
2018-11-13 08:42:04 -05:00
this . handleLoadCollapsedDiff ( ) ;
}
2019-03-11 09:09:36 -04:00
this . setFileCollapsed ( { filePath : this . file . file _path , collapsed : newVal } ) ;
} ,
'file.viewer.collapsed' : function setIsCollapsed ( newVal ) {
this . isCollapsed = newVal ;
2018-11-13 08:42:04 -05:00
} ,
2018-06-21 08:22:40 -04:00
} ,
2018-12-08 02:19:03 -05:00
created ( ) {
eventHub . $on ( ` loadCollapsedDiff/ ${ this . file . file _hash } ` , this . handleLoadCollapsedDiff ) ;
} ,
2018-06-21 08:22:40 -04:00
methods : {
2019-03-11 09:09:36 -04:00
... mapActions ( 'diffs' , [
'loadCollapsedDiff' ,
'assignDiscussionsToDiff' ,
'setRenderIt' ,
'setFileCollapsed' ,
] ) ,
2018-06-21 08:22:40 -04:00
handleToggle ( ) {
2019-10-29 14:06:15 -04:00
if ( ! this . hasDiff ) {
2018-06-21 08:22:40 -04:00
this . handleLoadCollapsedDiff ( ) ;
} else {
2019-02-15 12:56:50 -05:00
this . isCollapsed = ! this . isCollapsed ;
2019-02-18 10:16:04 -05:00
this . setRenderIt ( this . file ) ;
2018-06-21 08:22:40 -04:00
}
} ,
handleLoadCollapsedDiff ( ) {
this . isLoadingCollapsedDiff = true ;
this . loadCollapsedDiff ( this . file )
. then ( ( ) => {
this . isLoadingCollapsedDiff = false ;
2019-02-15 12:56:50 -05:00
this . isCollapsed = false ;
2019-02-18 10:16:04 -05:00
this . setRenderIt ( this . file ) ;
2018-06-21 08:22:40 -04:00
} )
2018-09-05 04:28:49 -04:00
. then ( ( ) => {
requestIdleCallback (
( ) => {
2018-11-13 08:42:04 -05:00
this . assignDiscussionsToDiff ( this . getDiffFileDiscussions ( this . file ) ) ;
2018-09-05 04:28:49 -04:00
} ,
{ timeout : 1000 } ,
) ;
} )
2018-06-21 08:22:40 -04: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 14:48:41 -05:00
: id = "file.file_hash"
2018-10-03 05:05:43 -04:00
: class = " {
2020-03-24 17:07:54 -04:00
'is-active' : currentDiffFileId === file . file _hash ,
2018-10-03 05:05:43 -04:00
} "
2020-04-09 02:09:30 -04:00
: data - path = "file.new_path"
2018-06-21 08:22:40 -04:00
class = "diff-file file-holder"
>
< diff -file -header
2018-07-17 11:47:02 -04:00
: can - current - user - fork = "canCurrentUserFork"
2018-06-21 08:22:40 -04:00
: diff - file = "file"
: collapsible = "true"
: expanded = "!isCollapsed"
: add - merge - request - buttons = "true"
class = "js-file-title file-title"
@ toggleFile = "handleToggle"
@ showForkMessage = "showForkMessage"
/ >
2018-11-16 15:07:38 -05:00
< div v-if ="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion" >
2019-07-15 22:48:40 -04:00
< span class = "file-fork-suggestion-note" v-html ="forkMessage" > < / span >
2018-06-21 08:22:40 -04:00
< a
2018-11-09 14:48:41 -05:00
: href = "file.fork_path"
2018-06-21 08:22:40 -04:00
class = "js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
2019-06-26 03:33:14 -04:00
> { { _ _ ( 'Fork' ) } } < / a
2018-06-21 08:22:40 -04:00
>
< button
class = "js-cancel-fork-suggestion-button btn btn-grouped"
type = "button"
@ click = "hideForkMessage"
>
2019-06-26 03:33:14 -04:00
{ { _ _ ( 'Cancel' ) } }
2018-06-21 08:22:40 -04:00
< / button >
< / div >
2018-11-16 15:07:38 -05:00
< gl -loading -icon v -if = " showLoadingIcon " class = "diff-content loading" / >
2019-02-15 12:56:50 -05:00
< template v-else >
2019-03-25 11:13:22 -04: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 16:08:13 -05: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 12:56:50 -05:00
< / div >
< / template >
2018-06-21 08:22:40 -04:00
< / div >
< / template >
2018-10-03 05:05:43 -04: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 >