Change the revoke button to type `tertiary`

We decided this change was better than these two other proposals:

* [Draft: Change the revoke button type to `secondary`](
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/89504
)

* [Draft: Change the revoke button to 3 different types](
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/89507
)

In the AccessTokenTableApp component, users may not understand why
some access tokens have a primary revoke button (background red),
while other access tokens have a secondary (transparent background).

Originally, I believe the primary|secondary buttons were meant to
match the color of the text of the Expires column (3 colors: red for
expired token, orange for soon-to-be-expired, black for tokens without
expiration). However, the match for the button was not perfect:
primary button for tokens with expiration, secondary button for
tokens without expiration.

This MR changes the revoke buttons to be of type tertiary.

Changelog: changed

app/assets/javascripts/access_tokens/components/access_token_table_app.vue

@@ -138,10 +138,9 @@ export default {
           }}</span>
         </template>
 
-        <template #cell(action)="{ item: { revokePath, expiresAt } }">
+        <template #cell(action)="{ item: { revokePath } }">
           <gl-button
-            variant="danger"
-            :category="expiresAt ? 'primary' : 'secondary'"
+            category="tertiary"
             :aria-label="$options.i18n.revokeButton"
             :data-confirm="modalMessage"
             data-confirm-btn-variant="danger"

spec/frontend/access_tokens/components/access_token_table_app_spec.js

-import { GlPagination, GlTable } from '@gitlab/ui';
+import { GlButton, GlPagination, GlTable } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
@@ -164,8 +164,8 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(3).text()).toBe(__('Never'));
     expect(cells.at(4).text()).toBe(__('Never'));
     expect(cells.at(5).text()).toBe('Maintainer');
-    let anchor = cells.at(6).find('a');
-    expect(anchor.attributes()).toMatchObject({
+    let button = cells.at(6).findComponent(GlButton);
+    expect(button.attributes()).toMatchObject({
       'aria-label': __('Revoke'),
       'data-qa-selector': __('revoke_button'),
       href: '/-/profile/personal_access_tokens/1/revoke',
@@ -176,8 +176,7 @@ describe('~/access_tokens/components/access_token_table_app', () => {
         { accessTokenType },
       ),
     });
-
-    expect(anchor.classes()).toContain('btn-danger-secondary');
+    expect(button.props('category')).toBe('tertiary');
 
     // Second row
     expect(cells.at(7).text()).toBe('b');
@@ -186,9 +185,9 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(10).text()).not.toBe(__('Never'));
     expect(cells.at(11).text()).toBe(__('Expired'));
     expect(cells.at(12).text()).toBe('Maintainer');
-    anchor = cells.at(13).find('a');
-    expect(anchor.attributes('href')).toBe('/-/profile/personal_access_tokens/2/revoke');
-    expect(anchor.classes()).toEqual(['btn', 'btn-danger', 'btn-md', 'gl-button', 'btn-icon']);
+    button = cells.at(13).findComponent(GlButton);
+    expect(button.attributes('href')).toBe('/-/profile/personal_access_tokens/2/revoke');
+    expect(button.props('category')).toBe('tertiary');
   });
 
   it('sorts rows alphabetically', async () => {