Fix spelling of collapsible

Also renames CollaspibleLogSection -> CollapsibleLogSection

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

@@ -3,7 +3,7 @@ import LogLine from './line.vue';
 import LogLineHeader from './line_header.vue';
 
 export default {
-  name: 'CollpasibleLogSection',
+  name: 'CollapsibleLogSection',
   components: {
     LogLine,
     LogLineHeader,

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

 <script>
 import { mapState, mapActions } from 'vuex';
-import CollpasibleLogSection from './collapsible_section.vue';
+import CollapsibleLogSection from './collapsible_section.vue';
 import LogLine from './line.vue';
 
 export default {
   components: {
-    CollpasibleLogSection,
+    CollapsibleLogSection,
     LogLine,
   },
   computed: {
@@ -51,7 +51,7 @@ export default {
 <template>
   <code class="job-log d-block" data-qa-selector="job_log_content">
     <template v-for="(section, index) in trace">
-      <collpasible-log-section
+      <collapsible-log-section
         v-if="section.isHeader"
         :key="`collapsible-${index}`"
         :section="section"

app/assets/javascripts/jobs/store/actions.js

@@ -195,7 +195,7 @@ export const receiveTraceError = ({ dispatch }) => {
   flash(__('An error occurred while fetching the job log.'));
 };
 /**
- * When the user clicks a collpasible line in the job
+ * When the user clicks a collapsible line in the job
  * log, we commit a mutation to update the state
  *
  * @param {Object} section

app/assets/javascripts/jobs/store/utils.js

@@ -11,7 +11,7 @@ export const parseLine = (line = {}, lineNumber) => ({
 /**
  * When a line has `section_header` set to true, we create a new
  * structure to allow to nest the lines that belong to the
- * collpasible section
+ * collapsible section
  *
  * @param Object line
  * @param Number lineNumber
@@ -91,7 +91,7 @@ export const getIncrementalLineNumber = acc => {
  * Parses the job log content into a structure usable by the template
  *
  * For collaspible lines (section_header = true):
- *    - creates a new array to hold the lines that are collpasible,
+ *    - creates a new array to hold the lines that are collapsible,
  *    - adds a isClosed property to handle toggle
  *    - adds a isHeader property to handle template logic
  *    - adds the section_duration

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 CollapsibleSection from '~/jobs/components/log/collapsible_section.vue';
 import { collapsibleSectionClosed, collapsibleSectionOpened } from './mock_data';
 
 describe('Job Log Collapsible Section', () => {
@@ -11,7 +11,7 @@ describe('Job Log Collapsible Section', () => {
   const findCollapsibleLineSvg = () => wrapper.find('.collapsible-line svg');
 
   const createComponent = (props = {}) => {
-    wrapper = mount(CollpasibleSection, {
+    wrapper = mount(CollapsibleSection, {
       propsData: {
         ...props,
       },

spec/frontend/jobs/store/utils_spec.js

@@ -181,7 +181,7 @@ describe('Jobs Store Utils', () => {
       });
     });
 
-    describe('collpasible section', () => {
+    describe('collapsible section', () => {
       it('adds a `isClosed` property', () => {
         expect(result[1].isClosed).toEqual(false);
       });
@@ -190,7 +190,7 @@ describe('Jobs Store Utils', () => {
         expect(result[1].isHeader).toEqual(true);
       });
 
-      it('creates a lines array property with the content of the collpasible section', () => {
+      it('creates a lines array property with the content of the collapsible section', () => {
         expect(result[1].lines.length).toEqual(2);
         expect(result[1].lines[0].content).toEqual(utilsMockData[2].content);
         expect(result[1].lines[1].content).toEqual(utilsMockData[3].content);