1 files changed, 24 insertions, 2 deletions
diff --git a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
index 461b2dad479..57a237c3e84 100644
--- a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
+++ b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
@@ -45,16 +45,34 @@ export default {
     'initialActiveAccessTokens',
     'noActiveTokensMessage',
     'showRole',
+    'information',
   ],
   data() {
     return {
-      activeAccessTokens: this.initialActiveAccessTokens,
+      activeAccessTokens: convertObjectPropsToCamelCase(this.initialActiveAccessTokens, {
+        deep: true,
+      }),
       currentPage: INITIAL_PAGE,
     };
   },
   computed: {
     filteredFields() {
-      return this.showRole ? FIELDS : FIELDS.filter((field) => field.key !== 'role');
+      const ignoredFields = [];
+
+      // Show 'action' column only when there are no active tokens or when some of them have a revokePath
+      const showAction =
+        this.activeAccessTokens.length === 0 ||
+        this.activeAccessTokens.some((token) => token.revokePath);
+
+      if (!showAction) {
+        ignoredFields.push('action');
+      }
+
+      if (!this.showRole) {
+        ignoredFields.push('role');
+      }
+
+      return FIELDS.filter(({ key }) => !ignoredFields.includes(key));
     },
     header() {
       return sprintf(this.$options.i18n.header, {
@@ -100,6 +118,10 @@ export default {
       <hr />
       <h5>{{ header }}</h5>
 
+      <p v-if="information" data-testid="information-section">
+        {{ information }}
+      </p>
+
       <gl-table
         data-testid="active-tokens"
         :empty-text="noActiveTokensMessage"