Merge branch '31161-update-sections' into 'master'

Updates the data to match new format

See merge request gitlab-org/gitlab!17498

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

@@ -40,16 +40,12 @@ export default {
       @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>
+      <log-line
+        v-for="line in section.lines"
+        :key="line.offset"
+        :line="line"
+        :path="traceEndpoint"
+      />
     </template>
   </div>
 </template>

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

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <template>
-  <div class="log-line">
+  <div class="js-line log-line">
     <line-number :line-number="line.lineNumber" :path="path" />
     <span v-for="(content, i) in line.content" :key="i" :class="content.style">{{
       content.text

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';
+import { collapsibleSectionClosed, collapsibleSectionOpened } from './mock_data';
 
 describe('Job Log Collapsible Section', () => {
   let wrapper;
@@ -8,6 +8,7 @@ describe('Job Log Collapsible Section', () => {
   const traceEndpoint = 'jobs/335';
 
   const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+  const findCollapsibleLineSvg = () => wrapper.find('.collapsible-line svg');
 
   const createComponent = (props = {}) => {
     wrapper = mount(CollpasibleSection, {
@@ -22,10 +23,10 @@ describe('Job Log Collapsible Section', () => {
     wrapper.destroy();
   });
 
-  describe('with closed nested section', () => {
+  describe('with closed section', () => {
     beforeEach(() => {
       createComponent({
-        section: nestedSectionClosed,
+        section: collapsibleSectionClosed,
         traceEndpoint,
       });
     });
@@ -33,24 +34,36 @@ describe('Job Log Collapsible Section', () => {
     it('renders clickable header line', () => {
       expect(findCollapsibleLine().attributes('role')).toBe('button');
     });
+
+    it('renders an icon with the closed state', () => {
+      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-right');
+    });
   });
 
-  describe('with opened nested section', () => {
+  describe('with opened section', () => {
     beforeEach(() => {
       createComponent({
-        section: nestedSectionOpened,
+        section: collapsibleSectionOpened,
         traceEndpoint,
       });
     });
 
-    it('renders all sections opened', () => {
-      expect(wrapper.findAll('.collapsible-line').length).toBe(2);
+    it('renders clickable header line', () => {
+      expect(findCollapsibleLine().attributes('role')).toBe('button');
+    });
+
+    it('renders an icon with the open state', () => {
+      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-down');
+    });
+
+    it('renders collapsible lines content', () => {
+      expect(wrapper.findAll('.js-line').length).toEqual(collapsibleSectionOpened.lines.length);
     });
   });
 
   it('emits onClickCollapsibleLine on click', () => {
     createComponent({
-      section: nestedSectionOpened,
+      section: collapsibleSectionOpened,
       traceEndpoint,
     });
 

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

@@ -14,13 +14,13 @@ export const jobLog = [
         text: 'Using Docker executor with image dev.gitlab.org3',
       },
     ],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_header: true,
   },
   {
     offset: 1003,
     content: [{ text: 'Starting service postgres:9.6.14 ...', style: 'text-green' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
 ];
 
@@ -37,23 +37,23 @@ export const utilsMockData = [
           'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.3-golang-1.11-git-2.22-chrome-73.0-node-12.x-yarn-1.16-postgresql-9.6-graphicsmagick-1.3.33',
       },
     ],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_header: true,
   },
   {
     offset: 1003,
     content: [{ text: 'Starting service postgres:9.6.14 ...' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
   {
     offset: 1004,
     content: [{ text: 'Pulling docker image postgres:9.6.14 ...', style: 'term-fg-l-green' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
   {
     offset: 1005,
     content: [],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_duration: '10:00',
   },
 ];
@@ -100,7 +100,7 @@ export const headerTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -113,7 +113,7 @@ export const headerTraceIncremental = [
         text: 'updated log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -126,7 +126,7 @@ export const collapsibleTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
   {
     offset: 2,
@@ -135,7 +135,7 @@ export const collapsibleTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -147,76 +147,48 @@ export const collapsibleTraceIncremental = [
         text: 'updated log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
-export const nestedSectionClosed = {
+export const collapsibleSectionClosed = {
   offset: 5,
   section_header: true,
   isHeader: true,
   isClosed: true,
   line: {
     content: [{ text: 'foo' }],
-    sections: ['prepare-script'],
+    section: '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,
-        },
-      ],
+      offset: 80,
+      content: [{ text: 'this is a collapsible nested section' }],
+      section: 'prepare-script',
+      lineNumber: 3,
     },
   ],
 };
 
-export const nestedSectionOpened = {
+export const collapsibleSectionOpened = {
   offset: 5,
   section_header: true,
   isHeader: true,
   isClosed: false,
   line: {
     content: [{ text: 'foo' }],
-    sections: ['prepare-script'],
+    section: '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,
-        },
-      ],
+      offset: 80,
+      content: [{ text: 'this is a collapsible nested section' }],
+      section: 'prepare-script',
+      lineNumber: 3,
     },
   ],
 };

spec/frontend/jobs/store/utils_spec.js

@@ -148,7 +148,7 @@ describe('Jobs Store Utils', () => {
                   text: 'updated log line',
                 },
               ],
-              sections: ['section'],
+              section: 'section',
               lineNumber: 0,
             },
             lines: [],
@@ -178,7 +178,7 @@ describe('Jobs Store Utils', () => {
                   text: 'log line',
                 },
               ],
-              sections: ['section'],
+              section: 'section',
               lineNumber: 0,
             },
             lines: [
@@ -189,7 +189,7 @@ describe('Jobs Store Utils', () => {
                     text: 'updated log line',
                   },
                 ],
-                sections: ['section'],
+                section: 'section',
                 lineNumber: 1,
               },
             ],