1 files changed, 30 insertions, 0 deletions
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index 7f5f0403de6..9a1e7d877f8 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -1,9 +1,13 @@
 import Vue from 'vue';
+
 import createFlash from '~/flash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { parseRailsFormFields } from '~/lib/utils/forms';
 import { __ } from '~/locale';
 
 import ExpiresAtField from './components/expires_at_field.vue';
+import TokensApp from './components/tokens_app.vue';
+import { FEED_TOKEN, INCOMING_EMAIL_TOKEN, STATIC_OBJECT_TOKEN } from './constants';
 
 export const initExpiresAtField = () => {
   const el = document.querySelector('.js-access-tokens-expires-at');
@@ -81,3 +85,29 @@ export const initProjectsField = () => {
 
   return null;
 };
+
+export const initTokensApp = () => {
+  const el = document.getElementById('js-tokens-app');
+
+  if (!el) return false;
+
+  const tokensData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.tokensData), {
+    deep: true,
+  });
+
+  const tokenTypes = {
+    [FEED_TOKEN]: tokensData[FEED_TOKEN],
+    [INCOMING_EMAIL_TOKEN]: tokensData[INCOMING_EMAIL_TOKEN],
+    [STATIC_OBJECT_TOKEN]: tokensData[STATIC_OBJECT_TOKEN],
+  };
+
+  return new Vue({
+    el,
+    provide: {
+      tokenTypes,
+    },
+    render(createElement) {
+      return createElement(TokensApp);
+    },
+  });
+};