Add latest changes from gitlab-org/gitlab@master

1 files changed, 41 insertions, 10 deletions

diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 4464f5e5578..2d2e09c6190 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/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}`">