1 files changed, 69 insertions, 2 deletions

diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index c59bd445539..a7a03523e7f 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -3,12 +3,57 @@ 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 { __, sprintf } from '~/locale';
 
+import AccessTokenTableApp from './components/access_token_table_app.vue';
 import ExpiresAtField from './components/expires_at_field.vue';
+import NewAccessTokenApp from './components/new_access_token_app.vue';
 import TokensApp from './components/tokens_app.vue';
 import { FEED_TOKEN, INCOMING_EMAIL_TOKEN, STATIC_OBJECT_TOKEN } from './constants';
 
+export const initAccessTokenTableApp = () => {
+  const el = document.querySelector('#js-access-token-table-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    accessTokenType,
+    accessTokenTypePlural,
+    initialActiveAccessTokens: initialActiveAccessTokensJson,
+    noActiveTokensMessage: noTokensMessage,
+  } = el.dataset;
+
+  // Default values
+  const noActiveTokensMessage =
+    noTokensMessage ||
+    sprintf(__('This user has no active %{accessTokenTypePlural}.'), { accessTokenTypePlural });
+  const showRole = 'showRole' in el.dataset;
+
+  const initialActiveAccessTokens = convertObjectPropsToCamelCase(
+    JSON.parse(initialActiveAccessTokensJson),
+    {
+      deep: true,
+    },
+  );
+
+  return new Vue({
+    el,
+    name: 'AccessTokenTableRoot',
+    provide: {
+      accessTokenType,
+      accessTokenTypePlural,
+      initialActiveAccessTokens,
+      noActiveTokensMessage,
+      showRole,
+    },
+    render(h) {
+      return h(AccessTokenTableApp);
+    },
+  });
+};
+
 export const initExpiresAtField = () => {
   const el = document.querySelector('.js-access-tokens-expires-at');
 
@@ -17,7 +62,7 @@ export const initExpiresAtField = () => {
   }
 
   const { expiresAt: inputAttrs } = parseRailsFormFields(el);
-  const { maxDate } = el.dataset;
+  const { minDate, maxDate } = el.dataset;
 
   return new Vue({
     el,
@@ -25,6 +70,7 @@ export const initExpiresAtField = () => {
       return h(ExpiresAtField, {
         props: {
           inputAttrs,
+          minDate: minDate ? new Date(minDate) : undefined,
           maxDate: maxDate ? new Date(maxDate) : undefined,
         },
       });
@@ -32,6 +78,27 @@ export const initExpiresAtField = () => {
   });
 };
 
+export const initNewAccessTokenApp = () => {
+  const el = document.querySelector('#js-new-access-token-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const { accessTokenType } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'NewAccessTokenRoot',
+    provide: {
+      accessTokenType,
+    },
+    render(h) {
+      return h(NewAccessTokenApp);
+    },
+  });
+};
+
 export const initProjectsField = () => {
   const el = document.querySelector('.js-access-tokens-projects');