From 85e0eb472dc33ae561c4b04b498c61f91fb7aa3e Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 6 Aug 2019 17:11:13 +0100 Subject: [PATCH] Makes title section collapsible In the job log, if the user clicks the section title the job log section will be collapsed --- .../javascripts/jobs/components/job_log.vue | 45 +++++++++++++------ .../unreleased/63181-collapsible-line.yml | 5 +++ lib/gitlab/ci/ansi2html.rb | 4 +- .../projects/jobs/user_browses_job_spec.rb | 14 ++++++ .../jobs/components/job_log_spec.js | 20 +++++++++ spec/lib/gitlab/ci/ansi2html_spec.rb | 6 +-- 6 files changed, 75 insertions(+), 19 deletions(-) create mode 100644 changelogs/unreleased/63181-collapsible-line.yml diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue index d611b370ab9..a3fbe9338ee 100644 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -48,9 +48,14 @@ export default { } }, removeEventListener() { - this.$el - .querySelectorAll('.js-section-start') - .forEach(el => el.removeEventListener('click', this.handleSectionClick)); + 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 @@ -58,9 +63,28 @@ export default { * */ handleCollapsibleRows() { - this.$el - .querySelectorAll('.js-section-start') - .forEach(el => el.addEventListener('click', this.handleSectionClick)); + 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 @@ -68,14 +92,7 @@ export default { */ handleSectionClick(evt) { const clickedArrow = evt.currentTarget; - // toggle the arrow class - clickedArrow.classList.toggle('fa-caret-right'); - clickedArrow.classList.toggle('fa-caret-down'); - - const { section } = clickedArrow.dataset; - const sibilings = this.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`); - - sibilings.forEach(row => row.classList.toggle('hidden')); + this.updateToggleSection(clickedArrow, clickedArrow.dataset.section); }, }, }; diff --git a/changelogs/unreleased/63181-collapsible-line.yml b/changelogs/unreleased/63181-collapsible-line.yml new file mode 100644 index 00000000000..c13d4eeab6c --- /dev/null +++ b/changelogs/unreleased/63181-collapsible-line.yml @@ -0,0 +1,5 @@ +--- +title: Makes collapsible title clickable in job log +merge_request: +author: +type: added diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb index 7e348763e81..382b8896dbd 100644 --- a/lib/gitlab/ci/ansi2html.rb +++ b/lib/gitlab/ci/ansi2html.rb @@ -218,7 +218,7 @@ module Gitlab return if @sections.include?(section) @sections << section - write_raw %{
} + write_raw %{
} @lineno_in_section = 0 end @@ -306,7 +306,7 @@ module Gitlab css_classes << "section" css_classes << if @lineno_in_section == 0 - "js-section-header section-header" + "js-section-header section-header cursor-pointer" else "line" end diff --git a/spec/features/projects/jobs/user_browses_job_spec.rb b/spec/features/projects/jobs/user_browses_job_spec.rb index 6d0269dd96b..1b277e17b0c 100644 --- a/spec/features/projects/jobs/user_browses_job_spec.rb +++ b/spec/features/projects/jobs/user_browses_job_spec.rb @@ -50,6 +50,20 @@ describe 'User browses a job', :js do 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 diff --git a/spec/javascripts/jobs/components/job_log_spec.js b/spec/javascripts/jobs/components/job_log_spec.js index 7e2ec2ec3f7..3485eec7763 100644 --- a/spec/javascripts/jobs/components/job_log_spec.js +++ b/spec/javascripts/jobs/components/job_log_spec.js @@ -98,5 +98,25 @@ describe('Job Log', () => { .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); + }); }); }); diff --git a/spec/lib/gitlab/ci/ansi2html_spec.rb b/spec/lib/gitlab/ci/ansi2html_spec.rb index eaf06ed8992..b6b3de4bc4a 100644 --- a/spec/lib/gitlab/ci/ansi2html_spec.rb +++ b/spec/lib/gitlab/ci/ansi2html_spec.rb @@ -209,7 +209,7 @@ describe Gitlab::Ci::Ansi2html do let(:section_start) { "section_start:#{section_start_time.to_i}:#{section_name}\r\033[0K"} let(:section_end) { "section_end:#{section_end_time.to_i}:#{section_name}\r\033[0K"} let(:section_start_html) do - '
' end @@ -233,8 +233,8 @@ describe Gitlab::Ci::Ansi2html do it 'prints light red' do text = "#{section_start}\e[91mHello\e[0m\nLine 1\nLine 2\nLine 3\n#{section_end}" - header = %{Hello} - line_break = %{
} + header = %{Hello} + line_break = %{
} output_line = %{Line 1
Line 2
Line 3
} html = "#{section_start_html}#{header}#{line_break}#{output_line}#{section_end_html}"