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,27 +117,40 @@ export default () => {
 
       tabsElement.addEventListener('click', tabClickHandler);
     }
+  }
+};
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: '#js-pipeline-tests-detail',
-      components: {
-        TestReports,
-      },
-      render(createElement) {
-        return createElement('test-reports');
-      },
-    });
+const createTestDetails = detailsEndpoint => {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#js-pipeline-tests-detail',
+    components: {
+      TestReports,
+    },
+    render(createElement) {
+      return createElement('test-reports');
+    },
+  });
 
-    axios
-      .get(dataset.testReportsCountEndpoint)
-      .then(({ data }) => {
-        if (!data.total_count) {
-          return;
-        }
+  axios
+    .get(detailsEndpoint)
+    .then(({ data }) => {
+      if (!data.total_count) {
+        return;
+      }
 
-        document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count;
-      })
-      .catch(() => {});
-  }
+      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);
 };