Removes collapsible sections frontend code

Removes the code that was adding collapsible
sections to the job log due to performance issues

Remove CSS

app/assets/javascripts/jobs/components/job_log.vue

@@ -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

@@ -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

+---
+title: Removes Collapsible Sections from Job Log
+merge_request:
+author:
+type: fixed

spec/features/projects/jobs/user_browses_job_spec.rb

@@ -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

@@ -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);
-    });
-  });
 });