Refactor commit information to use axios

This change changes the way the commit information box is rendered to
avoid code duplication and replacing jquery `.load()` with Axios.

app/assets/javascripts/pages/projects/commit/pipelines/index.js

-import $ from 'jquery';
-import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
-import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new MiniPipelineGraph({
-    container: '.js-commit-pipeline-graph',
-  }).bindEvents();
-  // eslint-disable-next-line no-jquery/no-load
-  $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
-  fetchCommitMergeRequests();
+  initCommitBoxInfo();
+
   initPipelines();
 });

app/assets/javascripts/pages/projects/commit/show/index.js

@@ -4,10 +4,8 @@ import $ from 'jquery';
 import Diff from '~/diff';
 import ZenMode from '~/zen_mode';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
 import initNotes from '~/init_notes';
 import initChangesDropdown from '~/init_changes_dropdown';
-import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 import '~/sourcegraph/load';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
@@ -15,6 +13,7 @@ import syntaxHighlight from '~/syntax_highlight';
 import flash from '~/flash';
 import { __ } from '~/locale';
 import loadAwardsHandler from '~/awards_handler';
+import { initCommitBoxInfo } from '~/projects/commit_box/info';
 
 document.addEventListener('DOMContentLoaded', () => {
   const hasPerfBar = document.querySelector('.with-performance-bar');
@@ -22,13 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
   initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
   new ZenMode();
   new ShortcutsNavigation();
-  new MiniPipelineGraph({
-    container: '.js-commit-pipeline-graph',
-  }).bindEvents();
+
+  initCommitBoxInfo();
+
   initNotes();
-  // eslint-disable-next-line no-jquery/no-load
-  $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
-  fetchCommitMergeRequests();
 
   const filesContainer = $('.js-diffs-batch');
 

app/assets/javascripts/projects/commit_box/info/index.js

+import { loadBranches } from './load_branches';
+import { fetchCommitMergeRequests } from '~/commit_merge_requests';
+import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+
+export const initCommitBoxInfo = (containerSelector = '.js-commit-box-info') => {
+  const containerEl = document.querySelector(containerSelector);
+
+  // Display commit related branches
+  loadBranches(containerEl);
+
+  // Related merge requests to this commit
+  fetchCommitMergeRequests();
+
+  // Display pipeline info for this commit
+  new MiniPipelineGraph({
+    container: '.js-commit-pipeline-graph',
+  }).bindEvents();
+};

app/assets/javascripts/projects/commit_box/info/load_branches.js

+import axios from 'axios';
+import { sanitize } from '~/lib/dompurify';
+import { __ } from '~/locale';
+
+export const loadBranches = containerEl => {
+  if (!containerEl) {
+    return;
+  }
+
+  const { commitPath } = containerEl.dataset;
+  const branchesEl = containerEl.querySelector('.commit-info.branches');
+  axios
+    .get(commitPath)
+    .then(({ data }) => {
+      branchesEl.innerHTML = sanitize(data);
+    })
+    .catch(() => {
+      branchesEl.textContent = __('Failed to load branches. Please try again.');
+    });
+};

app/views/projects/commit/_commit_box.html.haml

 - can_collaborate = can_collaborate_with_project?(@project)
 
-.page-content-header.js-commit-box{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
+.page-content-header
   .header-main-content
     = render partial: 'signature', object: @commit.signature
     %strong
@@ -58,7 +58,7 @@
     %pre.commit-description<
       = preserve(markdown_field(@commit, :description))
 
-.info-well
+.info-well.js-commit-box-info{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
   .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")

spec/frontend/projects/commit_box/info/load_branches_spec.js

+import axios from 'axios';
+import waitForPromises from 'helpers/wait_for_promises';
+import MockAdapter from 'axios-mock-adapter';
+import { loadBranches } from '~/projects/commit_box/info/load_branches';
+
+const mockCommitPath = '/commit/abcd/branches';
+const mockBranchesRes =
+  '<a href="/-/commits/master">master</a><span><a href="/-/commits/my-branch">my-branch</a></span>';
+
+describe('~/projects/commit_box/info/load_branches', () => {
+  let mock;
+  let el;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(mockCommitPath).reply(200, mockBranchesRes);
+
+    el = document.createElement('div');
+    el.dataset.commitPath = mockCommitPath;
+    el.innerHTML = '<div class="commit-info branches"><span class="spinner"/></div>';
+  });
+
+  it('loads and renders branches info', async () => {
+    loadBranches(el);
+    await waitForPromises();
+
+    expect(el.innerHTML).toBe(`<div class="commit-info branches">${mockBranchesRes}</div>`);
+  });
+
+  it('does not load when no container is provided', async () => {
+    loadBranches(null);
+    await waitForPromises();
+
+    expect(mock.history.get).toHaveLength(0);
+  });
+
+  describe('when braches request returns unsafe content', () => {
+    beforeEach(() => {
+      mock
+        .onGet(mockCommitPath)
+        .reply(200, '<a onload="alert(\'xss!\');" href="/-/commits/master">master</a>');
+    });
+
+    it('displays sanitized html', async () => {
+      loadBranches(el);
+      await waitForPromises();
+
+      expect(el.innerHTML).toBe(
+        '<div class="commit-info branches"><a href="/-/commits/master">master</a></div>',
+      );
+    });
+  });
+
+  describe('when braches request fails', () => {
+    beforeEach(() => {
+      mock.onGet(mockCommitPath).reply(500, 'Error!');
+    });
+
+    it('attempts to load and renders an error', async () => {
+      loadBranches(el);
+      await waitForPromises();
+
+      expect(el.innerHTML).toBe(
+        '<div class="commit-info branches">Failed to load branches. Please try again.</div>',
+      );
+    });
+  });
+});