Fixed UI issues in merge conflict app

Fixes mode button alignment bug
Removed font awesome and added in file icons

app/assets/javascripts/merge_conflicts/merge_conflict_store.js

@@ -54,7 +54,6 @@ import { s__ } from '~/locale';
         file.promptDiscardConfirmation = false;
         file.resolveMode = DEFAULT_RESOLVE_MODE;
         file.filePath = this.getFilePath(file);
-        file.iconClass = `fa-${file.blob_icon}`;
         file.blobPath = file.blob_path;
 
         if (file.type === CONFLICT_TYPES.TEXT) {

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

 import $ from 'jquery';
 import Vue from 'vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { deprecatedCreateFlash as createFlash } from '../flash';
 import initIssuableSidebar from '../init_issuable_sidebar';
 import './merge_conflict_store';
@@ -24,6 +25,7 @@ export default function initMergeConflicts() {
   gl.MergeConflictsResolverApp = new Vue({
     el: '#conflicts',
     components: {
+      FileIcon,
       'diff-file-editor': gl.mergeConflicts.diffFileEditor,
       'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
       'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines,

app/assets/stylesheets/framework/diffs.scss

@@ -2,10 +2,6 @@
 .diff-file {
   margin-bottom: $gl-padding;
 
-  &.conflict {
-    border-top: 1px solid $border-color;
-  }
-
   &.has-body {
     .file-title {
       box-shadow: 0 -2px 0 0 var(--white);

app/views/projects/merge_requests/conflicts/_commit_stats.html.haml

 .content-block.oneline-block.files-changed{ "v-if" => "!isLoading && !hasError" }
   .inline-parallel-buttons{ "v-if" => "showDiffViewTypeSwitcher" }
     .btn-group
-      %button.btn{ ":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')" }
-        Inline
-      %button.btn{ ":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')" }
-        Side-by-side
+      %button.btn.gl-button{ ":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')" }
+        = _('Inline')
+      %button.btn.gl-button{ ":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')" }
+        = _('Side-by-side')
 
   .js-toggle-container
     .commit-stat-summary
-      Showing
-      %strong.cred {{conflictsCountText}}
-      between
-      %strong.ref-name {{conflictsData.sourceBranch}}
-      and
-      %strong.ref-name {{conflictsData.targetBranch}}
+      = _('Showing %{conflict_start}%{conflicts_text}%{strong_end} between %{ref_start}%{source_branch}%{strong_end} and %{ref_start}%{target_branch}%{strong_end}').html_safe % { conflict_start: '<strong class="cred">'.html_safe, ref_start: '<strong class="ref-name">'.html_safe, strong_end: '</strong>'.html_safe, conflicts_text: '{{conflictsCountText}}', source_branch: '{{conflictsData.sourceBranch}}', target_branch: '{{conflictsData.targetBranch}}' }

app/views/projects/merge_requests/conflicts/_file_actions.html.haml

-.file-actions
-  .btn-group{ "v-if" => "file.type === 'text'" }
-    %button.btn{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
+.file-actions.d-flex.align-items-center.gl-ml-auto.gl-align-self-start
+  .btn-group.gl-mr-3{ "v-if" => "file.type === 'text'" }
+    %button.btn.gl-button{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
       '@click' => "onClickResolveModeButton(file, 'interactive')",
       type: 'button' }
-      Interactive mode
-    %button.btn{ ':class' => "{ 'active': file.resolveMode == 'edit' }",
+      = _('Interactive mode')
+    %button.btn.gl-button{ ':class' => "{ 'active': file.resolveMode == 'edit' }",
       '@click' => "onClickResolveModeButton(file, 'edit')",
       type: 'button' }
-      Edit inline
-  %a.btn.view-file{ ":href" => "file.blobPath" }
-    View file @{{conflictsData.shortCommitSha}}
+      = _('Edit inline')
+  %a.btn.gl-button.view-file{ ":href" => "file.blobPath" }
+    = _('View file @%{commit_sha}') % { commit_sha: '{{conflictsData.shortCommitSha}}' }

app/views/projects/merge_requests/conflicts/_submit_form.html.haml

@@ -18,7 +18,7 @@
     .offset-md-4.col-md-8
       .row
         .col-6
-          %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
+          %button.btn.gl-button.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
         .col-6.text-right
           = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "gl-button btn btn-cancel"

app/views/projects/merge_requests/conflicts/show.html.haml

@@ -20,9 +20,10 @@
   .files-wrapper{ "v-if" => "!isLoading && !hasError" }
     .files
       .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
-        .js-file-title.file-title
-          %i.fa.fa-fw{ ":class" => "file.iconClass" }
-          %strong {{file.filePath}}
+        .js-file-title.file-title.file-title-flex-parent.cursor-default
+          .file-header-content
+            %file-icon{ ':file-name': 'file.filePath', ':size': '18', 'css-classes': 'gl-mr-2' }
+            %strong.file-title-name {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
           .file-content{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }

locale/gitlab.pot

@@ -9924,6 +9924,9 @@ msgstr ""
 msgid "Edit in single-file editor"
 msgstr ""
 
+msgid "Edit inline"
+msgstr ""
+
 msgid "Edit issues"
 msgstr ""
 
@@ -14705,6 +14708,9 @@ msgstr ""
 msgid "Integrations|You can now close this window and return to the GitLab for Jira application."
 msgstr ""
 
+msgid "Interactive mode"
+msgstr ""
+
 msgid "Interested parties can even contribute by pushing commits if they want to."
 msgstr ""
 
@@ -24901,6 +24907,9 @@ msgid_plural "Showing %d events"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Showing %{conflict_start}%{conflicts_text}%{strong_end} between %{ref_start}%{source_branch}%{strong_end} and %{ref_start}%{target_branch}%{strong_end}"
+msgstr ""
+
 msgid "Showing %{count} of %{total} projects"
 msgstr ""
 
@@ -29808,6 +29817,9 @@ msgstr ""
 msgid "View file @ %{commitSha}"
 msgstr ""
 
+msgid "View file @%{commit_sha}"
+msgstr ""
+
 msgid "View full dashboard"
 msgstr ""