2021-04-17 20:07:23 +05:30
< script >
import { GlSprintf } from '@gitlab/ui' ;
2021-04-29 21:17:54 +05:30
import { mapGetters , mapState , mapActions } from 'vuex' ;
2021-04-17 20:07:23 +05:30
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-04-29 21:17:54 +05:30
import { INTERACTIVE _RESOLVE _MODE } from './constants' ;
2021-04-17 20:07:23 +05:30
/ * *
2021-04-29 21:17:54 +05:30
* A lot of the classes below should
2021-04-17 20:07:23 +05:30
* 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 : {
GlSprintf ,
FileIcon ,
DiffFileEditor ,
InlineConflictLines ,
ParallelConflictLines ,
} ,
2021-04-29 21:17:54 +05:30
inject : [ 'mergeRequestPath' , 'sourceBranchPath' , 'resolveConflictsPath' ] ,
2021-04-17 20:07:23 +05:30
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-04-29 21:17:54 +05:30
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-04-17 20:07:23 +05:30
} ;
< / script >
< template >
< div id = "conflicts" >
2021-04-29 21:17:54 +05:30
< div v-if = "isLoading" class="loading" >
2021-04-17 20:07:23 +05:30
< div class = "spinner spinner-md" > < / div >
< / div >
2021-04-29 21:17:54 +05:30
< div v-if = "hasError" class="nothing-here-block" >
{ { conflictsData . errorMessage } }
2021-04-17 20:07:23 +05:30
< / div >
2021-04-29 21:17:54 +05:30
< template v-if = "!isLoading && !hasError" >
2021-04-17 20:07:23 +05:30
< div class = "content-block oneline-block files-changed" >
2021-04-29 21:17:54 +05:30
< div v-if = "fileTextTypePresent" class="inline-parallel-buttons" >
2021-04-17 20:07:23 +05:30
< div class = "btn-group" >
< button
2021-04-29 21:17:54 +05:30
: class = "{ active: !isParallel }"
2021-04-17 20:07:23 +05:30
class = "btn gl-button"
2021-04-29 21:17:54 +05:30
@ click = "setViewType('inline')"
2021-04-17 20:07:23 +05:30
>
{ { _ _ ( 'Inline' ) } }
< / button >
< button
2021-04-29 21:17:54 +05:30
: class = "{ active: isParallel }"
2021-04-17 20:07:23 +05:30
class = "btn gl-button"
2021-04-29 21:17:54 +05:30
data - testid = "side-by-side"
@ click = "setViewType('parallel')"
2021-04-17 20:07:23 +05:30
>
{ { _ _ ( 'Side-by-side' ) } }
< / button >
< / div >
< / div >
< div class = "js-toggle-container" >
2021-04-29 21:17:54 +05:30
< div class = "commit-stat-summary" data -testid = " conflicts -count " >
2021-04-17 20:07:23 +05:30
< gl-sprintf :message = "$options.i18n.commitStatSummary" >
< template # conflict >
2021-04-29 21:17:54 +05:30
< strong class = "cred" > { { getConflictsCountText } } < / strong >
2021-04-17 20:07:23 +05:30
< / template >
< template # sourceBranch >
2021-04-29 21:17:54 +05:30
< strong class = "ref-name" > { { conflictsData . sourceBranch } } < / strong >
2021-04-17 20:07:23 +05:30
< / template >
< template # targetBranch >
2021-04-29 21:17:54 +05:30
< strong class = "ref-name" > { { conflictsData . targetBranch } } < / strong >
2021-04-17 20:07:23 +05:30
< / template >
< / gl-sprintf >
< / div >
< / div >
< / div >
< div class = "files-wrapper" >
< div class = "files" >
< div
2021-04-29 21:17:54 +05:30
v - for = "file in conflictsData.files"
2021-04-17 20:07:23 +05:30
: key = "file.blobPath"
class = "diff-file file-holder conflict"
2021-04-29 21:17:54 +05:30
data - testid = "files"
2021-04-17 20:07:23 +05:30
>
< div class = "js-file-title file-title file-title-flex-parent cursor-default" >
2021-04-29 21:17:54 +05:30
< div class = "file-header-content" data -testid = " file -name " >
2021-04-17 20:07:23 +05:30
< file-icon :file-name = "file.filePath" :size = "18" css -classes = " gl -mr -2 " / >
< 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" >
< div v-if = "file.type === 'text'" class="btn-group gl-mr-3" >
< button
: class = "{ active: file.resolveMode === 'interactive' }"
class = "btn gl-button"
type = "button"
2021-04-29 21:17:54 +05:30
data - testid = "interactive-button"
@ click = "onClickResolveModeButton(file, 'interactive')"
2021-04-17 20:07:23 +05:30
>
{ { _ _ ( 'Interactive mode' ) } }
< / button >
< button
: class = "{ active: file.resolveMode === 'edit' }"
class = "btn gl-button"
type = "button"
2021-04-29 21:17:54 +05:30
data - testid = "inline-button"
@ click = "onClickResolveModeButton(file, 'edit')"
2021-04-17 20:07:23 +05:30
>
{ { _ _ ( 'Edit inline' ) } }
< / button >
< / div >
< a :href = "file.blobPath" class = "btn gl-button view-file" >
< gl-sprintf : message = "__('View file @ %{commitSha}')" >
< template # commitSha >
2021-04-29 21:17:54 +05:30
{ { conflictsData . shortCommitSha } }
2021-04-17 20:07:23 +05:30
< / template >
< / gl-sprintf >
< / a >
< / div >
< / div >
< div class = "diff-content diff-wrap-lines" >
2021-04-29 21:17:54 +05:30
< template v-if = "file.resolveMode === 'interactive' && file.type === 'text'" >
< div v-if = "!isParallel" class="file-content" >
< inline-conflict-lines :file = "file" / >
< / div >
< div v-if = "isParallel" class="file-content" >
< parallel-conflict-lines :file = "file" / >
< / div >
< / template >
< div v-if = "file.resolveMode === 'edit' || file.type === 'text-editor'" >
< diff-file-editor :file = "file" / >
2021-04-17 20:07:23 +05:30
< / div >
< / div >
< / div >
< / div >
< / div >
< hr / >
< div class = "resolve-conflicts-form" >
< div class = "form-group row" >
< div class = "col-md-4" >
< h4 >
{ { _ _ ( 'Resolve conflicts on source branch' ) } }
< / h4 >
< div class = "resolve-info" >
< 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-04-29 21:17:54 +05:30
{ { conflictsData . sourceBranch } }
2021-04-17 20:07:23 +05:30
< / a >
< / template >
< / gl-sprintf >
< / div >
< / div >
< div class = "col-md-8" >
< label class = "label-bold" for = "commit-message" >
{ { _ _ ( 'Commit message' ) } }
< / label >
< div class = "commit-message-container" >
< div class = "max-width-marker" > < / div >
< textarea
id = "commit-message"
2021-04-29 21:17:54 +05:30
v - model = "commitMessage"
data - testid = "commit-message"
2021-04-17 20:07:23 +05:30
class = "form-control js-commit-message"
rows = "5"
> < / textarea >
< / div >
< / div >
< / div >
< div class = "form-group row" >
< div class = "offset-md-4 col-md-8" >
< div class = "row" >
< div class = "col-6" >
< button
2021-04-29 21:17:54 +05:30
: disabled = "!isReadyToCommit"
2021-04-17 20:07:23 +05:30
class = "btn gl-button btn-success js-submit-button"
type = "button"
2021-04-29 21:17:54 +05:30
@ click = "submitResolvedConflicts(resolveConflictsPath)"
2021-04-17 20:07:23 +05:30
>
2021-04-29 21:17:54 +05:30
< span > { { getCommitButtonText } } < / span >
2021-04-17 20:07:23 +05:30
< / button >
< / div >
< div class = "col-6 text-right" >
< a :href = "mergeRequestPath" class = "gl-button btn btn-default" >
{ { _ _ ( 'Cancel' ) } }
< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / template >
< / div >
< / template >