fix: consider both client and backend token types from the DB (#10552)

## About the changes
In the previous fix: https://github.com/Unleash/unleash/pull/10543, we
made sure client token types were displayed in the UI. Here, we're also
making sure that the Backend token types are displayed as well.

1. A test validates that if a backend token exists in the db it will be
returned in the API response.
2. The UI has been adapted to also consider backend token types

frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx

@@ -49,7 +49,7 @@ export const useApiTokenTable = (
                 Cell: ({
                     value,
                 }: {
-                    value: 'client' | 'admin' | 'frontend';
+                    value: 'client' | 'backend' | 'admin' | 'frontend';
                 }) => (
                     <HighlightCell
                         value={tokenDescriptions[value.toLowerCase()].label}
@@ -145,6 +145,10 @@ const tokenDescriptions: {
         label: 'BACKEND',
         title: 'Connect backend SDK or Unleash Edge',
     },
+    backend: {
+        label: 'BACKEND',
+        title: 'Connect backend SDK or Unleash Edge',
+    },
     frontend: {
         label: 'FRONTEND',
         title: 'Connect frontend SDK',

src/lib/routes/admin-api/api-token.ts

@@ -44,6 +44,7 @@ import {
 import type { FrontendApiService } from '../../features/frontend-api/frontend-api-service.js';
 import { OperationDeniedError } from '../../error/index.js';
 import type { CreateApiTokenSchema } from '../../internals.js';
+import type { IUserPermission } from '../../server-impl.js';
 
 interface TokenParam {
     token: string;
@@ -64,32 +65,28 @@ export const tokenTypeToCreatePermission: (tokenType: ApiTokenType) => string =
         }
     };
 
-const permissionToTokenType: (permission: string) => ApiTokenType | undefined =
-    (permission) => {
-        if (
-            [
+const canReadToken = ({ permission }: IUserPermission, type: ApiTokenType) => {
+    if (permission === ADMIN) {
+        return true;
+    }
+    if (type === ApiTokenType.FRONTEND) {
+        return [
             CREATE_FRONTEND_API_TOKEN,
             READ_FRONTEND_API_TOKEN,
             DELETE_FRONTEND_API_TOKEN,
             UPDATE_FRONTEND_API_TOKEN,
-            ].includes(permission)
-        ) {
-            return ApiTokenType.FRONTEND;
-        } else if (
-            [
+        ].includes(permission);
+    }
+    if (type === ApiTokenType.CLIENT || type === ApiTokenType.BACKEND) {
+        return [
             CREATE_CLIENT_API_TOKEN,
             READ_CLIENT_API_TOKEN,
             DELETE_CLIENT_API_TOKEN,
             UPDATE_CLIENT_API_TOKEN,
-            ].includes(permission)
-        ) {
-            return ApiTokenType.CLIENT;
-        } else if (ADMIN === permission) {
-            return ApiTokenType.ADMIN;
-        } else {
-            return undefined;
+        ].includes(permission);
     }
-    };
+    return false;
+};
 
 const tokenTypeToUpdatePermission: (tokenType: ApiTokenType) => string = (
     tokenType,
@@ -419,23 +416,15 @@ export class ApiTokenController extends Controller {
         if (user.isAPI && user.permissions.includes(ADMIN)) {
             return allTokens;
         }
+
         const userPermissions =
             await this.accessService.getPermissionsForUser(user);
 
-        const allowedTokenTypes = [
-            ADMIN,
-            READ_CLIENT_API_TOKEN,
-            READ_FRONTEND_API_TOKEN,
-        ]
-            .filter((readPerm) =>
-                userPermissions.some(
-                    (p) => p.permission === readPerm || p.permission === ADMIN,
+        const accessibleTokens = allTokens.filter((token) =>
+            userPermissions.some((permission) =>
+                canReadToken(permission, token.type),
             ),
-            )
-            .map(permissionToTokenType)
-            .filter((t) => t);
-        return allTokens.filter((token) =>
-            allowedTokenTypes.includes(token.type),
         );
+        return accessibleTokens;
     }
 }