From b9c729896cc6ed35326db3af22b3d28768153782 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 19 Jul 2023 11:30:44 +0200
Subject: [PATCH] Access tokens: Use GlCard

Changelog: changed
---
 .../components/access_token_table_app.vue     | 116 +++++++++---------
 .../components/new_access_token_app.vue       |  25 +++-
 .../access_tokens/components/token.vue        |   6 +
 .../access_tokens/components/tokens_app.vue   |   1 +
 app/assets/javascripts/access_tokens/index.js |   2 -
 .../form/input_copy_toggle_visibility.vue     |   6 +
 .../stylesheets/framework/new_card.scss       |   2 +
 app/assets/stylesheets/pages/settings.scss    |  17 +--
 .../impersonation_tokens/index.html.haml      |  23 +++-
 .../settings/access_tokens/index.html.haml    |  41 ++++---
 .../personal_access_tokens/index.html.haml    |  27 ++--
 .../settings/access_tokens/index.html.haml    |  30 +++--
 .../shared/access_tokens/_form.html.haml      |   4 +-
 .../projects/settings/access_tokens_spec.rb   |   2 +
 locale/gitlab.pot                             |  18 ++-
 .../admin_users_impersonation_tokens_spec.rb  |   1 +
 .../profiles/personal_access_tokens_spec.rb   |   5 +
 .../projects/settings/access_tokens_spec.rb   |   3 +
 .../user_searches_in_settings_spec.rb         |   2 +-
 .../components/access_token_table_app_spec.js |  18 ---
 .../components/new_access_token_app_spec.js   |  11 +-
 spec/frontend/access_tokens/index_spec.js     |   4 -
 .../features/access_tokens_shared_examples.rb |   2 +
 23 files changed, 226 insertions(+), 140 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 d15c8e6e703938..85b3c994e02c99 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
