Refactor environment table titles and spacing

app/assets/javascripts/environments/components/environment_item.vue

@@ -43,16 +43,21 @@ export default {
   mixins: [environmentItemMixin],
 
   props: {
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
     model: {
       type: Object,
       required: true,
       default: () => ({}),
     },
 
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
+    tableData: {
+      type: Object,
+      required: true,
     },
   },
 
@@ -447,9 +452,13 @@ export default {
     class="gl-responsive-table-row"
     role="row"
   >
-    <div class="table-section section-wrap section-15 text-truncate" role="gridcell">
+    <div
+      class="table-section section-wrap text-truncate"
+      :class="tableData.name.spacing"
+      role="gridcell"
+    >
       <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
-        {{ s__('Environments|Environment') }}
+        {{ tableData.name.title }}
       </div>
 
       <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard">
@@ -489,7 +498,8 @@ export default {
     </div>
 
     <div
-      class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
+      class="table-section deployment-column d-none d-sm-none d-md-block"
+      :class="tableData.deploy.spacing"
       role="gridcell"
     >
       <span v-if="shouldRenderDeploymentID" class="text-break-word">
@@ -508,7 +518,11 @@ export default {
       </span>
     </div>
 
-    <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
+    <div
+      class="table-section d-none d-sm-none d-md-block"
+      :class="tableData.build.spacing"
+      role="gridcell"
+    >
       <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray">
         <tooltip-on-truncate
           :title="buildName"
@@ -522,8 +536,14 @@ export default {
       </a>
     </div>
 
-    <div v-if="!model.isFolder" class="table-section section-20" role="gridcell">
-      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Commit') }}</div>
+    <div
+      v-if="!model.isFolder"
+      class="table-section"
+      :class="tableData.commit.spacing"
+      role="gridcell"
+    >
+      <div role="rowheader" class="table-mobile-header">{{ tableData.commit.title }}</div>
+
       <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
@@ -539,8 +559,14 @@ export default {
       </div>
     </div>
 
-    <div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
-      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
+    <div
+      v-if="!model.isFolder"
+      class="table-section"
+      :class="tableData.date.spacing"
+      role="gridcell"
+    >
+      <div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div>
+
       <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
         {{ deployedDate }}
       </span>
@@ -548,7 +574,8 @@ export default {
 
     <div
       v-if="!model.isFolder && displayEnvironmentActions"
-      class="table-section section-30 table-button-footer"
+      class="table-section table-button-footer"
+      :class="tableData.actions.spacing"
       role="gridcell"
     >
       <div class="btn-group table-action-buttons" role="group">

app/assets/javascripts/environments/components/environments_table.vue

@@ -4,6 +4,7 @@
  */
 import { GlLoadingIcon } from '@gitlab/ui';
 import _ from 'underscore';
+import { s__ } from '~/locale';
 import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
 import EnvironmentItem from './environment_item.vue';
 
@@ -41,6 +42,34 @@ export default {
           : env,
       );
     },
+    tableData() {
+      return {
+        // percent spacing for cols, should add up to 100
+        name: {
+          title: s__('Environments|Environment'),
+          spacing: 'section-15',
+        },
+        deploy: {
+          title: s__('Environments|Deployment'),
+          spacing: 'section-10',
+        },
+        build: {
+          title: s__('Environments|Job'),
+          spacing: 'section-15',
+        },
+        commit: {
+          title: s__('Environments|Commit'),
+          spacing: 'section-20',
+        },
+        date: {
+          title: s__('Environments|Updated'),
+          spacing: 'section-10',
+        },
+        actions: {
+          spacing: 'section-30',
+        },
+      };
+    },
   },
   methods: {
     folderUrl(model) {
@@ -79,20 +108,20 @@ export default {
 <template>
   <div class="ci-table" role="grid">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-15 environments-name" role="columnheader">
-        {{ s__('Environments|Environment') }}
+      <div class="table-section" :class="tableData.name.spacing" role="columnheader">
+        {{ tableData.name.title }}
       </div>
-      <div class="table-section section-10 environments-deploy" role="columnheader">
-        {{ s__('Environments|Deployment') }}
+      <div class="table-section" :class="tableData.deploy.spacing" role="columnheader">
+        {{ tableData.deploy.title }}
       </div>
-      <div class="table-section section-15 environments-build" role="columnheader">
-        {{ s__('Environments|Job') }}
+      <div class="table-section" :class="tableData.build.spacing" role="columnheader">
+        {{ tableData.build.title }}
       </div>
-      <div class="table-section section-20 environments-commit" role="columnheader">
-        {{ s__('Environments|Commit') }}
+      <div class="table-section" :class="tableData.commit.spacing" role="columnheader">
+        {{ tableData.commit.title }}
       </div>
-      <div class="table-section section-10 environments-date" role="columnheader">
-        {{ s__('Environments|Updated') }}
+      <div class="table-section" :class="tableData.date.spacing" role="columnheader">
+        {{ tableData.date.title }}
       </div>
     </div>
     <template v-for="(model, i) in sortedEnvironments" :model="model">
@@ -101,6 +130,7 @@ export default {
         :key="`environment-item-${i}`"
         :model="model"
         :can-read-environment="canReadEnvironment"
+        :table-data="tableData"
       />
 
       <div
@@ -132,6 +162,7 @@ export default {
             :key="`env-item-${i}-${index}`"
             :model="children"
             :can-read-environment="canReadEnvironment"
+            :table-data="tableData"
           />
 
           <div :key="`sub-div-${i}`">

spec/javascripts/environments/environment_item_spec.js

@@ -2,6 +2,32 @@ import { format } from 'timeago.js';
 import Vue from 'vue';
 import environmentItemComp from '~/environments/components/environment_item.vue';
 
+const tableData = {
+  name: {
+    title: 'Environment',
+    spacing: 'section-15',
+  },
+  deploy: {
+    title: 'Deployment',
+    spacing: 'section-10',
+  },
+  build: {
+    title: 'Job',
+    spacing: 'section-15',
+  },
+  commit: {
+    title: 'Commit',
+    spacing: 'section-20',
+  },
+  date: {
+    title: 'Updated',
+    spacing: 'section-10',
+  },
+  actions: {
+    spacing: 'section-25',
+  },
+};
+
 describe('Environment item', () => {
   let EnvironmentItem;
 
@@ -27,6 +53,7 @@ describe('Environment item', () => {
         propsData: {
           model: mockItem,
           canReadEnvironment: true,
+          tableData,
         },
       }).$mount();
     });
@@ -119,6 +146,7 @@ describe('Environment item', () => {
         propsData: {
           model: environment,
           canReadEnvironment: true,
+          tableData,
         },
       }).$mount();
     });