Use vue files for navigation tabs and buttons

app/assets/javascripts/pipelines/components/nav_controls.js → app/assets/javascripts/pipelines/components/nav_controls.vue

+<script>
 export default {
+  name: 'PipelineNavControls',
   props: {
     newPipelinePath: {
       type: String,
@@ -25,28 +27,28 @@ export default {
       required: true,
     },
   },
+};
+</script>
+<template>
+  <div class="nav-controls">
+    <a
+      v-if="canCreatePipeline"
+      :href="newPipelinePath"
+      class="btn btn-create">
+      Run Pipeline
+    </a>
 
-  template: `
-    <div class="nav-controls">
-      <a
-        v-if="canCreatePipeline"
-        :href="newPipelinePath"
-        class="btn btn-create">
-        Run Pipeline
-      </a>
-
-      <a
-        v-if="!hasCiEnabled"
-        :href="helpPagePath"
-        class="btn btn-info">
-        Get started with Pipelines
-      </a>
+    <a
+      v-if="!hasCiEnabled"
+      :href="helpPagePath"
+      class="btn btn-info">
+      Get started with Pipelines
+    </a>
 
-      <a
-        :href="ciLintPath"
-        class="btn btn-default">
-        CI Lint
-      </a>
-    </div>
-  `,
-};
+    <a
+      :href="ciLintPath"
+      class="btn btn-default">
+      CI Lint
+    </a>
+  </div>
+</template>

app/assets/javascripts/pipelines/components/navigation_tabs.js

-export default {
-  props: {
-    scope: {
-      type: String,
-      required: true,
-    },
-
-    count: {
-      type: Object,
-      required: true,
-    },
-
-    paths: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  mounted() {
-    $(document).trigger('init.scrolling-tabs');
-  },
-
-  template: `
-    <ul class="nav-links scrolling-tabs">
-      <li
-        class="js-pipelines-tab-all"
-        :class="{ 'active': scope === 'all'}">
-        <a :href="paths.allPath">
-          All
-          <span class="badge js-totalbuilds-count">
-            {{count.all}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-pending"
-        :class="{ 'active': scope === 'pending'}">
-        <a :href="paths.pendingPath">
-          Pending
-          <span class="badge">
-            {{count.pending}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-running"
-        :class="{ 'active': scope === 'running'}">
-        <a :href="paths.runningPath">
-          Running
-          <span class="badge">
-            {{count.running}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-finished"
-        :class="{ 'active': scope === 'finished'}">
-        <a :href="paths.finishedPath">
-          Finished
-          <span class="badge">
-            {{count.finished}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-branches"
-      :class="{ 'active': scope === 'branches'}">
-        <a :href="paths.branchesPath">Branches</a>
-      </li>
-      <li class="js-pipelines-tab-tags"
-        :class="{ 'active': scope === 'tags'}">
-        <a :href="paths.tagsPath">Tags</a>
-      </li>
-    </ul>
-  `,
-};

app/assets/javascripts/pipelines/components/navigation_tabs.vue

+<script>
+export default {
+  name: 'PipelineNavigationTabs',
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+    count: {
+      type: Object,
+      required: true,
+    },
+    paths: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+};
+</script>
+<template>
+  <ul class="nav-links scrolling-tabs">
+    <li
+      class="js-pipelines-tab-all"
+      :class="{ active: scope === 'all'}">
+      <a :href="paths.allPath">
+        All
+        <span class="badge js-totalbuilds-count">
+          {{count.all}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-pending"
+      :class="{ active: scope === 'pending'}">
+      <a :href="paths.pendingPath">
+        Pending
+        <span class="badge">
+          {{count.pending}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-running"
+      :class="{ active: scope === 'running'}">
+      <a :href="paths.runningPath">
+        Running
+        <span class="badge">
+          {{count.running}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-finished"
+      :class="{ active: scope === 'finished'}">
+      <a :href="paths.finishedPath">
+        Finished
+        <span class="badge">
+          {{count.finished}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-branches"
+      :class="{ active: scope === 'branches'}">
+      <a :href="paths.branchesPath">Branches</a>
+    </li>
+    <li
+      class="js-pipelines-tab-tags"
+      :class="{ active: scope === 'tags'}">
+      <a :href="paths.tagsPath">Tags</a>
+    </li>
+  </ul>
+</template>

app/assets/javascripts/pipelines/pipelines.js

@@ -5,8 +5,8 @@ import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import tablePagination from '../vue_shared/components/table_pagination.vue';
 import emptyState from './components/empty_state.vue';
 import errorState from './components/error_state.vue';
-import navigationTabs from './components/navigation_tabs';
-import navigationControls from './components/nav_controls';
+import navigationTabs from './components/navigation_tabs.vue';
+import navigationControls from './components/nav_controls.vue';
 import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 

spec/javascripts/pipelines/nav_controls_spec.js

 import Vue from 'vue';
-import navControlsComp from '~/pipelines/components/nav_controls';
+import navControlsComp from '~/pipelines/components/nav_controls.vue';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;