Merge branch 'reorg-piplinedetailsbundle' into 'master'

Refactor pipeline_details_bundle.js to break out functions

See merge request gitlab-org/gitlab!32438

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -14,13 +14,7 @@ import axios from '~/lib/utils/axios_utils';
 
 Vue.use(Translate);
 
-export default () => {
-  const { dataset } = document.querySelector('.js-pipeline-details-vue');
-
-  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
-
-  mediator.fetchPipeline();
-
+const createPipelinesDetailApp = mediator => {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-pipeline-graph-vue',
@@ -50,7 +44,9 @@ export default () => {
       });
     },
   });
+};
 
+const createPipelineHeaderApp = mediator => {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-pipeline-header-vue',
@@ -94,7 +90,9 @@ export default () => {
       });
     },
   });
+};
 
+const createPipelinesTabs = dataset => {
   const tabsElement = document.querySelector('.pipelines-tabs');
   const testReportsEnabled =
     window.gon && window.gon.features && window.gon.features.junitPipelineView;
@@ -119,7 +117,10 @@ export default () => {
 
       tabsElement.addEventListener('click', tabClickHandler);
     }
+  }
+};
 
+const createTestDetails = detailsEndpoint => {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-pipeline-tests-detail',
@@ -132,7 +133,7 @@ export default () => {
   });
 
   axios
-      .get(dataset.testReportsCountEndpoint)
+    .get(detailsEndpoint)
     .then(({ data }) => {
       if (!data.total_count) {
         return;
@@ -141,5 +142,15 @@ export default () => {
       document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count;
     })
     .catch(() => {});
-  }
+};
+
+export default () => {
+  const { dataset } = document.querySelector('.js-pipeline-details-vue');
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+  mediator.fetchPipeline();
+
+  createPipelinesDetailApp(mediator);
+  createPipelineHeaderApp(mediator);
+  createPipelinesTabs(dataset);
+  createTestDetails(dataset.testReportsCountEndpoint);
 };