1 files changed, 40 insertions, 13 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 748673f05bb..d480984da70 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/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">