Extracts table into a reusable component

app/assets/javascripts/environments/components/environment.js.es6

@@ -4,14 +4,14 @@
 const Vue = require('vue');
 Vue.use(require('vue-resource'));
 const EnvironmentsService = require('../services/environments_service');
-const EnvironmentItem = require('./environment_item');
+const EnvironmentTable = require('./environments_table');
 const Store = require('../stores/environments_store');
 require('../../vue_shared/components/table_pagination');
 
 module.exports = Vue.component('environment-component', {
 
   components: {
-    'environment-item': EnvironmentItem,
+    'environment-table': EnvironmentTable,
     'table-pagination': gl.VueGlPagination,
   },
 
@@ -209,30 +209,15 @@ module.exports = Vue.component('environment-component', {
 
         <div class="table-holder"
           v-if="!isLoading && state.environments.length > 0">
-          <table class="table ci-table environments">
-            <thead>
-              <tr>
-                <th class="environments-name">Environment</th>
-                <th class="environments-deploy">Last deployment</th>
-                <th class="environments-build">Job</th>
-                <th class="environments-commit">Commit</th>
-                <th class="environments-date">Updated</th>
-                <th class="hidden-xs environments-actions"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <template v-for="model in state.environments"
-                v-bind:model="model">
-                <tr is="environment-item"
-                  :model="model"
+
+          <environment-table
+            :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
-                  :commit-icon-svg="commitIconSvg"></tr>
-              </template>
-            </tbody>
-          </table>
+            :commit-icon-svg="commitIconSvg">
+          </environment-table>
 
           <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
             :change="changePage"

app/assets/javascripts/environments/components/environments_table.js.es6

+/**
+ * Render environments table.
+ */
+const Vue = require('vue');
+const EnvironmentItem = require('./environment_item');
+
+module.exports = Vue.component('environment-table-component', {
+
+  components: {
+    'environment-item': EnvironmentItem,
+  },
+
+  props: {
+    environments: {
+      type: Array,
+      required: true,
+      default: () => ([]),
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    commitIconSvg: {
+      type: String,
+      required: false,
+    },
+
+    playIconSvg: {
+      type: String,
+      required: false,
+    },
+
+    terminalIconSvg: {
+      type: String,
+      required: false,
+    },
+  },
+
+  template: `
+    <table class="table ci-table environments">
+      <thead>
+        <tr>
+          <th class="environments-name">Environment</th>
+          <th class="environments-deploy">Last deployment</th>
+          <th class="environments-build">Job</th>
+          <th class="environments-commit">Commit</th>
+          <th class="environments-date">Updated</th>
+          <th class="hidden-xs environments-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="model in environments"
+          v-bind:model="model">
+          <tr is="environment-item"
+            :model="model"
+            :can-create-deployment="canCreateDeployment"
+            :can-read-environment="canReadEnvironment"
+            :play-icon-svg="playIconSvg"
+            :terminal-icon-svg="terminalIconSvg"
+            :commit-icon-svg="commitIconSvg"></tr>
+        </template>
+      </tbody>
+    </table>
+  `,
+});