1 files changed, 54 insertions, 4 deletions
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
index 6148483dcb0..27eebc9d891 100644
--- a/app/assets/javascripts/clusters_list/index.js
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -1,13 +1,63 @@
 import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import loadClusters from './load_clusters';
-import loadMainView from './load_main_view';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import createDefaultClient from '~/lib/graphql';
+import ClustersMainView from './components/clusters_main_view.vue';
+import { createStore } from './store';
 
 Vue.use(GlToast);
 Vue.use(VueApollo);
 
 export default () => {
-  loadClusters(Vue);
-  loadMainView(Vue, VueApollo);
+  const el = document.querySelector('.js-clusters-main-view');
+
+  if (!el) {
+    return null;
+  }
+
+  const defaultClient = createDefaultClient();
+
+  const {
+    emptyStateImage,
+    defaultBranchName,
+    projectPath,
+    kasAddress,
+    newClusterPath,
+    addClusterPath,
+    emptyStateHelpText,
+    clustersEmptyStateImage,
+    canAddCluster,
+    canAdminCluster,
+    gitlabVersion,
+    displayClusterAgents,
+    certificateBasedClustersEnabled,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider: new VueApollo({ defaultClient }),
+    provide: {
+      emptyStateImage,
+      projectPath,
+      kasAddress,
+      newClusterPath,
+      addClusterPath,
+      emptyStateHelpText,
+      clustersEmptyStateImage,
+      canAddCluster: parseBoolean(canAddCluster),
+      canAdminCluster: parseBoolean(canAdminCluster),
+      gitlabVersion,
+      displayClusterAgents: parseBoolean(displayClusterAgents),
+      certificateBasedClustersEnabled: parseBoolean(certificateBasedClustersEnabled),
+    },
+    store: createStore(el.dataset),
+    render(createElement) {
+      return createElement(ClustersMainView, {
+        props: {
+          defaultBranchName,
+        },
+      });
+    },
+  });
 };