Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc42

1 files changed, 75 insertions, 54 deletions

diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
index 16a7cfb2ba8..0509cf0afa1 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
@@ -1,14 +1,15 @@
 <script>
 import { GlSprintf } from '@gitlab/ui';
+import { mapGetters, mapState, mapActions } from 'vuex';
 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';
+import { INTERACTIVE_RESOLVE_MODE } from './constants';
 
 /**
- * NOTE: Most of this component is directly using $root, rather than props or a better data store.
- * This is BAD and one shouldn't copy that behavior. Similarly a lot of the classes below should
+ * A lot of the classes below should
  * 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
@@ -25,60 +26,88 @@ export default {
     InlineConflictLines,
     ParallelConflictLines,
   },
-  inject: ['mergeRequestPath', 'sourceBranchPath'],
+  inject: ['mergeRequestPath', 'sourceBranchPath', 'resolveConflictsPath'],
   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}',
     ),
   },
+  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 });
+      }
+    },
+  },
 };
 </script>
 <template>
   <div id="conflicts">
-    <div v-if="$root.isLoading" class="loading">
+    <div v-if="isLoading" class="loading">
       <div class="spinner spinner-md"></div>
     </div>
-    <div v-if="$root.hasError" class="nothing-here-block">
-      {{ $root.conflictsData.errorMessage }}
+    <div v-if="hasError" class="nothing-here-block">
+      {{ conflictsData.errorMessage }}
     </div>
-    <template v-if="!$root.isLoading && !$root.hasError">
+    <template v-if="!isLoading && !hasError">
       <div class="content-block oneline-block files-changed">
-        <div v-if="$root.showDiffViewTypeSwitcher" class="inline-parallel-buttons">
+        <div v-if="fileTextTypePresent" class="inline-parallel-buttons">
           <div class="btn-group">
             <button
-              :class="{ active: !$root.isParallel }"
+              :class="{ active: !isParallel }"
               class="btn gl-button"
-              @click="$root.handleViewTypeChange('inline')"
+              @click="setViewType('inline')"
             >
               {{ __('Inline') }}
             </button>
             <button
-              :class="{ active: $root.isParallel }"
+              :class="{ active: isParallel }"
               class="btn gl-button"
-              @click="$root.handleViewTypeChange('parallel')"
+              data-testid="side-by-side"
+              @click="setViewType('parallel')"
             >
               {{ __('Side-by-side') }}
             </button>
           </div>
         </div>
         <div class="js-toggle-container">
-          <div class="commit-stat-summary">
+          <div class="commit-stat-summary" data-testid="conflicts-count">
             <gl-sprintf :message="$options.i18n.commitStatSummary">
               <template #conflict>
-                <strong class="cred">
-                  {{ $root.conflictsCountText }}
-                </strong>
+                <strong class="cred">{{ getConflictsCountText }}</strong>
               </template>
               <template #sourceBranch>
-                <strong class="ref-name">
-                  {{ $root.conflictsData.sourceBranch }}
-                </strong>
+                <strong class="ref-name">{{ conflictsData.sourceBranch }}</strong>
               </template>
               <template #targetBranch>
-                <strong class="ref-name">
-                  {{ $root.conflictsData.targetBranch }}
-                </strong>
+                <strong class="ref-name">{{ conflictsData.targetBranch }}</strong>
               </template>
             </gl-sprintf>
           </div>
@@ -87,12 +116,13 @@ export default {
       <div class="files-wrapper">
         <div class="files">
           <div
-            v-for="file in $root.conflictsData.files"
+            v-for="file in conflictsData.files"
             :key="file.blobPath"
             class="diff-file file-holder conflict"
+            data-testid="files"
           >
             <div class="js-file-title file-title file-title-flex-parent cursor-default">
-              <div class="file-header-content">
+              <div class="file-header-content" data-testid="file-name">
                 <file-icon :file-name="file.filePath" :size="18" css-classes="gl-mr-2" />
                 <strong class="file-title-name">{{ file.filePath }}</strong>
               </div>
@@ -102,7 +132,8 @@ export default {
                     :class="{ active: file.resolveMode === 'interactive' }"
                     class="btn gl-button"
                     type="button"
-                    @click="$root.onClickResolveModeButton(file, 'interactive')"
+                    data-testid="interactive-button"
+                    @click="onClickResolveModeButton(file, 'interactive')"
                   >
                     {{ __('Interactive mode') }}
                   </button>
@@ -110,7 +141,8 @@ export default {
                     :class="{ active: file.resolveMode === 'edit' }"
                     class="btn gl-button"
                     type="button"
-                    @click="$root.onClickResolveModeButton(file, 'edit')"
+                    data-testid="inline-button"
+                    @click="onClickResolveModeButton(file, 'edit')"
                   >
                     {{ __('Edit inline') }}
                   </button>
@@ -118,35 +150,23 @@ export default {
                 <a :href="file.blobPath" class="btn gl-button view-file">
                   <gl-sprintf :message="__('View file @ %{commitSha}')">
                     <template #commitSha>
-                      {{ $root.conflictsData.shortCommitSha }}
+                      {{ conflictsData.shortCommitSha }}
                     </template>
                   </gl-sprintf>
                 </a>
               </div>
             </div>
             <div class="diff-content diff-wrap-lines">
-              <div
-                v-show="
-                  !$root.isParallel && file.resolveMode === 'interactive' && file.type === 'text'
-                "
-                class="file-content"
-              >
-                <inline-conflict-lines :file="file" />
-              </div>
-              <div
-                v-show="
-                  $root.isParallel && file.resolveMode === 'interactive' && file.type === 'text'
-                "
-                class="file-content"
-              >
-                <parallel-conflict-lines :file="file" />
-              </div>
-              <div v-show="file.resolveMode === 'edit' || file.type === 'text-editor'">
-                <diff-file-editor
-                  :file="file"
-                  :on-accept-discard-confirmation="$root.acceptDiscardConfirmation"
-                  :on-cancel-discard-confirmation="$root.cancelDiscardConfirmation"
-                />
+              <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" />
               </div>
             </div>
           </div>
@@ -169,7 +189,7 @@ export default {
                 </template>
                 <template #branch_name>
                   <a class="ref-name" :href="sourceBranchPath">
-                    {{ $root.conflictsData.sourceBranch }}
+                    {{ conflictsData.sourceBranch }}
                   </a>
                 </template>
               </gl-sprintf>
@@ -183,7 +203,8 @@ export default {
               <div class="max-width-marker"></div>
               <textarea
                 id="commit-message"
-                v-model="$root.conflictsData.commitMessage"
+                v-model="commitMessage"
+                data-testid="commit-message"
                 class="form-control js-commit-message"
                 rows="5"
               ></textarea>
@@ -195,12 +216,12 @@ export default {
             <div class="row">
               <div class="col-6">
                 <button
-                  :disabled="!$root.readyToCommit"
+                  :disabled="!isReadyToCommit"
                   class="btn gl-button btn-success js-submit-button"
                   type="button"
-                  @click="$root.commit()"
+                  @click="submitResolvedConflicts(resolveConflictsPath)"
                 >
-                  <span>{{ $root.commitButtonText }}</span>
+                  <span>{{ getCommitButtonText }}</span>
                 </button>
               </div>
               <div class="col-6 text-right">