Merge branch 'eduardosanz/refactor-access-token-store' into 'master'

Refactor access tokens Pinia store

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/184029



Merged-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Approved-by: Artur Fedorov <afedorov@gitlab.com>
Approved-by: Fernando Cardenas <14022659-fernando-c@users.noreply.gitlab.com>

ee/app/assets/javascripts/service_accounts/stores/access_tokens.js

@@ -10,13 +10,19 @@ import {
 import { s__ } from '~/locale';
 import { SORT_OPTIONS, DEFAULT_SORT } from '~/access_tokens/constants';
 
+/**
+ * @typedef {{type: string, value: {data: string, operator: string}}} Filter
+ * @typedef {Array<string|Filter>} Filters
+ */
+
 /**
  * Fetch access tokens
  *
- * @param {string} url
- * @param {string|number} id
- * @param {Object<string, string|number>} params
- * @param {string} sort
+ * @param {Object} options
+ * @param {string} options.url
+ * @param {string|number} options.id
+ * @param {Object<string, string|number>} options.params
+ * @param {string} options.sort
  */
 const fetchTokens = async ({ url, id, params, sort }) => {
   const { data, headers } = await axios.get(url, {
@@ -32,6 +38,7 @@ export const useAccessTokens = defineStore('accessTokens', {
     return {
       alert: null,
       busy: false,
+      /** @type {Filters} */
       filters: [],
       id: null,
       page: 1,
@@ -69,6 +76,9 @@ export const useAccessTokens = defineStore('accessTokens', {
         this.busy = false;
       }
     },
+    /**
+     * @param {number} tokenId
+     */
     async revokeToken(tokenId) {
       this.alert?.dismiss();
       this.busy = true;
@@ -92,17 +102,21 @@ export const useAccessTokens = defineStore('accessTokens', {
         this.busy = false;
       }
     },
+    /**
+     * @param {number} tokenId
+     * @param {string} expiresAt
+     */
     async rotateToken(tokenId, expiresAt) {
       this.alert?.dismiss();
       this.busy = true;
       try {
         const url = this.urlRotate.replace(':id', this.id);
         const { data } = await axios.post(`${url}/${tokenId}/rotate`, { expires_at: expiresAt });
+        this.token = data.token;
         smoothScrollTop();
         // Reset pagination because after rotation the token may appear on a different page.
         this.page = 1;
         await this.fetchTokens({ clearAlert: false });
-        this.token = data.token;
       } catch (error) {
         const message =
           error?.response?.data?.message ??
@@ -112,29 +126,50 @@ export const useAccessTokens = defineStore('accessTokens', {
         this.busy = false;
       }
     },
-    setup({ filters, id, urlRevoke, urlRotate, urlShow }) {
-      this.filters = filters;
-      this.id = id;
-      this.urlRevoke = urlRevoke;
-      this.urlRotate = urlRotate;
-      this.urlShow = urlShow;
-    },
+    /**
+     * @param {Filters} filters
+     */
     setFilters(filters) {
       this.filters = filters;
     },
+    /**
+     * @param {number} page
+     */
     setPage(page) {
       smoothScrollTop();
       this.page = page;
     },
+    /**
+     * @param {string} token
+     */
     setToken(token) {
       this.token = token;
     },
+    /**
+     * @param {{isAsc: boolean, value: string}} sorting
+     */
     setSorting(sorting) {
       this.sorting = sorting;
     },
+    /**
+     * @param {Object} options
+     *    @param {Filters} options.filters
+     *    @param {number} options.id
+     *    @param {string} options.urlRevoke
+     *    @param {string} options.urlRotate
+     *    @param {string} options.urlShow
+     */
+    setup({ filters, id, urlRevoke, urlRotate, urlShow }) {
+      this.filters = filters;
+      this.id = id;
+      this.urlRevoke = urlRevoke;
+      this.urlRotate = urlRotate;
+      this.urlShow = urlShow;
+    },
   },
   getters: {
     params() {
+      /** @type {Object<string, number|string>} */
       const newParams = { page: this.page };
 
       this.filters?.forEach((token) => {

ee/spec/frontend/service_accounts/stores/access_tokens_spec.js

@@ -64,18 +64,6 @@ describe('useAccessTokens store', () => {
       mockAxios.reset();
     });
 
-    describe('setup', () => {
-      it('sets up the store', async () => {
-        await store.setup({ filters, id, urlRevoke, urlRotate, urlShow });
-
-        expect(store.filters).toEqual(filters);
-        expect(store.id).toBe(id);
-        expect(store.urlRevoke).toBe(urlRevoke);
-        expect(store.urlRotate).toBe(urlRotate);
-        expect(store.urlShow).toBe(urlShow);
-      });
-    });
-
     describe('fetchTokens', () => {
       beforeEach(() => {
         store.setup({ id, filters, urlShow });
@@ -236,6 +224,11 @@ describe('useAccessTokens store', () => {
         await store.revokeToken(1);
 
         expect(createAlert).toHaveBeenCalledTimes(2);
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'The token was revoked successfully.',
+          variant: 'success',
+        });
+        // This alert hides the one above.
         expect(createAlert).toHaveBeenCalledWith({
           message: 'An error occurred while fetching the tokens.',
         });
@@ -294,14 +287,14 @@ describe('useAccessTokens store', () => {
       });
 
       it('scrolls to the top', async () => {
-        mockAxios.onPost().replyOnce(HTTP_STATUS_NO_CONTENT);
+        mockAxios.onPost().replyOnce(HTTP_STATUS_OK, { token: 'new-token' });
         await store.rotateToken(1, '2025-01-01');
 
         expect(smoothScrollTop).toHaveBeenCalledTimes(1);
       });
 
       it('updates tokens and sets busy to false after fetching', async () => {
-        mockAxios.onPost().replyOnce(HTTP_STATUS_NO_CONTENT);
+        mockAxios.onPost().replyOnce(HTTP_STATUS_OK, { token: 'new-token' });
         mockAxios.onGet().replyOnce(HTTP_STATUS_OK, [{ active: true, name: 'Token' }], headers);
         await store.rotateToken(1, '2025-01-01');
 
@@ -321,11 +314,11 @@ describe('useAccessTokens store', () => {
       });
 
       it('shows an alert if an error occurs while fetching', async () => {
-        mockAxios.onPost().replyOnce(HTTP_STATUS_NO_CONTENT);
+        mockAxios.onPost().replyOnce(HTTP_STATUS_OK, { token: 'new-token' });
         mockAxios.onGet().replyOnce(HTTP_STATUS_INTERNAL_SERVER_ERROR);
         await store.rotateToken(1, '2025-01-01');
 
-        expect(createAlert).toHaveBeenCalledTimes(2);
+        expect(createAlert).toHaveBeenCalledTimes(1);
         expect(createAlert).toHaveBeenCalledWith({
           message: 'An error occurred while fetching the tokens.',
         });
@@ -333,7 +326,7 @@ describe('useAccessTokens store', () => {
       });
 
       it('uses correct params in the fetch', async () => {
-        mockAxios.onPost().replyOnce(HTTP_STATUS_NO_CONTENT);
+        mockAxios.onPost().replyOnce(HTTP_STATUS_OK, { token: 'new-token' });
         mockAxios.onGet().replyOnce(HTTP_STATUS_OK, [{ active: true, name: 'Token' }], headers);
         store.setPage(2);
         store.setFilters(['my token']);
@@ -353,6 +346,14 @@ describe('useAccessTokens store', () => {
       });
     });
 
+    describe('setFilters', () => {
+      it('sets the filters', () => {
+        store.setFilters(['my token']);
+
+        expect(store.filters).toEqual(['my token']);
+      });
+    });
+
     describe('setPage', () => {
       it('sets the page', () => {
         store.setPage(2);
@@ -369,29 +370,41 @@ describe('useAccessTokens store', () => {
 
     describe('setToken', () => {
       it('sets the token', () => {
-        store.setToken(2);
+        store.setToken('new-token');
 
-        expect(store.token).toBe(2);
+        expect(store.token).toBe('new-token');
       });
     });
 
     describe('setSorting', () => {
       it('sets the sorting', () => {
-        store.setSorting({ value: 'name', isAsc: false });
+        store.setSorting({ isAsc: false, value: 'name' });
+
+        expect(store.sorting).toEqual({ isAsc: false, value: 'name' });
+      });
+    });
+
+    describe('setup', () => {
+      it('sets up the store', async () => {
+        await store.setup({ filters, id, urlRevoke, urlRotate, urlShow });
 
-        expect(store.sorting).toEqual({ value: 'name', isAsc: false });
+        expect(store.filters).toEqual(filters);
+        expect(store.id).toBe(id);
+        expect(store.urlRevoke).toBe(urlRevoke);
+        expect(store.urlRotate).toBe(urlRotate);
+        expect(store.urlShow).toBe(urlShow);
       });
     });
+  });
 
-    describe('getters', () => {
-      describe('sort', () => {
-        it('returns correct value', () => {
-          expect(store.sort).toBe('expires_at_asc_id_desc');
+  describe('getters', () => {
+    describe('sort', () => {
+      it('returns correct value', () => {
+        expect(store.sort).toBe('expires_at_asc_id_desc');
 
-          store.sorting = { value: 'name', isAsc: false };
+        store.sorting = { value: 'name', isAsc: false };
 
-          expect(store.sort).toBe('name_desc');
-        });
+        expect(store.sort).toBe('name_desc');
       });
     });
   });