AI-1099 Update Frontend to Utilize Group-specific Behaviour (#50)

Author: dbarkowsky

.github/copilot-instructions.md

@@ -7,6 +7,13 @@
 - Do not include any document-specific implementation, the system is generic and must support arbitrary workloads
 - Changes to files must pass any linting and formatting checks. If there are any errors, fix them before submitting the code for review.
 
+## Frontend Implementation Guidelines
+- Use React functional components and hooks for state management and side effects.
+- Use Mantine components for UI elements and styling consistency.
+- Use Tanstack React Query for data fetching and mutations, with proper error handling and loading states.
+- Ensure all API interactions are typed correctly using TypeScript interfaces and types.
+- Write unit tests for components and hooks using React Testing Library and Vitest, covering various states and edge cases.
+- Follow accessibility best practices, including proper use of ARIA attributes and keyboard navigation.
 
 ## Backend Implementation Guidelines
 - Functions in js/ts and jsx/tsx files should be documented with JSDoc comments, including parameter and return types, and a description of the function's purpose.

.github/workflows/frontend-qa.yml

@@ -31,3 +31,6 @@ jobs:
       - name: Run Linter
         working-directory: apps/frontend
         run: npm run lint
+      - name: Run Unit Tests
+        working-directory: apps/frontend
+        run: npm run test

apps/backend-services/src/api-key/api-key.controller.spec.ts

@@ -16,6 +16,7 @@ describe("ApiKeyController", () => {
     generateApiKey: jest.fn(),
     deleteApiKey: jest.fn(),
     regenerateApiKey: jest.fn(),
+    getApiKeyGroupId: jest.fn(),
   };
 
   const mockRequest = {
@@ -144,34 +145,42 @@ describe("ApiKeyController", () => {
 
     it("should not throw when user has no email for regenerate", async () => {
       mockApiKeyService.regenerateApiKey.mockResolvedValue({});
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
       await expect(
         controller.regenerateApiKey(
           {
             user: { sub: "testuser" },
             resolvedIdentity: { userId: "testuser" },
           } as any,
-          { groupId: "group123" },
+          { id: "key123" },
         ),
       ).resolves.toBeDefined();
     });
   });
 
   describe("deleteApiKey", () => {
-    it("should delete group api key when user is a member", async () => {
+    it("should delete api key by id when user is a member", async () => {
       mockApiKeyService.deleteApiKey.mockResolvedValue(undefined);
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
 
-      await controller.deleteApiKey(mockRequest as any, {
-        groupId: "group123",
-      });
+      await controller.deleteApiKey(mockRequest as any, "key123");
 
-      expect(apiKeyService.deleteApiKey).toHaveBeenCalledWith("group123");
+      expect(apiKeyService.deleteApiKey).toHaveBeenCalledWith("key123");
+    });
+
+    it("should throw BadRequestException when id is missing", async () => {
+      await expect(
+        controller.deleteApiKey(mockRequest as any, ""),
+      ).rejects.toThrow(BadRequestException);
+      expect(apiKeyService.deleteApiKey).not.toHaveBeenCalled();
     });
 
     it("should throw ForbiddenException when user is not a group member", async () => {
       databaseService.isUserInGroup.mockResolvedValue(false);
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
 
       await expect(
-        controller.deleteApiKey(mockRequest as any, { groupId: "group123" }),
+        controller.deleteApiKey(mockRequest as any, "key123"),
       ).rejects.toThrow(ForbiddenException);
       expect(apiKeyService.deleteApiKey).not.toHaveBeenCalled();
     });
@@ -188,24 +197,26 @@ describe("ApiKeyController", () => {
         lastUsed: null,
       };
       mockApiKeyService.regenerateApiKey.mockResolvedValue(mockRegeneratedKey);
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
 
       const result = await controller.regenerateApiKey(mockRequest as any, {
-        groupId: "group123",
+        id: "key123",
       });
 
       expect(result).toEqual({ apiKey: mockRegeneratedKey });
       expect(apiKeyService.regenerateApiKey).toHaveBeenCalledWith(
         "testuser",
-        "group123",
+        "key123",
       );
     });
 
     it("should throw ForbiddenException when user is not a group member", async () => {
       databaseService.isUserInGroup.mockResolvedValue(false);
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
 
       await expect(
         controller.regenerateApiKey(mockRequest as any, {
-          groupId: "group123",
+          id: "key123",
         }),
       ).rejects.toThrow(ForbiddenException);
       expect(apiKeyService.regenerateApiKey).not.toHaveBeenCalled();
@@ -222,6 +233,7 @@ describe("ApiKeyController", () => {
         lastUsed: null,
       };
       mockApiKeyService.regenerateApiKey.mockResolvedValue(mockUpdatedKey);
+      mockApiKeyService.getApiKeyGroupId.mockResolvedValue("group123");
 
       const reqWithDifferentUser = {
         user: { sub: newUserId },
@@ -230,13 +242,13 @@ describe("ApiKeyController", () => {
 
       const result = await controller.regenerateApiKey(
         reqWithDifferentUser as any,
-        { groupId: "group123" },
+        { id: "key123" },
       );
 
       expect(result).toEqual({ apiKey: mockUpdatedKey });
       expect(apiKeyService.regenerateApiKey).toHaveBeenCalledWith(
         newUserId,
-        "group123",
+        "key123",
       );
     });
   });

apps/backend-services/src/api-key/api-key.controller.ts

@@ -23,6 +23,7 @@ import {
 } from "@nestjs/swagger";
 import { Request } from "express";
 import {
+  ApiKeyByIdRequestDto,
   ApiKeyInfoDto,
   ApiKeyInfoWrapperDto,
   GenerateApiKeyRequestDto,
@@ -108,27 +109,34 @@ export class ApiKeyController {
   @Delete()
   @HttpCode(HttpStatus.NO_CONTENT)
   @KeycloakSSOAuth()
-  @ApiOperation({ summary: "Delete the API key for a group" })
-  @ApiBody({ type: GenerateApiKeyRequestDto })
+  @ApiOperation({ summary: "Delete the API key by its ID" })
+  @ApiQuery({
+    name: "id",
+    description: "The ID of the API key to delete",
+  })
   @ApiNoContentResponse({ description: "API key deleted successfully" })
   @ApiForbiddenResponse({ description: "Access denied: not a group member" })
   @ApiUnauthorizedResponse({ description: "User is not authenticated" })
   async deleteApiKey(
     @Req() req: Request,
-    @Body() body: GenerateApiKeyRequestDto,
+    @Query("id") id: string,
   ): Promise<void> {
+    if (!id) {
+      throw new BadRequestException("id query parameter is required");
+    }
+    const groupId = await this.apiKeyService.getApiKeyGroupId(id);
     await identityCanAccessGroup(
       req.resolvedIdentity,
-      body.groupId,
+      groupId,
       this.databaseService,
     );
-    await this.apiKeyService.deleteApiKey(body.groupId);
+    await this.apiKeyService.deleteApiKey(id);
   }
 
   @Post("regenerate")
   @KeycloakSSOAuth()
-  @ApiOperation({ summary: "Regenerate the API key for a group" })
-  @ApiBody({ type: GenerateApiKeyRequestDto })
+  @ApiOperation({ summary: "Regenerate the API key by its ID" })
+  @ApiBody({ type: ApiKeyByIdRequestDto })
   @ApiOkResponse({
     description: "Returns the newly generated API key",
     type: GeneratedApiKeyWrapperDto,
@@ -137,7 +145,7 @@ export class ApiKeyController {
   @ApiUnauthorizedResponse({ description: "User is not authenticated" })
   async regenerateApiKey(
     @Req() req: Request,
-    @Body() body: GenerateApiKeyRequestDto,
+    @Body() body: ApiKeyByIdRequestDto,
   ): Promise<{ apiKey: GeneratedApiKeyDto }> {
     const user = req.user;
     const userId = user?.sub as string;
@@ -146,15 +154,13 @@ export class ApiKeyController {
         "User ID is required to regenerate an API key",
       );
     }
+    const groupId = await this.apiKeyService.getApiKeyGroupId(body.id);
     await identityCanAccessGroup(
       req.resolvedIdentity,
-      body.groupId,
+      groupId,
       this.databaseService,
     );
-    const apiKey = await this.apiKeyService.regenerateApiKey(
-      userId,
-      body.groupId,
-    );
+    const apiKey = await this.apiKeyService.regenerateApiKey(userId, body.id);
     return { apiKey };
   }
 }

apps/backend-services/src/api-key/api-key.service.spec.ts

@@ -7,9 +7,11 @@ import { ApiKeyService } from "./api-key.service";
 // Mock Prisma
 const mockPrismaApiKey = {
   findFirst: jest.fn(),
+  findUnique: jest.fn(),
   findMany: jest.fn(),
   create: jest.fn(),
   deleteMany: jest.fn(),
+  delete: jest.fn(),
   update: jest.fn(),
 };
 const mockPrismaService = {
@@ -127,19 +129,41 @@ describe("ApiKeyService", () => {
     });
   });
 
-  describe("deleteApiKey", () => {
-    it("should throw NotFoundException if no key exists", async () => {
-      mockPrismaApiKey.deleteMany.mockResolvedValue({ count: 0 });
-      await expect(service.deleteApiKey("group123")).rejects.toThrow(
+  describe("getApiKeyGroupId", () => {
+    it("should return the group ID for a valid key", async () => {
+      mockPrismaApiKey.findUnique.mockResolvedValue({
+        id: "key123",
+        group_id: "group123",
+      });
+
+      const result = await service.getApiKeyGroupId("key123");
+
+      expect(result).toBe("group123");
+      expect(mockPrismaApiKey.findUnique).toHaveBeenCalledWith({
+        where: { id: "key123" },
+      });
+    });
+
+    it("should throw NotFoundException when key does not exist", async () => {
+      mockPrismaApiKey.findUnique.mockResolvedValue(null);
+
+      await expect(service.getApiKeyGroupId("missing")).rejects.toThrow(
         NotFoundException,
       );
     });
+  });
 
-    it("should delete existing key", async () => {
-      mockPrismaApiKey.deleteMany.mockResolvedValue({ count: 1 });
-      await service.deleteApiKey("group123");
-      expect(mockPrismaApiKey.deleteMany).toHaveBeenCalledWith({
-        where: { group_id: "group123" },
+  describe("deleteApiKey", () => {
+    it("should throw NotFoundException if no key exists", async () => {
+      mockPrismaApiKey.delete.mockRejectedValue({ code: "P2025" });
+      await expect(service.deleteApiKey("key123")).rejects.toBeDefined();
+    });
+
+    it("should delete a key by its ID", async () => {
+      mockPrismaApiKey.delete.mockResolvedValue({ id: "key123" });
+      await service.deleteApiKey("key123");
+      expect(mockPrismaApiKey.delete).toHaveBeenCalledWith({
+        where: { id: "key123" },
       });
     });
   });

apps/backend-services/src/api-key/api-key.service.ts

@@ -35,6 +35,23 @@ export class ApiKeyService {
     };
   }
 
+  /**
+   * Looks up an API key record by its ID and returns the associated group ID.
+   * Throws NotFoundException when no matching key exists.
+   *
+   * @param keyId - The UUID of the API key record.
+   * @returns The group ID the key belongs to.
+   */
+  async getApiKeyGroupId(keyId: string): Promise<string> {
+    const apiKey = await this.prisma.apiKey.findUnique({
+      where: { id: keyId },
+    });
+    if (!apiKey) {
+      throw new NotFoundException("No API key found with this ID");
+    }
+    return apiKey.group_id;
+  }
+
   async generateApiKey(
     userId: string,
     groupId: string,
@@ -70,20 +87,21 @@ export class ApiKeyService {
     };
   }
 
-  async deleteApiKey(groupId: string): Promise<void> {
-    const deleted = await this.prisma.apiKey.deleteMany({
-      where: { group_id: groupId },
+  async deleteApiKey(keyId: string): Promise<void> {
+    const deleted = await this.prisma.apiKey.delete({
+      where: { id: keyId },
     });
-    if (deleted.count === 0) {
-      throw new NotFoundException("No API key found for this group");
+    if (!deleted) {
+      throw new NotFoundException("No API key found with this ID");
     }
-    this.logger.log(`API key(s) deleted for group ${groupId}`);
+    this.logger.log(`API key ${keyId} deleted`);
   }
 
   async regenerateApiKey(
     userId: string,
-    groupId: string,
+    keyId: string,
   ): Promise<GeneratedApiKeyDto> {
+    const groupId = await this.getApiKeyGroupId(keyId);
     return this.generateApiKey(userId, groupId);
   }
 

apps/backend-services/src/api-key/dto/api-key-info.dto.ts

@@ -10,6 +10,15 @@ export class GenerateApiKeyRequestDto {
   groupId: string;
 }
 
+export class ApiKeyByIdRequestDto {
+  @ApiProperty({
+    description: "The ID of the API key to operate on",
+  })
+  @IsString()
+  @IsNotEmpty()
+  id: string;
+}
+
 export class ApiKeyInfoDto {
   @ApiProperty()
   id: string;