Makes title section collapsible63181-collapsible-line

In the job log, if the user clicks the section title
the job log section will be collapsed

6 files changed, 75 insertions, 19 deletions

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 %{<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
+          write_raw %{<div class="js-section-start fa fa-caret-down pr-2 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
           @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
-      '<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer"' \
+      '<div class="js-section-start fa fa-caret-down pr-2 cursor-pointer"' \
       " data-timestamp=\"#{section_start_time.to_i}\" data-section=\"#{class_name(section_name)}\"" \
       ' role="button"></div>'
     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 = %{<span class="term-fg-l-red section js-section-header section-header js-s-#{class_name(section_name)}">Hello</span>}
-        line_break = %{<span class="section js-section-header section-header js-s-#{class_name(section_name)}"><br/></span>}
+        header = %{<span class="term-fg-l-red section js-section-header section-header cursor-pointer js-s-#{class_name(section_name)}">Hello</span>}
+        line_break = %{<span class="section js-section-header section-header cursor-pointer js-s-#{class_name(section_name)}"><br/></span>}
         output_line = %{<span class="section line js-s-#{class_name(section_name)}">Line 1<br/>Line 2<br/>Line 3<br/></span>}
         html = "#{section_start_html}#{header}#{line_break}#{output_line}#{section_end_html}"