[NA] [FE] Update cursor rules or FE (#3278)

* [OPIK-0001] [FE] Update cursor rules or FE

* Added always true for all FE rules

Author: andriidudar

apps/opik-frontend/.cursor/rules/accessibility-testing.mdc

@@ -1,14 +1,15 @@
 ---
 description: Frontend accessibility guidelines and testing patterns
 globs: "**/*"
-alwaysApply: false
+alwaysApply: true
 ---
 
 # Accessibility & Testing Guidelines
 
 ## Accessibility Guidelines
 
 ### Semantic HTML
+
 ```typescript
 // ✅ Use semantic HTML elements
 <header className="comet-header">
@@ -38,6 +39,7 @@ alwaysApply: false
 ```
 
 ### ARIA Labels and Descriptions
+
 ```typescript
 // ✅ Always provide aria-label for icon buttons
 <Button variant="ghost" size="icon" aria-label="Delete item">
@@ -61,7 +63,7 @@ alwaysApply: false
 </div>
 
 // ✅ Use aria-expanded for collapsible content
-<Button 
+<Button
   aria-expanded={isOpen}
   aria-controls="dropdown-menu"
   onClick={() => setIsOpen(!isOpen)}
@@ -74,6 +76,7 @@ alwaysApply: false
 ```
 
 ### Keyboard Navigation
+
 ```typescript
 // ✅ Ensure keyboard navigation works
 const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
@@ -98,6 +101,7 @@ const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
 ```
 
 ### Focus Management
+
 ```typescript
 // ✅ Provide visible focus indicators
 .focus-visible:focus {
@@ -122,23 +126,24 @@ import { FocusTrap } from '@radix-ui/react-focus-trap';
 ```
 
 ### Heading Hierarchy
+
 ```typescript
 // ✅ Use proper heading hierarchy
 <div className="page">
   <h1>Dashboard</h1>
-  
+
   <section>
     <h2>Recent Projects</h2>
-    
+
     <article>
       <h3>Project Name</h3>
       <p>Project description...</p>
     </article>
   </section>
-  
+
   <section>
     <h2>System Status</h2>
-    
+
     <div>
       <h3>Database</h3>
       <p>Status: Online</p>
@@ -152,6 +157,7 @@ import { FocusTrap } from '@radix-ui/react-focus-trap';
 ```
 
 ### Loading States and Error Messages
+
 ```typescript
 // ✅ Include accessible loading states
 {isLoading && (
@@ -177,6 +183,7 @@ import { FocusTrap } from '@radix-ui/react-focus-trap';
 ## Testing Patterns
 
 ### Component Testing with React Testing Library
+
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -191,27 +198,27 @@ describe('UserProfile', () => {
 
   it('renders user information correctly', () => {
     render(<UserProfile user={mockUser} />);
-    
+
     expect(screen.getByText('John Doe')).toBeInTheDocument();
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
   });
 
   it('allows editing user name', async () => {
     const user = userEvent.setup();
     const onSave = jest.fn();
-    
+
     render(<UserProfile user={mockUser} onSave={onSave} />);
-    
+
     const editButton = screen.getByRole('button', { name: /edit/i });
     await user.click(editButton);
-    
+
     const nameInput = screen.getByLabelText(/name/i);
     await user.clear(nameInput);
     await user.type(nameInput, 'Jane Doe');
-    
+
     const saveButton = screen.getByRole('button', { name: /save/i });
     await user.click(saveButton);
-    
+
     await waitFor(() => {
       expect(onSave).toHaveBeenCalledWith({
         ...mockUser,
@@ -223,58 +230,60 @@ describe('UserProfile', () => {
 ```
 
 ### Custom Hook Testing
+
 ```typescript
-import { renderHook, act } from '@testing-library/react';
-import { useEntityList } from './useEntityList';
+import { renderHook, act } from "@testing-library/react";
+import { useEntityList } from "./useEntityList";
 
-describe('useEntityList', () => {
-  it('fetches entities successfully', async () => {
+describe("useEntityList", () => {
+  it("fetches entities successfully", async () => {
     const mockData = {
-      content: [{ id: '1', name: 'Entity 1' }],
+      content: [{ id: "1", name: "Entity 1" }],
       total: 1,
     };
-    
+
     // Mock API call
     jest.mocked(api.get).mockResolvedValue({ data: mockData });
-    
+
     const { result } = renderHook(() =>
-      useEntityList({ workspaceName: 'test', page: 1, size: 10 })
+      useEntityList({ workspaceName: "test", page: 1, size: 10 }),
     );
-    
+
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true);
     });
-    
+
     expect(result.current.data).toEqual(mockData);
   });
 });
 ```
 
 ### API Mocking with MSW
+
 ```typescript
 // src/mocks/handlers.ts
-import { rest } from 'msw';
+import { rest } from "msw";
 
 export const handlers = [
-  rest.get('/api/v1/entities', (req, res, ctx) => {
+  rest.get("/api/v1/entities", (req, res, ctx) => {
     return res(
       ctx.json({
         content: [
-          { id: '1', name: 'Entity 1' },
-          { id: '2', name: 'Entity 2' },
+          { id: "1", name: "Entity 1" },
+          { id: "2", name: "Entity 2" },
         ],
         total: 2,
-      })
+      }),
     );
   }),
-  
-  rest.delete('/api/v1/entities/:id', (req, res, ctx) => {
+
+  rest.delete("/api/v1/entities/:id", (req, res, ctx) => {
     return res(ctx.status(204));
   }),
 ];
 
 // In test files
-import { server } from '../mocks/server';
+import { server } from "../mocks/server";
 
 beforeEach(() => {
   server.listen();
@@ -290,6 +299,7 @@ afterAll(() => {
 ```
 
 ### Integration Testing
+
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -303,7 +313,7 @@ const createWrapper = () => {
       mutations: { retry: false },
     },
   });
