Moves pagination to shared folder

Document and remove unused code

Declare components in a consistent way;
Use " instead of ' to improve consistency;
Update documentation;
Fix commit author verification to match the use cases;

Adds tests for the added components

Fix paths in pagination spec

Adds tests to pipelines table used in merge requests and commits

Use same resource interceptor

Fix eslint error

3 files changed, 112 insertions, 97 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
index a06aad17824..b21d13842a4 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
@@ -3,10 +3,6 @@
 
 //= require vue
 //= require_tree .
-//= require vue
-//= require vue-resource
-//= require vue_shared/vue_resource_interceptor
-//= require vue_shared/components/pipelines_table
 
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
@@ -14,13 +10,6 @@
  *
  * Renders Pipelines table in pipelines tab in the commits show view.
  * Renders Pipelines table in pipelines tab in the merge request show view.
- *
- * Uses `pipelines-table-component` to render Pipelines table with an API call.
- * Endpoint is provided in HTML and passed as scope.
- * We need a store to make the request and store the received environemnts.
- *
- * Necessary SVG in the table are provided as props. This should be refactored
- * as soon as we have Webpack and can load them directly into JS files.
  */
 
 $(() => {
@@ -28,94 +17,11 @@ $(() => {
   gl.commits = gl.commits || {};
   gl.commits.pipelines = gl.commits.pipelines || {};
 
-  if (gl.commits.PipelinesTableView) {
-    gl.commits.PipelinesTableView.$destroy(true);
+  if (gl.commits.PipelinesTableBundle) {
+    gl.commits.PipelinesTableBundle.$destroy(true);
   }
 
-  gl.commits.pipelines.PipelinesTableView = new Vue({
-
+  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView({
     el: document.querySelector('#commit-pipeline-table-view'),
-
-    components: {
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
-    },
-
-    /**
-     * Accesses the DOM to provide the needed data.
-     * Returns the necessary props to render `pipelines-table-component` component.
-     *
-     * @return {Object} Props for `pipelines-table-component`
-     */
-    data() {
-      const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
-      const svgsData = document.querySelector('.pipeline-svgs').dataset;
-      const store = gl.commits.pipelines.PipelinesStore.create();
-
-      // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = Object.keys(svgsData).reduce((acc, element) => {
-        acc[element] = svgsData[element];
-        return acc;
-      }, {});
-
-      return {
-        endpoint: pipelinesTableData.endpoint,
-        svgs: svgsObject,
-        store,
-        state: store.state,
-        isLoading: false,
-        error: false,
-      };
-    },
-
-    /**
-     * When the component is created the service to fetch the data will be
-     * initialized with the correct endpoint.
-     *
-     * A request to fetch the pipelines will be made.
-     * In case of a successfull response we will store the data in the provided
-     * store, in case of a failed response we need to warn the user.
-     *
-     */
-    created() {
-      gl.pipelines.pipelinesService = new PipelinesService(this.endpoint);
-
-      this.isLoading = true;
-
-      return gl.pipelines.pipelinesService.all()
-        .then(response => response.json())
-        .then((json) => {
-          this.store.store(json);
-          this.isLoading = false;
-          this.error = false;
-        }).catch(() => {
-          this.error = true;
-          this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines.', 'alert');
-        });
-    },
-
-    template: `
-      <div>
-        <div class="pipelines realtime-loading" v-if='isLoading'>
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
-
-        <div class="blank-state blank-state-no-icon"
-          v-if="!isLoading && !error && state.pipelines.length === 0">
-          <h2 class="blank-state-title js-blank-state-title">
-            You don't have any pipelines.
-          </h2>
-        </div>
-
-        <div
-          class="table-holder pipelines"
-          v-if='!isLoading && state.pipelines.length > 0'>
-          <pipelines-table-component
-            :pipelines='state.pipelines'
-            :svgs='svgs'>
-          </pipelines-table-component>
-        </div>
-      </div>
-    `,
   });
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
index 1e6aa73d9cf..f4ed986b0c5 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
@@ -32,3 +32,8 @@ class PipelinesService {
     return this.pipelines.get();
   }
 }
+
+window.gl = window.gl || {};
+gl.commits = gl.commits || {};
+gl.commits.pipelines = gl.commits.pipelines || {};
+gl.commits.pipelines.PipelinesService = PipelinesService;
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
new file mode 100644
index 00000000000..df7a6455eed
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
@@ -0,0 +1,104 @@
+/* eslint-disable no-new, no-param-reassign */
+/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
+
+//= require vue
+//= require vue-resource
+//= require vue_shared/vue_resource_interceptor
+//= require vue_shared/components/pipelines_table
+
+/**
+ *
+ * Uses `pipelines-table-component` to render Pipelines table with an API call.
+ * Endpoint is provided in HTML and passed as `endpoint`.
+ * We need a store to store the received environemnts.
+ * We need a service to communicate with the server.
+ *
+ * Necessary SVG in the table are provided as props. This should be refactored
+ * as soon as we have Webpack and can load them directly into JS files.
+ */
+
+(() => {
+  window.gl = window.gl || {};
+  gl.commits = gl.commits || {};
+  gl.commits.pipelines = gl.commits.pipelines || {};
+
+  gl.commits.pipelines.PipelinesTableView = Vue.component('pipelines-table', {
+
+    components: {
+      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+    },
+
+    /**
+     * Accesses the DOM to provide the needed data.
+     * Returns the necessary props to render `pipelines-table-component` component.
+     *
+     * @return {Object}
+     */
+    data() {
+      const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
+      const svgsData = document.querySelector('.pipeline-svgs').dataset;
+      const store = gl.commits.pipelines.PipelinesStore.create();
+
+      // Transform svgs DOMStringMap to a plain Object.
+      const svgsObject = Object.keys(svgsData).reduce((acc, element) => {
+        acc[element] = svgsData[element];
+        return acc;
+      }, {});
+
+      return {
+        endpoint: pipelinesTableData.endpoint,
+        svgs: svgsObject,
+        store,
+        state: store.state,
+        isLoading: false,
+      };
+    },
+
+    /**
+     * When the component is created the service to fetch the data will be
+     * initialized with the correct endpoint.
+     *
+     * A request to fetch the pipelines will be made.
+     * In case of a successfull response we will store the data in the provided
+     * store, in case of a failed response we need to warn the user.
+     *
+     */
+    created() {
+      gl.pipelines.pipelinesService = new PipelinesService(this.endpoint);
+
+      this.isLoading = true;
+      return gl.pipelines.pipelinesService.all()
+        .then(response => response.json())
+        .then((json) => {
+          this.store.store(json);
+          this.isLoading = false;
+        }).catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the pipelines.', 'alert');
+        });
+    },
+
+    template: `
+      <div>
+        <div class="pipelines realtime-loading" v-if="isLoading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!isLoading && state.pipelines.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            No pipelines to show
+          </h2>
+        </div>
+
+        <div class="table-holder pipelines"
+          v-if="!isLoading && state.pipelines.length > 0">
+          <pipelines-table-component
+            :pipelines="state.pipelines"
+            :svgs="svgs">
+          </pipelines-table-component>
+        </div>
+      </div>
+    `,
+  });
+})();