Skip to content

G
gitlab-ce
Commit cf648cc5 authored by Martin Wortschack's avatar Martin Wortschack
Browse files
Options

Merge branch '32146-remove-fe-code' into 'master' 

Removes collapsible sections frontend code

Closes #30880, #33033, #33116, and #32146

See merge request gitlab-org/gitlab!18282
parents ec0f85ad 961625f9
Hide whitespace changes
Inline Side-by-side
Showing with 5 additions and 189 deletions
app/assets/javascripts/jobs/components/job_log.vue
View file @ cf648cc5
......@@ -19,18 +19,13 @@ export default {
updated() {
this.$nextTick(() => {
this.handleScrollDown();
this.handleCollapsibleRows();
});
},
mounted() {
this.$nextTick(() => {
this.handleScrollDown();
this.handleCollapsibleRows();
});
},
destroyed() {
this.removeEventListener();
},
methods: {
...mapActions(['scrollBottom']),
/**
......@@ -47,53 +42,6 @@ export default {
}, 0);
}
},
removeEventListener() {
this.$el.querySelectorAll('.js-section-start').forEach(el => {
const titleSection = el.nextSibling;
titleSection.removeEventListener(
'click',
this.handleHeaderClick.bind(this, el, el.dataset.section),
);
el.removeEventListener('click', this.handleSectionClick);
});
},
/**
* The collapsible rows are sent in HTML from the backend
* We need tos add a onclick handler for the divs that match `.js-section-start`
*
*/
handleCollapsibleRows() {
this.$el.querySelectorAll('.js-section-start').forEach(el => {
const titleSection = el.nextSibling;
titleSection.addEventListener(
'click',
this.handleHeaderClick.bind(this, el, el.dataset.section),
);
el.addEventListener('click', this.handleSectionClick);
});
},
handleHeaderClick(arrowElement, section) {
this.updateToggleSection(arrowElement, section);
},
updateToggleSection(arrow, section) {
// toggle the arrow class
arrow.classList.toggle('fa-caret-right');
arrow.classList.toggle('fa-caret-down');
// hide the sections
const sibilings = this.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`);
sibilings.forEach(row => row.classList.toggle('hidden'));
},
/**
* On click, we toggle the hidden class of
* all the rows that match the `data-section` selector
*/
handleSectionClick(evt) {
const clickedArrow = evt.currentTarget;
this.updateToggleSection(clickedArrow, clickedArrow.dataset.section);
},
},
};
</script>
......
app/assets/stylesheets/pages/builds.scss
View file @ cf648cc5
......@@ -124,26 +124,6 @@
float: left;
padding-left: $gl-padding-8;
}
.section-start {
display: inline;
}
.section-start,
.section-header {
&:hover {
cursor: pointer;
&::after {
content: '';
background-color: rgba($white-light, 0.2);
left: 0;
right: 0;
position: absolute;
height: $job-log-highlight-height;
}
}
}
}
.build-header {
......
changelogs/unreleased/32146-remove-fe-code.yml 0 → 100644
View file @ cf648cc5
---
title: Removes Collapsible Sections from Job Log
merge_request:
author:
type: fixed
spec/features/projects/jobs/user_browses_job_spec.rb
View file @ cf648cc5
......@@ -38,66 +38,6 @@ describe 'User browses a job', :js do
expect(page).to have_content('Job has been erased')
end
shared_examples 'has collapsible sections' do
it 'collapses the section clicked' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-start[data-section="get-sources"]').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
it 'collapses the section header clicked' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-header.js-s-get-sources').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
end
context 'when job trace contains sections' do
let!(:build) { create(:ci_build, :success, :trace_with_sections, :coverage, pipeline: pipeline) }
it_behaves_like 'has collapsible sections'
end
context 'when job trace contains duplicate sections' do
let!(:build) { create(:ci_build, :success, :trace_with_duplicate_sections, :coverage, pipeline: pipeline) }
it_behaves_like 'has collapsible sections'
end
context 'when job trace contains sections' do
let!(:build) { create(:ci_build, :success, :trace_with_duplicate_sections, :coverage, pipeline: pipeline) }
it 'collapses a section' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-start[data-section="get-sources"]').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
end
context 'with a failed job' do
let!(:build) { create(:ci_build, :failed, :trace_artifact, pipeline: pipeline) }
......
spec/javascripts/jobs/components/job_log_spec.js
View file @ cf648cc5
......@@ -3,7 +3,6 @@ import component from '~/jobs/components/job_log.vue';
import createStore from '~/jobs/store';
import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
import { resetStore } from '../store/helpers';
import { logWithCollapsibleSections } from '../mock_data';
describe('Job Log', () => {
const Component = Vue.extend(component);
......@@ -63,60 +62,4 @@ describe('Job Log', () => {
expect(vm.$el.querySelector('.js-log-animation')).toBeNull();
});
});
describe('Collapsible sections', () => {
beforeEach(() => {
vm = mountComponentWithStore(Component, {
props: {
trace: logWithCollapsibleSections.html,
isComplete: true,
},
store,
});
});
it('renders open arrow', () => {
expect(vm.$el.querySelector('.fa-caret-down')).not.toBeNull();
});
it('toggles hidden class to the sibilings rows when arrow is clicked', done => {
vm.$nextTick()
.then(() => {
const { section } = vm.$el.querySelector('.js-section-start').dataset;
vm.$el.querySelector('.js-section-start').click();
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
expect(el.classList.contains('hidden')).toEqual(true);
});
vm.$el.querySelector('.js-section-start').click();
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
expect(el.classList.contains('hidden')).toEqual(false);
});
})
.then(done)
.catch(done.fail);
});
it('toggles hidden class to the sibilings rows when header section is clicked', done => {
vm.$nextTick()
.then(() => {
const { section } = vm.$el.querySelector('.js-section-header').dataset;
vm.$el.querySelector('.js-section-header').click();
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
expect(el.classList.contains('hidden')).toEqual(true);
});
vm.$el.querySelector('.js-section-header').click();
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
expect(el.classList.contains('hidden')).toEqual(false);
});
})
.then(done)
.catch(done.fail);
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7