1 files changed, 32 insertions, 3 deletions
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
index c0662125f28..2e0a4001b7c 100644
--- a/app/assets/javascripts/environments/environments_bundle.js
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -1,10 +1,39 @@
 import Vue from 'vue';
-import EnvironmentsComponent from './components/environment.vue';
+import environmentsComponent from './components/environments_app.vue';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#environments-list-view',
   components: {
-    'environments-table-app': EnvironmentsComponent,
+    environmentsComponent,
+  },
+  data() {
+    const environmentsData = document.querySelector(this.$options.el).dataset;
+
+    return {
+      endpoint: environmentsData.environmentsDataEndpoint,
+      newEnvironmentPath: environmentsData.newEnvironmentPath,
+      helpPagePath: environmentsData.helpPagePath,
+      cssContainerClass: environmentsData.cssClass,
+      canCreateEnvironment: convertPermissionToBoolean(environmentsData.canCreateEnvironment),
+      canCreateDeployment: convertPermissionToBoolean(environmentsData.canCreateDeployment),
+      canReadEnvironment: convertPermissionToBoolean(environmentsData.canReadEnvironment),
+    };
+  },
+  render(createElement) {
+    return createElement('environments-component', {
+      props: {
+        endpoint: this.endpoint,
+        newEnvironmentPath: this.newEnvironmentPath,
+        helpPagePath: this.helpPagePath,
+        cssContainerClass: this.cssContainerClass,
+        canCreateEnvironment: this.canCreateEnvironment,
+        canCreateDeployment: this.canCreateDeployment,
+        canReadEnvironment: this.canReadEnvironment,
+      },
+    });
   },
-  render: createElement => createElement('environments-table-app'),
 }));