2021-02-25 06:10:51 +00:00
< script >
2022-03-01 15:22:06 +00:00
import { GlSprintf , GlButton , GlButtonGroup , GlLoadingIcon } from '@gitlab/ui' ;
2021-03-17 21:11:29 +00:00
import { mapGetters , mapState , mapActions } from 'vuex' ;
2021-02-25 06:10:51 +00:00
import { _ _ } from '~/locale' ;
import FileIcon from '~/vue_shared/components/file_icon.vue' ;
import DiffFileEditor from './components/diff_file_editor.vue' ;
import InlineConflictLines from './components/inline_conflict_lines.vue' ;
import ParallelConflictLines from './components/parallel_conflict_lines.vue' ;
2021-03-17 21:11:29 +00:00
import { INTERACTIVE _RESOLVE _MODE } from './constants' ;
2021-02-25 06:10:51 +00:00
/ * *
2021-03-17 21:11:29 +00:00
* A lot of the classes below should
2021-02-25 06:10:51 +00:00
* be replaced with GitLab UI components .
*
* We are just doing it temporarily in order to migrate the template from HAML => Vue in an iterative manner
* and are going to clean it up as part of :
*
* https : //gitlab.com/gitlab-org/gitlab/-/issues/321090
*
* /
export default {
components : {
2021-05-04 15:10:36 +00:00
GlButton ,
GlButtonGroup ,
2021-02-25 06:10:51 +00:00
GlSprintf ,
2022-03-01 15:22:06 +00:00
GlLoadingIcon ,
2021-02-25 06:10:51 +00:00
FileIcon ,
DiffFileEditor ,
InlineConflictLines ,
ParallelConflictLines ,
} ,
2021-03-17 21:11:29 +00:00
inject : [ 'mergeRequestPath' , 'sourceBranchPath' , 'resolveConflictsPath' ] ,
2021-02-25 06:10:51 +00:00
i18n : {
commitStatSummary : _ _ ( 'Showing %{conflict} between %{sourceBranch} and %{targetBranch}' ) ,
resolveInfo : _ _ (
'You can resolve the merge conflict using either the Interactive mode, by choosing %{use_ours} or %{use_theirs} buttons, or by editing the files directly. Commit these changes into %{branch_name}' ,
) ,
} ,
2021-03-17 21:11:29 +00:00
computed : {
... mapGetters ( [
'getConflictsCountText' ,
'isReadyToCommit' ,
'getCommitButtonText' ,
'fileTextTypePresent' ,
] ) ,
... mapState ( [ 'isLoading' , 'hasError' , 'isParallel' , 'conflictsData' ] ) ,
commitMessage : {
get ( ) {
return this . conflictsData . commitMessage ;
} ,
set ( value ) {
this . updateCommitMessage ( value ) ;
} ,
} ,
} ,
methods : {
... mapActions ( [
'setViewType' ,
'submitResolvedConflicts' ,
'setFileResolveMode' ,
'setPromptConfirmationState' ,
'updateCommitMessage' ,
] ) ,
onClickResolveModeButton ( file , mode ) {
if ( mode === INTERACTIVE _RESOLVE _MODE && file . resolveEditChanged ) {
this . setPromptConfirmationState ( { file , promptDiscardConfirmation : true } ) ;
} else {
this . setFileResolveMode ( { file , mode } ) ;
}
} ,
} ,
2021-02-25 06:10:51 +00:00
} ;
< / script >
< template >
< div id = "conflicts" >
2022-03-01 15:22:06 +00:00
< gl -loading -icon v -if = " isLoading " size = "md" data -testid = " loading -spinner " / >
2021-03-17 21:11:29 +00:00
< div v-if ="hasError" class="nothing-here-block" >
{ { conflictsData . errorMessage } }
2021-02-25 06:10:51 +00:00
< / div >
2021-03-17 21:11:29 +00:00
< template v-if ="!isLoading && !hasError" >
2021-05-04 15:10:36 +00:00
< div class = "gl-border-b-0 gl-py-5 gl-line-height-32" >
< div v-if ="fileTextTypePresent" class="gl-float-right" >
< gl -button -group >
< gl -button :selected ="!isParallel" @click ="setViewType('inline')" >
2021-02-25 06:10:51 +00:00
{ { _ _ ( 'Inline' ) } }
2021-05-04 15:10:36 +00:00
< / g l - b u t t o n >
< gl -button
: selected = "isParallel"
2021-03-17 21:11:29 +00:00
data - testid = "side-by-side"
@ click = "setViewType('parallel')"
2021-02-25 06:10:51 +00:00
>
{ { _ _ ( 'Side-by-side' ) } }
2021-05-04 15:10:36 +00:00
< / g l - b u t t o n >
< / g l - b u t t o n - g r o u p >
2021-02-25 06:10:51 +00:00
< / div >
< div class = "js-toggle-container" >
2021-05-04 15:10:36 +00:00
< div data -testid = " conflicts -count " >
2021-02-25 06:10:51 +00:00
< gl -sprintf :message ="$options.i18n.commitStatSummary" >
< template # conflict >
2021-03-17 21:11:29 +00:00
< strong class = "cred" > { { getConflictsCountText } } < / strong >
2021-02-25 06:10:51 +00:00
< / template >
< template # sourceBranch >
2021-03-17 21:11:29 +00:00
< strong class = "ref-name" > { { conflictsData . sourceBranch } } < / strong >
2021-02-25 06:10:51 +00:00
< / template >
< template # targetBranch >
2021-03-17 21:11:29 +00:00
< strong class = "ref-name" > { { conflictsData . targetBranch } } < / strong >
2021-02-25 06:10:51 +00:00
< / template >
< / g l - s p r i n t f >
< / div >
< / div >
< / div >
< div class = "files-wrapper" >
< div class = "files" >
< div
2021-03-17 21:11:29 +00:00
v - for = "file in conflictsData.files"
2021-02-25 06:10:51 +00:00
: key = "file.blobPath"
class = "diff-file file-holder conflict"
2021-03-17 21:11:29 +00:00
data - testid = "files"
2021-02-25 06:10:51 +00:00
>
< div class = "js-file-title file-title file-title-flex-parent cursor-default" >
2021-03-17 21:11:29 +00:00
< div class = "file-header-content" data -testid = " file -name " >
2021-07-09 12:08:17 +00:00
< file -icon :file-name ="file.filePath" :size ="16" css -classes = " gl -mr -2 " / >
2021-02-25 06:10:51 +00:00
< strong class = "file-title-name" > { { file . filePath } } < / strong >
< / div >
< div class = "file-actions d-flex align-items-center gl-ml-auto gl-align-self-start" >
2021-05-04 15:10:36 +00:00
< gl -button -group v-if ="file.type === 'text'" class="gl-mr-3" >
< gl -button
: selected = "file.resolveMode === 'interactive'"
2021-03-17 21:11:29 +00:00
data - testid = "interactive-button"
@ click = "onClickResolveModeButton(file, 'interactive')"
2021-02-25 06:10:51 +00:00
>
{ { _ _ ( 'Interactive mode' ) } }
2021-05-04 15:10:36 +00:00
< / g l - b u t t o n >
< gl -button
: selected = "file.resolveMode === 'edit'"
2021-03-17 21:11:29 +00:00
data - testid = "inline-button"
@ click = "onClickResolveModeButton(file, 'edit')"
2021-02-25 06:10:51 +00:00
>
{ { _ _ ( 'Edit inline' ) } }
2021-05-04 15:10:36 +00:00
< / g l - b u t t o n >
< / g l - b u t t o n - g r o u p >
< gl -button :href ="file.blobPath" >
2021-02-25 06:10:51 +00:00
< gl -sprintf : message = "__('View file @ %{commitSha}')" >
< template # commitSha >
2021-03-17 21:11:29 +00:00
{ { conflictsData . shortCommitSha } }
2021-02-25 06:10:51 +00:00
< / template >
< / g l - s p r i n t f >
2021-05-04 15:10:36 +00:00
< / g l - b u t t o n >
2021-02-25 06:10:51 +00:00
< / div >
< / div >
< div class = "diff-content diff-wrap-lines" >
2021-05-04 15:10:36 +00:00
< div
v - if = "file.resolveMode === 'interactive' && file.type === 'text'"
class = "file-content"
>
< parallel -conflict -lines v -if = " isParallel " :file ="file" / >
< inline -conflict -lines v -else :file ="file" / >
2021-02-25 06:10:51 +00:00
< / div >
2021-05-04 15:10:36 +00:00
< diff -file -editor
v - if = "file.resolveMode === 'edit' || file.type === 'text-editor'"
: file = "file"
/ >
2021-02-25 06:10:51 +00:00
< / div >
< / div >
< / div >
< / div >
< hr / >
< div class = "resolve-conflicts-form" >
< div class = "form-group row" >
< div class = "col-md-4" >
2021-05-04 15:10:36 +00:00
< h4 class = "gl-mt-0" >
2021-02-25 06:10:51 +00:00
{ { _ _ ( 'Resolve conflicts on source branch' ) } }
< / h4 >
2021-05-04 15:10:36 +00:00
< div class = "gl-mb-5" data -testid = " resolve -info " >
2021-02-25 06:10:51 +00:00
< gl -sprintf :message ="$options.i18n.resolveInfo" >
< template # use_ours >
< code > { { s _ _ ( 'MergeConflict|Use ours' ) } } < / code >
< / template >
< template # use_theirs >
< code > { { s _ _ ( 'MergeConflict|Use theirs' ) } } < / code >
< / template >
< template # branch_name >
< a class = "ref-name" :href ="sourceBranchPath" >
2021-03-17 21:11:29 +00:00
{ { conflictsData . sourceBranch } }
2021-02-25 06:10:51 +00:00
< / a >
< / template >
< / g l - s p r i n t f >
< / div >
< / div >
< div class = "col-md-8" >
< label class = "label-bold" for = "commit-message" >
{ { _ _ ( 'Commit message' ) } }
< / label >
2021-05-04 15:10:36 +00:00
< div class = "commit-message-container gl-mb-4" >
2021-02-25 06:10:51 +00:00
< div class = "max-width-marker" > < / div >
< textarea
id = "commit-message"
2021-03-17 21:11:29 +00:00
v - model = "commitMessage"
data - testid = "commit-message"
2021-02-25 06:10:51 +00:00
class = "form-control js-commit-message"
rows = "5"
> < / textarea >
< / div >
2021-05-04 15:10:36 +00:00
< gl -button
: disabled = "!isReadyToCommit"
variant = "confirm"
class = "js-submit-button"
@ click = "submitResolvedConflicts(resolveConflictsPath)"
>
{ { getCommitButtonText } }
< / g l - b u t t o n >
< gl -button :href ="mergeRequestPath" >
{ { _ _ ( 'Cancel' ) } }
< / g l - b u t t o n >
2021-02-25 06:10:51 +00:00
< / div >
< / div >
< / div >
< / template >
< / div >
< / template >