Merge branch '25483-broken-tabs' into 'master'
Fix TypeError: Cannot read property 'initTabs' ## What does this MR do? Adds a default value to the `options` argument in order to prevent errors when `Pipelines` is initialised without arguments. Adds tests to guarantee this does not happen again. Adds back removed pipeline class to make the pipeline graph visible, `js-pipeline-graph` ## Why was this MR needed? In the places where `Pipelines` is initialised without arguments it throws an error: `TypeError: Cannot read property 'initTabs'` ## Does this MR meet the acceptance criteria? - [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added - [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md) - [ ] API support added - Tests - [x] Added for this feature/bug - [ ] All builds are passing - [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html) - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if it does - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #25483 Closes #25493 See merge request !8009
This commit is contained in:
commit
407adb9e95
9 changed files with 57 additions and 10 deletions
|
@ -4,7 +4,7 @@
|
|||
((global) => {
|
||||
|
||||
class Pipelines {
|
||||
constructor(options) {
|
||||
constructor(options = {}) {
|
||||
|
||||
if (options.initTabs && options.tabsOptions) {
|
||||
new global.LinkedTabs(options.tabsOptions);
|
||||
|
@ -14,9 +14,11 @@
|
|||
}
|
||||
|
||||
addMarginToBuildColumns() {
|
||||
this.pipelineGraph = document.querySelector('.pipeline-graph');
|
||||
const secondChildBuildNodes = document.querySelector('.pipeline-graph').querySelectorAll('.build:nth-child(2)');
|
||||
for (buildNodeIndex in secondChildBuildNodes) {
|
||||
this.pipelineGraph = document.querySelector('.js-pipeline-graph');
|
||||
|
||||
const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
|
||||
|
||||
for (const buildNodeIndex in secondChildBuildNodes) {
|
||||
const buildNode = secondChildBuildNodes[buildNodeIndex];
|
||||
const firstChildBuildNode = buildNode.previousElementSibling;
|
||||
if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
|
||||
|
@ -28,6 +30,7 @@
|
|||
const columnBuilds = previousColumn.querySelectorAll('.build');
|
||||
if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
|
||||
}
|
||||
|
||||
this.pipelineGraph.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
- is_playable = subject.playable? && can?(current_user, :update_build, @project)
|
||||
- if is_playable
|
||||
= link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
|
||||
= link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.js-pipeline-graph', placement: 'bottom' } do
|
||||
= ci_icon_for_status('play')
|
||||
.ci-status-text= subject.name
|
||||
- elsif can?(current_user, :read_build, @project)
|
||||
= link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
|
||||
= link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } do
|
||||
%span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
|
||||
= ci_icon_for_status(subject.status)
|
||||
.ci-status-text= subject.name
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
in
|
||||
= time_interval_in_words pipeline.duration
|
||||
|
||||
.row-content-block.build-content.middle-block.hidden
|
||||
.row-content-block.build-content.middle-block.js-pipeline-graph.hidden
|
||||
= render "projects/pipelines/graph", pipeline: pipeline
|
||||
|
||||
- if pipeline.yaml_errors.present?
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
|
||||
%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } }
|
||||
- if subject.target_url
|
||||
= link_to subject.target_url do
|
||||
%span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.tab-content
|
||||
#js-tab-pipeline.tab-pane
|
||||
.build-content.middle-block
|
||||
.build-content.middle-block.js-pipeline-graph
|
||||
= render "projects/pipelines/graph", pipeline: pipeline
|
||||
|
||||
#js-tab-builds.tab-pane
|
||||
|
|
4
changelogs/unreleased/25483-broken-tabs.yml
Normal file
4
changelogs/unreleased/25483-broken-tabs.yml
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Fix TypeError: Cannot read property 'initTabs' on commit builds tab
|
||||
merge_request: 8009
|
||||
author:
|
15
spec/javascripts/fixtures/pipeline_graph.html.haml
Normal file
15
spec/javascripts/fixtures/pipeline_graph.html.haml
Normal file
|
@ -0,0 +1,15 @@
|
|||
%div.pipeline-visualization.js-pipeline-graph
|
||||
%ul.stage-column-list
|
||||
%li.stage-column
|
||||
.stage-name
|
||||
%a{:href => "/"}
|
||||
Test
|
||||
.builds-container
|
||||
%ul
|
||||
%li.build
|
||||
.curve
|
||||
.build-content
|
||||
%a
|
||||
%svg
|
||||
.ci-status-text
|
||||
stop_review
|
25
spec/javascripts/pipelines_spec.js.es6
Normal file
25
spec/javascripts/pipelines_spec.js.es6
Normal file
|
@ -0,0 +1,25 @@
|
|||
//= require pipelines
|
||||
|
||||
(() => {
|
||||
describe('Pipelines', () => {
|
||||
fixture.preload('pipeline_graph');
|
||||
|
||||
beforeEach(() => {
|
||||
fixture.load('pipeline_graph');
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(window.gl.Pipelines).toBeDefined();
|
||||
});
|
||||
|
||||
it('should create a `Pipelines` instance without options', () => {
|
||||
expect(() => { new window.gl.Pipelines(); }).not.toThrow(); //eslint-disable-line
|
||||
});
|
||||
|
||||
it('should create a `Pipelines` instance with options', () => {
|
||||
const pipelines = new window.gl.Pipelines({ foo: 'bar' });
|
||||
|
||||
expect(pipelines.pipelineGraph).toBeDefined();
|
||||
});
|
||||
});
|
||||
})();
|
|
@ -28,7 +28,7 @@ describe 'projects/pipelines/show' do
|
|||
it 'shows a graph with grouped stages' do
|
||||
render
|
||||
|
||||
expect(rendered).to have_css('.pipeline-graph')
|
||||
expect(rendered).to have_css('.js-pipeline-graph')
|
||||
expect(rendered).to have_css('.grouped-pipeline-dropdown')
|
||||
|
||||
# stages
|
||||
|
|
Loading…
Reference in a new issue