@@ -32,7 +32,6 @@ export default {
   i18n: {
     emptyField: __('Never'),
     expired: __('Expired'),
-    header: __('Active %{accessTokenTypePlural} (%{totalAccessTokens})'),
     modalMessage: __(
       'Are you sure you want to revoke this %{accessTokenType}? This action cannot be undone.',
     ),
@@ -45,7 +44,6 @@ export default {
     'initialActiveAccessTokens',
     'noActiveTokensMessage',
     'showRole',
-    'information',
   ],
   data() {
     return {
@@ -74,12 +72,6 @@ export default {
 
       return FIELDS.filter(({ key }) => !ignoredFields.includes(key));
     },
-    header() {
-      return sprintf(this.$options.i18n.header, {
-        accessTokenTypePlural: this.accessTokenTypePlural,
-        totalAccessTokens: this.activeAccessTokens.length,
-      });
-    },
     modalMessage() {
       return sprintf(this.$options.i18n.modalMessage, {
         accessTokenType: this.accessTokenType,
@@ -114,65 +106,66 @@ export default {
 
 <template>
   <dom-element-listener :selector="$options.FORM_SELECTOR" @[$options.EVENT_SUCCESS]="onSuccess">
-    <div class="gl-pt-6">
-      <h5>{{ header }}</h5>
-
-      <p v-if="information" data-testid="information-section">
-        {{ information }}
-      </p>
-
-      <gl-table
-        data-testid="active-tokens"
-        :empty-text="noActiveTokensMessage"
-        :fields="filteredFields"
-        :items="activeAccessTokens"
-        :per-page="$options.PAGE_SIZE"
-        :current-page="currentPage"
-        :sort-compare="sortingChanged"
-        show-empty
+    <div>
+      <div
+        class="gl-new-card-body gl-px-0 gl-overflow-hidden gl-bg-gray-10 gl-border-l gl-border-r gl-border-b gl-rounded-bottom-base gl-mb-5 gl-md-mb-0"
       >
-        <template #cell(createdAt)="{ item: { createdAt } }">
-          <user-date :date="createdAt" />
-        </template>
+        <gl-table
+          data-testid="active-tokens"
+          :empty-text="noActiveTokensMessage"
+          :fields="filteredFields"
+          :items="activeAccessTokens"
+          :per-page="$options.PAGE_SIZE"
+          :current-page="currentPage"
+          :sort-compare="sortingChanged"
+          show-empty
+          stacked="sm"
+        >
+          <template #cell(createdAt)="{ item: { createdAt } }">
+            <user-date :date="createdAt" />
+          </template>
 
-        <template #head(lastUsedAt)="{ label }">
-          <span>{{ label }}</span>
-          <gl-link :href="$options.lastUsedHelpLink"
-            ><gl-icon name="question-o" /><span class="gl-sr-only">{{
-              s__('AccessTokens|The last time a token was used')
-            }}</span></gl-link
-          >
-        </template>
+          <template #head(lastUsedAt)="{ label }">
+            <span>{{ label }}</span>
+            <gl-link :href="$options.lastUsedHelpLink"
+              ><gl-icon name="question-o" /><span class="gl-sr-only">{{
+                s__('AccessTokens|The last time a token was used')
+              }}</span></gl-link
+            >
+          </template>
 
-        <template #cell(lastUsedAt)="{ item: { lastUsedAt } }">
-          <time-ago-tooltip v-if="lastUsedAt" :time="lastUsedAt" />
-          <template v-else> {{ $options.i18n.emptyField }}</template>
-        </template>
+          <template #cell(lastUsedAt)="{ item: { lastUsedAt } }">
+            <time-ago-tooltip v-if="lastUsedAt" :time="lastUsedAt" />
+            <template v-else> {{ $options.i18n.emptyField }}</template>
+          </template>
 
-        <template #cell(expiresAt)="{ item: { expiresAt, expired, expiresSoon } }">
-          <template v-if="expiresAt">
-            <span v-if="expired" class="text-danger">{{ $options.i18n.expired }}</span>
-            <time-ago-tooltip v-else :class="{ 'text-warning': expiresSoon }" :time="expiresAt" />
+          <template #cell(expiresAt)="{ item: { expiresAt, expired, expiresSoon } }">
+            <template v-if="expiresAt">
+              <span v-if="expired" class="text-danger">{{ $options.i18n.expired }}</span>
+              <time-ago-tooltip v-else :class="{ 'text-warning': expiresSoon }" :time="expiresAt" />
+            </template>
+            <span v-else v-gl-tooltip :title="$options.i18n.tokenValidity">{{
+              $options.i18n.emptyField
+            }}</span>
           </template>
-          <span v-else v-gl-tooltip :title="$options.i18n.tokenValidity">{{
-            $options.i18n.emptyField
-          }}</span>
-        </template>
 
-        <template #cell(action)="{ item: { revokePath } }">
-          <gl-button
-            v-if="revokePath"
-            category="tertiary"
-            :aria-label="$options.i18n.revokeButton"
-            :data-confirm="modalMessage"
-            data-confirm-btn-variant="danger"
-            data-qa-selector="revoke_button"
-            data-method="put"
-            :href="revokePath"
-            icon="remove"
-          />
-        </template>
-      </gl-table>
+          <template #cell(action)="{ item: { revokePath } }">
+            <gl-button
+              v-if="revokePath"
+              category="tertiary"
+              :title="$options.i18n.revokeButton"
+              :aria-label="$options.i18n.revokeButton"
+              :data-confirm="modalMessage"
+              data-confirm-btn-variant="danger"
+              data-qa-selector="revoke_button"
+              data-method="put"
+              :href="revokePath"
+              icon="remove"
+              class="has-tooltip"
+            />
+          </template>
+        </gl-table>
+      </div>
       <gl-pagination
         v-if="showPagination"
         v-model="currentPage"
@@ -183,6 +176,7 @@ export default {
         :label-next-page="__('Go to next page')"
         :label-prev-page="__('Go to previous page')"
         align="center"
+        class="gl-mt-5"
       />
     </div>
   </dom-element-listener>
diff --git a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
index dfac423b65e004..4b51b4333aa588 100644
--- a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
+++ b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
@@ -93,6 +93,12 @@ export default {
       this.form.querySelectorAll('input[type=checkbox]').forEach((el) => {
         el.checked = false;
       });
+      document.querySelectorAll('.js-token-card').forEach((el) => {
+        el.querySelector('.js-add-new-token-form').style.display = '';
+        el.querySelector('.js-toggle-button').style.display = 'block';
+        el.querySelector('.js-token-count').innerText =
+          parseInt(el.querySelector('.js-token-count').innerText, 10) + 1;
+      });
     },
   },
 };
@@ -105,7 +111,12 @@ export default {
     @[$options.EVENT_SUCCESS]="onSuccess"
   >
     <div ref="container" data-testid="access-token-section" data-qa-selector="access_token_section">
-      <template v-if="newToken">
+      <gl-alert
+        v-if="newToken"
+        variant="success"
+        data-testid="success-message"
+        @dismiss="newToken = null"
+      >
         <input-copy-toggle-visibility
           :copy-button-title="copyButtonTitle"
           :label="label"
@@ -113,16 +124,22 @@ export default {
           :value="newToken"
           :form-input-group-props="formInputGroupProps"
           readonly
+          size="lg"
+          class="gl-mb-0"
         >
           <template #description>
             {{ $options.i18n.description }}
           </template>
         </input-copy-toggle-visibility>
-        <hr />
-      </template>
+      </gl-alert>
 
       <template v-if="errors">
-        <gl-alert :title="alertDangerTitle" variant="danger" @dismiss="errors = null">
+        <gl-alert
+          :title="alertDangerTitle"
+          variant="danger"
+          data-testid="error-message"
+          @dismiss="errors = null"
+        >
           <ul class="gl-m-0">
             <li v-for="error in errors" :key="error">
               {{ error }}
diff --git a/app/assets/javascripts/access_tokens/components/token.vue b/app/assets/javascripts/access_tokens/components/token.vue
index 09263d8e0ea4dd..3b25e331499c19 100644
--- a/app/assets/javascripts/access_tokens/components/token.vue
+++ b/app/assets/javascripts/access_tokens/components/token.vue
@@ -20,6 +20,11 @@ export default {
       type: String,
       required: true,
     },
+    size: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     formInputGroupProps() {
@@ -40,6 +45,7 @@ export default {
       :value="token"
       :copy-button-title="copyButtonTitle"
       readonly
+      :size="size"
     >
       <template #description>
         <slot name="input-description"></slot>
diff --git a/app/assets/javascripts/access_tokens/components/tokens_app.vue b/app/assets/javascripts/access_tokens/components/tokens_app.vue
index 88119ed8a84747..af26bf8594121d 100644
--- a/app/assets/javascripts/access_tokens/components/tokens_app.vue
+++ b/app/assets/javascripts/access_tokens/components/tokens_app.vue
@@ -88,6 +88,7 @@ export default {
       :input-label="$options.i18n[tokenType].label"
       :copy-button-title="$options.i18n[tokenType].copyButtonTitle"
       :data-testid="$options.htmlAttributes[tokenType].containerTestId"
+      size="md"
     >
       <template #title>
         <div class="settings-sticky-header">
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index 510f118bbb563f..4e0acaa74da9cf 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -20,7 +20,6 @@ export const initAccessTokenTableApp = () => {
   const {
     accessTokenType,
     accessTokenTypePlural,
-    information,
     initialActiveAccessTokens: initialActiveAccessTokensJson,
     noActiveTokensMessage: noTokensMessage,
   } = el.dataset;
@@ -39,7 +38,6 @@ export const initAccessTokenTableApp = () => {
     provide: {
       accessTokenType,
       accessTokenTypePlural,
-      information,
       initialActiveAccessTokens,
       noActiveTokensMessage,
       showRole,
diff --git a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
index c371c1aeff94f4..eca5803318a420 100644
--- a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
+++ b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
@@ -65,6 +65,11 @@ export default {
         return {};
       },
     },
+    size: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     if (!this.readonly && !this.value) {
@@ -151,6 +156,7 @@ export default {
       <gl-form-input
         ref="input"
         :readonly="readonly"
+        :size="size"
         class="gl-font-monospace! gl-cursor-default!"
         v-bind="formInputGroupProps"
         :value="value"
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index 48a834858c65f6..5e24734ebb690b 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -91,7 +91,9 @@
     @include gl-border-gray-100;
     @include gl-rounded-base;
   }
+}
 
+.gl-new-card-body {
   // Table adjustments
   @mixin new-card-table-adjustments {
     tbody > tr {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 06516a555ef17c..028c57a2d5eb92 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -76,14 +76,10 @@
   }
 }
 
-.settings-section {
-  @include gl-pt-6;
-
-  &::after {
-    content: '';
-    display: block;
-    @include gl-pb-5;
-  }
+.settings-section::after {
+  content: '';
+  display: block;
+  @include gl-pb-7;
 }
 
 .settings-section,
@@ -91,6 +87,11 @@
   @include gl-pt-0;
 }
 
+// Fix for sticky header when there is no search bar.
+.flash-container + .settings-section {
+  @include gl-pt-3;
+}
+
 .settings-section ~ .settings-section {
   @include gl-pt-6;
 }
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
index 0208b8ad8366c6..a844b6846a9eef 100644
--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -6,11 +6,24 @@
 
 = render 'admin/users/head'
 
-.row.gl-mt-3
-  .col-lg-12
-    #js-new-access-token-app{ data: { access_token_type: type } }
+#js-new-access-token-app{ data: { access_token_type: type } }
 
-    = render 'shared/access_tokens/form',
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper.gl-flex-direction-column
+      %h3.gl-new-card-title
+        = _('Impersonation tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_impersonation_tokens.size
+      .gl-new-card-description
+        = _("To see all the user's personal access tokens you must impersonate them first.")
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
+        = _('Add new token')
+  - c.with_body do
+    .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+      = render 'shared/access_tokens/form',
         ajax: true,
         type: type,
         title: _('Add an impersonation token'),
@@ -20,4 +33,4 @@
         scopes: @scopes,
         help_path: help_page_path('api/rest/index', anchor: 'impersonation-tokens')
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json, information: _("To see all the user's personal access tokens you must impersonate them first.") } }
+#js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json } }
diff --git a/app/views/groups/settings/access_tokens/index.html.haml b/app/views/groups/settings/access_tokens/index.html.haml
index ac3be429461b08..927162d22848ae 100644
--- a/app/views/groups/settings/access_tokens/index.html.haml
+++ b/app/views/groups/settings/access_tokens/index.html.haml
@@ -25,18 +25,31 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  - if current_user.can?(:create_resource_access_tokens, @group)
-    = render 'shared/access_tokens/form',
-        ajax: true,
-        type: type,
-        path: group_settings_access_tokens_path(@group),
-        resource: @group,
-        token: @resource_access_token,
-        scopes: @scopes,
-        access_levels: GroupMember.access_level_roles,
-        default_access_level: Gitlab::Access::GUEST,
-        prefix: :resource_access_token,
-        help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active group access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      - if current_user.can?(:create_resource_access_tokens, @group)
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
+            = _('Add new token')
+    - c.with_body do
+      - if current_user.can?(:create_resource_access_tokens, @group)
+        .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+          = render 'shared/access_tokens/form',
+              ajax: true,
+              type: type,
+              path: group_settings_access_tokens_path(@group),
+              resource: @group,
+              token: @resource_access_token,
+              scopes: @scopes,
+              access_levels: GroupMember.access_level_roles,
+              default_access_level: Gitlab::Access::GUEST,
+              prefix: :resource_access_token,
+              help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
 
-  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true
- } }
+  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true } }
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 5020f6cbb22637..461f01655019b8 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -16,13 +16,26 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  = render 'shared/access_tokens/form',
-      ajax: true,
-      type: type,
-      path: profile_personal_access_tokens_path,
-      token: @personal_access_token,
-      scopes: @scopes,
-      help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active personal access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      .gl-new-card-actions
+        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
+          = _('Add new token')
+    - c.with_body do
+      .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+        = render 'shared/access_tokens/form',
+            ajax: true,
+            type: type,
+            path: profile_personal_access_tokens_path,
+            token: @personal_access_token,
+            scopes: @scopes,
+            help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
 
   #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json } }
 
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index e4af6d59cad015..53ae5ba26f872b 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -4,9 +4,11 @@
 - type_plural = _('project access tokens')
 - @force_desktop_expanded_sidebar = true
 
-.gl-mt-5.js-search-settings-section
-  %h4.gl-my-0
-    = page_title
+.settings-section.js-search-settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
+        = page_title
   %p.gl-text-secondary
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens') }
     - if current_user.can?(:create_resource_access_tokens, @project)
@@ -23,9 +25,21 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  - if current_user.can?(:create_resource_access_tokens, @project)
-    = render_if_exists 'projects/settings/access_tokens/form',
-      type: type
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active project access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
+            = _('Add new token')
+    - c.with_body do
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+          = render_if_exists 'projects/settings/access_tokens/form', type: type
 
-  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
- } }
+  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true } }
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index a8f781d2272456..d397fdf8fc3c42 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -7,7 +7,7 @@
 - access_levels = local_assigns.fetch(:access_levels, false)
 - default_access_level = local_assigns.fetch(:default_access_level, false)
 
-%h5.gl-font-lg.gl-mt-0
+%h4.gl-mt-0
   = title
 
 = gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f|
@@ -43,3 +43,5 @@
 
   .gl-mt-3
     = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/ee/spec/features/projects/settings/access_tokens_spec.rb b/ee/spec/features/projects/settings/access_tokens_spec.rb
index 6d61d0ceef2c9b..30b3a17edc692e 100644
--- a/ee/spec/features/projects/settings/access_tokens_spec.rb
+++ b/ee/spec/features/projects/settings/access_tokens_spec.rb
@@ -46,6 +46,7 @@
     it 'shows access token creation form but no alert when there is no token' do
       visit project_settings_access_tokens_path(project)
 
+      click_button 'Add new token'
       expect(page).to have_selector('#js-new-access-token-form')
       expect(page).not_to have_content(expected_notice)
     end
@@ -55,6 +56,7 @@
 
       visit project_settings_access_tokens_path(project)
 
+      click_button 'Add new token'
       expect(page).to have_content(expected_notice)
       expect(page).not_to have_selector('#js-new-access-token-form')
     end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7708473064ff18..048e27f60b8482 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2638,15 +2638,21 @@ msgstr ""
 msgid "Active"
 msgstr ""
 
-msgid "Active %{accessTokenTypePlural} (%{totalAccessTokens})"
-msgstr ""
-
 msgid "Active Sessions"
 msgstr ""
 
 msgid "Active chat names (%{count})"
 msgstr ""
 
+msgid "Active group access tokens"
+msgstr ""
+
+msgid "Active personal access tokens"
+msgstr ""
+
+msgid "Active project access tokens"
+msgstr ""
+
 msgid "Activity"
 msgstr ""
 
@@ -2866,6 +2872,9 @@ msgstr ""
 msgid "Add new key"
 msgstr ""
 
+msgid "Add new token"
+msgstr ""
+
 msgid "Add new webhook"
 msgstr ""
 
@@ -23484,6 +23493,9 @@ msgstr ""
 msgid "Impersonation has been disabled"
 msgstr ""
 
+msgid "Impersonation tokens"
+msgstr ""
+
 msgid "Import"
 msgstr ""
 
diff --git a/spec/features/admin/admin_users_impersonation_tokens_spec.rb b/spec/features/admin/admin_users_impersonation_tokens_spec.rb
index 0350c8ab0662af..543dc2cc2a6291 100644
--- a/spec/features/admin/admin_users_impersonation_tokens_spec.rb
+++ b/spec/features/admin/admin_users_impersonation_tokens_spec.rb
@@ -19,6 +19,7 @@
       name = 'Hello World'
 
       visit admin_user_impersonation_tokens_path(user_id: user.username)
+      click_button 'Add new token'
       fill_in "Token name", with: name
 
       # Set date to 1st of next month
diff --git a/spec/features/profiles/personal_access_tokens_spec.rb b/spec/features/profiles/personal_access_tokens_spec.rb
index 65fe1330be2b51..094855393bea31 100644
--- a/spec/features/profiles/personal_access_tokens_spec.rb
+++ b/spec/features/profiles/personal_access_tokens_spec.rb
@@ -18,6 +18,8 @@
       name = 'My PAT'
 
       visit profile_personal_access_tokens_path
+
+      click_button 'Add new token'
       fill_in "Token name", with: name
 
       # Set date to 1st of next month
@@ -43,6 +45,8 @@
       it "displays an error message" do
         number_tokens_before = PersonalAccessToken.count
         visit profile_personal_access_tokens_path
+
+        click_button 'Add new token'
         fill_in "Token name", with: 'My PAT'
 
         click_on "Create personal access token"
@@ -145,6 +149,7 @@ def feed_token_description
 
     visit profile_personal_access_tokens_path({ name: name, scopes: scopes })
 
+    click_button 'Add new token'
     expect(page).to have_field("Token name", with: name)
     expect(find("#personal_access_token_scopes_api")).to be_checked
     expect(find("#personal_access_token_scopes_read_user")).to be_checked
diff --git a/spec/features/projects/settings/access_tokens_spec.rb b/spec/features/projects/settings/access_tokens_spec.rb
index 210815f341c13a..9025bd9052e59b 100644
--- a/spec/features/projects/settings/access_tokens_spec.rb
+++ b/spec/features/projects/settings/access_tokens_spec.rb
@@ -49,6 +49,7 @@ def role_dropdown_options
       it 'shows Owner option' do
         visit resource_settings_access_tokens_path
 
+        click_button 'Add new token'
         expect(role_dropdown_options).to include('Owner')
       end
     end
@@ -63,6 +64,7 @@ def role_dropdown_options
       it 'does not show Owner option for a maintainer' do
         visit resource_settings_access_tokens_path
 
+        click_button 'Add new token'
         expect(role_dropdown_options).not_to include('Owner')
       end
     end
@@ -81,6 +83,7 @@ def role_dropdown_options
       it 'shows access token creation form and text' do
         visit project_settings_access_tokens_path(personal_project)
 
+        click_button 'Add new token'
         expect(page).to have_selector('#js-new-access-token-form')
       end
     end
diff --git a/spec/features/projects/settings/user_searches_in_settings_spec.rb b/spec/features/projects/settings/user_searches_in_settings_spec.rb
index 978b678c334146..1ca4b761788e2c 100644
--- a/spec/features/projects/settings/user_searches_in_settings_spec.rb
+++ b/spec/features/projects/settings/user_searches_in_settings_spec.rb
@@ -31,7 +31,7 @@
       visit project_settings_access_tokens_path(project)
     end
 
-    it_behaves_like 'can highlight results', 'Expiration date'
+    it_behaves_like 'can highlight results', 'Token name'
   end
 
   context 'in Repository page' do
diff --git a/spec/frontend/access_tokens/components/access_token_table_app_spec.js b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
index 2fa1481057867c..5236f38dc3510f 100644
--- a/spec/frontend/access_tokens/components/access_token_table_app_spec.js
+++ b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
@@ -91,24 +91,6 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(0).text()).toBe(noTokensMessage);
   });
 
-  it('should show a title indicating the amount of tokens', () => {
-    createComponent();
-
-    expect(wrapper.find('h5').text()).toBe(
-      sprintf(__('Active %{accessTokenTypePlural} (%{totalAccessTokens})'), {
-        accessTokenTypePlural,
-        totalAccessTokens: defaultActiveAccessTokens.length,
-      }),
-    );
-  });
-
-  it('should render information section', () => {
-    const info = 'This is my information';
-    createComponent({ information: info });
-
-    expect(wrapper.findByTestId('information-section').text()).toBe(info);
-  });
-
   describe('table headers', () => {
     it('should include `Action` column', () => {
       createComponent();
diff --git a/spec/frontend/access_tokens/components/new_access_token_app_spec.js b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
index 70f77932ccf62b..d51ac638f0e9b2 100644
--- a/spec/frontend/access_tokens/components/new_access_token_app_spec.js
+++ b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
@@ -23,6 +23,8 @@ describe('~/access_tokens/components/new_access_token_app', () => {
   };
 
   const findButtonEl = () => document.querySelector('[type=submit]');
+  const findGlAlertError = () => wrapper.findByTestId('error-message');
+  const findGlAlertSuccess = () => wrapper.findByTestId('success-message');
 
   const triggerSuccess = async (newToken = 'new token') => {
     wrapper
@@ -57,7 +59,7 @@ describe('~/access_tokens/components/new_access_token_app', () => {
 
   it('should render nothing', () => {
     expect(wrapper.findComponent(InputCopyToggleVisibility).exists()).toBe(false);
-    expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
+    expect(findGlAlertError().exists()).toBe(false);
   });
 
   describe('on success', () => {
@@ -65,7 +67,8 @@ describe('~/access_tokens/components/new_access_token_app', () => {
       const newToken = '12345';
       await triggerSuccess(newToken);
 
-      expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
+      expect(findGlAlertError().exists()).toBe(false);
+      expect(findGlAlertSuccess().exists()).toBe(true);
 
       const InputCopyToggleVisibilityComponent = wrapper.findComponent(InputCopyToggleVisibility);
       expect(InputCopyToggleVisibilityComponent.props('value')).toBe(newToken);
@@ -82,7 +85,7 @@ describe('~/access_tokens/components/new_access_token_app', () => {
       const newToken = '12345';
       await triggerSuccess(newToken);
 
-      expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
+      expect(findGlAlertError().exists()).toBe(false);
 
       const inputAttributes = wrapper
         .findByLabelText(sprintf(__('Your new %{accessTokenType}'), { accessTokenType }))
@@ -135,7 +138,7 @@ describe('~/access_tokens/components/new_access_token_app', () => {
 
       expect(wrapper.findComponent(InputCopyToggleVisibility).exists()).toBe(false);
 
-      let GlAlertComponent = wrapper.findComponent(GlAlert);
+      let GlAlertComponent = findGlAlertError();
       expect(GlAlertComponent.props('title')).toBe(__('The form contains the following errors:'));
       expect(GlAlertComponent.props('variant')).toBe('danger');
       let itemEls = wrapper.findAll('li');
diff --git a/spec/frontend/access_tokens/index_spec.js b/spec/frontend/access_tokens/index_spec.js
index c1158e0d124c4a..7d4d73b00b212a 100644
--- a/spec/frontend/access_tokens/index_spec.js
+++ b/spec/frontend/access_tokens/index_spec.js
@@ -50,7 +50,6 @@ describe('access tokens', () => {
         initialActiveAccessTokens,
 
         // Default values
-        information: undefined,
         noActiveTokensMessage: sprintf(__('This user has no active %{accessTokenTypePlural}.'), {
           accessTokenTypePlural,
         }),
@@ -59,14 +58,12 @@ describe('access tokens', () => {
     });
 
     it('mounts the component and provides all values', () => {
-      const information = 'Additional information';
       const noActiveTokensMessage = 'This group has no active access tokens.';
       setHTMLFixture(
         `<div id="js-access-token-table-app"
           data-access-token-type="${accessTokenType}"
           data-access-token-type-plural="${accessTokenTypePlural}"
           data-initial-active-access-tokens=${JSON.stringify(initialActiveAccessTokens)}
-          data-information="${information}"
           data-no-active-tokens-message="${noActiveTokensMessage}"
           data-show-role
           >
@@ -82,7 +79,6 @@ describe('access tokens', () => {
         accessTokenType,
         accessTokenTypePlural,
         initialActiveAccessTokens,
-        information,
         noActiveTokensMessage,
         showRole: true,
       });
diff --git a/spec/support/shared_examples/features/access_tokens_shared_examples.rb b/spec/support/shared_examples/features/access_tokens_shared_examples.rb
index 3c78869ffaa05a..34e3ba95b0d234 100644
--- a/spec/support/shared_examples/features/access_tokens_shared_examples.rb
+++ b/spec/support/shared_examples/features/access_tokens_shared_examples.rb
@@ -15,6 +15,8 @@
     name = 'My access token'
 
     visit resource_settings_access_tokens_path
+
+    click_button 'Add new token'
     fill_in 'Token name', with: name
 
     # Set date to 1st of next month
-- 
GitLab