Merge branch '66454-nested-sections' into 'master'

Extracts collapsible logic to a component

See merge request gitlab-org/gitlab!17219

app/assets/javascripts/jobs/components/log/collapsible_section.vue

+<script>
+import LogLine from './line.vue';
+import LogLineHeader from './line_header.vue';
+
+export default {
+  name: 'CollpasibleLogSection',
+  components: {
+    LogLine,
+    LogLineHeader,
+  },
+  props: {
+    section: {
+      type: Object,
+      required: true,
+    },
+    traceEndpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    badgeDuration() {
+      return this.section.line && this.section.line.section_duration;
+    },
+  },
+  methods: {
+    handleOnClickCollapsibleLine(section) {
+      this.$emit('onClickCollapsibleLine', section);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <log-line-header
+      :line="section.line"
+      :duration="badgeDuration"
+      :path="traceEndpoint"
+      :is-closed="section.isClosed"
+      @toggleLine="handleOnClickCollapsibleLine(section)"
+    />
+    <template v-if="!section.isClosed">
+      <template v-for="line in section.lines">
+        <collpasible-log-section
+          v-if="line.isHeader"
+          :key="`collapsible-nested-${line.offset}`"
+          :section="line"
+          :trace-endpoint="traceEndpoint"
+          @toggleLine="handleOnClickCollapsibleLine"
+        />
+        <log-line v-else :key="line.offset" :line="line" :path="traceEndpoint" />
+      </template>
+    </template>
+  </div>
+</template>

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

 <script>
 import { mapState, mapActions } from 'vuex';
+import CollpasibleLogSection from './collapsible_section.vue';
 import LogLine from './line.vue';
-import LogLineHeader from './line_header.vue';
 
 export default {
   components: {
+    CollpasibleLogSection,
     LogLine,
-    LogLineHeader,
   },
   computed: {
     ...mapState(['traceEndpoint', 'trace', 'isTraceComplete']),
@@ -22,24 +22,13 @@ export default {
 <template>
   <code class="job-log d-block">
     <template v-for="(section, index) in trace">
-      <template v-if="section.isHeader">
-        <log-line-header
-          :key="`collapsible-${index}`"
-          :line="section.line"
-          :duration="section.section_duration"
-          :path="traceEndpoint"
-          :is-closed="section.isClosed"
-          @toggleLine="handleOnClickCollapsibleLine(section)"
-        />
-        <template v-if="!section.isClosed">
-          <log-line
-            v-for="line in section.lines"
-            :key="line.offset"
-            :line="line"
-            :path="traceEndpoint"
-          />
-        </template>
-      </template>
+      <collpasible-log-section
+        v-if="section.isHeader"
+        :key="`collapsible-${index}`"
+        :section="section"
+        :trace-endpoint="traceEndpoint"
+        @onClickCollapsibleLine="handleOnClickCollapsibleLine"
+      />
       <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
     </template>
 

app/assets/stylesheets/framework.scss

@@ -28,6 +28,7 @@
 @import 'framework/issue_box';
 @import 'framework/lists';
 @import 'framework/logo';
+@import 'framework/job_log';
 @import 'framework/markdown_area';
 @import 'framework/media_object';
 @import 'framework/modal';

spec/frontend/jobs/components/log/collapsible_section_spec.js

+import { mount } from '@vue/test-utils';
+import CollpasibleSection from '~/jobs/components/log/collapsible_section.vue';
+import { nestedSectionOpened, nestedSectionClosed } from './mock_data';
+
+describe('Job Log Collapsible Section', () => {
+  let wrapper;
+
+  const traceEndpoint = 'jobs/335';
+
+  const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(CollpasibleSection, {
+      sync: true,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with closed nested section', () => {
+    beforeEach(() => {
+      createComponent({
+        section: nestedSectionClosed,
+        traceEndpoint,
+      });
+    });
+
+    it('renders clickable header line', () => {
+      expect(findCollapsibleLine().attributes('role')).toBe('button');
+    });
+  });
+
+  describe('with opened nested section', () => {
+    beforeEach(() => {
+      createComponent({
+        section: nestedSectionOpened,
+        traceEndpoint,
+      });
+    });
+
+    it('renders all sections opened', () => {
+      expect(wrapper.findAll('.collapsible-line').length).toBe(2);
+    });
+  });
+
+  it('emits onClickCollapsibleLine on click', () => {
+    createComponent({
+      section: nestedSectionOpened,
+      traceEndpoint,
+    });
+
+    findCollapsibleLine().trigger('click');
+    expect(wrapper.emitted('onClickCollapsibleLine').length).toBe(1);
+  });
+});

spec/frontend/jobs/components/log/mock_data.js

@@ -150,3 +150,73 @@ export const collapsibleTraceIncremental = [
     sections: ['section'],
   },
 ];
+
+export const nestedSectionClosed = {
+  offset: 5,
+  section_header: true,
+  isHeader: true,
+  isClosed: true,
+  line: {
+    content: [{ text: 'foo' }],
+    sections: ['prepare-script'],
+    lineNumber: 1,
+  },
+  section_duration: '00:03',
+  lines: [
+    {
+      section_header: true,
+      section_duration: '00:02',
+      isHeader: true,
+      isClosed: true,
+      line: {
+        offset: 52,
+        content: [{ text: 'bar' }],
+        sections: ['prepare-script', 'prepare-script-nested'],
+        lineNumber: 2,
+      },
+      lines: [
+        {
+          offset: 80,
+          content: [{ text: 'this is a collapsible nested section' }],
+          sections: ['prepare-script', 'prepare-script-nested'],
+          lineNumber: 3,
+        },
+      ],
+    },
+  ],
+};
+
+export const nestedSectionOpened = {
+  offset: 5,
+  section_header: true,
+  isHeader: true,
+  isClosed: false,
+  line: {
+    content: [{ text: 'foo' }],
+    sections: ['prepare-script'],
+    lineNumber: 1,
+  },
+  section_duration: '00:03',
+  lines: [
+    {
+      section_header: true,
+      section_duration: '00:02',
+      isHeader: true,
+      isClosed: false,
+      line: {
+        offset: 52,
+        content: [{ text: 'bar' }],
+        sections: ['prepare-script', 'prepare-script-nested'],
+        lineNumber: 2,
+      },
+      lines: [
+        {
+          offset: 80,
+          content: [{ text: 'this is a collapsible nested section' }],
+          sections: ['prepare-script', 'prepare-script-nested'],
+          lineNumber: 3,
+        },
+      ],
+    },
+  ],
+};