Render right sidebar and handle request error.

app/assets/javascripts/merge_conflict_data_provider.js.es6

@@ -8,6 +8,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
     return {
       isLoading      : true,
+      hasError       : false,
       isParallel     : diffViewType === 'parallel',
       diffViewType   : diffViewType,
       conflictsData  : {},
@@ -18,12 +19,19 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
   decorateData(vueInstance, data) {
     this.vueInstance    = vueInstance;
+
+    if (data.type === 'error') {
+      vueInstance.hasError = true;
+      data.errorMessage = data.message;
+    }
+    else {
       data.shortCommitSha = data.commit_sha.slice(0, 7);
       data.commitMesage   = data.commit_message;
 
       this.setParallelLines(data);
       this.setInlineLines(data);
       this.updateResolutionsData(data);
+    }
 
     vueInstance.conflictsData = data;
   }
@@ -166,7 +174,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
     vi.diffView   = newType;
     vi.isParallel = newType === 'parallel';
     $.cookie('diff_view', newType); // TODO: Make sure that cookie path added.
-    $('.container-fluid').toggleClass('container-limited');
+    $('.content-wrapper .container-fluid').toggleClass('container-limited');
   }
 
 
@@ -270,4 +278,10 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
     }
   }
 
+
+  handleFailedRequest(vueInstance, data) {
+    vueInstance.hasError = true;
+    vueInstance.conflictsData.errorMessage = 'Something went wrong!';
+  }
+
 }

app/assets/javascripts/merge_conflict_resolver.js.es6

@@ -29,8 +29,16 @@ window.MergeConflictResolver = class MergeConflictResolver {
 
 
   fetchData() {
-    $.get('./conflicts.json').done( (data) => {
-      this.dataProvider.decorateData(this.vue, data);
+    const dp = this.dataProvider;
+
+    $.get('./conflicts.json')
+      .done( (data) => {
+        dp.decorateData(this.vue, data);
+      })
+      .error( (data) => {
+        dp.handleFailedRequest(this.vue, data);
+      })
+      .always( () => {
         this.vue.isLoading = false;
       })
   }

app/controllers/projects/merge_requests_controller.rb

@@ -141,7 +141,10 @@ class Projects::MergeRequestsController < Projects::ApplicationController
         begin
           render json: Gitlab::Conflict::FileCollection.new(@merge_request)
         rescue Gitlab::Conflict::Parser::ParserError, Gitlab::Conflict::FileCollection::ConflictSideMissing => e
-          render json: { message: 'Unable to resolve conflicts in the web interface for this merge request' }
+          render json: {
+            message: 'Unable to resolve conflicts in the web interface for this merge request',
+            type: 'error'
+          }
         end
       end
     end

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

@@ -2,14 +2,19 @@
 
 = render "projects/merge_requests/show/mr_title"
 
-.merge-request-details.issuable-details{data: {id: @merge_request.project.id}}
+.merge-request-details.issuable-details
   = render "projects/merge_requests/show/mr_box"
 
+= render 'shared/issuable/sidebar', issuable: @merge_request
+
 #conflicts
-  .loading{ "v-if" => "isLoading" }
+  .loading{"v-if" => "isLoading"}
     %i.fa.fa-spinner.fa-spin
 
-  .content-block.oneline-block.files-changed{ "v-if" => "!isLoading" }
+  .content-block.oneline-block{"v-if" => "hasError"}
+    %p {{conflictsData.errorMessage}}
+
+  .content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
     .inline-parallel-buttons
       .btn-group
         %a.btn{ |
@@ -30,7 +35,7 @@
         into
         %strong {{conflictsData.target_branch}}
 
-  .files-wrapper{ "v-if" => "!isLoading" }
+  .files-wrapper{"v-if" => "!isLoading && !hasError"}
     .files{"v-if" => "isParallel"}
       .diff-file.file-holder.conflict.parallel-view{"v-for" => "file in conflictsData.files"}
         .file-title