Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

1 files changed, 47 insertions, 64 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 0509cf0afa1..3e31e2e93ae 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlButton, GlButtonGroup } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { __ } from '~/locale';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -20,6 +20,8 @@ import { INTERACTIVE_RESOLVE_MODE } from './constants';
  */
 export default {
   components: {
+    GlButton,
+    GlButtonGroup,
     GlSprintf,
     FileIcon,
     DiffFileEditor,
@@ -77,28 +79,23 @@ export default {
       {{ conflictsData.errorMessage }}
     </div>
     <template v-if="!isLoading && !hasError">
-      <div class="content-block oneline-block files-changed">
-        <div v-if="fileTextTypePresent" class="inline-parallel-buttons">
-          <div class="btn-group">
-            <button
-              :class="{ active: !isParallel }"
-              class="btn gl-button"
-              @click="setViewType('inline')"
-            >
+      <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')">
               {{ __('Inline') }}
-            </button>
-            <button
-              :class="{ active: isParallel }"
-              class="btn gl-button"
+            </gl-button>
+            <gl-button
+              :selected="isParallel"
               data-testid="side-by-side"
               @click="setViewType('parallel')"
             >
               {{ __('Side-by-side') }}
-            </button>
-          </div>
+            </gl-button>
+          </gl-button-group>
         </div>
         <div class="js-toggle-container">
-          <div class="commit-stat-summary" data-testid="conflicts-count">
+          <div data-testid="conflicts-count">
             <gl-sprintf :message="$options.i18n.commitStatSummary">
               <template #conflict>
                 <strong class="cred">{{ getConflictsCountText }}</strong>
@@ -127,47 +124,43 @@ export default {
                 <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"
+                <gl-button-group v-if="file.type === 'text'" class="gl-mr-3">
+                  <gl-button
+                    :selected="file.resolveMode === 'interactive'"
                     data-testid="interactive-button"
                     @click="onClickResolveModeButton(file, 'interactive')"
                   >
                     {{ __('Interactive mode') }}
-                  </button>
-                  <button
-                    :class="{ active: file.resolveMode === 'edit' }"
-                    class="btn gl-button"
-                    type="button"
+                  </gl-button>
+                  <gl-button
+                    :selected="file.resolveMode === 'edit'"
                     data-testid="inline-button"
                     @click="onClickResolveModeButton(file, 'edit')"
                   >
                     {{ __('Edit inline') }}
-                  </button>
-                </div>
-                <a :href="file.blobPath" class="btn gl-button view-file">
+                  </gl-button>
+                </gl-button-group>
+                <gl-button :href="file.blobPath">
                   <gl-sprintf :message="__('View file @ %{commitSha}')">
                     <template #commitSha>
                       {{ conflictsData.shortCommitSha }}
                     </template>
                   </gl-sprintf>
-                </a>
+                </gl-button>
               </div>
             </div>
             <div class="diff-content diff-wrap-lines">
-              <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
+                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" />
               </div>
+              <diff-file-editor
+                v-if="file.resolveMode === 'edit' || file.type === 'text-editor'"
+                :file="file"
+              />
             </div>
           </div>
         </div>
@@ -176,10 +169,10 @@ export default {
       <div class="resolve-conflicts-form">
         <div class="form-group row">
           <div class="col-md-4">
-            <h4>
+            <h4 class="gl-mt-0">
               {{ __('Resolve conflicts on source branch') }}
             </h4>
-            <div class="resolve-info">
+            <div class="gl-mb-5" data-testid="resolve-info">
               <gl-sprintf :message="$options.i18n.resolveInfo">
                 <template #use_ours>
                   <code>{{ s__('MergeConflict|Use ours') }}</code>
@@ -199,7 +192,7 @@ export default {
             <label class="label-bold" for="commit-message">
               {{ __('Commit message') }}
             </label>
-            <div class="commit-message-container">
+            <div class="commit-message-container gl-mb-4">
               <div class="max-width-marker"></div>
               <textarea
                 id="commit-message"
@@ -209,27 +202,17 @@ export default {
                 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
-                  :disabled="!isReadyToCommit"
-                  class="btn gl-button btn-success js-submit-button"
-                  type="button"
-                  @click="submitResolvedConflicts(resolveConflictsPath)"
-                >
-                  <span>{{ getCommitButtonText }}</span>
-                </button>
-              </div>
-              <div class="col-6 text-right">
-                <a :href="mergeRequestPath" class="gl-button btn btn-default">
-                  {{ __('Cancel') }}
-                </a>
-              </div>
-            </div>
+            <gl-button
+              :disabled="!isReadyToCommit"
+              variant="confirm"
+              class="js-submit-button"
+              @click="submitResolvedConflicts(resolveConflictsPath)"
+            >
+              {{ getCommitButtonText }}
+            </gl-button>
+            <gl-button :href="mergeRequestPath">
+              {{ __('Cancel') }}
+            </gl-button>
           </div>
         </div>
       </div>