Commit c2fb7491 authored by Miguel Rincon's avatar Miguel Rincon

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.
parent b6407994
import $ from 'jquery'; import { initCommitBoxInfo } from '~/projects/commit_box/info';
import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
import initPipelines from '~/commit/pipelines/pipelines_bundle'; import initPipelines from '~/commit/pipelines/pipelines_bundle';
import { fetchCommitMergeRequests } from '~/commit_merge_requests';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
new MiniPipelineGraph({ initCommitBoxInfo();
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();
initPipelines(); initPipelines();
}); });
...@@ -4,10 +4,8 @@ import $ from 'jquery'; ...@@ -4,10 +4,8 @@ import $ from 'jquery';
import Diff from '~/diff'; import Diff from '~/diff';
import ZenMode from '~/zen_mode'; import ZenMode from '~/zen_mode';
import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
import initNotes from '~/init_notes'; import initNotes from '~/init_notes';
import initChangesDropdown from '~/init_changes_dropdown'; import initChangesDropdown from '~/init_changes_dropdown';
import { fetchCommitMergeRequests } from '~/commit_merge_requests';
import '~/sourcegraph/load'; import '~/sourcegraph/load';
import { handleLocationHash } from '~/lib/utils/common_utils'; import { handleLocationHash } from '~/lib/utils/common_utils';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -15,6 +13,7 @@ import syntaxHighlight from '~/syntax_highlight'; ...@@ -15,6 +13,7 @@ import syntaxHighlight from '~/syntax_highlight';
import flash from '~/flash'; import flash from '~/flash';
import { __ } from '~/locale'; import { __ } from '~/locale';
import loadAwardsHandler from '~/awards_handler'; import loadAwardsHandler from '~/awards_handler';
import { initCommitBoxInfo } from '~/projects/commit_box/info';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const hasPerfBar = document.querySelector('.with-performance-bar'); const hasPerfBar = document.querySelector('.with-performance-bar');
...@@ -22,13 +21,10 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -22,13 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight); initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
new ZenMode(); new ZenMode();
new ShortcutsNavigation(); new ShortcutsNavigation();
new MiniPipelineGraph({
container: '.js-commit-pipeline-graph', initCommitBoxInfo();
}).bindEvents();
initNotes(); 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'); const filesContainer = $('.js-diffs-batch');
......
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();
};
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.');
});
};
- can_collaborate = can_collaborate_with_project?(@project) - 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 .header-main-content
= render partial: 'signature', object: @commit.signature = render partial: 'signature', object: @commit.signature
%strong %strong
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
%pre.commit-description< %pre.commit-description<
= preserve(markdown_field(@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 .well-segment.branch-info
.icon-container.commit-icon .icon-container.commit-icon
= custom_icon("icon_commit") = custom_icon("icon_commit")
......
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>',
);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment