2021-04-17 20:07:23 +05:30
< script >
2021-06-08 01:23:25 +05:30
import { GlSprintf , GlButton , GlButtonGroup } 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 : {
2021-06-08 01:23:25 +05:30
GlButton ,
GlButtonGroup ,
2021-04-17 20:07:23 +05:30
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-06-08 01:23:25 +05:30
< 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-04-17 20:07:23 +05:30
{ { _ _ ( 'Inline' ) } }
2021-06-08 01:23:25 +05:30
< / gl-button >
< gl-button
: selected = "isParallel"
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' ) } }
2021-06-08 01:23:25 +05:30
< / gl-button >
< / gl-button-group >
2021-04-17 20:07:23 +05:30
< / div >
< div class = "js-toggle-container" >
2021-06-08 01:23:25 +05:30
< div 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" >
2021-06-08 01:23:25 +05:30
< gl-button-group v-if = "file.type === 'text'" class="gl-mr-3" >
< gl-button
: selected = "file.resolveMode === 'interactive'"
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' ) } }
2021-06-08 01:23:25 +05:30
< / gl-button >
< gl-button
: selected = "file.resolveMode === 'edit'"
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' ) } }
2021-06-08 01:23:25 +05:30
< / gl-button >
< / gl-button-group >
< gl-button :href = "file.blobPath" >
2021-04-17 20:07:23 +05:30
< 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 >
2021-06-08 01:23:25 +05:30
< / gl-button >
2021-04-17 20:07:23 +05:30
< / div >
< / div >
< div class = "diff-content diff-wrap-lines" >
2021-06-08 01:23:25 +05:30
< 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-04-17 20:07:23 +05:30
< / div >
2021-06-08 01:23:25 +05:30
< diff-file-editor
v - if = "file.resolveMode === 'edit' || file.type === 'text-editor'"
: file = "file"
/ >
2021-04-17 20:07:23 +05:30
< / div >
< / div >
< / div >
< / div >
< hr / >
< div class = "resolve-conflicts-form" >
< div class = "form-group row" >
< div class = "col-md-4" >
2021-06-08 01:23:25 +05:30
< h4 class = "gl-mt-0" >
2021-04-17 20:07:23 +05:30
{ { _ _ ( 'Resolve conflicts on source branch' ) } }
< / h4 >
2021-06-08 01:23:25 +05:30
< div class = "gl-mb-5" data -testid = " resolve -info " >
2021-04-17 20:07:23 +05:30
< 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 >
2021-06-08 01:23:25 +05:30
< div class = "commit-message-container gl-mb-4" >
2021-04-17 20:07:23 +05:30
< 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 >
2021-06-08 01:23:25 +05:30
< gl-button
: disabled = "!isReadyToCommit"
variant = "confirm"
class = "js-submit-button"
@ click = "submitResolvedConflicts(resolveConflictsPath)"
>
{ { getCommitButtonText } }
< / gl-button >
< gl-button :href = "mergeRequestPath" >
{ { _ _ ( 'Cancel' ) } }
< / gl-button >
2021-04-17 20:07:23 +05:30
< / div >
< / div >
< / div >
< / template >
< / div >
< / template >