-  
+
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>
       {children}
@@ -314,33 +324,33 @@ const createWrapper = () => {
 describe('EntityListPage Integration', () => {
   it('loads and displays entities', async () => {
     render(<EntityListPage />, { wrapper: createWrapper() });
-    
+
     // Wait for loading to complete
     await waitFor(() => {
       expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
     });
-    
+
     // Check if entities are displayed
     expect(screen.getByText('Entity 1')).toBeInTheDocument();
     expect(screen.getByText('Entity 2')).toBeInTheDocument();
   });
-  
+
   it('handles entity deletion flow', async () => {
     const user = userEvent.setup();
     render(<EntityListPage />, { wrapper: createWrapper() });
-    
+
     await waitFor(() => {
       expect(screen.getByText('Entity 1')).toBeInTheDocument();
     });
-    
+
     // Find and click delete button
     const deleteButton = screen.getByRole('button', { name: /delete entity 1/i });
     await user.click(deleteButton);
-    
+
     // Confirm deletion
     const confirmButton = screen.getByRole('button', { name: /confirm/i });
     await user.click(confirmButton);
-    
+
     // Check if entity is removed
     await waitFor(() => {
       expect(screen.queryByText('Entity 1')).not.toBeInTheDocument();
@@ -360,7 +370,7 @@ describe('EntityListPage Integration', () => {
 
 ```typescript
 // ✅ Good: Testing behavior
-expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+expect(screen.getByRole("button", { name: /save/i })).toBeEnabled();
 
 // ❌ Avoid: Testing implementation
 expect(component.state.isSaving).toBe(false);
@@ -370,5 +380,5 @@ expect(screen.getByLabelText(/email address/i)).toBeInTheDocument();
 
 // ✅ Good: Testing error states
 await user.click(submitButton);
-expect(screen.getByRole('alert')).toHaveTextContent('Email is required');
-```
+expect(screen.getByRole("alert")).toHaveTextContent("Email is required");
+```