Improve template of conflicts app

app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapActions } from 'vuex';
 import { deprecatedCreateFlash as flash } from '~/flash';
@@ -7,6 +8,9 @@ import { __ } from '~/locale';
 import { INTERACTIVE_RESOLVE_MODE } from '../constants';
 
 export default {
+  components: {
+    GlButton,
+  },
   props: {
     file: {
       type: Object,
@@ -100,21 +104,21 @@ export default {
 };
 </script>
 <template>
-  <div v-show="file.showEditor" class="diff-editor-wrap">
-    <div v-if="file.promptDiscardConfirmation" class="discard-changes-alert-wrap">
-      <div class="discard-changes-alert">
-        {{ __('Are you sure you want to discard your changes?') }}
-        <div class="discard-actions">
-          <button
-            class="btn btn-sm btn-danger-secondary gl-button"
-            @click="acceptDiscardConfirmation(file)"
-          >
-            {{ __('Discard changes') }}
-          </button>
-          <button class="btn btn-default btn-sm gl-button" @click="cancelDiscardConfirmation(file)">
-            {{ __('Cancel') }}
-          </button>
-        </div>
+  <div v-show="file.showEditor">
+    <div v-if="file.promptDiscardConfirmation" class="discard-changes-alert">
+      {{ __('Are you sure you want to discard your changes?') }}
+      <div class="gl-ml-3 gl-display-inline-block">
+        <gl-button
+          size="small"
+          variant="danger"
+          category="secondary"
+          @click="acceptDiscardConfirmation(file)"
+        >
+          {{ __('Discard changes') }}
+        </gl-button>
+        <gl-button size="small" @click="cancelDiscardConfirmation(file)">
+          {{ __('Cancel') }}
+        </gl-button>
       </div>
     </div>
     <div :class="classObject" class="editor-wrap">

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue

@@ -35,7 +35,7 @@ export default {
         <td :class="lineCssClass(line)" class="diff-line-num header"></td>
         <td :class="lineCssClass(line)" class="line_content header">
           <strong>{{ line.richText }}</strong>
-          <button class="btn" @click="handleSelected({ file, line })">
+          <button type="button" @click="handleSelected({ file, line })">
             {{ line.buttonTitle }}
           </button>
         </td>

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue

@@ -35,7 +35,7 @@ export default {
           <td class="diff-line-num header" :class="lineCssClass(line)"></td>
           <td class="line_content header" :class="lineCssClass(line)">
             <strong>{{ line.richText }}</strong>
-            <button class="btn" @click="handleSelected({ file, line })">
+            <button type="button" @click="handleSelected({ file, line })">
               {{ line.buttonTitle }}
             </button>
           </td>

app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue

 <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>

app/assets/stylesheets/framework/diffs.scss

@@ -670,10 +670,6 @@ table.code {
   float: right;
 }
 
-.files-changed {
-  border-bottom: 0;
-}
-
 .merge-request-details .file-content.image_file img {
   max-height: 50vh;
 }

app/assets/stylesheets/page_bundles/merge_conflicts.scss

@@ -173,22 +173,5 @@
     text-align: right;
     padding: $gl-padding-top $gl-padding;
     color: var(--gl-text-color, $gl-text-color);
-
-    .discard-actions {
-      display: inline-block;
-      margin-left: 10px;
-    }
-  }
-
-  .resolve-conflicts-form {
-    h4 {
-      margin-top: 0;
-    }
-
-    .resolve-info {
-      @media(max-width: map-get($grid-breakpoints, lg)-1) {
-        margin-bottom: $gl-padding;
-      }
-    }
   }
 }

changelogs/unreleased/321090-leipert-gitlab-ui.yml

+---
+title: Align UI of Merge Conflicts app with our design system
+merge_request: 59400
+author:
+type: other

spec/features/merge_request/user_resolves_conflicts_spec.rb

@@ -173,7 +173,7 @@ RSpec.describe 'Merge request > User resolves conflicts', :js do
       end
 
       it "renders bad name without xss issues" do
-        expect(find('.resolve-conflicts-form .resolve-info')).to have_content(bad_branch_name)
+        expect(find('[data-testid="resolve-info"]')).to have_content(bad_branch_name)
       end
     end
   end

spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js

@@ -82,20 +82,20 @@ describe('Merge Conflict Resolver App', () => {
         const interactiveButton = findFileInteractiveButton(findFiles().at(0));
         const inlineButton = findFileInlineButton(findFiles().at(0));
 
-        expect(interactiveButton.classes('active')).toBe(true);
-        expect(inlineButton.classes('active')).toBe(false);
+        expect(interactiveButton.props('selected')).toBe(true);
+        expect(inlineButton.props('selected')).toBe(false);
       });
 
       it('clicking inline set inline as default', async () => {
         mountComponent();
 
         const inlineButton = findFileInlineButton(findFiles().at(0));
-        expect(inlineButton.classes('active')).toBe(false);
+        expect(inlineButton.props('selected')).toBe(false);
 
-        inlineButton.trigger('click');
+        inlineButton.vm.$emit('click');
         await wrapper.vm.$nextTick();
 
-        expect(inlineButton.classes('active')).toBe(true);
+        expect(inlineButton.props('selected')).toBe(true);
       });
 
       it('inline mode shows a inline-conflict-lines', () => {
@@ -110,7 +110,7 @@ describe('Merge Conflict Resolver App', () => {
       it('parallel mode shows a parallel-conflict-lines', async () => {
         mountComponent();
 
-        findSideBySideButton().trigger('click');
+        findSideBySideButton().vm.$emit('click');
         await wrapper.vm.$nextTick();
 
         const parallelConflictLinesComponent = findParallelConflictLines(findFiles().at(0));