chore: added log to print query

* fix: dont accept materialized key from payload

* fix: use correct omit operator

ee/authz/openfgaschema/base.fga

@@ -0,0 +1,44 @@
+module base
+
+type organisation 
+  relations
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+
+type user
+  relations
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+    define delete: [user, role#assignee]
+
+type anonymous
+
+type role 
+  relations
+    define assignee: [user]
+
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+    define delete: [user, role#assignee]
+
+type resources
+  relations
+    define create: [user, role#assignee]
+    define list: [user, role#assignee]
+
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+    define delete: [user, role#assignee]
+
+type resource
+  relations
+      define read: [user, anonymous, role#assignee]
+      define update: [user, role#assignee]
+      define delete: [user, role#assignee]
+
+      define block: [user, role#assignee]
+
+
+type telemetry
+  relations
+      define read: [user, anonymous, role#assignee]

ee/authz/openfgaschema/schema.go

@@ -0,0 +1,29 @@
+package openfgaschema
+
+import (
+	"context"
+	_ "embed"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
+)
+
+var (
+	//go:embed base.fga
+	baseDSL string
+)
+
+type schema struct{}
+
+func NewSchema() authz.Schema {
+	return &schema{}
+}
+
+func (schema *schema) Get(ctx context.Context) []openfgapkgtransformer.ModuleFile {
+	return []openfgapkgtransformer.ModuleFile{
+		{
+			Name:     "base.fga",
+			Contents: baseDSL,
+		},
+	}
+}

ee/http/middleware/authz.go

@@ -0,0 +1,132 @@
+package middleware
+
+import (
+	"log/slog"
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/gorilla/mux"
+)
+
+const (
+	authzDeniedMessage string = "::AUTHZ-DENIED::"
+)
+
+type AuthZ struct {
+	logger       *slog.Logger
+	authzService authz.AuthZ
+}
+
+func NewAuthZ(logger *slog.Logger) *AuthZ {
+	if logger == nil {
+		panic("cannot build authz middleware, logger is empty")
+	}
+
+	return &AuthZ{logger: logger}
+}
+
+func (middleware *AuthZ) ViewAccess(next http.HandlerFunc) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		if err := claims.IsViewer(); err != nil {
+			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
+			render.Error(rw, err)
+			return
+		}
+
+		next(rw, req)
+	})
+}
+
+func (middleware *AuthZ) EditAccess(next http.HandlerFunc) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		if err := claims.IsEditor(); err != nil {
+			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
+			render.Error(rw, err)
+			return
+		}
+
+		next(rw, req)
+	})
+}
+
+func (middleware *AuthZ) AdminAccess(next http.HandlerFunc) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		if err := claims.IsAdmin(); err != nil {
+			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
+			render.Error(rw, err)
+			return
+		}
+
+		next(rw, req)
+	})
+}
+
+func (middleware *AuthZ) SelfAccess(next http.HandlerFunc) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		id := mux.Vars(req)["id"]
+		if err := claims.IsSelfAccess(id); err != nil {
+			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
+			render.Error(rw, err)
+			return
+		}
+
+		next(rw, req)
+	})
+}
+
+func (middleware *AuthZ) OpenAccess(next http.HandlerFunc) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		next(rw, req)
+	})
+}
+
+// Check middleware accepts the relation, typeable, parentTypeable (for direct access + group relations) and a callback function to derive selector and parentSelectors on per request basis.
+func (middleware *AuthZ) Check(next http.HandlerFunc, relation authtypes.Relation, translation authtypes.Relation, typeable authtypes.Typeable, parentTypeable authtypes.Typeable, cb authtypes.SelectorCallbackFn) http.HandlerFunc {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		selector, parentSelectors, err := cb(req)
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		err = middleware.authzService.CheckWithTupleCreation(req.Context(), claims, relation, typeable, selector, parentTypeable, parentSelectors...)
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		next(rw, req)
+	})
+}

ee/query-service/app/server.go

@@ -8,6 +8,8 @@ import (
 	"net/http"
 	_ "net/http/pprof" // http profiler
 
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
+
 	"github.com/gorilla/handlers"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
@@ -334,6 +336,8 @@ func makeRulesManager(
 	querier querier.Querier,
 	logger *slog.Logger,
 ) (*baserules.Manager, error) {
+	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
+	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
 	managerOpts := &baserules.ManagerOptions{
 		TelemetryStore:      telemetryStore,
@@ -348,8 +352,10 @@ func makeRulesManager(
 		PrepareTaskFunc:     rules.PrepareTaskFunc,
 		PrepareTestRuleFunc: rules.TestNotification,
 		Alertmanager:        alertmanager,
-		SQLStore:            sqlstore,
 		OrgGetter:           orgGetter,
+		RuleStore:           ruleStore,
+		MaintenanceStore:    maintenanceStore,
+		SqlStore:            sqlstore,
 	}
 
 	// create Manager

frontend/.cursorrules

@@ -0,0 +1,484 @@
+# Persona
+You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
+
+# Auto-detect TypeScript Usage
+Check for TypeScript in the project through tsconfig.json or package.json dependencies.
+Adjust syntax based on this detection.
+
+# TypeScript Type Safety for Jest Tests
+**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
+
+**Type Safety Requirements:**
+- Use proper TypeScript interfaces for all mock data
+- Type all Jest mock functions with `jest.MockedFunction<T>`
+- Use generic types for React components and hooks
+- Define proper return types for mock functions
+- Use `as const` for literal types when needed
+- Avoid `any` type – use proper typing instead
+
+# Unit Testing Focus
+Focus on critical functionality (business logic, utility functions, component behavior)
+Mock dependencies (API calls, external modules) before imports
+Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
+Write maintainable tests with descriptive names grouped in describe blocks
+
+# Global vs Local Mocks
+**Use Global Mocks for:**
+- High-frequency dependencies (20+ test files)
+- Core infrastructure (react-router-dom, react-query, antd)
+- Standard implementations across the app
+- Browser APIs (ResizeObserver, matchMedia, localStorage)
+- Utility libraries (date-fns, lodash)
+
+**Use Local Mocks for:**
+- Business logic dependencies (5-15 test files)
+- Test-specific behavior (different data per test)
+- API endpoints with specific responses
+- Domain-specific components
+- Error scenarios and edge cases
+
+**Global Mock Files Available (from jest.config.ts):**
+- `uplot` → `__mocks__/uplotMock.ts`
+
+# Repo-specific Testing Conventions
+
+## Imports
+Always import from our harness:
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+```
+For API mocks:
+```ts
+import { server, rest } from 'mocks-server/server';
+```
+Do not import directly from `@testing-library/react`.
+
+## Router
+Use the router built into render:
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+Only mock `useLocation` / `useParams` if the test depends on them.
+
+## Hook Mocks
+Pattern:
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */ as any);
+```
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## MSW
+Global MSW server runs automatically.
+Override per-test:
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+Keep large responses in `mocks-server/__mockdata_`.
+
+## Interactions
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
+- Always await interactions:
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+```ts
+// Example: virtualized list scroll (no userEvent helper)
+const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
+scroller.scrollTop = targetScrollTop;
+act(() => { fireEvent.scroll(scroller); });
+```
+
+## Timers
+❌ No global fake timers.
+✅ Per-test only, for debounce/throttle:
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
+Fallback: visible text.
+Last resort: `data-testid`.
+
+# Example Test (using only configured global mocks)
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# Best Practices
+- **Critical Functionality**: Prioritize testing business logic and utilities
+- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
+- **Data Scenarios**: Always test valid, invalid, and edge cases
+- **Descriptive Names**: Make test intent clear
+- **Organization**: Group related tests in describe
+- **Consistency**: Match repo conventions
+- **Edge Cases**: Test null, undefined, unexpected values
+- **Limit Scope**: 3–5 focused tests per file
+- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
+- **No Any**: Enforce type safety
+
+# Example Test
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# TypeScript Type Safety Examples
+
+## Proper Mock Typing
+```ts
+// ✅ GOOD - Properly typed mocks
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message: string;
+}
+
+// Type the mock functions
+const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
+const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
+
+// Mock implementation with proper typing
+mockFetchUser.mockResolvedValue({
+  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
+  status: 200,
+  message: 'Success'
+});
+
+// ❌ BAD - Using any type
+const mockFetchUser = jest.fn() as any; // Don't do this
+```
+
+## React Component Testing with Types
+```ts
+// ✅ GOOD - Properly typed component testing
+interface ComponentProps {
+  title: string;
+  data: User[];
+  onUserSelect: (user: User) => void;
+  isLoading?: boolean;
+}
+
+const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
+  // Component implementation
+};
+
+describe('TestComponent', () => {
+  it('should render with proper props', () => {
+    // Arrange - Type the props properly
+    const mockProps: ComponentProps = {
+      title: 'Test Title',
+      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
+      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+      isLoading: false
+    };
+    
+    // Act
+    render(<TestComponent {...mockProps} />);
+    
+    // Assert
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+});
+```
+
+## Hook Testing with Types
+```ts
+// ✅ GOOD - Properly typed hook testing
+interface UseUserDataReturn {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+const useUserData = (id: number): UseUserDataReturn => {
+  // Hook implementation
+};
+
+describe('useUserData', () => {
+  it('should return user data with proper typing', () => {
+    // Arrange
+    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+    mockFetchUser.mockResolvedValue({
+      data: mockUser,
+      status: 200,
+      message: 'Success'
+    });
+    
+    // Act
+    const { result } = renderHook(() => useUserData(1));
+    
+    // Assert
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+});
+```
+
+## Global Mock Type Safety
+```ts
+// ✅ GOOD - Type-safe global mocks
+// In __mocks__/routerMock.ts
+export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
+  pathname: '/traces',
+  search: '',
+  hash: '',
+  state: null,
+  key: 'test-key',
+  ...overrides,
+});
+
+// In test files
+const location = useLocation(); // Properly typed from global mock
+expect(location.pathname).toBe('/traces');
+```
+
+# TypeScript Configuration for Jest
+
+## Required Jest Configuration
+```json
+// jest.config.ts
+{
+  "preset": "ts-jest/presets/js-with-ts-esm",
+  "globals": {
+    "ts-jest": {
+      "useESM": true,
+      "isolatedModules": true,
+      "tsconfig": "<rootDir>/tsconfig.jest.json"
+    }
+  },
+  "extensionsToTreatAsEsm": [".ts", ".tsx"],
+  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
+}
+```
+
+## TypeScript Jest Configuration
+```json
+// tsconfig.jest.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src/**/*",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "__mocks__/**/*"
+  ]
+}
+```
+
+## Common Type Safety Patterns
+
+### Mock Function Typing
+```ts
+// ✅ GOOD - Proper mock function typing
+const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
+const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
+
+// ❌ BAD - Using any
+const mockApiCall = jest.fn() as any;
+```
+
+### Generic Mock Typing
+```ts
+// ✅ GOOD - Generic mock typing
+interface MockApiResponse<T> {
+  data: T;
+  status: number;
+}
+
+const mockFetchData = jest.fn() as jest.MockedFunction<
+  <T>(endpoint: string) => Promise<MockApiResponse<T>>
+>;
+
+// Usage
+mockFetchData<User>('/users').mockResolvedValue({
+  data: { id: 1, name: 'John' },
+  status: 200
+});
+```
+
+### React Testing Library with Types
+```ts
+// ✅ GOOD - Typed testing utilities
+import { render, screen, RenderResult } from '@testing-library/react';
+import { ComponentProps } from 'react';
+
+type TestComponentProps = ComponentProps<typeof TestComponent>;
+
+const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
+  const defaultProps: TestComponentProps = {
+    title: 'Test',
+    data: [],
+    onSelect: jest.fn(),
+    ...props
+  };
+  
+  return render(<TestComponent {...defaultProps} />);
+};
+```
+
+### Error Handling with Types
+```ts
+// ✅ GOOD - Typed error handling
+interface ApiError {
+  message: string;
+  code: number;
+  details?: Record<string, unknown>;
+}
+
+const mockApiError: ApiError = {
+  message: 'API Error',
+  code: 500,
+  details: { endpoint: '/users' }
+};
+
+mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
+```
+
+## Type Safety Checklist
+- [ ] All mock functions use `jest.MockedFunction<T>`
+- [ ] All mock data has proper interfaces
+- [ ] No `any` types in test files
+- [ ] Generic types are used where appropriate
+- [ ] Error types are properly defined
+- [ ] Component props are typed
+- [ ] Hook return types are defined
+- [ ] API response types are defined
+- [ ] Global mocks are type-safe
+- [ ] Test utilities are properly typed
+
+# Mock Decision Tree
+```
+Is it used in 20+ test files?
+├─ YES → Use Global Mock
+│   ├─ react-router-dom
+│   ├─ react-query
+│   ├─ antd components
+│   └─ browser APIs
+│
+└─ NO → Is it business logic?
+    ├─ YES → Use Local Mock
+    │   ├─ API endpoints
+    │   ├─ Custom hooks
+    │   └─ Domain components
+    │
+    └─ NO → Is it test-specific?
+        ├─ YES → Use Local Mock
+        │   ├─ Error scenarios
+        │   ├─ Loading states
+        │   └─ Specific data
+        │
+        └─ NO → Consider Global Mock
+            └─ If it becomes frequently used
+```
+
+# Common Anti-Patterns to Avoid
+
+❌ **Don't mock global dependencies locally:**
+```js
+// BAD - This is already globally mocked
+jest.mock('react-router-dom', () => ({ ... }));
+```
+
+❌ **Don't create global mocks for test-specific data:**
+```js
+// BAD - This should be local
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => specificTestData)
+}));
+```
+
+✅ **Do use global mocks for infrastructure:**
+```js
+// GOOD - Use global mock
+import { useLocation } from 'react-router-dom';
+```
+
+✅ **Do create local mocks for business logic:**
+```js
+// GOOD - Local mock for specific test needs
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData)
+}));
+```

frontend/__mocks__/uplotMock.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// Mock for uplot library used in tests
+export interface MockUPlotInstance {
+	setData: jest.Mock;
+	setSize: jest.Mock;
+	destroy: jest.Mock;
+	redraw: jest.Mock;
+	setSeries: jest.Mock;
+}
+
+export interface MockUPlotPaths {
+	spline: jest.Mock;
+	bars: jest.Mock;
+}
+
+// Create mock instance methods
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});
+
+// Create mock paths
+const mockPaths: MockUPlotPaths = {
+	spline: jest.fn(),
+	bars: jest.fn(),
+};
+
+// Mock static methods
+const mockTzDate = jest.fn(
+	(date: Date, _timezone: string) => new Date(date.getTime()),
+);
+
+// Mock uPlot constructor - this needs to be a proper constructor function
+function MockUPlot(
+	_options: unknown,
+	_data: unknown,
+	_target: HTMLElement,
+): MockUPlotInstance {
+	return createMockUPlotInstance();
+}
+
+// Add static methods to the constructor
+MockUPlot.tzDate = mockTzDate;
+MockUPlot.paths = mockPaths;
+
+// Export the constructor as default
+export default MockUPlot;

frontend/__mocks__/useSafeNavigate.ts

@@ -0,0 +1,29 @@
+// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+interface UseSafeNavigateReturn {
+	safeNavigate: jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>;
+}
+
+export const useSafeNavigate = (): UseSafeNavigateReturn => ({
+	safeNavigate: jest.fn(
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
+			console.log(`Mock safeNavigate called with:`, to, options);
+		},
+	) as jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>,
+});

frontend/jest.config.ts

@@ -1,5 +1,7 @@
 import type { Config } from '@jest/types';
 
+const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
+
 const config: Config.InitialOptions = {
 	clearMocks: true,
 	coverageDirectory: 'coverage',
@@ -10,6 +12,10 @@ const config: Config.InitialOptions = {
 	moduleNameMapper: {
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
+		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
+		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx

@@ -19,20 +19,6 @@ beforeAll(() => {
 	});
 });
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock('react-dnd', () => ({
 	useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
 	useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),

frontend/src/components/ErrorModal/ErrorModal.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import APIError from 'types/api/error';
 
 import ErrorModal from './ErrorModal';
@@ -56,9 +56,8 @@ describe('ErrorModal Component', () => {
 
 		// Click the close button
 		const closeButton = screen.getByTestId('close-button');
-		act(() => {
-			fireEvent.click(closeButton);
-		});
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(closeButton);
 
 		// Check if onClose was called
 		expect(onCloseMock).toHaveBeenCalledTimes(1);
@@ -149,9 +148,8 @@ it('should open the modal when the trigger component is clicked', async () => {
 
 	// Click the trigger component
 	const triggerButton = screen.getByText('Open Error Modal');
-	act(() => {
-		fireEvent.click(triggerButton);
-	});
+	const user = userEvent.setup({ pointerEventsCheck: 0 });
+	await user.click(triggerButton);
 
 	// Check if the modal is displayed
 	expect(screen.getByText('An error occurred')).toBeInTheDocument();
@@ -170,18 +168,15 @@ it('should close the modal when the onCancel event is triggered', async () => {
 
 	// Click the trigger component
 	const triggerButton = screen.getByText('error');
-	act(() => {
-		fireEvent.click(triggerButton);
-	});
+	const user = userEvent.setup({ pointerEventsCheck: 0 });
+	await user.click(triggerButton);
 
 	await waitFor(() => {
 		expect(screen.getByText('An error occurred')).toBeInTheDocument();
 	});
 
 	// Trigger the onCancel event
-	act(() => {
-		fireEvent.click(screen.getByTestId('close-button'));
-	});
+	await user.click(screen.getByTestId('close-button'));
 
 	// Check if the modal is closed
 	expect(onCloseMock).toHaveBeenCalledTimes(1);

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -50,7 +50,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		filterConfig,
 		isDynamicFilters,
 		customFilters,
-		setIsStale,
+		refetchCustomFilters,
 		isCustomFiltersLoading,
 	} = useFilterConfig({ signal, config });
 
@@ -263,7 +263,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							signal={signal}
 							setIsSettingsOpen={setIsSettingsOpen}
 							customFilters={customFilters}
-							setIsStale={setIsStale}
+							refetchCustomFilters={refetchCustomFilters}
 						/>
 					)}
 				</div>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -14,12 +14,12 @@ function QuickFiltersSettings({
 	signal,
 	setIsSettingsOpen,
 	customFilters,
-	setIsStale,
+	refetchCustomFilters,
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: FilterType[];
-	setIsStale: (isStale: boolean) => void;
+	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
 		handleSettingsClose,
@@ -34,7 +34,7 @@ function QuickFiltersSettings({
 	} = useQuickFilterSettings({
 		setIsSettingsOpen,
 		customFilters,
-		setIsStale,
+		refetchCustomFilters,
 		signal,
 	});
 

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -12,7 +12,7 @@ import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: FilterType[];
-	setIsStale: (isStale: boolean) => void;
+	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
@@ -32,7 +32,7 @@ interface UseQuickFilterSettingsReturn {
 const useQuickFilterSettings = ({
 	customFilters,
 	setIsSettingsOpen,
-	setIsStale,
+	refetchCustomFilters,
 	signal,
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -46,7 +46,7 @@ const useQuickFilterSettings = ({
 	} = useMutation(updateCustomFiltersAPI, {
 		onSuccess: () => {
 			setIsSettingsOpen(false);
-			setIsStale(true);
+			refetchCustomFilters();
 			logEvent('Quick Filters Settings: changes saved', {
 				addedFilters,
 			});

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,12 +1,8 @@
 import getCustomFilters from 'api/quickFilters/getCustomFilters';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	Filter as FilterType,
-	PayloadProps,
-} from 'types/api/quickFilters/getCustomFilters';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -18,37 +14,34 @@ interface UseFilterConfigProps {
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
 	customFilters: FilterType[];
-	setCustomFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
-	setIsStale: React.Dispatch<React.SetStateAction<boolean>>;
+	refetchCustomFilters: () => void;
 }
 
 const useFilterConfig = ({
 	signal,
 	config,
 }: UseFilterConfigProps): UseFilterConfigReturn => {
-	const [customFilters, setCustomFilters] = useState<FilterType[]>([]);
-	const [isStale, setIsStale] = useState(true);
+	const {
+		isFetching: isCustomFiltersLoading,
+		data: customFilters = [],
+		refetch,
+	} = useQuery<FilterType[], Error>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		async () => {
+			const res = await getCustomFilters({ signal: signal || '' });
+			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
+		},
+		{
+			enabled: !!signal,
+		},
+	);
+
 	const isDynamicFilters = useMemo(() => customFilters.length > 0, [
 		customFilters,
 	]);
-	const { isFetching: isCustomFiltersLoading } = useQuery<
-		SuccessResponse<PayloadProps> | ErrorResponse,
-		Error
-	>(
-		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
-		() => getCustomFilters({ signal: signal || '' }),
-		{
-			onSuccess: (data) => {
-				if ('payload' in data && data.payload?.filters) {
-					setCustomFilters(data.payload.filters || ([] as FilterType[]));
-				}
-				setIsStale(false);
-			},
-			enabled: !!signal && isStale,
-		},
-	);
+
 	const filterConfig = useMemo(
 		() => getFilterConfig(signal, customFilters, config),
 		[config, customFilters, signal],
@@ -57,10 +50,9 @@ const useFilterConfig = ({
 	return {
 		filterConfig,
 		customFilters,
-		setCustomFilters,
 		isCustomFiltersLoading,
 		isDynamicFilters,
-		setIsStale,
+		refetchCustomFilters: refetch,
 	};
 };
 

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,15 +1,6 @@
 import '@testing-library/jest-dom';
 
-import {
-	act,
-	cleanup,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-} from '@testing-library/react';
 import { ENVIRONMENT } from 'constants/env';
-import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -18,8 +9,7 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import { USER_ROLES } from 'types/roles';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import QuickFilters from '../QuickFilters';
 import { IQuickFiltersConfig, QuickFiltersSource, SignalType } from '../types';
@@ -29,21 +19,6 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
 
-// eslint-disable-next-line sonarjs/no-duplicate-string
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
-	}),
-}));
-
-const userRole = USER_ROLES.ADMIN;
-
-// mock useAppContext
-jest.mock('providers/App/App', () => ({
-	useAppContext: jest.fn(() => ({ user: { role: userRole } })),
-}));
-
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
@@ -78,11 +53,10 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-
-		rest.get(quickFiltersAttributeValuesURL, (req, res, ctx) =>
+		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
-		rest.get(fieldsValuesURL, (req, res, ctx) =>
+		rest.get(fieldsValuesURL, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -96,14 +70,12 @@ function TestQuickFilters({
 	config?: IQuickFiltersConfig[];
 }): JSX.Element {
 	return (
-		<MockQueryClientProvider>
-			<QuickFilters
-				source={QuickFiltersSource.EXCEPTIONS}
-				config={config}
-				handleFilterVisibilityChange={handleFilterVisibilityChange}
-				signal={signal}
-			/>
-		</MockQueryClientProvider>
+		<QuickFilters
+			source={QuickFiltersSource.EXCEPTIONS}
+			config={config}
+			handleFilterVisibilityChange={handleFilterVisibilityChange}
+			signal={signal}
+		/>
 	);
 }
 
@@ -118,11 +90,11 @@ beforeAll(() => {
 
 afterEach(() => {
 	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
 afterAll(() => {
 	server.close();
-	cleanup();
 });
 
 beforeEach(() => {
@@ -151,9 +123,13 @@ describe('Quick Filters', () => {
 	});
 
 	it('should add filter data to query when checkbox is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters />);
-		const checkbox = screen.getByText('mq-kafka');
-		fireEvent.click(checkbox);
+
+		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
+		const target = await screen.findByText('mq-kafka');
+		await user.click(target);
 
 		await waitFor(() => {
 			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
@@ -182,16 +158,20 @@ describe('Quick Filters', () => {
 
 describe('Quick Filters with custom filters', () => {
 	it('loads the custom filters correctly', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters signal={SIGNAL} />);
+
 		expect(screen.getByText('Filters for')).toBeInTheDocument();
 		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
+
 		await screen.findByText(FILTER_SERVICE_NAME);
 		const allByText = await screen.findAllByText('otel-demo');
-		// since 2 filter collapse are open, there are 2 filter items visible
 		expect(allByText).toHaveLength(2);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		fireEvent.click(icon);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
 
 		expect(await screen.findByText('Edit quick filters')).toBeInTheDocument();
 
@@ -207,16 +187,19 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		fireEvent.click(icon);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
 
 		const otherFilterItem = await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME);
 		const addButton = otherFilterItem.parentElement?.querySelector('button');
 		expect(addButton).not.toBeNull();
-		fireEvent.click(addButton as HTMLButtonElement);
+		await user.click(addButton as HTMLButtonElement);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		await waitFor(() => {
@@ -225,17 +208,21 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('removes a filter from ADDED FILTERS and moves it to OTHER FILTERS', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		fireEvent.click(icon);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		await user.click(removeBtn as HTMLButtonElement);
 
 		await waitFor(() => {
 			expect(addedSection).not.toContainElement(
@@ -250,17 +237,20 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('restores original filter state on Discard', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		fireEvent.click(icon);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-		fireEvent.click(removeBtn as HTMLButtonElement);
+		await user.click(removeBtn as HTMLButtonElement);
 
 		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
 		await waitFor(() => {
@@ -272,7 +262,11 @@ describe('Quick Filters with custom filters', () => {
 			);
 		});
 
-		fireEvent.click(screen.getByText(DISCARD_TEXT));
+		const discardBtn = screen
+			.getByText(DISCARD_TEXT)
+			.closest('button') as HTMLButtonElement;
+		expect(discardBtn).not.toBeNull();
+		await user.click(discardBtn);
 
 		await waitFor(() => {
 			expect(addedSection).toContainElement(
@@ -285,18 +279,25 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('saves the updated filters by calling PUT with correct payload', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		fireEvent.click(icon);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
 
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-		fireEvent.click(removeBtn as HTMLButtonElement);
+		await user.click(removeBtn as HTMLButtonElement);
 
-		fireEvent.click(screen.getByText(SAVE_CHANGES_TEXT));
+		const saveBtn = screen
+			.getByText(SAVE_CHANGES_TEXT)
+			.closest('button') as HTMLButtonElement;
+		expect(saveBtn).not.toBeNull();
+		await user.click(saveBtn);
 
 		await waitFor(() => {
 			expect(putHandler).toHaveBeenCalled();
@@ -311,31 +312,36 @@ describe('Quick Filters with custom filters', () => {
 		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
-	// render duration filter
 	it('should render duration slider for duration_nono filter', async () => {
-		// Set up fake timers **before rendering**
+		// Use fake timers only in this test (for debounce), and wire them to userEvent
 		jest.useFakeTimers();
+		const user = userEvent.setup({
+			advanceTimers: (ms) => jest.advanceTimersByTime(ms),
+			pointerEventsCheck: 0,
+		});
 
 		const { getByTestId } = render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 		expect(screen.getByText('Duration')).toBeInTheDocument();
 
-		// click to open the duration filter
-		fireEvent.click(screen.getByText('Duration'));
+		// Open the duration section (use role if it’s a button/collapse)
+		await user.click(screen.getByText('Duration'));
 
 		const minDuration = getByTestId('min-input') as HTMLInputElement;
 		const maxDuration = getByTestId('max-input') as HTMLInputElement;
+
 		expect(minDuration).toHaveValue(null);
 		expect(minDuration).toHaveProperty('placeholder', '0');
 		expect(maxDuration).toHaveValue(null);
 		expect(maxDuration).toHaveProperty('placeholder', '100000000');
 
-		await act(async () => {
-			// set values
-			fireEvent.change(minDuration, { target: { value: '10000' } });
-			fireEvent.change(maxDuration, { target: { value: '20000' } });
-			jest.advanceTimersByTime(2000);
-		});
+		// Type values and advance debounce
+		await user.clear(minDuration);
+		await user.type(minDuration, '10000');
+		await user.clear(maxDuration);
+		await user.type(maxDuration, '20000');
+		jest.advanceTimersByTime(2000);
+
 		await waitFor(() => {
 			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -363,6 +369,144 @@ describe('Quick Filters with custom filters', () => {
 			);
 		});
 
-		jest.useRealTimers(); // Clean up
+		jest.useRealTimers();
+	});
+});
+
+describe('Quick Filters refetch behavior', () => {
+	it('fetches custom filters on every mount when signal is provided', async () => {
+		let getCalls = 0;
+
+		server.use(
+			rest.get(quickFiltersListURL, (_req, res, ctx) => {
+				getCalls += 1;
+				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
+			}),
+		);
+
+		const { unmount } = render(<TestQuickFilters signal={SIGNAL} />);
+		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
+
+		unmount();
+
+		render(<TestQuickFilters signal={SIGNAL} />);
+		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
+
+		expect(getCalls).toBe(2);
+	});
+
+	it('does not fetch custom filters when signal is undefined', async () => {
+		let getCalls = 0;
+
+		server.use(
+			rest.get(quickFiltersListURL, (_req, res, ctx) => {
+				getCalls += 1;
+				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
+			}),
+		);
+
+		render(<TestQuickFilters signal={undefined} />);
+
+		await waitFor(() => expect(getCalls).toBe(0));
+	});
+
+	it('refetches custom filters after saving settings', async () => {
+		let getCalls = 0;
+		putHandler.mockClear();
+
+		server.use(
+			rest.get(quickFiltersListURL, (_req, res, ctx) => {
+				getCalls += 1;
+				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
+			}),
+			rest.put(saveQuickFiltersURL, async (req, res, ctx) => {
+				putHandler(await req.json());
+				return res(ctx.status(200), ctx.json({}));
+			}),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<TestQuickFilters signal={SIGNAL} />);
+
+		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
+
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector(
+			'button',
+		) as HTMLButtonElement;
+		await user.click(removeBtn);
+
+		await user.click(screen.getByText(SAVE_CHANGES_TEXT));
+
+		await waitFor(() => expect(putHandler).toHaveBeenCalled());
+		await waitFor(() => expect(getCalls).toBeGreaterThanOrEqual(2));
+	});
+
+	it('renders updated filters after refetch post-save', async () => {
+		const updatedResponse = {
+			...quickFiltersListResponse,
+			data: {
+				...quickFiltersListResponse.data,
+				filters: [
+					...(quickFiltersListResponse.data.filters ?? []),
+					{
+						key: 'new.custom.filter',
+						dataType: 'string',
+						type: 'resource',
+					} as const,
+				],
+			},
+		};
+
+		let getCount = 0;
+		server.use(
+			rest.get(quickFiltersListURL, (_req, res, ctx) => {
+				getCount += 1;
+				return getCount >= 2
+					? res(ctx.status(200), ctx.json(updatedResponse))
+					: res(ctx.status(200), ctx.json(quickFiltersListResponse));
+			}),
+			rest.put(saveQuickFiltersURL, async (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json({})),
+			),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<TestQuickFilters signal={SIGNAL} />);
+
+		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
+
+		// Make a minimal change so Save button appears
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector(
+			'button',
+		) as HTMLButtonElement;
+		await user.click(removeBtn);
+
+		await user.click(screen.getByText(SAVE_CHANGES_TEXT));
+
+		await waitFor(() => {
+			expect(screen.getByText('New Custom Filter')).toBeInTheDocument();
+		});
+	});
+
+	it('shows empty state when GET fails', async () => {
+		server.use(
+			rest.get(quickFiltersListURL, (_req, res, ctx) =>
+				res(ctx.status(500), ctx.json({})),
+			),
+		);
+
+		render(<TestQuickFilters signal={SIGNAL} config={[]} />);
+
+		expect(await screen.findByText('No filters found')).toBeInTheDocument();
 	});
 });

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -22,6 +22,8 @@ jest.mock('react-router-dom', () => ({
 
 describe('Alert Channels Settings List page', () => {
 	beforeEach(async () => {
+		jest.useFakeTimers();
+		jest.setSystemTime(new Date('2023-10-20'));
 		render(<AlertChannels />);
 		await waitFor(() =>
 			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
@@ -29,6 +31,7 @@ describe('Alert Channels Settings List page', () => {
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();
+		jest.useRealTimers();
 	});
 	describe('Should display the Alert Channels page properly', () => {
 		it('Should check if "The alerts will be sent to all the configured channels." is visible ', () => {

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -28,6 +28,7 @@ jest.mock('react-router-dom', () => ({
 
 describe('Alert Channels Settings List page (Normal User)', () => {
 	beforeEach(async () => {
+		jest.useFakeTimers();
 		render(<AlertChannels />);
 		await waitFor(() =>
 			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
@@ -35,6 +36,7 @@ describe('Alert Channels Settings List page (Normal User)', () => {
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();
+		jest.useRealTimers();
 	});
 	describe('Should display the Alert Channels page properly', () => {
 		it('Should check if "The alerts will be sent to all the configured channels." is visible ', async () => {

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -9,22 +9,6 @@ import { getFormattedDate } from 'utils/timeUtils';
 
 import BillingContainer from './BillingContainer';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
@@ -67,78 +51,103 @@ describe('BillingContainer', () => {
 		expect(currentBill).toBeInTheDocument();
 	});
 
-	test('OnTrail', async () => {
-		await act(async () => {
-			render(<BillingContainer />, undefined, undefined, {
-				trialInfo: licensesSuccessResponse.data,
+	describe('Trial scenarios', () => {
+		beforeEach(() => {
+			jest.useFakeTimers();
+			jest.setSystemTime(new Date('2023-10-20'));
+		});
+
+		afterEach(() => {
+			jest.useRealTimers();
+		});
+
+		test('OnTrail', async () => {
+			// Pin "now" so trial end (20 Oct 2023) is tomorrow => "1 days_remaining"
+
+			render(
+				<BillingContainer />,
+				{},
+				{ appContextOverrides: { trialInfo: licensesSuccessResponse.data } },
+			);
+
+			// If the component schedules any setTimeout on mount, flush them:
+			jest.runOnlyPendingTimers();
+
+			expect(await screen.findByText('Free Trial')).toBeInTheDocument();
+			expect(await screen.findByText('billing')).toBeInTheDocument();
+			expect(await screen.findByText(/\$0/i)).toBeInTheDocument();
+
+			expect(
+				await screen.findByText(
+					/You are in free trial period. Your free trial will end on 20 Oct 2023/i,
+				),
+			).toBeInTheDocument();
+
+			expect(await screen.findByText(/1 days_remaining/i)).toBeInTheDocument();
+
+			const upgradeButtons = await screen.findAllByRole('button', {
+				name: /upgrade_plan/i,
 			});
+			expect(upgradeButtons).toHaveLength(2);
+			expect(upgradeButtons[1]).toBeInTheDocument();
+
+			expect(await screen.findByText(/checkout_plans/i)).toBeInTheDocument();
+			expect(
+				await screen.findByRole('link', { name: /here/i }),
+			).toBeInTheDocument();
 		});
 
-		const freeTrailText = await screen.findByText('Free Trial');
-		expect(freeTrailText).toBeInTheDocument();
-
-		const currentBill = await screen.findByText('billing');
-		expect(currentBill).toBeInTheDocument();
-
-		const dollar0 = await screen.findByText(/\$0/i);
-		expect(dollar0).toBeInTheDocument();
-		const onTrail = await screen.findByText(
-			/You are in free trial period. Your free trial will end on 20 Oct 2023/i,
-		);
-		expect(onTrail).toBeInTheDocument();
-
-		const numberOfDayRemaining = await screen.findByText(/1 days_remaining/i);
-		expect(numberOfDayRemaining).toBeInTheDocument();
-		const upgradeButton = await screen.findAllByRole('button', {
-			name: /upgrade_plan/i,
-		});
-		expect(upgradeButton[1]).toBeInTheDocument();
-		expect(upgradeButton.length).toBe(2);
-		const checkPaidPlan = await screen.findByText(/checkout_plans/i);
-		expect(checkPaidPlan).toBeInTheDocument();
-
-		const link = await screen.findByRole('link', { name: /here/i });
-		expect(link).toBeInTheDocument();
-	});
-
-	test('OnTrail but trialConvertedToSubscription', async () => {
-		await act(async () => {
-			render(<BillingContainer />, undefined, undefined, {
-				trialInfo: trialConvertedToSubscriptionResponse.data,
+		test('OnTrail but trialConvertedToSubscription', async () => {
+			await act(async () => {
+				render(
+					<BillingContainer />,
+					{},
+					{
+						appContextOverrides: {
+							trialInfo: trialConvertedToSubscriptionResponse.data,
+						},
+					},
+				);
 			});
+
+			const currentBill = await screen.findByText('billing');
+			expect(currentBill).toBeInTheDocument();
+
+			const dollar0 = await screen.findByText(/\$0/i);
+			expect(dollar0).toBeInTheDocument();
+
+			const onTrail = await screen.findByText(
+				/You are in free trial period. Your free trial will end on 20 Oct 2023/i,
+			);
+			expect(onTrail).toBeInTheDocument();
+
+			const receivedCardDetails = await screen.findByText(
+				/card_details_recieved_and_billing_info/i,
+			);
+			expect(receivedCardDetails).toBeInTheDocument();
+
+			const manageBillingButton = await screen.findByRole('button', {
+				name: /manage_billing/i,
+			});
+			expect(manageBillingButton).toBeInTheDocument();
+
+			const dayRemainingInBillingPeriod = await screen.findByText(
+				/1 days_remaining/i,
+			);
+			expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 		});
-
-		const currentBill = await screen.findByText('billing');
-		expect(currentBill).toBeInTheDocument();
-
-		const dollar0 = await screen.findByText(/\$0/i);
-		expect(dollar0).toBeInTheDocument();
-
-		const onTrail = await screen.findByText(
-			/You are in free trial period. Your free trial will end on 20 Oct 2023/i,
-		);
-		expect(onTrail).toBeInTheDocument();
-
-		const receivedCardDetails = await screen.findByText(
-			/card_details_recieved_and_billing_info/i,
-		);
-		expect(receivedCardDetails).toBeInTheDocument();
-
-		const manageBillingButton = await screen.findByRole('button', {
-			name: /manage_billing/i,
-		});
-		expect(manageBillingButton).toBeInTheDocument();
-
-		const dayRemainingInBillingPeriod = await screen.findByText(
-			/1 days_remaining/i,
-		);
-		expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 	});
 
 	test('Not on ontrail', async () => {
-		const { findByText } = render(<BillingContainer />, undefined, undefined, {
-			trialInfo: notOfTrailResponse.data,
-		});
+		const { findByText } = render(
+			<BillingContainer />,
+			{},
+			{
+				appContextOverrides: {
+					trialInfo: notOfTrailResponse.data,
+				},
+			},
+		);
 
 		const billingPeriodText = `Your current billing period is from ${getFormattedDate(
 			billingSuccessResponse.data.billingPeriodStart,

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -1,7 +1,6 @@
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
 import CreateAlertPage from 'pages/CreateAlert';
-import { MemoryRouter, Route } from 'react-router-dom';
 import { act, fireEvent, render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
@@ -14,20 +13,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
@@ -84,11 +69,11 @@ describe('Alert rule documentation redirection', () => {
 	beforeEach(() => {
 		act(() => {
 			renderResult = render(
-				<MemoryRouter initialEntries={['/alerts/new']}>
-					<Route path={ROUTES.ALERTS_NEW}>
-						<CreateAlertPage />
-					</Route>
-				</MemoryRouter>,
+				<CreateAlertPage />,
+				{},
+				{
+					initialRoute: ROUTES.ALERTS_NEW,
+				},
 			);
 		});
 	});

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -15,20 +15,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -0,0 +1,51 @@
+import './styles.scss';
+
+import { Switch, Tooltip, Typography } from 'antd';
+import { Info } from 'lucide-react';
+import { useState } from 'react';
+
+import { IAdvancedOptionItemProps } from '../types';
+
+function AdvancedOptionItem({
+	title,
+	description,
+	input,
+	tooltipText,
+	onToggle,
+}: IAdvancedOptionItemProps): JSX.Element {
+	const [showInput, setShowInput] = useState<boolean>(false);
+
+	const handleOnToggle = (): void => {
+		onToggle?.();
+		setShowInput((currentShowInput) => !currentShowInput);
+	};
+
+	return (
+		<div className="advanced-option-item">
+			<div className="advanced-option-item-left-content">
+				<Typography.Text className="advanced-option-item-title">
+					{title}
+					{tooltipText && (
+						<Tooltip title={tooltipText}>
+							<Info data-testid="tooltip-icon" size={16} />
+						</Tooltip>
+					)}
+				</Typography.Text>
+				<Typography.Text className="advanced-option-item-description">
+					{description}
+				</Typography.Text>
+			</div>
+			<div className="advanced-option-item-right-content">
+				<div
+					className="advanced-option-item-input"
+					style={{ display: showInput ? 'block' : 'none' }}
+				>
+					{input}
+				</div>
+				<Switch onChange={handleOnToggle} />
+			</div>
+		</div>
+	);
+}
+
+export default AdvancedOptionItem;

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/index.ts

@@ -0,0 +1,3 @@
+import AdvancedOptionItem from './AdvancedOptionItem';
+
+export default AdvancedOptionItem;

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -0,0 +1,250 @@
+.advanced-option-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	padding: 16px;
+	border-bottom: 1px solid var(--bg-slate-500);
+
+	.advanced-option-item-left-content {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+
+		.advanced-option-item-title {
+			color: var(--bg-vanilla-300);
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 500;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.advanced-option-item-description {
+			color: var(--bg-vanilla-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+		}
+
+		.advanced-option-item-input {
+			margin-top: 16px;
+
+			.ant-input {
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-400);
+				color: var(--bg-vanilla-100);
+				height: 32px;
+
+				&::placeholder {
+					font-family: 'Space Mono';
+				}
+
+				&:hover {
+					border-color: var(--bg-vanilla-300);
+				}
+
+				&:focus {
+					border-color: var(--bg-vanilla-300);
+					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+				}
+			}
+
+			.ant-select {
+				.ant-select-selector {
+					background-color: var(--bg-ink-400);
+					border: 1px solid var(--bg-slate-400);
+					color: var(--bg-vanilla-100);
+					height: 32px;
+
+					&:hover {
+						border-color: var(--bg-vanilla-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-vanilla-300);
+						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+					}
+
+					.ant-select-selection-placeholder {
+						font-family: 'Space Mono';
+					}
+				}
+
+				.ant-select-selection-item {
+					color: var(--bg-vanilla-100);
+				}
+
+				.ant-select-arrow {
+					color: var(--bg-vanilla-400);
+				}
+			}
+		}
+	}
+
+	.advanced-option-item-right-content {
+		display: flex;
+		align-items: flex-start;
+		gap: 16px;
+
+		.advanced-option-item-input-group {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.ant-input {
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-400);
+				color: var(--bg-vanilla-100);
+
+				&:hover {
+					border-color: var(--bg-vanilla-300);
+				}
+
+				&:focus {
+					border-color: var(--bg-vanilla-300);
+					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+				}
+			}
+
+			.ant-select {
+				.ant-select-selector {
+					background-color: var(--bg-ink-400);
+					color: var(--bg-vanilla-100);
+					height: 32px;
+					border: 1px solid var(--bg-slate-400);
+
+					.ant-select-selection-placeholder {
+						font-family: 'Space Mono';
+					}
+				}
+
+				.ant-select-selection-item {
+					color: var(--bg-vanilla-100);
+				}
+
+				.ant-select-arrow {
+					color: var(--bg-vanilla-400);
+				}
+			}
+		}
+
+		.advanced-option-item-button {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			background-color: var(--bg-ink-200);
+			border: 1px solid var(--bg-slate-400);
+			color: var(--bg-vanilla-400);
+			border-radius: 4px;
+		}
+	}
+}
+
+.lightMode {
+	.advanced-option-item {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.advanced-option-item-left-content {
+			.advanced-option-item-title {
+				color: var(--bg-ink-300);
+			}
+
+			.advanced-option-item-description {
+				color: var(--bg-ink-400);
+			}
+
+			.advanced-option-item-input {
+				.ant-input {
+					background-color: var(--bg-vanilla-200);
+					border: 1px solid var(--bg-vanilla-300);
+					color: var(--bg-ink-400);
+
+					&:hover {
+						border-color: var(--bg-ink-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-ink-300);
+						box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+					}
+				}
+
+				.ant-select {
+					.ant-select-selector {
+						background-color: var(--bg-vanilla-200);
+						border: 1px solid var(--bg-vanilla-300);
+						color: var(--bg-ink-400);
+
+						&:hover {
+							border-color: var(--bg-ink-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-ink-300);
+							box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+						}
+					}
+
+					.ant-select-selection-item {
+						color: var(--bg-ink-400);
+					}
+
+					.ant-select-arrow {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+
+		.advanced-option-item-right-content {
+			.advanced-option-item-input-group {
+				.ant-input {
+					background-color: var(--bg-vanilla-200);
+					border: 1px solid var(--bg-vanilla-300);
+					color: var(--bg-ink-400);
+
+					&:hover {
+						border-color: var(--bg-ink-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-ink-300);
+						box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+					}
+				}
+
+				.ant-select {
+					.ant-select-selector {
+						background-color: var(--bg-vanilla-200);
+						color: var(--bg-ink-400);
+						border: 1px solid var(--bg-vanilla-300);
+
+						&:hover {
+							border-color: var(--bg-ink-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-ink-300);
+							box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+						}
+					}
+
+					.ant-select-selection-item {
+						color: var(--bg-ink-400);
+					}
+
+					.ant-select-arrow {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+
+			.advanced-option-item-button {
+				background-color: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -0,0 +1,104 @@
+import { Button, Typography } from 'antd';
+import { useCreateAlertState } from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';
+import { Calendar1, Edit, Trash } from 'lucide-react';
+import { useMemo } from 'react';
+
+function EditCustomSchedule({
+	setIsEvaluationCadenceDetailsVisible,
+	setIsPreviewVisible,
+}: IEditCustomScheduleProps): JSX.Element {
+	const { advancedOptions, setAdvancedOptions } = useCreateAlertState();
+
+	const displayText = useMemo(() => {
+		if (advancedOptions.evaluationCadence.mode === 'custom') {
+			return (
+				<Typography.Text>
+					<Typography.Text>Every</Typography.Text>
+					<Typography.Text className="highlight">
+						{advancedOptions.evaluationCadence.custom.repeatEvery
+							.charAt(0)
+							.toUpperCase() +
+							advancedOptions.evaluationCadence.custom.repeatEvery.slice(1)}
+					</Typography.Text>
+					{advancedOptions.evaluationCadence.custom.repeatEvery !== 'day' && (
+						<>
+							<Typography.Text>on</Typography.Text>
+							<Typography.Text className="highlight">
+								{advancedOptions.evaluationCadence.custom.occurence
+									.map(
+										(occurence) => occurence.charAt(0).toUpperCase() + occurence.slice(1),
+									)
+									.join(', ')}
+							</Typography.Text>
+						</>
+					)}
+					<Typography.Text>at</Typography.Text>
+					<Typography.Text className="highlight">
+						{advancedOptions.evaluationCadence.custom.startAt}
+					</Typography.Text>
+				</Typography.Text>
+			);
+		}
+		return (
+			<Typography.Text>
+				<Typography.Text>Starting on</Typography.Text>
+				<Typography.Text className="highlight">
+					{advancedOptions.evaluationCadence.rrule.date?.format('DD/MM/YYYY')}
+				</Typography.Text>
+				<Typography.Text>at</Typography.Text>
+				<Typography.Text className="highlight">
+					{advancedOptions.evaluationCadence.rrule.startAt}
+				</Typography.Text>
+			</Typography.Text>
+		);
+	}, [advancedOptions.evaluationCadence]);
+
+	const handleEdit = (): void => {
+		setIsEvaluationCadenceDetailsVisible(true);
+	};
+
+	const handlePreview = (): void => {
+		setIsPreviewVisible(true);
+	};
+
+	const handleDiscard = (): void => {
+		setIsEvaluationCadenceDetailsVisible(false);
+		setAdvancedOptions({
+			type: 'SET_EVALUATION_CADENCE',
+			payload: INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+		});
+		setAdvancedOptions({
+			type: 'SET_EVALUATION_CADENCE_MODE',
+			payload: 'default',
+		});
+	};
+
+	return (
+		<div className="edit-custom-schedule">
+			{displayText}
+			<div className="button-row">
+				<Button.Group>
+					<Button type="default" onClick={handleEdit}>
+						<Edit size={12} />
+						<Typography.Text>Edit custom schedule</Typography.Text>
+					</Button>
+					<Button type="default" onClick={handlePreview}>
+						<Calendar1 size={12} />
+						<Typography.Text>Preview</Typography.Text>
+					</Button>
+					<Button
+						data-testid="discard-button"
+						type="default"
+						onClick={handleDiscard}
+					>
+						<Trash size={12} />
+					</Button>
+				</Button.Group>
+			</div>
+		</div>
+	);
+}
+
+export default EditCustomSchedule;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -0,0 +1,134 @@
+import './styles.scss';
+import '../AdvancedOptionItem/styles.scss';
+
+import { Button, Input, Select, Tooltip, Typography } from 'antd';
+import { Info, Plus } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { useCreateAlertState } from '../../context';
+import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
+import EditCustomSchedule from './EditCustomSchedule';
+import EvaluationCadenceDetails from './EvaluationCadenceDetails';
+import EvaluationCadencePreview from './EvaluationCadencePreview';
+
+function EvaluationCadence(): JSX.Element {
+	const { advancedOptions, setAdvancedOptions } = useCreateAlertState();
+
+	const [
+		isEvaluationCadenceDetailsVisible,
+		setIsEvaluationCadenceDetailsVisible,
+	] = useState(false);
+	const [
+		isCustomScheduleButtonVisible,
+		setIsCustomScheduleButtonVisible,
+	] = useState(true);
+	const [
+		isEvaluationCadencePreviewVisible,
+		setIsEvaluationCadencePreviewVisible,
+	] = useState(false);
+	const [isEditCustomScheduleVisible, setIsEditCustomScheduleVisible] = useState(
+		() => advancedOptions.evaluationCadence.mode !== 'default',
+	);
+
+	useEffect(() => {
+		setIsEditCustomScheduleVisible(
+			advancedOptions.evaluationCadence.mode !== 'default',
+		);
+	}, [advancedOptions.evaluationCadence.mode]);
+
+	const showCustomSchedule = (): void => {
+		setIsEvaluationCadenceDetailsVisible(true);
+		setIsCustomScheduleButtonVisible(false);
+	};
+
+	return (
+		<div className="evaluation-cadence-container">
+			<div className="advanced-option-item evaluation-cadence-item">
+				<div className="advanced-option-item-left-content">
+					<Typography.Text className="advanced-option-item-title">
+						How often to check
+						<Tooltip title="Controls how frequently the alert evaluates your conditions. For most alerts, 1-5 minutes is sufficient.">
+							<Info data-testid="evaluation-cadence-tooltip-icon" size={16} />
+						</Tooltip>
+					</Typography.Text>
+					<Typography.Text className="advanced-option-item-description">
+						How frequently this alert checks your data. Default: Every 1 minute
+					</Typography.Text>
+				</div>
+				{isCustomScheduleButtonVisible && (
+					<div
+						className="advanced-option-item-right-content"
+						data-testid="evaluation-cadence-input-group"
+					>
+						<Input.Group className="advanced-option-item-input-group">
+							<Input
+								type="number"
+								placeholder="Enter time"
+								style={{ width: 180 }}
+								value={advancedOptions.evaluationCadence.default.value}
+								onChange={(value): void =>
+									setAdvancedOptions({
+										type: 'SET_EVALUATION_CADENCE',
+										payload: {
+											...advancedOptions.evaluationCadence,
+											default: {
+												...advancedOptions.evaluationCadence.default,
+												value: Number(value.target.value),
+											},
+										},
+									})
+								}
+							/>
+							<Select
+								options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+								placeholder="Select time unit"
+								style={{ width: 120 }}
+								value={advancedOptions.evaluationCadence.default.timeUnit}
+								onChange={(value): void =>
+									setAdvancedOptions({
+										type: 'SET_EVALUATION_CADENCE',
+										payload: {
+											...advancedOptions.evaluationCadence,
+											default: {
+												...advancedOptions.evaluationCadence.default,
+												timeUnit: value,
+											},
+										},
+									})
+								}
+							/>
+						</Input.Group>
+						<Button
+							className="advanced-option-item-button"
+							onClick={showCustomSchedule}
+						>
+							<Plus size={12} />
+							<Typography.Text>Add custom schedule</Typography.Text>
+						</Button>
+					</div>
+				)}
+			</div>
+			{isEditCustomScheduleVisible && (
+				<EditCustomSchedule
+					setIsEvaluationCadenceDetailsVisible={setIsEvaluationCadenceDetailsVisible}
+					setIsPreviewVisible={setIsEvaluationCadencePreviewVisible}
+				/>
+			)}
+			{isEvaluationCadenceDetailsVisible && (
+				<EvaluationCadenceDetails
+					isOpen={isEvaluationCadenceDetailsVisible}
+					setIsOpen={setIsEvaluationCadenceDetailsVisible}
+					setIsCustomScheduleButtonVisible={setIsCustomScheduleButtonVisible}
+				/>
+			)}
+			{isEvaluationCadencePreviewVisible && (
+				<EvaluationCadencePreview
+					isOpen={isEvaluationCadencePreviewVisible}
+					setIsOpen={setIsEvaluationCadencePreviewVisible}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default EvaluationCadence;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -0,0 +1,347 @@
+import { Button, DatePicker, Select, Typography } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import classNames from 'classnames';
+import { useCreateAlertState } from 'container/CreateAlertV2/context';
+import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';
+import dayjs from 'dayjs';
+import { Code, Edit3Icon } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import {
+	EVALUATION_CADENCE_REPEAT_EVERY_MONTH_OPTIONS,
+	EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS,
+	EVALUATION_CADENCE_REPEAT_EVERY_WEEK_OPTIONS,
+	TIMEZONE_DATA,
+} from '../constants';
+import TimeInput from '../TimeInput';
+import { IEvaluationCadenceDetailsProps } from '../types';
+import {
+	buildAlertScheduleFromCustomSchedule,
+	buildAlertScheduleFromRRule,
+	isValidRRule,
+} from '../utils';
+import { ScheduleList } from './EvaluationCadencePreview';
+
+function EvaluationCadenceDetails({
+	setIsOpen,
+	setIsCustomScheduleButtonVisible,
+}: IEvaluationCadenceDetailsProps): JSX.Element {
+	const { advancedOptions, setAdvancedOptions } = useCreateAlertState();
+	const [evaluationCadence, setEvaluationCadence] = useState<
+		AdvancedOptionsState['evaluationCadence']
+	>({
+		...advancedOptions.evaluationCadence,
+		mode: 'custom',
+		custom: {
+			...advancedOptions.evaluationCadence.custom,
+			startAt: dayjs().format('HH:mm:ss'),
+		},
+		rrule: {
+			...advancedOptions.evaluationCadence.rrule,
+			startAt: dayjs().format('HH:mm:ss'),
+		},
+	});
+
+	const [searchTimezoneString, setSearchTimezoneString] = useState('');
+	const [occurenceSearchString, setOccurenceSearchString] = useState('');
+	const [repeatEverySearchString, setRepeatEverySearchString] = useState('');
+
+	const tabs = [
+		{
+			label: 'Editor',
+			icon: <Edit3Icon size={14} />,
+			value: 'editor',
+		},
+		{
+			label: 'RRule',
+			icon: <Code size={14} />,
+			value: 'rrule',
+		},
+	];
+	const [activeTab, setActiveTab] = useState<'editor' | 'rrule'>(() =>
+		evaluationCadence.mode === 'custom' ? 'editor' : 'rrule',
+	);
+
+	const occurenceOptions =
+		evaluationCadence.custom.repeatEvery === 'week'
+			? EVALUATION_CADENCE_REPEAT_EVERY_WEEK_OPTIONS
+			: EVALUATION_CADENCE_REPEAT_EVERY_MONTH_OPTIONS;
+
+	useEffect(() => {
+		if (!evaluationCadence.custom.occurence.length) {
+			const today = new Date();
+			const dayOfWeek = today.getDay();
+			const dayOfMonth = today.getDate();
+
+			const occurence =
+				evaluationCadence.custom.repeatEvery === 'week'
+					? EVALUATION_CADENCE_REPEAT_EVERY_WEEK_OPTIONS[dayOfWeek].value
+					: dayOfMonth.toString();
+
+			setEvaluationCadence({
+				...evaluationCadence,
+				custom: {
+					...evaluationCadence.custom,
+					occurence: [occurence],
+				},
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [evaluationCadence.custom.repeatEvery]);
+
+	const EditorView = (
+		<div className="editor-view" data-testid="editor-view">
+			<div className="select-group">
+				<Typography.Text>REPEAT EVERY</Typography.Text>
+				<Select
+					options={EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS}
+					value={evaluationCadence.custom.repeatEvery || null}
+					onChange={(value): void =>
+						setEvaluationCadence({
+							...evaluationCadence,
+							custom: {
+								...evaluationCadence.custom,
+								repeatEvery: value,
+								occurence: [],
+							},
+						})
+					}
+					placeholder="Select repeat every"
+					showSearch
+					searchValue={repeatEverySearchString}
+					onSearch={setRepeatEverySearchString}
+				/>
+			</div>
+			{evaluationCadence.custom.repeatEvery !== 'day' && (
+				<div className="select-group">
+					<Typography.Text>ON DAY(S)</Typography.Text>
+					<Select
+						options={occurenceOptions}
+						value={evaluationCadence.custom.occurence || null}
+						mode="multiple"
+						onChange={(value): void =>
+							setEvaluationCadence({
+								...evaluationCadence,
+								custom: {
+									...evaluationCadence.custom,
+									occurence: value,
+								},
+							})
+						}
+						placeholder="Select day(s)"
+						showSearch
+						searchValue={occurenceSearchString}
+						onSearch={setOccurenceSearchString}
+					/>
+				</div>
+			)}
+			<div className="select-group">
+				<Typography.Text>AT</Typography.Text>
+				<TimeInput
+					value={evaluationCadence.custom.startAt}
+					onChange={(value): void =>
+						setEvaluationCadence({
+							...evaluationCadence,
+							custom: {
+								...evaluationCadence.custom,
+								startAt: value,
+							},
+						})
+					}
+				/>
+			</div>
+			<div className="select-group">
+				<Typography.Text>TIMEZONE</Typography.Text>
+				<Select
+					options={TIMEZONE_DATA}
+					value={evaluationCadence.custom.timezone || null}
+					onChange={(value): void =>
+						setEvaluationCadence({
+							...evaluationCadence,
+							custom: {
+								...evaluationCadence.custom,
+								timezone: value,
+							},
+						})
+					}
+					placeholder="Select timezone"
+					onSearch={setSearchTimezoneString}
+					searchValue={searchTimezoneString}
+					showSearch
+				/>
+			</div>
+		</div>
+	);
+
+	const RRuleView = (
+		<div className="rrule-view" data-testid="rrule-view">
+			<div className="select-group">
+				<Typography.Text>STARTING ON</Typography.Text>
+				<DatePicker
+					value={evaluationCadence.rrule.date}
+					onChange={(value): void =>
+						setEvaluationCadence({
+							...evaluationCadence,
+							rrule: {
+								...evaluationCadence.rrule,
+								date: value,
+							},
+						})
+					}
+					placeholder="Select date"
+				/>
+			</div>
+			<div className="select-group">
+				<Typography.Text>AT</Typography.Text>
+				<TimeInput
+					value={evaluationCadence.rrule.startAt}
+					onChange={(value): void =>
+						setEvaluationCadence({
+							...evaluationCadence,
+							rrule: {
+								...evaluationCadence.rrule,
+								startAt: value,
+							},
+						})
+					}
+				/>
+			</div>
+			<TextArea
+				value={evaluationCadence.rrule.rrule}
+				placeholder="Enter RRule"
+				onChange={(value): void =>
+					setEvaluationCadence({
+						...evaluationCadence,
+						rrule: {
+							...evaluationCadence.rrule,
+							rrule: value.target.value,
+						},
+					})
+				}
+			/>
+		</div>
+	);
+
+	const handleDiscard = (): void => {
+		setIsOpen(false);
+		setIsCustomScheduleButtonVisible(true);
+	};
+
+	const handleSaveCustomSchedule = (): void => {
+		setAdvancedOptions({
+			type: 'SET_EVALUATION_CADENCE',
+			payload: {
+				...advancedOptions.evaluationCadence,
+				custom: evaluationCadence.custom,
+				rrule: evaluationCadence.rrule,
+			},
+		});
+		setAdvancedOptions({
+			type: 'SET_EVALUATION_CADENCE_MODE',
+			payload: evaluationCadence.mode,
+		});
+		setIsOpen(false);
+	};
+
+	const disableSaveButton = useMemo(() => {
+		if (activeTab === 'editor') {
+			if (evaluationCadence.custom.repeatEvery === 'day') {
+				return (
+					!evaluationCadence.custom.repeatEvery ||
+					!evaluationCadence.custom.startAt ||
+					!evaluationCadence.custom.timezone
+				);
+			}
+			return (
+				!evaluationCadence.custom.repeatEvery ||
+				!evaluationCadence.custom.occurence.length ||
+				!evaluationCadence.custom.startAt ||
+				!evaluationCadence.custom.timezone
+			);
+		}
+		return (
+			!evaluationCadence.rrule.rrule ||
+			!evaluationCadence.rrule.date ||
+			!evaluationCadence.rrule.startAt ||
+			!isValidRRule(evaluationCadence.rrule.rrule)
+		);
+	}, [evaluationCadence, activeTab]);
+
+	const schedule = useMemo(() => {
+		if (activeTab === 'rrule') {
+			return buildAlertScheduleFromRRule(
+				evaluationCadence.rrule.rrule,
+				evaluationCadence.rrule.date,
+				evaluationCadence.rrule.startAt,
+				15,
+			);
+		}
+		return buildAlertScheduleFromCustomSchedule(
+			evaluationCadence.custom.repeatEvery,
+			evaluationCadence.custom.occurence,
+			evaluationCadence.custom.startAt,
+			15,
+		);
+	}, [evaluationCadence, activeTab]);
+
+	const handleChangeTab = (tab: 'editor' | 'rrule'): void => {
+		setActiveTab(tab);
+		const mode = tab === 'editor' ? 'custom' : 'rrule';
+		setEvaluationCadence({
+			...evaluationCadence,
+			mode,
+		});
+	};
+
+	return (
+		<div className="evaluation-cadence-details">
+			<Typography.Text className="evaluation-cadence-details-title">
+				Add Custom Schedule
+			</Typography.Text>
+			<div className="evaluation-cadence-details-content">
+				<div className="evaluation-cadence-details-content-row">
+					<div className="query-section-tabs">
+						<div className="query-section-query-actions">
+							{tabs.map((tab) => (
+								<Button
+									key={tab.value}
+									className={classNames('list-view-tab', 'explorer-view-option', {
+										'active-tab': activeTab === tab.value,
+									})}
+									onClick={(): void => {
+										handleChangeTab(tab.value as 'editor' | 'rrule');
+									}}
+								>
+									{tab.icon}
+									{tab.label}
+								</Button>
+							))}
+						</div>
+					</div>
+					{activeTab === 'editor' && EditorView}
+					{activeTab === 'rrule' && RRuleView}
+					<div className="buttons-row">
+						<Button type="default" onClick={handleDiscard}>
+							Discard
+						</Button>
+						<Button
+							type="primary"
+							onClick={handleSaveCustomSchedule}
+							disabled={disableSaveButton}
+						>
+							Save Custom Schedule
+						</Button>
+					</div>
+				</div>
+				<div className="evaluation-cadence-details-content-row">
+					<ScheduleList
+						schedule={schedule}
+						currentTimezone={evaluationCadence.custom.timezone}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default EvaluationCadenceDetails;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadencePreview.tsx

@@ -0,0 +1,118 @@
+import { Modal, Typography } from 'antd';
+import { Calendar, Info } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { useCreateAlertState } from '../../context';
+import { TIMEZONE_DATA } from '../constants';
+import { IEvaluationCadencePreviewProps, IScheduleListProps } from '../types';
+import {
+	buildAlertScheduleFromCustomSchedule,
+	buildAlertScheduleFromRRule,
+} from '../utils';
+
+export function ScheduleList({
+	schedule,
+	currentTimezone,
+}: IScheduleListProps): JSX.Element {
+	if (schedule && schedule.length > 0) {
+		return (
+			<div className="schedule-preview" data-testid="schedule-preview">
+				<div className="schedule-preview-header">
+					<Calendar size={16} />
+					<Typography.Text className="schedule-preview-title">
+						Schedule Preview
+					</Typography.Text>
+				</div>
+				<div className="schedule-preview-list">
+					{schedule.map((date) => (
+						<div key={date.toISOString()} className="schedule-preview-item">
+							<div className="schedule-preview-timeline">
+								<div className="schedule-preview-timeline-line" />
+							</div>
+							<div className="schedule-preview-content">
+								<div className="schedule-preview-date">
+									{date.toLocaleDateString('en-US', {
+										weekday: 'short',
+										month: 'short',
+										day: 'numeric',
+									})}
+									,{' '}
+									{date.toLocaleTimeString('en-US', {
+										hour12: false,
+										hour: '2-digit',
+										minute: '2-digit',
+										second: '2-digit',
+									})}
+								</div>
+								<div className="schedule-preview-separator" />
+								<div className="schedule-preview-timezone">
+									{
+										TIMEZONE_DATA.find((timezone) => timezone.value === currentTimezone)
+											?.label
+									}
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="no-schedule" data-testid="no-schedule">
+			<Info size={32} />
+			<Typography.Text>
+				Please fill the relevant information to generate a schedule
+			</Typography.Text>
+		</div>
+	);
+}
+
+function EvaluationCadencePreview({
+	isOpen,
+	setIsOpen,
+}: IEvaluationCadencePreviewProps): JSX.Element {
+	const { advancedOptions } = useCreateAlertState();
+
+	const schedule = useMemo(() => {
+		if (advancedOptions.evaluationCadence.mode === 'rrule') {
+			return buildAlertScheduleFromRRule(
+				advancedOptions.evaluationCadence.rrule.rrule,
+				advancedOptions.evaluationCadence.rrule.date,
+				advancedOptions.evaluationCadence.rrule.startAt,
+				15,
+			);
+		}
+		return buildAlertScheduleFromCustomSchedule(
+			advancedOptions.evaluationCadence.custom.repeatEvery,
+			advancedOptions.evaluationCadence.custom.occurence,
+			advancedOptions.evaluationCadence.custom.startAt,
+			15,
+		);
+	}, [advancedOptions.evaluationCadence]);
+
+	return (
+		<Modal
+			open={isOpen}
+			onCancel={(): void => setIsOpen(false)}
+			footer={null}
+			className="evaluation-cadence-preview-modal"
+			width={800}
+			centered
+		>
+			<div className="evaluation-cadence-details evaluation-cadence-preview">
+				<div className="evaluation-cadence-details-content">
+					<div className="evaluation-cadence-details-content-row">
+						<ScheduleList
+							schedule={schedule}
+							currentTimezone={advancedOptions.evaluationCadence.custom.timezone}
+						/>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+export default EvaluationCadencePreview;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/index.ts

@@ -0,0 +1,5 @@
+import './styles.scss';
+
+import EvaluationCadence from './EvaluationCadence';
+
+export default EvaluationCadence;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -0,0 +1,700 @@
+.evaluation-cadence-container {
+	border-bottom: 1px solid var(--bg-slate-500);
+	.evaluation-cadence-item {
+		border-bottom: none !important;
+	}
+
+	.edit-custom-schedule {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 16px;
+
+		.ant-typography {
+			color: var(--bg-vanilla-100);
+			font-size: 13px;
+
+			.highlight {
+				background-color: var(--bg-slate-500);
+				padding: 4px 8px;
+				border-radius: 4px;
+				color: var(--bg-vanilla-400);
+				font-weight: 500;
+				margin: 0 4px;
+				font-size: 14px;
+			}
+		}
+
+		.ant-btn-group {
+			.ant-btn {
+				border: 1px solid var(--bg-slate-400);
+				color: var(--bg-vanilla-400);
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+		}
+	}
+}
+
+.evaluation-cadence-details {
+	margin: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	border: 1px solid var(--bg-slate-500);
+
+	.evaluation-cadence-details-title {
+		color: var(--bg-vanilla-100);
+		font-size: 14px;
+		font-weight: 500;
+		padding-left: 16px;
+		padding-top: 16px;
+	}
+
+	.query-section-tabs {
+		display: flex;
+		align-items: center;
+
+		.query-section-query-actions {
+			display: flex;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			flex-direction: row;
+			border-bottom: none;
+			margin-bottom: -1px;
+
+			.explorer-view-option {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: row;
+				border: none;
+				padding: 9px;
+				box-shadow: none;
+				border-radius: 0px;
+				border-left: 0.5px solid var(--bg-slate-400);
+				border-bottom: 0.5px solid var(--bg-slate-400);
+				width: 120px;
+				height: 36px;
+
+				gap: 8px;
+
+				&.active-tab {
+					background-color: var(--bg-ink-500);
+					border-bottom: none;
+
+					&:hover {
+						background-color: var(--bg-ink-500) !important;
+					}
+				}
+
+				&:disabled {
+					background-color: var(--bg-ink-300);
+					opacity: 0.6;
+				}
+
+				&:first-child {
+					border-left: 1px solid transparent;
+				}
+
+				&:hover {
+					background-color: transparent !important;
+					border-left: 1px solid transparent !important;
+					color: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+
+	.evaluation-cadence-details-content {
+		display: flex;
+		gap: 16px;
+		border-top: 1px solid var(--bg-slate-500);
+		padding: 16px;
+
+		.evaluation-cadence-details-content-row {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			flex: 1;
+			height: 500px;
+			overflow-y: scroll;
+			padding-right: 16px;
+
+			.editor-view,
+			.rrule-view {
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+
+				textarea {
+					height: 200px;
+					background: var(--bg-ink-300);
+					border: 1px solid var(--bg-slate-400);
+					border-radius: 4px;
+					color: var(--bg-vanilla-400) !important;
+					font-family: 'Space Mono';
+					font-size: 14px;
+
+					&::placeholder {
+						font-family: 'Space Mono';
+						color: var(--bg-vanilla-400) !important;
+					}
+				}
+
+				.select-group {
+					display: flex;
+					flex-direction: column;
+					gap: 4px;
+
+					.ant-typography {
+						color: var(--bg-vanilla-100);
+						font-size: 13px;
+						font-weight: 500;
+					}
+
+					.ant-select {
+						border: 1px solid var(--bg-slate-400);
+
+						.ant-select-selector {
+							background-color: var(--bg-ink-300);
+							border: 1px solid var(--bg-slate-400);
+							color: var(--bg-vanilla-100);
+						}
+					}
+
+					.ant-picker {
+						background-color: var(--bg-ink-300);
+						border: 1px solid var(--bg-slate-400);
+
+						.ant-picker-input {
+							background-color: var(--bg-ink-300);
+							color: var(--bg-vanilla-100);
+						}
+					}
+				}
+			}
+
+			.buttons-row {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin-top: 16px;
+			}
+
+			.no-schedule {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				gap: 8px;
+				height: 100%;
+				color: var(--bg-vanilla-100);
+				font-size: 14px;
+			}
+
+			.schedule-preview {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				flex: 1;
+				min-height: 0;
+
+				.schedule-preview-header {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					padding: 8px 0;
+					background-color: var(--bg-ink-400);
+					position: sticky;
+					top: 0;
+					z-index: 1;
+					border-bottom: 1px solid var(--bg-slate-500);
+
+					.schedule-preview-title {
+						color: var(--bg-vanilla-300);
+						font-size: 14px;
+						font-weight: 500;
+					}
+				}
+
+				.schedule-preview-list {
+					display: flex;
+					flex-direction: column;
+					gap: 0;
+					flex: 1;
+					overflow-y: auto;
+					padding-top: 8px;
+
+					&::-webkit-scrollbar {
+						width: 0.1rem;
+					}
+
+					&::-webkit-scrollbar-track {
+						background: transparent;
+					}
+
+					&::-webkit-scrollbar-thumb {
+						background: var(--bg-slate-300);
+					}
+
+					&::-webkit-scrollbar-thumb:hover {
+						background: var(--bg-slate-200);
+					}
+
+					.schedule-preview-item {
+						display: flex;
+						align-items: center;
+						gap: 12px;
+						padding: 8px 0;
+
+						.schedule-preview-timeline {
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							min-width: 20px;
+
+							.schedule-preview-timeline-line {
+								width: 1px;
+								height: 20px;
+								background-color: var(--bg-slate-400);
+							}
+						}
+
+						.schedule-preview-content {
+							display: flex;
+							align-items: center;
+							gap: 12px;
+							flex: 1;
+
+							.schedule-preview-date {
+								color: var(--bg-vanilla-300);
+								font-size: 14px;
+								font-weight: 400;
+								white-space: nowrap;
+							}
+
+							.schedule-preview-separator {
+								flex: 1;
+								height: 1px;
+								border-top: 1px dashed var(--bg-slate-400);
+							}
+
+							.schedule-preview-timezone {
+								color: var(--bg-vanilla-400);
+								font-size: 12px;
+								font-weight: 400;
+								white-space: nowrap;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.ant-picker-date-panel {
+	background-color: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-300);
+}
+
+.ant-picker-date-panel-layout {
+	background-color: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-300);
+}
+
+.ant-picker-date-panel-header {
+	background-color: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-300);
+}
+
+// Custom modal styles for preview
+.evaluation-cadence-preview-modal {
+	.ant-modal-content {
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-500);
+		border-radius: 8px;
+	}
+
+	.ant-modal-header {
+		background-color: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);
+		padding: 16px 20px;
+
+		.ant-modal-title {
+			color: var(--bg-vanilla-100);
+			font-size: 16px;
+			font-weight: 600;
+		}
+	}
+
+	.ant-modal-close {
+		color: var(--bg-vanilla-400);
+		top: 16px;
+		right: 20px;
+
+		&:hover {
+			color: var(--bg-vanilla-100);
+		}
+	}
+
+	.ant-modal-body {
+		padding: 0;
+		background-color: var(--bg-ink-400);
+	}
+
+	.evaluation-cadence-details {
+		border: none;
+		margin: 0;
+
+		.evaluation-cadence-details-content {
+			border-top: none;
+			padding: 0;
+
+			.evaluation-cadence-details-content-row {
+				height: auto;
+				max-height: 60vh;
+				overflow-y: auto;
+				padding: 12px;
+
+				&::-webkit-scrollbar {
+					width: 6px;
+				}
+
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				&::-webkit-scrollbar-thumb {
+					background: var(--bg-slate-400);
+					border-radius: 3px;
+				}
+
+				&::-webkit-scrollbar-thumb:hover {
+					background: var(--bg-slate-300);
+				}
+
+				.schedule-preview {
+					.schedule-preview-header {
+						background-color: var(--bg-ink-400);
+						border-bottom: 1px solid var(--bg-slate-500);
+						padding: 12px 16px;
+						margin: -12px -12px 16px -12px;
+
+						.schedule-preview-title {
+							color: var(--bg-vanilla-300);
+							font-size: 14px;
+							font-weight: 500;
+						}
+					}
+
+					.schedule-preview-list {
+						.schedule-preview-item {
+							padding: 12px 0;
+							border-bottom: 1px solid var(--bg-slate-500);
+
+							&:last-child {
+								border-bottom: none;
+							}
+
+							.schedule-preview-timeline {
+								.schedule-preview-timeline-line {
+									width: 2px;
+									height: 24px;
+									background-color: var(--bg-robin-500);
+									border-radius: 1px;
+								}
+							}
+
+							.schedule-preview-content {
+								.schedule-preview-date {
+									color: var(--bg-vanilla-300);
+									font-size: 14px;
+									font-weight: 500;
+								}
+
+								.schedule-preview-timezone {
+									background-color: var(--bg-slate-500);
+									padding: 4px 8px;
+									border-radius: 4px;
+									font-size: 12px;
+								}
+							}
+						}
+					}
+				}
+
+				.no-schedule {
+					min-height: 300px;
+					padding: 40px 12px;
+
+					svg {
+						color: var(--bg-slate-400);
+					}
+				}
+			}
+		}
+	}
+}
+
+// Light mode styles
+.lightMode {
+	.evaluation-cadence-container {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.edit-custom-schedule {
+			.ant-typography {
+				color: var(--bg-ink-400);
+
+				.highlight {
+					background-color: var(--bg-vanilla-300);
+					color: var(--bg-ink-400);
+				}
+			}
+
+			.ant-btn-group {
+				.ant-btn {
+					border: 1px solid var(--bg-vanilla-300);
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+	}
+
+	.evaluation-cadence-details {
+		border: 1px solid var(--bg-vanilla-300);
+
+		.evaluation-cadence-details-title {
+			color: var(--bg-ink-400);
+		}
+
+		.query-section-tabs {
+			.query-section-query-actions {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+
+				.explorer-view-option {
+					border-left: 0.5px solid var(--bg-vanilla-300);
+					border-bottom: 0.5px solid var(--bg-vanilla-300);
+
+					&.active-tab {
+						background-color: var(--bg-vanilla-100);
+
+						&:hover {
+							background-color: var(--bg-vanilla-100) !important;
+						}
+					}
+
+					&:disabled {
+						background-color: var(--bg-vanilla-300);
+					}
+
+					&:hover {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+
+		.evaluation-cadence-details-content {
+			border-top: 1px solid var(--bg-vanilla-300);
+
+			.evaluation-cadence-details-content-row {
+				.editor-view,
+				.rrule-view {
+					textarea {
+						background: var(--bg-vanilla-300);
+						border: 1px solid var(--bg-vanilla-300);
+						color: var(--bg-ink-400) !important;
+
+						&::placeholder {
+							color: var(--bg-ink-400) !important;
+						}
+					}
+
+					.select-group {
+						.ant-typography {
+							color: var(--bg-ink-400);
+						}
+
+						.ant-select {
+							border: 1px solid var(--bg-vanilla-300);
+
+							.ant-select-selector {
+								background-color: var(--bg-vanilla-300);
+								border: 1px solid var(--bg-vanilla-300);
+								color: var(--bg-ink-400);
+							}
+						}
+
+						.ant-picker {
+							background-color: var(--bg-vanilla-300);
+							border: 1px solid var(--bg-vanilla-300);
+
+							.ant-picker-input {
+								background-color: var(--bg-vanilla-300);
+								color: var(--bg-ink-400);
+							}
+						}
+					}
+				}
+
+				.no-schedule {
+					color: var(--bg-ink-400);
+				}
+
+				.schedule-preview {
+					.schedule-preview-header {
+						background-color: var(--bg-vanilla-200);
+						border-bottom: 1px solid var(--bg-vanilla-300);
+
+						.schedule-preview-title {
+							color: var(--bg-ink-300);
+						}
+					}
+
+					.schedule-preview-list {
+						&::-webkit-scrollbar-thumb {
+							background: var(--bg-vanilla-300);
+						}
+
+						&::-webkit-scrollbar-thumb:hover {
+							background: var(--bg-vanilla-400);
+						}
+
+						.schedule-preview-item {
+							.schedule-preview-timeline {
+								.schedule-preview-timeline-line {
+									background-color: var(--bg-vanilla-300);
+								}
+							}
+
+							.schedule-preview-content {
+								.schedule-preview-date {
+									color: var(--bg-ink-300);
+								}
+
+								.schedule-preview-separator {
+									border-top: 1px dashed var(--bg-vanilla-300);
+								}
+
+								.schedule-preview-timezone {
+									color: var(--bg-ink-400);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.ant-picker-date-panel {
+		background-color: var(--bg-vanilla-300);
+		border: 1px solid var(--bg-vanilla-300);
+	}
+
+	.ant-picker-date-panel-layout {
+		background-color: var(--bg-vanilla-300);
+		border: 1px solid var(--bg-vanilla-300);
+	}
+
+	.ant-picker-date-panel-header {
+		background-color: var(--bg-vanilla-300);
+		border: 1px solid var(--bg-vanilla-300);
+	}
+
+	// Light mode styles for preview modal
+	.evaluation-cadence-preview-modal {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-200);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+
+		.ant-modal-header {
+			background-color: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-modal-title {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.ant-modal-close {
+			color: var(--bg-ink-400);
+
+			&:hover {
+				color: var(--bg-ink-300);
+			}
+		}
+
+		.ant-modal-body {
+			background-color: var(--bg-vanilla-200);
+		}
+
+		.evaluation-cadence-details {
+			.evaluation-cadence-details-content {
+				.evaluation-cadence-details-content-row {
+					&::-webkit-scrollbar-thumb {
+						background: var(--bg-vanilla-300);
+					}
+
+					&::-webkit-scrollbar-thumb:hover {
+						background: var(--bg-vanilla-400);
+					}
+
+					.schedule-preview {
+						.schedule-preview-header {
+							background-color: var(--bg-vanilla-200);
+							border-bottom: 1px solid var(--bg-vanilla-300);
+
+							.schedule-preview-title {
+								color: var(--bg-ink-300);
+							}
+						}
+
+						.schedule-preview-list {
+							.schedule-preview-item {
+								border-bottom: 1px solid var(--bg-vanilla-300);
+
+								.schedule-preview-timeline {
+									.schedule-preview-timeline-line {
+										background-color: var(--bg-robin-500);
+									}
+								}
+
+								.schedule-preview-content {
+									.schedule-preview-date {
+										color: var(--bg-ink-300);
+									}
+
+									.schedule-preview-separator {
+										border-top: 1px dashed var(--bg-vanilla-300);
+									}
+
+									.schedule-preview-timezone {
+										background-color: var(--bg-vanilla-300);
+										color: var(--bg-ink-400);
+									}
+								}
+							}
+						}
+					}
+
+					.no-schedule {
+						color: var(--bg-ink-400);
+
+						svg {
+							color: var(--bg-vanilla-300);
+						}
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover.tsx

@@ -1,258 +0,0 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Button, Select, Typography } from 'antd';
-import classNames from 'classnames';
-import { Check } from 'lucide-react';
-import { useMemo } from 'react';
-
-import {
-	EVALUATION_WINDOW_TIMEFRAME,
-	EVALUATION_WINDOW_TYPE,
-} from './constants';
-import TimeInput from './TimeInput';
-import {
-	CumulativeWindowTimeframes,
-	IEvaluationWindowDetailsProps,
-	IEvaluationWindowPopoverProps,
-	RollingWindowTimeframes,
-} from './types';
-import { TIMEZONE_DATA } from './utils';
-
-function EvaluationWindowDetails({
-	evaluationWindow,
-	setEvaluationWindow,
-}: IEvaluationWindowDetailsProps): JSX.Element {
-	const currentHourOptions = useMemo(() => {
-		const options = [];
-		for (let i = 0; i < 60; i++) {
-			options.push({ label: i.toString(), value: i });
-		}
-		return options;
-	}, []);
-
-	const currentMonthOptions = useMemo(() => {
-		const options = [];
-		for (let i = 1; i <= 31; i++) {
-			options.push({ label: i.toString(), value: i });
-		}
-		return options;
-	}, []);
-
-	if (evaluationWindow.windowType === 'rolling') {
-		return <div />;
-	}
-
-	const isCurrentHour =
-		evaluationWindow.windowType === 'cumulative' &&
-		evaluationWindow.timeframe === 'currentHour';
-	const isCurrentDay =
-		evaluationWindow.windowType === 'cumulative' &&
-		evaluationWindow.timeframe === 'currentDay';
-	const isCurrentMonth =
-		evaluationWindow.windowType === 'cumulative' &&
-		evaluationWindow.timeframe === 'currentMonth';
-
-	const handleNumberChange = (value: string): void => {
-		setEvaluationWindow({
-			type: 'SET_STARTING_AT',
-			payload: {
-				number: value,
-				time: evaluationWindow.startingAt.time,
-				timezone: evaluationWindow.startingAt.timezone,
-			},
-		});
-	};
-
-	const handleTimeChange = (value: string): void => {
-		setEvaluationWindow({
-			type: 'SET_STARTING_AT',
-			payload: {
-				number: evaluationWindow.startingAt.number,
-				time: value,
-				timezone: evaluationWindow.startingAt.timezone,
-			},
-		});
-	};
-
-	const handleTimezoneChange = (value: string): void => {
-		setEvaluationWindow({
-			type: 'SET_STARTING_AT',
-			payload: {
-				number: evaluationWindow.startingAt.number,
-				time: evaluationWindow.startingAt.time,
-				timezone: value,
-			},
-		});
-	};
-
-	if (isCurrentHour) {
-		return (
-			<div className="evaluation-window-details">
-				<div className="select-group">
-					<Typography.Text>STARTING AT MINUTE</Typography.Text>
-					<Select
-						options={currentHourOptions}
-						value={evaluationWindow.startingAt.number || null}
-						onChange={handleNumberChange}
-						placeholder="Select starting at"
-					/>
-				</div>
-			</div>
-		);
-	}
-
-	if (isCurrentDay) {
-		return (
-			<div className="evaluation-window-details">
-				<div className="select-group time-select-group">
-					<Typography.Text>STARTING AT</Typography.Text>
-					<TimeInput
-						value={evaluationWindow.startingAt.time}
-						onChange={handleTimeChange}
-					/>
-				</div>
-				<div className="select-group">
-					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<Select
-						options={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || null}
-						onChange={handleTimezoneChange}
-						placeholder="Select timezone"
-					/>
-				</div>
-			</div>
-		);
-	}
-
-	if (isCurrentMonth) {
-		return (
-			<div className="evaluation-window-details">
-				<div className="select-group">
-					<Typography.Text>STARTING ON DAY</Typography.Text>
-					<Select
-						options={currentMonthOptions}
-						value={evaluationWindow.startingAt.number || null}
-						onChange={handleNumberChange}
-						placeholder="Select starting at"
-					/>
-				</div>
-				<div className="select-group time-select-group">
-					<Typography.Text>STARTING AT</Typography.Text>
-					<TimeInput
-						value={evaluationWindow.startingAt.time}
-						onChange={handleTimeChange}
-					/>
-				</div>
-				<div className="select-group">
-					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<Select
-						options={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || null}
-						onChange={handleTimezoneChange}
-						placeholder="Select timezone"
-					/>
-				</div>
-			</div>
-		);
-	}
-
-	return <div />;
-}
-
-function EvaluationWindowPopover({
-	evaluationWindow,
-	setEvaluationWindow,
-}: IEvaluationWindowPopoverProps): JSX.Element {
-	const renderEvaluationWindowContent = (
-		label: string,
-		contentOptions: Array<{ label: string; value: string }>,
-		currentValue: string,
-		onChange: (value: string) => void,
-	): JSX.Element => (
-		<div className="evaluation-window-content-item">
-			<Typography.Text className="evaluation-window-content-item-label">
-				{label}
-			</Typography.Text>
-			<div className="evaluation-window-content-list">
-				{contentOptions.map((option) => (
-					<div
-						className={classNames('evaluation-window-content-list-item', {
-							active: currentValue === option.value,
-						})}
-						key={option.value}
-						role="button"
-						onClick={(): void => onChange(option.value)}
-					>
-						<Typography.Text>{option.label}</Typography.Text>
-						{currentValue === option.value && <Check size={12} />}
-					</div>
-				))}
-			</div>
-		</div>
-	);
-
-	const renderSelectionContent = (): JSX.Element => {
-		if (evaluationWindow.windowType === 'rolling') {
-			return (
-				<div className="selection-content">
-					<Typography.Text>
-						A Rolling Window has a fixed size and shifts its starting point over time
-						based on when the rules are evaluated.
-					</Typography.Text>
-					<Button type="link">Read the docs</Button>
-				</div>
-			);
-		}
-
-		if (
-			evaluationWindow.windowType === 'cumulative' &&
-			!evaluationWindow.timeframe
-		) {
-			return (
-				<div className="selection-content">
-					<Typography.Text>
-						A Cumulative Window has a fixed starting point and expands over time.
-					</Typography.Text>
-					<Button type="link">Read the docs</Button>
-				</div>
-			);
-		}
-
-		return (
-			<EvaluationWindowDetails
-				evaluationWindow={evaluationWindow}
-				setEvaluationWindow={setEvaluationWindow}
-			/>
-		);
-	};
-
-	return (
-		<div className="evaluation-window-popover">
-			<div className="evaluation-window-content">
-				{renderEvaluationWindowContent(
-					'EVALUATION WINDOW',
-					EVALUATION_WINDOW_TYPE,
-					evaluationWindow.windowType,
-					(value: string): void =>
-						setEvaluationWindow({
-							type: 'SET_WINDOW_TYPE',
-							payload: value as 'rolling' | 'cumulative',
-						}),
-				)}
-				{renderEvaluationWindowContent(
-					'TIMEFRAME',
-					EVALUATION_WINDOW_TIMEFRAME[evaluationWindow.windowType],
-					evaluationWindow.timeframe,
-					(value: string): void =>
-						setEvaluationWindow({
-							type: 'SET_TIMEFRAME',
-							payload: value as RollingWindowTimeframes | CumulativeWindowTimeframes,
-						}),
-				)}
-				{renderSelectionContent()}
-			</div>
-		</div>
-	);
-}
-
-export default EvaluationWindowPopover;

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -25,46 +25,80 @@ function TimeInput({
 		if (value) {
 			const timeParts = value.split(':');
 			if (timeParts.length === 3) {
-				setHours(timeParts[0].padStart(2, '0'));
-				setMinutes(timeParts[1].padStart(2, '0'));
-				setSeconds(timeParts[2].padStart(2, '0'));
+				setHours(timeParts[0]);
+				setMinutes(timeParts[1]);
+				setSeconds(timeParts[2]);
 			}
 		}
 	}, [value]);
 
-	// Format time value
-	const formatTimeValue = (h: string, m: string, s: string): string =>
-		`${h.padStart(2, '0')}:${m.padStart(2, '0')}:${s.padStart(2, '0')}`;
+	const notifyChange = (h: string, m: string, s: string): void => {
+		const rawValue = `${h}:${m}:${s}`;
+		onChange?.(rawValue);
+	};
 
-	// Handle input change
-	const handleTimeChange = (
-		newHours: string,
-		newMinutes: string,
-		newSeconds: string,
-	): void => {
-		const formattedValue = formatTimeValue(newHours, newMinutes, newSeconds);
+	const notifyFormattedChange = (h: string, m: string, s: string): void => {
+		const formattedValue = `${h.padStart(2, '0')}:${m.padStart(
+			2,
+			'0',
+		)}:${s.padStart(2, '0')}`;
 		onChange?.(formattedValue);
 	};
 
-	// Handle hours change
 	const handleHoursChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		const newHours = e.target.value.replace(/\D/g, '').slice(0, 2);
+		let newHours = e.target.value.replace(/\D/g, '');
+
+		if (newHours.length > 2) {
+			newHours = newHours.slice(0, 2);
+		}
+
+		if (newHours && parseInt(newHours, 10) > 23) {
+			newHours = '23';
+		}
 		setHours(newHours);
-		handleTimeChange(newHours, minutes, seconds);
+		notifyChange(newHours, minutes, seconds);
 	};
 
-	// Handle minutes change
 	const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		const newMinutes = e.target.value.replace(/\D/g, '').slice(0, 2);
+		let newMinutes = e.target.value.replace(/\D/g, '');
+		if (newMinutes.length > 2) {
+			newMinutes = newMinutes.slice(0, 2);
+		}
+		if (newMinutes && parseInt(newMinutes, 10) > 59) {
+			newMinutes = '59';
+		}
 		setMinutes(newMinutes);
-		handleTimeChange(hours, newMinutes, seconds);
+		notifyChange(hours, newMinutes, seconds);
 	};
 
-	// Handle seconds change
 	const handleSecondsChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		const newSeconds = e.target.value.replace(/\D/g, '').slice(0, 2);
+		let newSeconds = e.target.value.replace(/\D/g, '');
+		if (newSeconds.length > 2) {
+			newSeconds = newSeconds.slice(0, 2);
+		}
+		if (newSeconds && parseInt(newSeconds, 10) > 59) {
+			newSeconds = '59';
+		}
 		setSeconds(newSeconds);
-		handleTimeChange(hours, minutes, newSeconds);
+		notifyChange(hours, minutes, newSeconds);
+	};
+
+	const handleHoursBlur = (): void => {
+		const formattedHours = hours.padStart(2, '0');
+		setHours(formattedHours);
+		notifyFormattedChange(formattedHours, minutes, seconds);
+	};
+
+	const handleMinutesBlur = (): void => {
+		const formattedMinutes = minutes.padStart(2, '0');
+		setMinutes(formattedMinutes);
+		notifyFormattedChange(hours, formattedMinutes, seconds);
+	};
+
+	const handleSecondsBlur = (): void => {
+		const formattedSeconds = seconds.padStart(2, '0');
+		setSeconds(formattedSeconds);
+		notifyFormattedChange(hours, minutes, formattedSeconds);
 	};
 
 	// Helper functions for field navigation
@@ -116,30 +150,36 @@ function TimeInput({
 				data-field="hours"
 				value={hours}
 				onChange={handleHoursChange}
+				onBlur={handleHoursBlur}
 				onKeyDown={(e): void => handleKeyDown(e, 'hours')}
 				disabled={disabled}
 				maxLength={2}
 				className="time-input-field"
+				placeholder="00"
 			/>
 			<span className="time-input-separator">:</span>
 			<Input
 				data-field="minutes"
 				value={minutes}
 				onChange={handleMinutesChange}
+				onBlur={handleMinutesBlur}
 				onKeyDown={(e): void => handleKeyDown(e, 'minutes')}
 				disabled={disabled}
 				maxLength={2}
 				className="time-input-field"
+				placeholder="00"
 			/>
 			<span className="time-input-separator">:</span>
 			<Input
 				data-field="seconds"
 				value={seconds}
 				onChange={handleSecondsChange}
+				onBlur={handleSecondsBlur}
 				onKeyDown={(e): void => handleKeyDown(e, 'seconds')}
 				disabled={disabled}
 				maxLength={2}
 				className="time-input-field"
+				placeholder="00"
 			/>
 		</div>
 	);

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/AdvancedOptionItem.test.tsx

@@ -0,0 +1,168 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import AdvancedOptionItem from '../AdvancedOptionItem/AdvancedOptionItem';
+
+const TEST_INPUT_PLACEHOLDER = 'Test input';
+const TEST_TITLE = 'Test Title';
+const TEST_DESCRIPTION = 'Test Description';
+const TEST_VALUE = 'test value';
+const TEST_INPUT_TEST_ID = 'test-input';
+
+describe('AdvancedOptionItem', () => {
+	const mockInput = (
+		<input
+			data-testid={TEST_INPUT_TEST_ID}
+			placeholder={TEST_INPUT_PLACEHOLDER}
+		/>
+	);
+
+	const defaultProps = {
+		title: TEST_TITLE,
+		description: TEST_DESCRIPTION,
+		input: mockInput,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should render title, description and switch', () => {
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		expect(screen.getByText(TEST_TITLE)).toBeInTheDocument();
+		expect(screen.getByText(TEST_DESCRIPTION)).toBeInTheDocument();
+
+		const switchElement = screen.getByRole('switch');
+		expect(switchElement).toBeInTheDocument();
+		expect(switchElement).not.toBeChecked();
+	});
+
+	it('should not show input initially', () => {
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		const inputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(inputElement).toBeInTheDocument();
+		expect(inputElement).not.toBeVisible();
+	});
+
+	it('should show input when switch is toggled on', async () => {
+		const user = userEvent.setup();
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		const initialInputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(initialInputElement).toBeInTheDocument();
+		expect(initialInputElement).not.toBeVisible();
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		expect(switchElement).toBeChecked();
+		const visibleInputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(visibleInputElement).toBeInTheDocument();
+		expect(visibleInputElement).toBeVisible();
+	});
+
+	it('should hide input when switch is toggled off', async () => {
+		const user = userEvent.setup();
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+
+		const initialInputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(initialInputElement).toBeInTheDocument();
+		expect(initialInputElement).not.toBeVisible();
+
+		// First toggle on
+		await user.click(switchElement);
+		const inputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(inputElement).toBeInTheDocument();
+		expect(inputElement).toBeVisible();
+
+		// Then toggle off - input should be hidden but still in DOM
+		await user.click(switchElement);
+		const hiddenInputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(hiddenInputElement).toBeInTheDocument();
+		expect(hiddenInputElement).not.toBeVisible();
+	});
+
+	it('should maintain input state when toggling', async () => {
+		const user = userEvent.setup();
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+
+		// Toggle on and interact with input
+		await user.click(switchElement);
+		const inputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		await user.type(inputElement, TEST_VALUE);
+		expect(inputElement).toHaveValue(TEST_VALUE);
+
+		// Toggle off - input should still be in DOM but hidden
+		await user.click(switchElement);
+		const hiddenInputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(hiddenInputElement).toBeInTheDocument();
+		expect(hiddenInputElement).not.toBeVisible();
+
+		// Toggle back on - input should maintain its previous state
+		await user.click(switchElement);
+		const inputElementAgain = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(inputElementAgain).toHaveValue(TEST_VALUE); // State preserved!
+	});
+
+	it('should not render tooltip icon if tooltipText is not provided', () => {
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+			/>,
+		);
+
+		const tooltipIcon = screen.queryByTestId('tooltip-icon');
+		expect(tooltipIcon).not.toBeInTheDocument();
+	});
+
+	it('should render tooltip icon if tooltipText is provided', () => {
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+				tooltipText="mock tooltip text"
+			/>,
+		);
+		const tooltipIcon = screen.getByTestId('tooltip-icon');
+		expect(tooltipIcon).toBeInTheDocument();
+	});
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EditCustomSchedule.test.tsx

@@ -0,0 +1,155 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+
+import { TIMEZONE_DATA } from '../constants';
+import EditCustomSchedule from '../EvaluationCadence/EditCustomSchedule';
+import { createMockAlertContextState } from './testUtils';
+
+const mockSetAdvancedOptions = jest.fn();
+jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setAdvancedOptions: mockSetAdvancedOptions,
+	}),
+);
+
+const mockSetIsEvaluationCadenceDetailsVisible = jest.fn();
+const mockSetIsPreviewVisible = jest.fn();
+
+const EDIT_CUSTOM_SCHEDULE_TEST_ID = '.edit-custom-schedule';
+
+describe('EditCustomSchedule', () => {
+	it('should render the correct display text for custom mode with daily occurrence', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+						custom: {
+							repeatEvery: 'day',
+							startAt: '00:00:00',
+							occurence: [],
+							timezone: TIMEZONE_DATA[0].value,
+						},
+					},
+				},
+			}),
+		);
+		render(
+			<EditCustomSchedule
+				setIsEvaluationCadenceDetailsVisible={
+					mockSetIsEvaluationCadenceDetailsVisible
+				}
+				setIsPreviewVisible={mockSetIsPreviewVisible}
+			/>,
+		);
+
+		// Use textContent to verify the complete text across multiple Typography components
+		const container = screen
+			.getByText('Every')
+			.closest(EDIT_CUSTOM_SCHEDULE_TEST_ID);
+		expect(container).toHaveTextContent('EveryDayat00:00:00');
+	});
+
+	it('should render the correct display text for custom mode with weekly occurrence', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+						custom: {
+							repeatEvery: 'week',
+							startAt: '00:00:00',
+							occurence: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'],
+							timezone: TIMEZONE_DATA[0].value,
+						},
+					},
+				},
+			}),
+		);
+
+		render(
+			<EditCustomSchedule
+				setIsEvaluationCadenceDetailsVisible={
+					mockSetIsEvaluationCadenceDetailsVisible
+				}
+				setIsPreviewVisible={mockSetIsPreviewVisible}
+			/>,
+		);
+
+		const container = screen
+			.getByText('Every')
+			.closest(EDIT_CUSTOM_SCHEDULE_TEST_ID);
+		expect(container).toHaveTextContent(
+			'EveryWeekonMonday, Tuesday, Wednesday, Thursday, Fridayat00:00:00',
+		);
+	});
+
+	it('should render the correct display text for custom mode with monthly occurrence', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+						custom: {
+							repeatEvery: 'month',
+							startAt: '00:00:00',
+							occurence: ['1'],
+							timezone: TIMEZONE_DATA[0].value,
+						},
+					},
+				},
+			}),
+		);
+
+		render(
+			<EditCustomSchedule
+				setIsEvaluationCadenceDetailsVisible={
+					mockSetIsEvaluationCadenceDetailsVisible
+				}
+				setIsPreviewVisible={mockSetIsPreviewVisible}
+			/>,
+		);
+
+		const container = screen
+			.getByText('Every')
+			.closest(EDIT_CUSTOM_SCHEDULE_TEST_ID);
+		expect(container).toHaveTextContent('EveryMonthon1at00:00:00');
+	});
+
+	it('edit custom schedule action works correctly', () => {
+		render(
+			<EditCustomSchedule
+				setIsEvaluationCadenceDetailsVisible={
+					mockSetIsEvaluationCadenceDetailsVisible
+				}
+				setIsPreviewVisible={mockSetIsPreviewVisible}
+			/>,
+		);
+
+		fireEvent.click(screen.getByText('Edit custom schedule'));
+		expect(mockSetIsEvaluationCadenceDetailsVisible).toHaveBeenCalledWith(true);
+		expect(mockSetIsPreviewVisible).not.toHaveBeenCalled();
+	});
+
+	it('preview custom schedule action works correctly', () => {
+		render(
+			<EditCustomSchedule
+				setIsEvaluationCadenceDetailsVisible={
+					mockSetIsEvaluationCadenceDetailsVisible
+				}
+				setIsPreviewVisible={mockSetIsPreviewVisible}
+			/>,
+		);
+
+		fireEvent.click(screen.getByText('Preview'));
+		expect(mockSetIsPreviewVisible).toHaveBeenCalledWith(true);
+		expect(mockSetIsEvaluationCadenceDetailsVisible).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadence.test.tsx

@@ -0,0 +1,162 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+
+import { TIMEZONE_DATA } from '../constants';
+import EvaluationCadence from '../EvaluationCadence';
+import { createMockAlertContextState } from './testUtils';
+
+jest.mock('../EvaluationCadence/EditCustomSchedule', () => ({
+	__esModule: true,
+	default: ({
+		setIsPreviewVisible,
+	}: {
+		setIsPreviewVisible: (isPreviewVisible: boolean) => void;
+	}): JSX.Element => (
+		<div data-testid="edit-custom-schedule">
+			<div>EditCustomSchedule</div>
+			<button type="button" onClick={(): void => setIsPreviewVisible(true)}>
+				Preview
+			</button>
+		</div>
+	),
+}));
+jest.mock('../EvaluationCadence/EvaluationCadenceDetails', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="evaluation-cadence-details">EvaluationCadenceDetails</div>
+	),
+}));
+jest.mock('../EvaluationCadence/EvaluationCadencePreview', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="evaluation-cadence-preview">EvaluationCadencePreview</div>
+	),
+}));
+
+const mockSetAdvancedOptions = jest.fn();
+const EVALUATION_CADENCE_DETAILS_TEST_ID = 'evaluation-cadence-details';
+const ADD_CUSTOM_SCHEDULE_TEXT = 'Add custom schedule';
+const EVALUATION_CADENCE_PREVIEW_TEST_ID = 'evaluation-cadence-preview';
+
+jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setAdvancedOptions: mockSetAdvancedOptions,
+	}),
+);
+
+const EVALUATION_CADENCE_INPUT_GROUP = 'evaluation-cadence-input-group';
+
+describe('EvaluationCadence', () => {
+	it('should render the title, description, tooltip and input group with default values', () => {
+		render(<EvaluationCadence />);
+		expect(screen.getByText('How often to check')).toBeInTheDocument();
+		expect(
+			screen.getByText(
+				'How frequently this alert checks your data. Default: Every 1 minute',
+			),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('evaluation-cadence-tooltip-icon'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId(EVALUATION_CADENCE_INPUT_GROUP),
+		).toBeInTheDocument();
+		expect(screen.getByPlaceholderText('Enter time')).toHaveValue(1);
+		expect(screen.getByText('Minutes')).toBeInTheDocument();
+		expect(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
+	});
+
+	it('should hide the input group when add custom schedule button is clicked', () => {
+		render(<EvaluationCadence />);
+
+		expect(
+			screen.getByTestId(EVALUATION_CADENCE_INPUT_GROUP),
+		).toBeInTheDocument();
+
+		fireEvent.click(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT));
+
+		expect(
+			screen.queryByTestId(EVALUATION_CADENCE_INPUT_GROUP),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId(EVALUATION_CADENCE_DETAILS_TEST_ID),
+		).toBeInTheDocument();
+	});
+
+	it('should not show the edit custom schedule component in default mode', () => {
+		render(<EvaluationCadence />);
+		expect(screen.queryByTestId('edit-custom-schedule')).not.toBeInTheDocument();
+	});
+
+	it('should show the custom schedule text when the mode is custom with selected values', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+						custom: {
+							repeatEvery: 'day',
+							startAt: '00:00:00',
+							occurence: [],
+							timezone: TIMEZONE_DATA[0].value,
+						},
+					},
+				},
+			}),
+		);
+		render(<EvaluationCadence />);
+		expect(screen.getByTestId('edit-custom-schedule')).toBeInTheDocument();
+	});
+
+	it('should not show evaluation cadence details component in default mode', () => {
+		render(<EvaluationCadence />);
+		expect(
+			screen.queryByTestId(EVALUATION_CADENCE_DETAILS_TEST_ID),
+		).not.toBeInTheDocument();
+	});
+
+	it('should show evaluation cadence details component when clicked on add custom schedule button', () => {
+		render(<EvaluationCadence />);
+
+		expect(
+			screen.queryByTestId(EVALUATION_CADENCE_DETAILS_TEST_ID),
+		).not.toBeInTheDocument();
+		expect(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
+		fireEvent.click(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT));
+		expect(
+			screen.getByTestId(EVALUATION_CADENCE_DETAILS_TEST_ID),
+		).toBeInTheDocument();
+	});
+
+	it('should not show evaluation cadence preview component in default mode', () => {
+		render(<EvaluationCadence />);
+		expect(
+			screen.queryByTestId(EVALUATION_CADENCE_PREVIEW_TEST_ID),
+		).not.toBeInTheDocument();
+	});
+
+	it('should show evaluation cadence preview component when clicked on preview button in custom mode', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+					},
+				},
+			}),
+		);
+		render(<EvaluationCadence />);
+		expect(
+			screen.queryByTestId(EVALUATION_CADENCE_PREVIEW_TEST_ID),
+		).not.toBeInTheDocument();
+		fireEvent.click(screen.getByText('Preview'));
+		expect(
+			screen.getByTestId(EVALUATION_CADENCE_PREVIEW_TEST_ID),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadenceDetails.test.tsx

@@ -0,0 +1,316 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';
+
+import EvaluationCadenceDetails from '../EvaluationCadence/EvaluationCadenceDetails';
+import { createMockAlertContextState } from './testUtils';
+
+const ENTER_RRULE_PLACEHOLDER = 'Enter RRule';
+
+jest.mock('dayjs', () => {
+	const actualDayjs = jest.requireActual('dayjs');
+	const mockDayjs = (date?: any): any => {
+		if (date) {
+			return actualDayjs(date);
+		}
+		// 21 Jan 2025
+		return actualDayjs('2025-01-21T16:31:36.982Z');
+	};
+	Object.keys(actualDayjs).forEach((key) => {
+		if (typeof (actualDayjs as any)[key] === 'function') {
+			(mockDayjs as any)[key] = (actualDayjs as any)[key];
+		}
+	});
+	(mockDayjs as any).tz = {
+		guess: (): string => 'Asia/Saigon',
+	};
+	return mockDayjs;
+});
+
+const INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE: AdvancedOptionsState = {
+	...INITIAL_ADVANCED_OPTIONS_STATE,
+	evaluationCadence: {
+		...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+		mode: 'custom',
+	},
+};
+
+const mockSetAdvancedOptions = jest.fn();
+jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE,
+		setAdvancedOptions: mockSetAdvancedOptions,
+	}),
+);
+
+const mockSetIsOpen = jest.fn();
+const mockSetIsCustomScheduleButtonVisible = jest.fn();
+
+const SCHEDULE_PREVIEW_TEST_ID = 'schedule-preview';
+const NO_SCHEDULE_TEST_ID = 'no-schedule';
+const EDITOR_VIEW_TEST_ID = 'editor-view';
+const RULE_VIEW_TEST_ID = 'rrule-view';
+const SAVE_CUSTOM_SCHEDULE_TEXT = 'Save Custom Schedule';
+
+describe('EvaluationCadenceDetails', () => {
+	it('should render the evaluation cadence details component with editor mode in daily occurence by default', () => {
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+		expect(screen.getByText('Add Custom Schedule')).toBeInTheDocument();
+
+		expect(screen.getByTestId(EDITOR_VIEW_TEST_ID)).toBeInTheDocument();
+		expect(screen.queryByTestId('rrule-view')).not.toBeInTheDocument();
+
+		expect(screen.getByText('REPEAT EVERY')).toBeInTheDocument();
+		expect(screen.getByText('AT')).toBeInTheDocument();
+		expect(screen.getByText('TIMEZONE')).toBeInTheDocument();
+
+		expect(screen.getByTestId(SCHEDULE_PREVIEW_TEST_ID)).toBeInTheDocument();
+
+		expect(screen.getByText('Discard')).toBeInTheDocument();
+		expect(screen.getByText(SAVE_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
+	});
+
+	it('when switching to rrule mode, the rrule view should be rendered with no schedule preview', () => {
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+		fireEvent.click(screen.getByText('RRule'));
+		expect(screen.getByTestId(RULE_VIEW_TEST_ID)).toBeInTheDocument();
+
+		expect(
+			screen.queryByTestId(SCHEDULE_PREVIEW_TEST_ID),
+		).not.toBeInTheDocument();
+		expect(screen.getByTestId(NO_SCHEDULE_TEST_ID)).toBeInTheDocument();
+
+		expect(screen.getByText('STARTING ON')).toBeInTheDocument();
+		expect(screen.getByText('AT')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText(ENTER_RRULE_PLACEHOLDER),
+		).toBeInTheDocument();
+
+		expect(screen.getByText('Discard')).toBeInTheDocument();
+		expect(screen.getByText(SAVE_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
+	});
+
+	it('when showing weekly occurence, the occurence options should be rendered', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence,
+						custom: {
+							...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence
+								.custom,
+							repeatEvery: 'week',
+						},
+					},
+				},
+			}),
+		);
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+
+		// Verify that the "ON DAY(S)" section is rendered for weekly occurrence
+		expect(screen.getByText('ON DAY(S)')).toBeInTheDocument();
+
+		// Verify that the schedule preview is shown as today is selected by default
+		expect(screen.getByTestId(SCHEDULE_PREVIEW_TEST_ID)).toBeInTheDocument();
+		expect(screen.queryByTestId(NO_SCHEDULE_TEST_ID)).not.toBeInTheDocument();
+	});
+
+	it('render schedule preview in weekly occurence when days are selected', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence,
+						custom: {
+							...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence
+								.custom,
+							repeatEvery: 'week',
+							occurence: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'],
+						},
+					},
+				},
+			}),
+		);
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+
+		// Verify that the schedule preview is shown because days are selected
+		expect(screen.getByTestId(SCHEDULE_PREVIEW_TEST_ID)).toBeInTheDocument();
+		expect(screen.queryByTestId(NO_SCHEDULE_TEST_ID)).not.toBeInTheDocument();
+	});
+
+	it('when showing monthly occurence, the occurence options should be rendered', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence,
+						custom: {
+							...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence
+								.custom,
+							repeatEvery: 'month',
+						},
+					},
+				},
+			}),
+		);
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+
+		// Verify that the "ON DAY(S)" section is rendered for monthly occurrence
+		expect(screen.getByText('ON DAY(S)')).toBeInTheDocument();
+
+		// Verify that the schedule preview is  shown as today is selected by default
+		expect(screen.getByTestId(SCHEDULE_PREVIEW_TEST_ID)).toBeInTheDocument();
+		expect(screen.queryByTestId(NO_SCHEDULE_TEST_ID)).not.toBeInTheDocument();
+	});
+
+	it('render schedule preview in monthly occurence when days are selected', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence,
+						custom: {
+							...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence
+								.custom,
+							repeatEvery: 'month',
+							occurence: ['1'],
+						},
+					},
+				},
+			}),
+		);
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+
+		// Verify that the schedule preview is shown because days are selected
+		expect(screen.getByTestId(SCHEDULE_PREVIEW_TEST_ID)).toBeInTheDocument();
+		expect(screen.queryByTestId(NO_SCHEDULE_TEST_ID)).not.toBeInTheDocument();
+	});
+
+	it('discard action works correctly', () => {
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+		fireEvent.click(screen.getByText('Discard'));
+		expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+		expect(mockSetIsCustomScheduleButtonVisible).toHaveBeenCalledWith(true);
+	});
+
+	it('save custom schedule action works correctly', () => {
+		render(
+			<EvaluationCadenceDetails
+				isOpen
+				setIsOpen={mockSetIsOpen}
+				setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+			/>,
+		);
+		fireEvent.click(screen.getByText(SAVE_CUSTOM_SCHEDULE_TEXT));
+		expect(mockSetAdvancedOptions).toHaveBeenCalledTimes(2);
+		expect(mockSetAdvancedOptions).toHaveBeenCalledWith({
+			type: 'SET_EVALUATION_CADENCE',
+			payload: {
+				...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence,
+				custom: {
+					...INITIAL_ADVANCED_OPTIONS_STATE_WITH_CUSTOM_SCHEDULE.evaluationCadence
+						.custom,
+					// today selected by default
+					occurence: [new Date().getDate().toString()],
+				},
+			},
+		});
+		expect(mockSetAdvancedOptions).toHaveBeenCalledWith({
+			type: 'SET_EVALUATION_CADENCE_MODE',
+			payload: 'custom',
+		});
+	});
+
+	describe('alert context mock state verification', () => {
+		it('should set the evaluation cadence tab to rrule from custom', () => {
+			render(
+				<EvaluationCadenceDetails
+					isOpen
+					setIsOpen={mockSetIsOpen}
+					setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+				/>,
+			);
+
+			// Switch to RRule tab
+			fireEvent.click(screen.getByText('RRule'));
+			expect(screen.getByTestId(RULE_VIEW_TEST_ID)).toBeInTheDocument();
+			expect(screen.queryByTestId(EDITOR_VIEW_TEST_ID)).not.toBeInTheDocument();
+
+			// Type in the text box
+			expect(screen.getByPlaceholderText(ENTER_RRULE_PLACEHOLDER)).toHaveValue('');
+			fireEvent.change(screen.getByPlaceholderText(ENTER_RRULE_PLACEHOLDER), {
+				target: { value: 'RRULE:FREQ=DAILY' },
+			});
+			// Ensure text box content is updated
+			expect(screen.getByPlaceholderText(ENTER_RRULE_PLACEHOLDER)).toHaveValue(
+				'RRULE:FREQ=DAILY',
+			);
+		});
+
+		it('ensure rrule content is not modified by previous test', () => {
+			render(
+				<EvaluationCadenceDetails
+					isOpen
+					setIsOpen={mockSetIsOpen}
+					setIsCustomScheduleButtonVisible={mockSetIsCustomScheduleButtonVisible}
+				/>,
+			);
+
+			// Switch to RRule tab
+			fireEvent.click(screen.getByText('RRule'));
+			expect(screen.getByTestId(RULE_VIEW_TEST_ID)).toBeInTheDocument();
+			expect(screen.queryByTestId(EDITOR_VIEW_TEST_ID)).not.toBeInTheDocument();
+
+			// Verify text box content
+			expect(screen.getByPlaceholderText(ENTER_RRULE_PLACEHOLDER)).toHaveValue('');
+		});
+	});
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadencePreview.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+
+import { TIMEZONE_DATA } from '../constants';
+import EvaluationCadencePreview, {
+	ScheduleList,
+} from '../EvaluationCadence/EvaluationCadencePreview';
+import { createMockAlertContextState } from './testUtils';
+
+jest
+	.spyOn(alertState, 'useCreateAlertState')
+	.mockReturnValue(createMockAlertContextState());
+
+const mockSetIsOpen = jest.fn();
+
+describe('EvaluationCadencePreview', () => {
+	it('should render list of dates when schedule is generated', () => {
+		render(<EvaluationCadencePreview isOpen setIsOpen={mockSetIsOpen} />);
+		expect(screen.getByTestId('schedule-preview')).toBeInTheDocument();
+	});
+
+	it('should render empty state when no schedule is generated', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				advancedOptions: {
+					...INITIAL_ADVANCED_OPTIONS_STATE,
+					evaluationCadence: {
+						...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+						mode: 'custom',
+						custom: {
+							repeatEvery: 'week',
+							startAt: '00:00:00',
+							occurence: [],
+							timezone: TIMEZONE_DATA[0].value,
+						},
+					},
+				},
+			}),
+		);
+		render(<EvaluationCadencePreview isOpen setIsOpen={mockSetIsOpen} />);
+		expect(screen.getByTestId('no-schedule')).toBeInTheDocument();
+	});
+});
+
+describe('ScheduleList', () => {
+	const schedule = [
+		new Date('2024-01-15T00:00:00Z'),
+		new Date('2024-01-16T00:00:00Z'),
+		new Date('2024-01-17T00:00:00Z'),
+		new Date('2024-01-18T00:00:00Z'),
+		new Date('2024-01-19T00:00:00Z'),
+	];
+	it('should render list of dates when schedule is generated', () => {
+		render(
+			<ScheduleList
+				schedule={schedule}
+				currentTimezone={TIMEZONE_DATA[0].value}
+			/>,
+		);
+		expect(
+			screen.queryByText(
+				'Please fill the relevant information to generate a schedule',
+			),
+		).not.toBeInTheDocument();
+
+		// Verify all dates are rendered correctly
+		schedule.forEach((date) => {
+			const dateString = date.toLocaleDateString('en-US', {
+				weekday: 'short',
+				month: 'short',
+				day: 'numeric',
+			});
+			const timeString = date.toLocaleTimeString('en-US', {
+				hour12: false,
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit',
+			});
+			const combinedString = `${dateString}, ${timeString}`;
+			expect(screen.getByText(combinedString)).toBeInTheDocument();
+		});
+
+		// Verify timezone is rendered correctly with each date
+		const timezoneElements = screen.getAllByText(TIMEZONE_DATA[0].label);
+		expect(timezoneElements).toHaveLength(schedule.length);
+	});
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/TimeInput.test.tsx

@@ -24,7 +24,7 @@ describe('TimeInput', () => {
 		expect(screen.getByDisplayValue('56')).toBeInTheDocument(); // seconds
 	});
 
-	it('should handle value changes', () => {
+	it('should handle hours changes', () => {
 		render(<TimeInput onChange={mockOnChange} />);
 
 		const hoursInput = screen.getAllByDisplayValue('00')[0];
@@ -51,11 +51,12 @@ describe('TimeInput', () => {
 		expect(mockOnChange).toHaveBeenCalledWith('00:00:45');
 	});
 
-	it('should pad single digits with zeros', () => {
+	it('should pad single digits with zeros on blur', () => {
 		render(<TimeInput onChange={mockOnChange} />);
 
 		const hoursInput = screen.getAllByDisplayValue('00')[0];
 		fireEvent.change(hoursInput, { target: { value: '5' } });
+		fireEvent.blur(hoursInput);
 
 		expect(mockOnChange).toHaveBeenCalledWith('05:00:00');
 	});
@@ -118,41 +119,6 @@ describe('TimeInput', () => {
 		expect(minutesInput).toHaveFocus();
 	});
 
-	it('should wrap around navigation from seconds to hours', async () => {
-		const user = userEvent.setup();
-		render(<TimeInput />);
-
-		const hoursInput = screen.getAllByDisplayValue('00')[0];
-		const secondsInput = screen.getAllByDisplayValue('00')[2];
-
-		await user.click(secondsInput);
-		await user.keyboard('{ArrowRight}');
-
-		expect(hoursInput).toHaveFocus();
-	});
-
-	it('should wrap around navigation from hours to seconds', async () => {
-		const user = userEvent.setup();
-		render(<TimeInput />);
-
-		const hoursInput = screen.getAllByDisplayValue('00')[0];
-		const secondsInput = screen.getAllByDisplayValue('00')[2];
-
-		await user.click(hoursInput);
-		await user.keyboard('{ArrowLeft}');
-
-		expect(secondsInput).toHaveFocus();
-	});
-
-	it('should apply custom className', () => {
-		const { container } = render(<TimeInput className="custom-class" />);
-
-		expect(container.firstChild).toHaveClass(
-			'time-input-container',
-			'custom-class',
-		);
-	});
-
 	it('should disable inputs when disabled prop is true', () => {
 		render(<TimeInput disabled />);
 
@@ -176,19 +142,100 @@ describe('TimeInput', () => {
 		expect(screen.getByDisplayValue('06')).toBeInTheDocument();
 	});
 
-	it('should handle malformed time values gracefully', () => {
-		render(<TimeInput value="invalid:time:format" />);
-
-		// Should show the invalid values as they are
-		expect(screen.getByDisplayValue('invalid')).toBeInTheDocument();
-		expect(screen.getByDisplayValue('time')).toBeInTheDocument();
-		expect(screen.getByDisplayValue('format')).toBeInTheDocument();
-	});
-
 	it('should handle partial time values', () => {
 		render(<TimeInput value="12:34" />);
 
 		// Should fall back to default values for incomplete format
 		expect(screen.getAllByDisplayValue('00')).toHaveLength(3);
 	});
+
+	it('should cap hours at 23 when user enters value > 23', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '25' } });
+
+		expect(hoursInput).toHaveValue('23');
+		expect(mockOnChange).toHaveBeenCalledWith('23:00:00');
+	});
+
+	it('should cap hours at 23 when user enters value = 24', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '24' } });
+
+		expect(hoursInput).toHaveValue('23');
+		expect(mockOnChange).toHaveBeenCalledWith('23:00:00');
+	});
+
+	it('should allow hours value of 23', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '23' } });
+
+		expect(hoursInput).toHaveValue('23');
+		expect(mockOnChange).toHaveBeenCalledWith('23:00:00');
+	});
+
+	it('should cap minutes at 59 when user enters value > 59', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+		fireEvent.change(minutesInput, { target: { value: '65' } });
+
+		expect(minutesInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:59:00');
+	});
+
+	it('should cap minutes at 59 when user enters value = 60', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+		fireEvent.change(minutesInput, { target: { value: '60' } });
+
+		expect(minutesInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:59:00');
+	});
+
+	it('should allow minutes value of 59', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+		fireEvent.change(minutesInput, { target: { value: '59' } });
+
+		expect(minutesInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:59:00');
+	});
+
+	it('should cap seconds at 59 when user enters value > 59', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const secondsInput = screen.getAllByDisplayValue('00')[2];
+		fireEvent.change(secondsInput, { target: { value: '75' } });
+
+		expect(secondsInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:00:59');
+	});
+
+	it('should cap seconds at 59 when user enters value = 60', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const secondsInput = screen.getAllByDisplayValue('00')[2];
+		fireEvent.change(secondsInput, { target: { value: '60' } });
+
+		expect(secondsInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:00:59');
+	});
+
+	it('should allow seconds value of 59', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const secondsInput = screen.getAllByDisplayValue('00')[2];
+		fireEvent.change(secondsInput, { target: { value: '59' } });
+
+		expect(secondsInput).toHaveValue('59');
+		expect(mockOnChange).toHaveBeenCalledWith('00:00:59');
+	});
 });

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts

@@ -0,0 +1,24 @@
+import {
+	INITIAL_ADVANCED_OPTIONS_STATE,
+	INITIAL_ALERT_STATE,
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_EVALUATION_WINDOW_STATE,
+} from 'container/CreateAlertV2/context/constants';
+import { ICreateAlertContextProps } from 'container/CreateAlertV2/context/types';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+export const createMockAlertContextState = (
+	overrides?: Partial<ICreateAlertContextProps>,
+): ICreateAlertContextProps => ({
+	alertState: INITIAL_ALERT_STATE,
+	setAlertState: jest.fn(),
+	alertType: AlertTypes.METRICS_BASED_ALERT,
+	setAlertType: jest.fn(),
+	thresholdState: INITIAL_ALERT_THRESHOLD_STATE,
+	setThresholdState: jest.fn(),
+	advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
+	setAdvancedOptions: jest.fn(),
+	evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
+	setEvaluationWindow: jest.fn(),
+	...overrides,
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/utils.test.ts

@@ -1,23 +1,13 @@
-import dayjs from 'dayjs';
-import { rrulestr } from 'rrule';
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable import/first */
 
-import { CumulativeWindowTimeframes, RollingWindowTimeframes } from '../types';
-import {
-	buildAlertScheduleFromCustomSchedule,
-	buildAlertScheduleFromRRule,
-	getCumulativeWindowTimeframeText,
-	getEvaluationWindowTypeText,
-	getRollingWindowTimeframeText,
-	getTimeframeText,
-	isValidRRule,
-} from '../utils';
-
-const MOCK_DATE_STRING = '2024-01-15T10:30:00Z';
+// Mock dayjs before importing any other modules
+const MOCK_DATE_STRING = '2024-01-15T00:30:00Z';
+const MOCK_DATE_STRING_NON_LEAP_YEAR = '2023-01-15T00:30:00Z';
+const MOCK_DATE_STRING_SPANS_MONTHS = '2024-01-31T00:30:00Z';
 const FREQ_DAILY = 'FREQ=DAILY';
 const TEN_THIRTY_TIME = '10:30:00';
 const NINE_AM_TIME = '09:00:00';
-
-// Mock dayjs
 jest.mock('dayjs', () => {
 	const originalDayjs = jest.requireActual('dayjs');
 	const mockDayjs = jest.fn((date?: string | Date) => {
@@ -32,14 +22,49 @@ jest.mock('dayjs', () => {
 	return mockDayjs;
 });
 
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { EvaluationWindowState } from 'container/CreateAlertV2/context/types';
+import dayjs, { Dayjs } from 'dayjs';
+import { rrulestr } from 'rrule';
+
+import { RollingWindowTimeframes } from '../types';
+import {
+	buildAlertScheduleFromCustomSchedule,
+	buildAlertScheduleFromRRule,
+	getCumulativeWindowTimeframeText,
+	getCustomRollingWindowTimeframeText,
+	getEvaluationWindowTypeText,
+	getRollingWindowTimeframeText,
+	getTimeframeText,
+	isValidRRule,
+} from '../utils';
+
 jest.mock('rrule', () => ({
 	rrulestr: jest.fn(),
 }));
 
 jest.mock('components/CustomTimePicker/timezoneUtils', () => ({
-	generateTimezoneData: jest.fn().mockReturnValue([]),
+	generateTimezoneData: jest.fn().mockReturnValue([
+		{ name: 'UTC', value: 'UTC', offset: '+00:00' },
+		{ name: 'America/New_York', value: 'America/New_York', offset: '-05:00' },
+		{ name: 'Europe/London', value: 'Europe/London', offset: '+00:00' },
+	]),
 }));
 
+const mockEvaluationWindowState: EvaluationWindowState = {
+	windowType: 'rolling',
+	timeframe: '5m0s',
+	startingAt: {
+		number: '0',
+		timezone: 'UTC',
+		time: '00:00:00',
+		unit: UniversalYAxisUnit.MINUTES,
+	},
+};
+
+const formatDate = (date: Date): string =>
+	dayjs(date).format('DD-MM-YYYY HH:mm:ss');
+
 describe('utils', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -54,34 +79,52 @@ describe('utils', () => {
 			expect(getEvaluationWindowTypeText('cumulative')).toBe('Cumulative');
 		});
 
-		it('should default to Rolling for unknown type', () => {
+		it('should default to empty string for unknown type', () => {
 			expect(
 				getEvaluationWindowTypeText('unknown' as 'rolling' | 'cumulative'),
-			).toBe('Rolling');
+			).toBe('');
 		});
 	});
 
 	describe('getCumulativeWindowTimeframeText', () => {
 		it('should return correct text for current hour', () => {
 			expect(
-				getCumulativeWindowTimeframeText(CumulativeWindowTimeframes.CURRENT_HOUR),
-			).toBe('Current hour');
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+				}),
+			).toBe('Current hour, starting at minute 0 (UTC)');
 		});
 
 		it('should return correct text for current day', () => {
 			expect(
-				getCumulativeWindowTimeframeText(CumulativeWindowTimeframes.CURRENT_DAY),
-			).toBe('Current day');
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentDay',
+				}),
+			).toBe('Current day, starting from 00:00:00 (UTC)');
 		});
 
 		it('should return correct text for current month', () => {
 			expect(
-				getCumulativeWindowTimeframeText(CumulativeWindowTimeframes.CURRENT_MONTH),
-			).toBe('Current month');
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentMonth',
+				}),
+			).toBe('Current month, starting from day 0 at 00:00:00 (UTC)');
 		});
 
-		it('should default to Current hour for unknown timeframe', () => {
-			expect(getCumulativeWindowTimeframeText('unknown')).toBe('Current hour');
+		it('should default to empty string for unknown timeframe', () => {
+			expect(
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'unknown',
+				}),
+			).toBe('');
 		});
 	});
 
@@ -131,21 +174,45 @@ describe('utils', () => {
 		it('should default to Last 5 minutes for unknown timeframe', () => {
 			expect(
 				getRollingWindowTimeframeText('unknown' as RollingWindowTimeframes),
-			).toBe('Last 5 minutes');
+			).toBe('');
+		});
+	});
+
+	describe('getCustomRollingWindowTimeframeText', () => {
+		it('should return correct text for custom rolling window', () => {
+			expect(getCustomRollingWindowTimeframeText(mockEvaluationWindowState)).toBe(
+				'Last 0 Minutes',
+			);
 		});
 	});
 
 	describe('getTimeframeText', () => {
-		it('should return rolling window text for rolling type', () => {
+		it('should call getCustomRollingWindowTimeframeText for custom rolling window', () => {
 			expect(
-				getTimeframeText('rolling', RollingWindowTimeframes.LAST_1_HOUR),
-			).toBe('Last 1 hour');
+				getTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'rolling',
+					timeframe: 'custom',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '4',
+					},
+				}),
+			).toBe('Last 4 Minutes');
 		});
 
-		it('should return cumulative window text for cumulative type', () => {
+		it('should call getRollingWindowTimeframeText for rolling window', () => {
+			expect(getTimeframeText(mockEvaluationWindowState)).toBe('Last 5 minutes');
+		});
+
+		it('should call getCumulativeWindowTimeframeText for cumulative window', () => {
 			expect(
-				getTimeframeText('cumulative', CumulativeWindowTimeframes.CURRENT_DAY),
-			).toBe('Current day');
+				getTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentDay',
+				}),
+			).toBe('Current day, starting from 00:00:00 (UTC)');
 		});
 	});
 
@@ -226,105 +293,340 @@ describe('utils', () => {
 	});
 
 	describe('buildAlertScheduleFromCustomSchedule', () => {
-		beforeEach(() => {
-			// Mock dayjs timezone methods
-			((dayjs as unknown) as { tz: jest.Mock }).tz = jest.fn(
-				(date?: string | Date) => {
-					const originalDayjs = jest.requireActual('dayjs');
-					const mockDayjs = originalDayjs(date || MOCK_DATE_STRING);
-					mockDayjs.startOf = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.add = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.date = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.hour = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.minute = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.second = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.daysInMonth = jest.fn().mockReturnValue(31);
-					mockDayjs.day = jest.fn().mockReturnValue(mockDayjs);
-					mockDayjs.isAfter = jest.fn().mockReturnValue(true);
-					mockDayjs.toDate = jest.fn().mockReturnValue(new Date(MOCK_DATE_STRING));
-					return mockDayjs;
-				},
-			);
-		});
-
-		it('should return null for missing required parameters', () => {
-			expect(
-				buildAlertScheduleFromCustomSchedule('', [], '10:30:00', 'UTC'),
-			).toBeNull();
-			expect(
-				buildAlertScheduleFromCustomSchedule('week', [], '10:30:00', 'UTC'),
-			).toBeNull();
-			expect(
-				buildAlertScheduleFromCustomSchedule('week', ['monday'], '', 'UTC'),
-			).toBeNull();
-			expect(
-				buildAlertScheduleFromCustomSchedule('week', ['monday'], '10:30:00', ''),
-			).toBeNull();
-		});
-
 		it('should generate monthly occurrences', () => {
 			const result = buildAlertScheduleFromCustomSchedule(
 				'month',
 				['1', '15'],
 				'10:30:00',
-				'UTC',
 				5,
 			);
 
 			expect(result).toBeDefined();
 			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 10:30:00',
+				'01-02-2024 10:30:00',
+				'15-02-2024 10:30:00',
+				'01-03-2024 10:30:00',
+				'15-03-2024 10:30:00',
+			]);
 		});
 
 		it('should generate weekly occurrences', () => {
 			const result = buildAlertScheduleFromCustomSchedule(
 				'week',
 				['monday', 'friday'],
-				'10:30:00',
-				'UTC',
+				'12:30:00',
 				5,
 			);
 
 			expect(result).toBeDefined();
 			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 12:30:00',
+				'19-01-2024 12:30:00',
+				'22-01-2024 12:30:00',
+				'26-01-2024 12:30:00',
+				'29-01-2024 12:30:00',
+			]);
 		});
 
-		it('should filter invalid days for monthly schedule', () => {
+		it('should generate weekly occurrences including today if alert time is in the future', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'week',
+				['monday', 'friday'],
+				'10:30:00',
+				5,
+			);
+
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today included (15-01-2024 00:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 10:30:00',
+				'19-01-2024 10:30:00',
+				'22-01-2024 10:30:00',
+				'26-01-2024 10:30:00',
+				'29-01-2024 10:30:00',
+			]);
+		});
+
+		it('should generate weekly occurrences excluding today if alert time is in the past', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'week',
+				['monday', 'friday'],
+				'00:00:00',
+				5,
+			);
+
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today excluded (15-01-2024 00:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'19-01-2024 00:00:00',
+				'22-01-2024 00:00:00',
+				'26-01-2024 00:00:00',
+				'29-01-2024 00:00:00',
+				'02-02-2024 00:00:00',
+			]);
+		});
+
+		it('should generate weekly occurrences excluding today if alert time is in the present (right now)', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'week',
+				['monday', 'friday'],
+				'00:30:00',
+				5,
+			);
+
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today excluded (15-01-2024 00:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'19-01-2024 00:30:00',
+				'22-01-2024 00:30:00',
+				'26-01-2024 00:30:00',
+				'29-01-2024 00:30:00',
+				'02-02-2024 00:30:00',
+			]);
+		});
+
+		it('should generate monthly occurrences including today if alert time is in the future', () => {
 			const result = buildAlertScheduleFromCustomSchedule(
 				'month',
-				['1', 'invalid', '15'],
+				['15'],
+				'10:30:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today included (15-01-2024 10:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 10:30:00',
+				'15-02-2024 10:30:00',
+				'15-03-2024 10:30:00',
+				'15-04-2024 10:30:00',
+				'15-05-2024 10:30:00',
+			]);
+		});
+
+		it('should generate monthly occurrences excluding today if alert time is in the past', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['15'],
+				'00:00:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today excluded (15-01-2024 10:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-02-2024 00:00:00',
+				'15-03-2024 00:00:00',
+				'15-04-2024 00:00:00',
+				'15-05-2024 00:00:00',
+				'15-06-2024 00:00:00',
+			]);
+		});
+
+		it('should generate monthly occurrences excluding today if alert time is in the present (right now)', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['15'],
+				'00:30:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			// today excluded (15-01-2024 10:30:00)
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-02-2024 00:30:00',
+				'15-03-2024 00:30:00',
+				'15-04-2024 00:30:00',
+				'15-05-2024 00:30:00',
+				'15-06-2024 00:30:00',
+			]);
+		});
+
+		it('should account for february 29th in a leap year', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['29'],
 				'10:30:00',
-				'UTC',
 				5,
 			);
 
 			expect(result).toBeDefined();
 			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'29-01-2024 10:30:00',
+				'29-02-2024 10:30:00',
+				'29-03-2024 10:30:00',
+				'29-04-2024 10:30:00',
+				'29-05-2024 10:30:00',
+			]);
 		});
 
-		it('should filter invalid weekdays for weekly schedule', () => {
-			buildAlertScheduleFromCustomSchedule(
-				'week',
-				['monday', 'invalid', 'friday'],
-				'10:30:00',
-				'UTC',
-				5,
-			);
-
-			// Function should handle invalid weekdays gracefully
-			expect(true).toBe(true);
-		});
-
-		it('should return null on error', () => {
-			// Test with invalid parameters that should cause an error
+		it('should skip 31st on 30-day months', () => {
 			const result = buildAlertScheduleFromCustomSchedule(
-				'invalid_repeat_type',
-				['monday'],
+				'month',
+				['31'],
 				'10:30:00',
-				'UTC',
 				5,
 			);
-			// Should return empty array, not null, for invalid repeat type
-			expect(result).toEqual([]);
+
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'31-01-2024 10:30:00',
+				'31-03-2024 10:30:00',
+				'31-05-2024 10:30:00',
+				'31-07-2024 10:30:00',
+				'31-08-2024 10:30:00',
+			]);
+		});
+
+		it('should skip february 29th in a non-leap year', async () => {
+			jest.resetModules(); // clear previous mocks
+
+			jest.doMock('dayjs', () => {
+				const originalDayjs = jest.requireActual('dayjs');
+				const mockDayjs = (date?: string | Date): Dayjs => {
+					if (date) return originalDayjs(date);
+					return originalDayjs(MOCK_DATE_STRING_NON_LEAP_YEAR);
+				};
+				Object.assign(mockDayjs, originalDayjs);
+				return mockDayjs;
+			});
+
+			const { buildAlertScheduleFromCustomSchedule } = await import('../utils');
+			const { default: dayjs } = await import('dayjs');
+
+			const formatDate = (date: Date): string =>
+				dayjs(date).format('DD-MM-YYYY HH:mm:ss');
+
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['29'],
+				'10:30:00',
+				5,
+			);
+
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'29-01-2023 10:30:00',
+				'29-03-2023 10:30:00',
+				'29-04-2023 10:30:00',
+				'29-05-2023 10:30:00',
+				'29-06-2023 10:30:00',
+			]);
+		});
+
+		it('should generate daily occurrences', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'day',
+				[],
+				'10:40:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 10:40:00',
+				'16-01-2024 10:40:00',
+				'17-01-2024 10:40:00',
+				'18-01-2024 10:40:00',
+				'19-01-2024 10:40:00',
+			]);
+		});
+
+		it('should generate daily occurrences excluding today if alert time is in the past', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'day',
+				[],
+				'00:00:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'16-01-2024 00:00:00',
+				'17-01-2024 00:00:00',
+				'18-01-2024 00:00:00',
+				'19-01-2024 00:00:00',
+				'20-01-2024 00:00:00',
+			]);
+		});
+
+		it('should generate daily occurrences excluding today if alert time is in the present (right now)', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'day',
+				[],
+				'00:30:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'16-01-2024 00:30:00',
+				'17-01-2024 00:30:00',
+				'18-01-2024 00:30:00',
+				'19-01-2024 00:30:00',
+				'20-01-2024 00:30:00',
+			]);
+		});
+
+		it('should generate daily occurrences including today if alert time is in the future', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'day',
+				[],
+				'10:30:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'15-01-2024 10:30:00',
+				'16-01-2024 10:30:00',
+				'17-01-2024 10:30:00',
+				'18-01-2024 10:30:00',
+				'19-01-2024 10:30:00',
+			]);
+		});
+
+		it('daily occurrences should span across months correctly', async () => {
+			jest.resetModules(); // clear previous mocks
+
+			jest.doMock('dayjs', () => {
+				const originalDayjs = jest.requireActual('dayjs');
+				const mockDayjs = (date?: string | Date): Dayjs => {
+					if (date) return originalDayjs(date);
+					return originalDayjs(MOCK_DATE_STRING_SPANS_MONTHS);
+				};
+				Object.assign(mockDayjs, originalDayjs);
+				return mockDayjs;
+			});
+
+			const { buildAlertScheduleFromCustomSchedule } = await import('../utils');
+			const { default: dayjs } = await import('dayjs');
+
+			const formatDate = (date: Date): string =>
+				dayjs(date).format('DD-MM-YYYY HH:mm:ss');
+
+			const result = buildAlertScheduleFromCustomSchedule(
+				'day',
+				[],
+				'10:30:00',
+				5,
+			);
+			expect(result).toBeDefined();
+			expect(Array.isArray(result)).toBe(true);
+			expect(result?.map((res) => formatDate(res))).toEqual([
+				'31-01-2024 10:30:00',
+				'01-02-2024 10:30:00',
+				'02-02-2024 10:30:00',
+				'03-02-2024 10:30:00',
+				'04-02-2024 10:30:00',
+			]);
 		});
 	});
 

frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts

@@ -1,3 +1,5 @@
+import { generateTimezoneData } from 'components/CustomTimePicker/timezoneUtils';
+
 export const EVALUATION_WINDOW_TYPE = [
 	{ label: 'Rolling', value: 'rolling' },
 	{ label: 'Cumulative', value: 'cumulative' },
@@ -21,6 +23,7 @@ export const EVALUATION_WINDOW_TIMEFRAME = {
 };
 
 export const EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS = [
+	{ label: 'DAY', value: 'day' },
 	{ label: 'WEEK', value: 'week' },
 	{ label: 'MONTH', value: 'month' },
 ];
@@ -36,7 +39,7 @@ export const EVALUATION_CADENCE_REPEAT_EVERY_WEEK_OPTIONS = [
 ];
 
 export const EVALUATION_CADENCE_REPEAT_EVERY_MONTH_OPTIONS = Array.from(
-	{ length: 30 },
+	{ length: 31 },
 	(_, i) => {
 		const value = String(i + 1);
 		return { label: value, value };
@@ -52,3 +55,8 @@ export const WEEKDAY_MAP: { [key: string]: number } = {
 	friday: 5,
 	saturday: 6,
 };
+
+export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
+	label: `${timezone.name} (${timezone.offset})`,
+	value: timezone.value,
+}));

frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss

@@ -25,7 +25,6 @@
 		.ant-btn {
 			display: flex;
 			align-items: center;
-			width: 240px;
 			justify-content: space-between;
 			background-color: var(--bg-ink-300);
 			border: 1px solid var(--bg-slate-400);
@@ -33,6 +32,7 @@
 			.evaluate-alert-conditions-button-left {
 				color: var(--bg-vanilla-400);
 				font-size: 12px;
+				padding-right: 16px;
 			}
 
 			.evaluate-alert-conditions-button-right {
@@ -72,154 +72,6 @@
 			}
 		}
 	}
-
-	.advanced-option-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		padding: 16px;
-		border-bottom: 1px solid var(--bg-slate-500);
-
-		.advanced-option-item-left-content {
-			display: flex;
-			flex-direction: column;
-			gap: 6px;
-
-			.advanced-option-item-title {
-				color: var(--bg-vanilla-300);
-				font-family: Inter;
-				font-size: 14px;
-				font-weight: 500;
-			}
-
-			.advanced-option-item-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-weight: 400;
-			}
-
-			.advanced-option-item-input {
-				margin-top: 16px;
-
-				.ant-input {
-					background-color: var(--bg-ink-400);
-					border: 1px solid var(--bg-slate-400);
-					color: var(--bg-vanilla-100);
-					height: 32px;
-
-					&::placeholder {
-						font-family: 'Space Mono';
-					}
-
-					&:hover {
-						border-color: var(--bg-vanilla-300);
-					}
-
-					&:focus {
-						border-color: var(--bg-vanilla-300);
-						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-					}
-				}
-
-				.ant-select {
-					.ant-select-selector {
-						background-color: var(--bg-ink-400);
-						border: 1px solid var(--bg-slate-400);
-						color: var(--bg-vanilla-100);
-						height: 32px;
-
-						&:hover {
-							border-color: var(--bg-vanilla-300);
-						}
-
-						&:focus {
-							border-color: var(--bg-vanilla-300);
-							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-						}
-
-						.ant-select-selection-placeholder {
-							font-family: 'Space Mono';
-						}
-					}
-
-					.ant-select-selection-item {
-						color: var(--bg-vanilla-100);
-					}
-
-					.ant-select-arrow {
-						color: var(--bg-vanilla-400);
-					}
-				}
-			}
-		}
-
-		.advanced-option-item-right-content {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.advanced-option-item-input-group {
-				display: flex;
-				align-items: center;
-
-				.ant-input {
-					background-color: var(--bg-ink-400);
-					border: 1px solid var(--bg-slate-400);
-					color: var(--bg-vanilla-100);
-
-					&:hover {
-						border-color: var(--bg-vanilla-300);
-					}
-
-					&:focus {
-						border-color: var(--bg-vanilla-300);
-						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-					}
-				}
-
-				.ant-select {
-					.ant-select-selector {
-						background-color: var(--bg-ink-400);
-						color: var(--bg-vanilla-100);
-						height: 32px;
-						border: 1px solid var(--bg-slate-400);
-
-						&:hover {
-							border-color: var(--bg-vanilla-300);
-						}
-
-						&:focus {
-							border-color: var(--bg-vanilla-300);
-							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-						}
-
-						.ant-select-selection-placeholder {
-							font-family: 'Space Mono';
-						}
-					}
-
-					.ant-select-selection-item {
-						color: var(--bg-vanilla-100);
-					}
-
-					.ant-select-arrow {
-						color: var(--bg-vanilla-400);
-					}
-				}
-			}
-
-			.advanced-option-item-button {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				background-color: var(--bg-ink-200);
-				border: 1px solid var(--bg-slate-400);
-				color: var(--bg-vanilla-400);
-				border-radius: 4px;
-			}
-		}
-	}
 }
 
 .ant-popover-arrow {
@@ -333,7 +185,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	min-width: 400px;
+	width: 400px;
 	min-height: 300px;
 	padding: 16px;
 
@@ -363,7 +215,7 @@
 
 	.ant-typography {
 		color: var(--bg-vanilla-400);
-		font-size: 14px;
+		font-size: 13px;
 		font-weight: 500;
 	}
 
@@ -385,293 +237,153 @@
 			border-color: var(--bg-ink-400);
 		}
 	}
+
+	.ant-input {
+		background-color: var(--bg-ink-300);
+		border: 1px solid var(--bg-slate-400);
+		color: var(--bg-vanilla-100);
+		height: 32px;
+		width: 60%;
+	}
 }
 
-.evaluation-cadence-container {
-	border-bottom: 1px solid var(--bg-slate-500);
-	.evaluation-cadence-item {
-		border-bottom: none !important;
+.lightMode {
+	.evaluation-settings-container {
+		.evaluate-alert-conditions-container {
+			background-color: var(--bg-vanilla-200);
+			border: 1px solid var(--bg-vanilla-300);
+
+			.ant-typography {
+				color: var(--bg-ink-400);
+			}
+
+			.evaluate-alert-conditions-separator {
+				border-top: 1px dashed var(--bg-vanilla-300);
+			}
+
+			.ant-btn {
+				background-color: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-vanilla-300);
+
+				.evaluate-alert-conditions-button-left {
+					color: var(--bg-ink-400);
+				}
+
+				.evaluate-alert-conditions-button-right {
+					color: var(--bg-ink-400);
+
+					.evaluate-alert-conditions-button-right-text {
+						background-color: var(--bg-vanilla-300);
+					}
+				}
+			}
+		}
 	}
 
-	.edit-custom-schedule {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 16px;
-		padding: 16px;
+	.advanced-options-container {
+		.ant-collapse {
+			.ant-collapse-item {
+				.ant-collapse-header {
+					background-color: var(--bg-vanilla-200);
+					border: 1px solid var(--bg-vanilla-300);
+
+					.ant-collapse-header-text {
+						color: var(--bg-ink-400);
+					}
+				}
+
+				.ant-collapse-content {
+					.ant-collapse-content-box {
+						background-color: var(--bg-vanilla-200);
+					}
+				}
+			}
+		}
+	}
+
+	.ant-popover-content {
+		background-color: var(--bg-vanilla-200);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.ant-popover-inner {
+			background-color: var(--bg-vanilla-200);
+
+			.evaluation-window-popover {
+				.evaluation-window-content {
+					.evaluation-window-content-item {
+						border-right: 1px solid var(--bg-vanilla-300);
+
+						.evaluation-window-content-item-label {
+							color: var(--bg-ink-300);
+						}
+
+						.evaluation-window-content-list {
+							.evaluation-window-content-list-item {
+								.ant-typography {
+									color: var(--bg-ink-400);
+								}
+
+								&.active {
+									background-color: var(--bg-vanilla-300);
+									border-left: 2px solid var(--bg-robin-500);
+									.ant-typography {
+										color: var(--bg-ink-400);
+									}
+								}
+
+								&:hover {
+									background-color: var(--bg-vanilla-300);
+								}
+							}
+						}
+					}
+
+					.selection-content {
+						.ant-typography {
+							color: var(--bg-ink-400);
+						}
+					}
+				}
+
+				.evaluation-window-footer {
+					background-color: var(--bg-vanilla-300);
+					border-top: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-btn {
+					background-color: var(--bg-vanilla-300);
+					border: 1px solid var(--bg-vanilla-300);
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+	}
+
+	.evaluation-window-details {
+		.select-group {
+			.ant-typography {
+				color: var(--bg-ink-300);
+			}
+		}
 
 		.ant-typography {
-			color: var(--bg-vanilla-100);
-			font-size: 13px;
-
-			.highlight {
-				background-color: var(--bg-slate-500);
-				padding: 4px 8px;
-				border-radius: 4px;
-				color: var(--bg-vanilla-400);
-				font-weight: 500;
-				margin: 0 4px;
-				font-size: 14px;
-			}
+			color: var(--bg-ink-400);
 		}
 
-		.ant-btn-group {
-			.ant-btn {
-				border: 1px solid var(--bg-slate-400);
-				color: var(--bg-vanilla-400);
-				font-size: 14px;
-				display: flex;
-				align-items: center;
-				gap: 8px;
+		.ant-select {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+
+			.ant-select-selector {
+				background-color: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			&:hover {
+				border-color: var(--bg-vanilla-200);
 			}
 		}
 	}
 }
-
-.evaluation-cadence-details {
-	margin: 16px;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	border: 1px solid var(--bg-slate-500);
-
-	.evaluation-cadence-details-title {
-		color: var(--bg-vanilla-100);
-		font-size: 14px;
-		font-weight: 500;
-		padding-left: 16px;
-		padding-top: 16px;
-	}
-
-	.query-section-tabs {
-		display: flex;
-		align-items: center;
-
-		.query-section-query-actions {
-			display: flex;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			flex-direction: row;
-			border-bottom: none;
-			margin-bottom: -1px;
-
-			.explorer-view-option {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: row;
-				border: none;
-				padding: 9px;
-				box-shadow: none;
-				border-radius: 0px;
-				border-left: 0.5px solid var(--bg-slate-400);
-				border-bottom: 0.5px solid var(--bg-slate-400);
-				width: 120px;
-				height: 36px;
-
-				gap: 8px;
-
-				&.active-tab {
-					background-color: var(--bg-ink-500);
-					border-bottom: none;
-
-					&:hover {
-						background-color: var(--bg-ink-500) !important;
-					}
-				}
-
-				&:disabled {
-					background-color: var(--bg-ink-300);
-					opacity: 0.6;
-				}
-
-				&:first-child {
-					border-left: 1px solid transparent;
-				}
-
-				&:hover {
-					background-color: transparent !important;
-					border-left: 1px solid transparent !important;
-					color: var(--bg-vanilla-100);
-				}
-			}
-		}
-	}
-
-	.evaluation-cadence-details-content {
-		display: flex;
-		gap: 16px;
-		border-top: 1px solid var(--bg-slate-500);
-		padding: 16px;
-
-		.evaluation-cadence-details-content-row {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-			flex: 1;
-			height: 500px;
-			overflow-y: scroll;
-			padding-right: 16px;
-
-			.editor-view,
-			.rrule-view {
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-
-				textarea {
-					height: 200px;
-					background: var(--bg-ink-300);
-					border: 1px solid var(--bg-slate-400);
-					border-radius: 4px;
-					color: var(--bg-vanilla-400) !important;
-					font-family: 'Space Mono';
-					font-size: 14px;
-
-					&::placeholder {
-						font-family: 'Space Mono';
-						color: var(--bg-vanilla-400) !important;
-					}
-				}
-
-				.select-group {
-					display: flex;
-					flex-direction: column;
-					gap: 4px;
-
-					.ant-typography {
-						color: var(--bg-vanilla-100);
-						font-size: 13px;
-						font-weight: 500;
-					}
-
-					.ant-select {
-						border: 1px solid var(--bg-slate-400);
-
-						.ant-select-selector {
-							background-color: var(--bg-ink-300);
-							border: 1px solid var(--bg-slate-400);
-							color: var(--bg-vanilla-100);
-						}
-					}
-
-					.ant-picker {
-						background-color: var(--bg-ink-300);
-						border: 1px solid var(--bg-slate-400);
-
-						.ant-picker-input {
-							background-color: var(--bg-ink-300);
-							color: var(--bg-vanilla-100);
-						}
-					}
-				}
-			}
-
-			.buttons-row {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				margin-top: 16px;
-			}
-
-			.no-schedule {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: column;
-				gap: 8px;
-				height: 100%;
-				color: var(--bg-vanilla-100);
-				font-size: 14px;
-			}
-
-			.schedule-preview {
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-				width: 100%;
-
-				.schedule-preview-header {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-
-					.schedule-preview-title {
-						color: var(--bg-vanilla-300);
-						font-size: 14px;
-						font-weight: 500;
-					}
-				}
-
-				.schedule-preview-list {
-					display: flex;
-					flex-direction: column;
-					gap: 0;
-
-					.schedule-preview-item {
-						display: flex;
-						align-items: center;
-						gap: 12px;
-						padding: 8px 0;
-
-						.schedule-preview-timeline {
-							display: flex;
-							flex-direction: column;
-							align-items: center;
-							min-width: 20px;
-
-							.schedule-preview-timeline-line {
-								width: 1px;
-								height: 20px;
-								background-color: var(--bg-slate-400);
-							}
-						}
-
-						.schedule-preview-content {
-							display: flex;
-							align-items: center;
-							gap: 12px;
-							flex: 1;
-
-							.schedule-preview-date {
-								color: var(--bg-vanilla-300);
-								font-size: 14px;
-								font-weight: 400;
-								white-space: nowrap;
-							}
-
-							.schedule-preview-separator {
-								flex: 1;
-								height: 1px;
-								border-top: 1px dashed var(--bg-slate-400);
-							}
-
-							.schedule-preview-timezone {
-								color: var(--bg-vanilla-400);
-								font-size: 12px;
-								font-weight: 400;
-								white-space: nowrap;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.ant-picker-date-panel {
-	background-color: var(--bg-ink-300);
-	border: 1px solid var(--bg-slate-300);
-}
-
-.ant-picker-date-panel-layout {
-	background-color: var(--bg-ink-300);
-	border: 1px solid var(--bg-slate-300);
-}
-
-.ant-picker-date-panel-header {
-	background-color: var(--bg-ink-300);
-	border: 1px solid var(--bg-slate-300);
-}

frontend/src/container/CreateAlertV2/EvaluationSettings/types.ts

@@ -9,6 +9,8 @@ export interface IAdvancedOptionItemProps {
 	title: string;
 	description: string;
 	input: JSX.Element;
+	tooltipText?: string;
+	onToggle?: () => void;
 }
 
 export enum RollingWindowTimeframes {
@@ -42,6 +44,12 @@ export interface IEvaluationWindowDetailsProps {
 export interface IEvaluationCadenceDetailsProps {
 	isOpen: boolean;
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
+	setIsCustomScheduleButtonVisible: Dispatch<SetStateAction<boolean>>;
+}
+
+export interface IEvaluationCadencePreviewProps {
+	isOpen: boolean;
+	setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 export interface TimeInputProps {
@@ -51,3 +59,13 @@ export interface TimeInputProps {
 	disabled?: boolean;
 	className?: string;
 }
+
+export interface IEditCustomScheduleProps {
+	setIsEvaluationCadenceDetailsVisible: (isOpen: boolean) => void;
+	setIsPreviewVisible: (isOpen: boolean) => void;
+}
+
+export interface IScheduleListProps {
+	schedule: Date[] | null;
+	currentTimezone: string;
+}

frontend/src/container/CreateAlertV2/EvaluationSettings/utils.tsx

@@ -1,9 +1,11 @@
-import { generateTimezoneData } from 'components/CustomTimePicker/timezoneUtils';
+import * as Sentry from '@sentry/react';
 import dayjs, { Dayjs } from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { rrulestr } from 'rrule';
 
+import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../context/constants';
+import { EvaluationWindowState } from '../context/types';
 import { WEEKDAY_MAP } from './constants';
 import { CumulativeWindowTimeframes, RollingWindowTimeframes } from './types';
 
@@ -20,20 +22,22 @@ export const getEvaluationWindowTypeText = (
 		case 'cumulative':
 			return 'Cumulative';
 		default:
-			return 'Rolling';
+			return '';
 	}
 };
 
-export const getCumulativeWindowTimeframeText = (timeframe: string): string => {
-	switch (timeframe) {
+export const getCumulativeWindowTimeframeText = (
+	evaluationWindow: EvaluationWindowState,
+): string => {
+	switch (evaluationWindow.timeframe) {
 		case CumulativeWindowTimeframes.CURRENT_HOUR:
-			return 'Current hour';
+			return `Current hour, starting at minute ${evaluationWindow.startingAt.number} (${evaluationWindow.startingAt.timezone})`;
 		case CumulativeWindowTimeframes.CURRENT_DAY:
-			return 'Current day';
+			return `Current day, starting from ${evaluationWindow.startingAt.time} (${evaluationWindow.startingAt.timezone})`;
 		case CumulativeWindowTimeframes.CURRENT_MONTH:
-			return 'Current month';
+			return `Current month, starting from day ${evaluationWindow.startingAt.number} at ${evaluationWindow.startingAt.time} (${evaluationWindow.startingAt.timezone})`;
 		default:
-			return 'Current hour';
+			return '';
 	}
 };
 
@@ -56,18 +60,31 @@ export const getRollingWindowTimeframeText = (
 		case RollingWindowTimeframes.LAST_4_HOURS:
 			return 'Last 4 hours';
 		default:
-			return 'Last 5 minutes';
+			return '';
 	}
 };
 
+export const getCustomRollingWindowTimeframeText = (
+	evaluationWindow: EvaluationWindowState,
+): string =>
+	`Last ${evaluationWindow.startingAt.number} ${
+		ADVANCED_OPTIONS_TIME_UNIT_OPTIONS.find(
+			(option) => option.value === evaluationWindow.startingAt.unit,
+		)?.label
+	}`;
+
 export const getTimeframeText = (
-	windowType: 'rolling' | 'cumulative',
-	timeframe: string,
+	evaluationWindow: EvaluationWindowState,
 ): string => {
-	if (windowType === 'rolling') {
-		return getRollingWindowTimeframeText(timeframe as RollingWindowTimeframes);
+	if (evaluationWindow.windowType === 'rolling') {
+		if (evaluationWindow.timeframe === 'custom') {
+			return getCustomRollingWindowTimeframeText(evaluationWindow);
+		}
+		return getRollingWindowTimeframeText(
+			evaluationWindow.timeframe as RollingWindowTimeframes,
+		);
 	}
-	return getCumulativeWindowTimeframeText(timeframe);
+	return getCumulativeWindowTimeframeText(evaluationWindow);
 };
 
 export function buildAlertScheduleFromRRule(
@@ -114,7 +131,6 @@ export function buildAlertScheduleFromRRule(
 
 		return occurrences;
 	} catch (error) {
-		console.error('Error building RRULE:', error);
 		return null;
 	}
 }
@@ -124,13 +140,15 @@ function generateMonthlyOccurrences(
 	hours: number,
 	minutes: number,
 	seconds: number,
-	timezone: string,
 	maxOccurrences: number,
 ): Date[] {
 	const occurrences: Date[] = [];
-	const currentMonth = dayjs().tz(timezone).startOf('month');
+	const currentMonth = dayjs().startOf('month');
 
-	Array.from({ length: maxOccurrences }).forEach((_, monthOffset) => {
+	const currentDate = dayjs();
+
+	const scanMonths = maxOccurrences + 12;
+	for (let monthOffset = 0; monthOffset < scanMonths; monthOffset++) {
 		const monthDate = currentMonth.add(monthOffset, 'month');
 		targetDays.forEach((day) => {
 			if (occurrences.length >= maxOccurrences) return;
@@ -142,12 +160,12 @@ function generateMonthlyOccurrences(
 					.hour(hours)
 					.minute(minutes)
 					.second(seconds);
-				if (targetDate.isAfter(dayjs().tz(timezone))) {
+				if (targetDate.isAfter(currentDate)) {
 					occurrences.push(targetDate.toDate());
 				}
 			}
 		});
-	});
+	}
 
 	return occurrences;
 }
@@ -157,13 +175,14 @@ function generateWeeklyOccurrences(
 	hours: number,
 	minutes: number,
 	seconds: number,
-	timezone: string,
 	maxOccurrences: number,
 ): Date[] {
 	const occurrences: Date[] = [];
-	const currentWeek = dayjs().tz(timezone).startOf('week');
+	const currentWeek = dayjs().startOf('week');
 
-	Array.from({ length: maxOccurrences }).forEach((_, weekOffset) => {
+	const currentDate = dayjs();
+
+	for (let weekOffset = 0; weekOffset < maxOccurrences; weekOffset++) {
 		const weekDate = currentWeek.add(weekOffset, 'week');
 		targetWeekdays.forEach((weekday) => {
 			if (occurrences.length >= maxOccurrences) return;
@@ -173,11 +192,39 @@ function generateWeeklyOccurrences(
 				.hour(hours)
 				.minute(minutes)
 				.second(seconds);
-			if (targetDate.isAfter(dayjs().tz(timezone))) {
+			if (targetDate.isAfter(currentDate)) {
 				occurrences.push(targetDate.toDate());
 			}
 		});
-	});
+	}
+
+	return occurrences;
+}
+
+export function generateDailyOccurrences(
+	hours: number,
+	minutes: number,
+	seconds: number,
+	maxOccurrences: number,
+): Date[] {
+	const occurrences: Date[] = [];
+	const currentDate = dayjs();
+	const currentTime =
+		currentDate.hour() * 3600 + currentDate.minute() * 60 + currentDate.second();
+	const targetTime = hours * 3600 + minutes * 60 + seconds;
+
+	// Start from today if target time is after current time, otherwise start from tomorrow
+	const startDayOffset = targetTime > currentTime ? 0 : 1;
+
+	for (
+		let dayOffset = startDayOffset;
+		dayOffset < startDayOffset + maxOccurrences;
+		dayOffset++
+	) {
+		const dayDate = currentDate.add(dayOffset, 'day');
+		const targetDate = dayDate.hour(hours).minute(minutes).second(seconds);
+		occurrences.push(targetDate.toDate());
+	}
 
 	return occurrences;
 }
@@ -186,14 +233,9 @@ export function buildAlertScheduleFromCustomSchedule(
 	repeatEvery: string,
 	occurence: string[],
 	startAt: string,
-	timezone: string,
 	maxOccurrences = 10,
 ): Date[] | null {
 	try {
-		if (!repeatEvery || !occurence.length || !startAt || !timezone) {
-			return null;
-		}
-
 		const [hours = 0, minutes = 0, seconds = 0] = startAt.split(':').map(Number);
 		let occurrences: Date[] = [];
 
@@ -206,7 +248,6 @@ export function buildAlertScheduleFromCustomSchedule(
 				hours,
 				minutes,
 				seconds,
-				timezone,
 				maxOccurrences,
 			);
 		} else if (repeatEvery === 'week') {
@@ -218,7 +259,13 @@ export function buildAlertScheduleFromCustomSchedule(
 				hours,
 				minutes,
 				seconds,
-				timezone,
+				maxOccurrences,
+			);
+		} else if (repeatEvery === 'day') {
+			occurrences = generateDailyOccurrences(
+				hours,
+				minutes,
+				seconds,
 				maxOccurrences,
 			);
 		}
@@ -226,16 +273,16 @@ export function buildAlertScheduleFromCustomSchedule(
 		occurrences.sort((a, b) => a.getTime() - b.getTime());
 		return occurrences.slice(0, maxOccurrences);
 	} catch (error) {
-		console.error('Error building custom schedule:', error);
+		Sentry.captureEvent({
+			message: `Error building alert schedule from custom schedule: ${
+				error instanceof Error ? error.message : 'Unknown error'
+			}`,
+			level: 'error',
+		});
 		return null;
 	}
 }
 
-export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
-	label: `${timezone.name} (${timezone.offset})`,
-	value: timezone.value,
-}));
-
 export function isValidRRule(rruleString: string): boolean {
 	try {
 		// normalize escaped \n

frontend/src/container/CreateAlertV2/context/constants.ts

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
-import { TIMEZONE_DATA } from 'container/CreateAlertV2/EvaluationSettings/utils';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { TIMEZONE_DATA } from 'container/CreateAlertV2/EvaluationSettings/constants';
 import dayjs from 'dayjs';
 import getRandomColor from 'lib/getRandomColor';
 import { v4 } from 'uuid';
@@ -76,31 +77,31 @@ export const INITIAL_ALERT_THRESHOLD_STATE: AlertThresholdState = {
 
 export const INITIAL_ADVANCED_OPTIONS_STATE: AdvancedOptionsState = {
 	sendNotificationIfDataIsMissing: {
-		toleranceLimit: 0,
-		timeUnit: '',
+		toleranceLimit: 15,
+		timeUnit: UniversalYAxisUnit.MINUTES,
 	},
 	enforceMinimumDatapoints: {
 		minimumDatapoints: 0,
 	},
 	delayEvaluation: {
-		delay: 0,
-		timeUnit: '',
+		delay: 5,
+		timeUnit: UniversalYAxisUnit.MINUTES,
 	},
 	evaluationCadence: {
 		mode: 'default',
 		default: {
 			value: 1,
-			timeUnit: 'm',
+			timeUnit: UniversalYAxisUnit.MINUTES,
 		},
 		custom: {
-			repeatEvery: 'week',
-			startAt: '00:00:00',
+			repeatEvery: 'day',
+			startAt: dayjs().format('HH:mm:ss'),
 			occurence: [],
 			timezone: TIMEZONE_DATA[0].value,
 		},
 		rrule: {
 			date: dayjs(),
-			startAt: '00:00:00',
+			startAt: dayjs().format('HH:mm:ss'),
 			rrule: '',
 		},
 	},
@@ -110,9 +111,10 @@ export const INITIAL_EVALUATION_WINDOW_STATE: EvaluationWindowState = {
 	windowType: 'rolling',
 	timeframe: '5m0s',
 	startingAt: {
-		time: '00:00:00',
+		time: dayjs().format('HH:mm:ss'),
 		number: '1',
 		timezone: TIMEZONE_DATA[0].value,
+		unit: UniversalYAxisUnit.MINUTES,
 	},
 };
 
@@ -163,8 +165,8 @@ export const ANOMALY_SEASONALITY_OPTIONS = [
 ];
 
 export const ADVANCED_OPTIONS_TIME_UNIT_OPTIONS = [
-	{ value: 's', label: 'Second' },
-	{ value: 'm', label: 'Minute' },
-	{ value: 'h', label: 'Hours' },
-	{ value: 'd', label: 'Day' },
+	{ value: UniversalYAxisUnit.SECONDS, label: 'Seconds' },
+	{ value: UniversalYAxisUnit.MINUTES, label: 'Minutes' },
+	{ value: UniversalYAxisUnit.HOURS, label: 'Hours' },
+	{ value: UniversalYAxisUnit.DAYS, label: 'Days' },
 ];

frontend/src/container/CreateAlertV2/context/types.ts

@@ -175,6 +175,7 @@ export interface EvaluationWindowState {
 		time: string;
 		number: string;
 		timezone: string;
+		unit: string;
 	};
 }
 
@@ -183,7 +184,7 @@ export type EvaluationWindowAction =
 	| { type: 'SET_TIMEFRAME'; payload: string }
 	| {
 			type: 'SET_STARTING_AT';
-			payload: { time: string; number: string; timezone: string };
+			payload: { time: string; number: string; timezone: string; unit: string };
 	  }
 	| { type: 'SET_EVALUATION_CADENCE_MODE'; payload: EvaluationCadenceMode }
 	| { type: 'RESET' };

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -30,20 +30,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 // Mock data
 const mockProps: WidgetGraphComponentProps = {
 	widget: {

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -33,19 +33,6 @@ jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
 
 const queryClient = new QueryClient();
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),
 	useSelector: (): any => ({

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListTable.test.tsx

@@ -3,20 +3,6 @@ import { render, screen } from '@testing-library/react';
 
 import HostsListTable from '../HostsListTable';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 const EMPTY_STATE_CONTAINER_CLASS = '.hosts-empty-state-container';
 
 describe('HostsListTable', () => {

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -4,20 +4,6 @@ import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
 
 const PROGRESS_BAR_CLASS = '.progress-bar';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('InfraMonitoringHosts utils', () => {
 	describe('formatDataForTable', () => {
 		it('should format host data correctly', () => {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.test.tsx

@@ -44,20 +44,6 @@ const verifyEntityLogsPayload = ({
 	return queryData;
 };
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock(
 	'components/OverlayScrollbar/OverlayScrollbar',
 	() =>

frontend/src/container/InfraMonitoringK8s/__tests__/Jobs/JobDetails/JobDetails.test.tsx

@@ -4,14 +4,8 @@ import setupCommonMocks from '../../commonMocks';
 
 setupCommonMocks();
 
-import { fireEvent, render, screen } from '@testing-library/react';
 import JobDetails from 'container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import store from 'store';
-
-const queryClient = new QueryClient();
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 describe('JobDetails', () => {
 	const mockJob = {
@@ -24,13 +18,7 @@ describe('JobDetails', () => {
 
 	it('should render modal with relevant metadata', () => {
 		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<MemoryRouter>
-						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
-					</MemoryRouter>
-				</Provider>
-			</QueryClientProvider>,
+			<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />,
 		);
 
 		const jobNameElements = screen.getAllByText('test-job');
@@ -44,13 +32,7 @@ describe('JobDetails', () => {
 
 	it('should render modal with 4 tabs', () => {
 		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<MemoryRouter>
-						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
-					</MemoryRouter>
-				</Provider>
-			</QueryClientProvider>,
+			<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />,
 		);
 
 		const metricsTab = screen.getByText('Metrics');
@@ -68,13 +50,7 @@ describe('JobDetails', () => {
 
 	it('default tab should be metrics', () => {
 		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<MemoryRouter>
-						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
-					</MemoryRouter>
-				</Provider>
-			</QueryClientProvider>,
+			<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />,
 		);
 
 		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
@@ -83,13 +59,7 @@ describe('JobDetails', () => {
 
 	it('should switch to events tab when events tab is clicked', () => {
 		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<MemoryRouter>
-						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
-					</MemoryRouter>
-				</Provider>
-			</QueryClientProvider>,
+			<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />,
 		);
 
 		const eventsTab = screen.getByRole('radio', { name: 'Events' });
@@ -100,13 +70,7 @@ describe('JobDetails', () => {
 
 	it('should close modal when close button is clicked', () => {
 		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<MemoryRouter>
-						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
-					</MemoryRouter>
-				</Provider>
-			</QueryClientProvider>,
+			<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />,
 		);
 
 		const closeButton = screen.getByRole('button', { name: 'Close' });

frontend/src/container/InfraMonitoringK8s/__tests__/commonMocks.ts

@@ -56,19 +56,6 @@ const setupCommonMocks = (): void => {
 		useNavigationType: (): any => 'PUSH',
 	}));
 
-	jest.mock('hooks/useUrlQuery', () => ({
-		__esModule: true,
-		default: jest.fn(() => ({
-			set: jest.fn(),
-			delete: jest.fn(),
-			get: jest.fn(),
-			has: jest.fn(),
-			entries: jest.fn(() => []),
-			append: jest.fn(),
-			toString: jest.fn(() => ''),
-		})),
-	}));
-
 	jest.mock('lib/getMinMax', () => ({
 		__esModule: true,
 		default: jest.fn().mockImplementation(() => ({

frontend/src/container/LogDetailedView/ContextView/__tests__/ContextLogRenderer.test.tsx

@@ -32,20 +32,6 @@ import {
 // Mock the useContextLogData hook
 const mockHandleRunQuery = jest.fn();
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock('container/OptionsMenu', () => ({
 	useOptionsMenu: (): any => ({
 		options: {

frontend/src/container/LogsExplorerList/__tests__/LogsExplorerList.test.tsx

@@ -73,20 +73,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock('hooks/queryBuilder/useGetExplorerQueryRange', () => ({
 	__esModule: true,
 	useGetExplorerQueryRange: jest.fn(),

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -7,18 +7,16 @@ import { logsresponse } from 'mocks-server/__mockdata__/query_range';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import LogsExplorer from 'pages/LogsExplorer';
-import { QueryBuilderContext } from 'providers/QueryBuilder';
 import React from 'react';
-import { I18nextProvider } from 'react-i18next';
-import { MemoryRouter } from 'react-router-dom-v5-compat';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import i18n from 'ReactI18';
 import {
 	act,
+	AllTheProviders,
 	fireEvent,
 	render,
 	RenderResult,
 	screen,
+	userEvent,
 	waitFor,
 } from 'tests/test-utils';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -91,20 +89,6 @@ getStateSpy.mockImplementation(() => {
 	return originalState;
 });
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { search: string; pathname: string } => ({
@@ -277,9 +261,7 @@ describe.skip('LogsExplorerViews Pagination', () => {
 		act(() => {
 			renderResult = render(
 				<VirtuosoMockContext.Provider value={{ viewportHeight, itemHeight }}>
-					<I18nextProvider i18n={i18n}>
-						<LogsExplorer />
-					</I18nextProvider>
+					<LogsExplorer />
 				</VirtuosoMockContext.Provider>,
 			);
 		});
@@ -453,13 +435,14 @@ function LogsExplorerWithMockContext({
 	);
 
 	return (
-		<MemoryRouter>
-			<QueryBuilderContext.Provider value={contextValue as any}>
-				<VirtuosoMockContext.Provider value={virtuosoContextValue}>
-					<LogsExplorer />
-				</VirtuosoMockContext.Provider>
-			</QueryBuilderContext.Provider>
-		</MemoryRouter>
+		<AllTheProviders
+			queryBuilderOverrides={contextValue as any}
+			initialRoute="/logs"
+		>
+			<VirtuosoMockContext.Provider value={virtuosoContextValue}>
+				<LogsExplorer />
+			</VirtuosoMockContext.Provider>
+		</AllTheProviders>
 	);
 }
 
@@ -536,13 +519,12 @@ describe('Logs Explorer -> stage and run query', () => {
 		const initialEnd = initialPayload.end;
 
 		// Click the Stage & Run Query button
-		await act(async () => {
-			fireEvent.click(
-				screen.getByRole('button', {
-					name: /stage & run query/i,
-				}),
-			);
-		});
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(
+			screen.getByRole('button', {
+				name: /stage & run query/i,
+			}),
+		);
 
 		// Wait for additional API calls to be made after clicking Stage & Run Query
 		await waitFor(

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -33,20 +33,6 @@ const lodsQueryServerRequest = (): void =>
 		),
 	);
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 // mocking the graph components in this test as this should be handled separately
 jest.mock(
 	'container/TimeSeriesView/TimeSeriesView',

frontend/src/container/LogsPanelTable/__tests__/LogsPanelComponent.test.tsx

@@ -18,10 +18,6 @@ const MOCK_SEARCH_PARAMS =
 	'?graphType=list&widgetId=36a7b342-c642-4b92-abe4-cb833a244786&compositeQuery=%7B%22id%22%3A%22b325ac88-5e75-4117-a38c-1a2a7caf8115%22%2C%22builder%22%3A%7B%22queryData%22%3A%5B%7B%22dataSource%22%3A%22logs%22%2C%22queryName%22%3A%22A%22%2C%22aggregateOperator%22%3A%22noop%22%2C%22aggregateAttribute%22%3A%7B%22id%22%3A%22------%22%2C%22dataType%22%3A%22%22%2C%22key%22%3A%22%22%2C%22isColumn%22%3Afalse%2C%22type%22%3A%22%22%2C%22isJSON%22%3Afalse%7D%2C%22timeAggregation%22%3A%22rate%22%2C%22spaceAggregation%22%3A%22sum%22%2C%22functions%22%3A%5B%5D%2C%22filters%22%3A%7B%22items%22%3A%5B%5D%2C%22op%22%3A%22AND%22%7D%2C%22expression%22%3A%22A%22%2C%22disabled%22%3Afalse%2C%22stepInterval%22%3A60%2C%22having%22%3A%5B%5D%2C%22limit%22%3Anull%2C%22orderBy%22%3A%5B%7B%22columnName%22%3A%22timestamp%22%2C%22order%22%3A%22desc%22%7D%5D%2C%22groupBy%22%3A%5B%5D%2C%22legend%22%3A%22%22%2C%22reduceTo%22%3A%22avg%22%2C%22offset%22%3A0%2C%22pageSize%22%3A100%7D%5D%2C%22queryFormulas%22%3A%5B%5D%7D%2C%22clickhouse_sql%22%3A%5B%7B%22name%22%3A%22A%22%2C%22legend%22%3A%22%22%2C%22disabled%22%3Afalse%2C%22query%22%3A%22%22%7D%5D%2C%22promql%22%3A%5B%7B%22name%22%3A%22A%22%2C%22query%22%3A%22%22%2C%22legend%22%3A%22%22%2C%22disabled%22%3Afalse%7D%5D%2C%22queryType%22%3A%22builder%22%7D&relativeTime=30m&options=%7B%22selectColumns%22%3A%5B%5D%2C%22maxLines%22%3A2%2C%22format%22%3A%22list%22%2C%22fontSize%22%3A%22small%22%7D';
 
 // Mocks
-jest.mock('uplot', () => ({
-	paths: { spline: jest.fn(), bars: jest.fn() },
-	default: jest.fn(() => ({ paths: { spline: jest.fn(), bars: jest.fn() } })),
-}));
 
 jest.mock('components/OverlayScrollbar/OverlayScrollbar', () => ({
 	__esModule: true,

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -68,19 +68,6 @@ jest.mock('hooks/useNotifications', () => ({
 		},
 	}),
 }));
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),
 	useSelector: (): any => ({

frontend/src/container/MetricsExplorer/Inspect/__tests__/GraphView.test.tsx

@@ -15,12 +15,6 @@ import {
 	TimeAggregationOptions,
 } from '../types';
 
-jest.mock('uplot', () =>
-	jest.fn().mockImplementation(() => ({
-		destroy: jest.fn(),
-	})),
-);
-
 const mockResizeObserver = jest.fn();
 mockResizeObserver.mockImplementation(() => ({
 	observe: (): void => undefined,

frontend/src/container/MetricsExplorer/Inspect/__tests__/Inspect.test.tsx

@@ -76,12 +76,6 @@ jest
 		isLoading: false,
 	} as any);
 
-jest.mock('uplot', () =>
-	jest.fn().mockImplementation(() => ({
-		destroy: jest.fn(),
-	})),
-);
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { QueryParams } from 'constants/query';
-import * as useSafeNavigate from 'hooks/useSafeNavigate';
 
 import DashboardsAndAlertsPopover from '../DashboardsAndAlertsPopover';
 
@@ -24,9 +23,11 @@ const mockAlerts = [mockAlert1, mockAlert2];
 const mockDashboards = [mockDashboard1, mockDashboard2];
 
 const mockSafeNavigate = jest.fn();
-jest.spyOn(useSafeNavigate, 'useSafeNavigate').mockReturnValue({
-	safeNavigate: mockSafeNavigate,
-});
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
 
 const mockSetQuery = jest.fn();
 const mockUrlQuery = {

frontend/src/container/MetricsExplorer/Summary/__tests__/Summary.test.tsx

@@ -11,19 +11,6 @@ import store from 'store';
 import Summary from '../Summary';
 import { TreemapViewType } from '../types';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
 jest.mock('d3-hierarchy', () => ({
 	stratify: jest.fn().mockReturnValue({
 		id: jest.fn().mockReturnValue({

frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx

@@ -10,20 +10,6 @@ import store from 'store';
 import ChangeHistory from '../index';
 import { pipelineData, pipelineDataHistory } from './testUtils';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {

frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx

@@ -5,20 +5,6 @@ import { PipelineData } from 'types/api/pipeline/def';
 import { pipelineMockData } from '../mocks/pipeline';
 import AddNewPipeline from '../PipelineListsView/AddNewPipeline';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 export function matchMedia(): void {
 	Object.defineProperty(window, 'matchMedia', {
 		writable: true,

frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx

@@ -11,20 +11,6 @@ jest.mock('../PipelineListsView/AddNewProcessor/config', () => ({
 	DEFAULT_PROCESSOR_TYPE: 'json_parser',
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 const selectedProcessorData = {
 	id: '1',
 	orderId: 1,

frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx

@@ -6,20 +6,6 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('PipelinePage container test', () => {
 	it('should render DeleteAction section', () => {
 		const { asFragment } = render(

frontend/src/container/PipelinePage/tests/DragAction.test.tsx

@@ -6,20 +6,6 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('PipelinePage container test', () => {
 	it('should render DragAction section', () => {
 		const { asFragment } = render(

frontend/src/container/PipelinePage/tests/EditAction.test.tsx

@@ -6,20 +6,6 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('PipelinePage container test', () => {
 	it('should render EditAction section', () => {
 		const { asFragment } = render(

frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx

@@ -8,20 +8,6 @@ import store from 'store';
 import { pipelineMockData } from '../mocks/pipeline';
 import PipelineActions from '../PipelineListsView/TableComponents/PipelineActions';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('PipelinePage container test', () => {
 	it('should render PipelineActions section', () => {
 		const { asFragment } = render(

frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx

@@ -3,20 +3,6 @@ import { render } from 'tests/test-utils';
 import { pipelineMockData } from '../mocks/pipeline';
 import PipelineExpandView from '../PipelineListsView/PipelineExpandView';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 beforeAll(() => {
 	Object.defineProperty(window, 'matchMedia', {
 		writable: true,

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -6,20 +6,6 @@ import { findByText, fireEvent, render, waitFor } from 'tests/test-utils';
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 import PipelineListsView from '../PipelineListsView';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 // Mock useUrlQuery hook
 const mockUrlQuery = {
 	get: jest.fn(),

frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx

@@ -4,20 +4,6 @@ import { v4 } from 'uuid';
 
 import PipelinePageLayout from '../Layouts/Pipeline';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 beforeAll(() => {
 	Object.defineProperty(window, 'matchMedia', {
 		writable: true,

frontend/src/container/PipelinePage/tests/TagInput.test.tsx

@@ -7,20 +7,6 @@ import store from 'store';
 
 import TagInput from '../components/TagInput';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('Pipeline Page', () => {
 	it('should render TagInput section', () => {
 		const { asFragment } = render(

frontend/src/container/PipelinePage/tests/Tags.test.tsx

@@ -1,24 +1,11 @@
-import { render } from '@testing-library/react';
 import Tags from 'container/PipelinePage/PipelineListsView/TableComponents/Tags';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import i18n from 'ReactI18';
-import store from 'store';
+import { render } from 'tests/test-utils';
 
 const tags = ['server', 'app'];
 
 describe('PipelinePage container test', () => {
 	it('should render Tags section', () => {
-		const { asFragment } = render(
-			<MemoryRouter>
-				<Provider store={store}>
-					<I18nextProvider i18n={i18n}>
-						<Tags tags={tags} />
-					</I18nextProvider>
-				</Provider>
-			</MemoryRouter>,
-		);
+		const { asFragment } = render(<Tags tags={tags} />);
 		expect(asFragment()).toMatchSnapshot();
 	});
 });

frontend/src/container/PipelinePage/tests/utils.test.ts

@@ -11,20 +11,6 @@ import {
 	getTableColumn,
 } from '../PipelineListsView/utils';
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('Utils testing of Pipeline Page', () => {
 	test('it should be check form field of add pipeline', () => {
 		expect(pipelineFields.length).toBe(3);

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -6,7 +6,7 @@ import { PlannedDowntime } from '../PlannedDowntime';
 
 describe('PlannedDowntime Component', () => {
 	it('renders the PlannedDowntime component properly', () => {
-		render(<PlannedDowntime />, {}, 'ADMIN');
+		render(<PlannedDowntime />, {}, { role: 'ADMIN' });
 
 		// Check if title is rendered
 		expect(screen.getByText('Planned Downtime')).toBeInTheDocument();
@@ -30,7 +30,7 @@ describe('PlannedDowntime Component', () => {
 	});
 
 	it('disables the "New downtime" button for users with VIEWER role', () => {
-		render(<PlannedDowntime />, {}, USER_ROLES.VIEWER);
+		render(<PlannedDowntime />, {}, { role: USER_ROLES.VIEWER });
 
 		// Check if "New downtime" button is disabled for VIEWER
 		const newDowntimeButton = screen.getByRole('button', {

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

@@ -58,12 +58,16 @@
 				padding: 2px 8px;
 				align-items: center;
 				width: fit-content;
-				max-width: calc(100% - 120px); /* Reserve space for action buttons */
+				max-width: 100%;
 				gap: 8px;
 				border-radius: 50px;
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-slate-500);
 
+				.copy-wrapper {
+					overflow: hidden;
+				}
+
 				.item-value {
 					color: var(--bg-vanilla-400);
 					font-family: Inter;

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -97,11 +97,13 @@ function Attributes(props: IAttributesProps): JSX.Element {
 						</div>
 						<div className="value-wrapper">
 							<Tooltip title={item.value}>
-								<CopyClipboardHOC entityKey={item.value} textToCopy={item.value}>
-									<Typography.Text className="item-value" ellipsis>
-										{item.value}
-									</Typography.Text>{' '}
-								</CopyClipboardHOC>
+								<div className="copy-wrapper">
+									<CopyClipboardHOC entityKey={item.value} textToCopy={item.value}>
+										<Typography.Text className="item-value" ellipsis>
+											{item.value}
+										</Typography.Text>
+									</CopyClipboardHOC>
+								</div>
 							</Tooltip>
 							<AttributeActions
 								record={item}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -3,7 +3,7 @@
 	flex-direction: column;
 	height: calc(100vh - 44px); //44px -> trace details top bar
 	border-left: 1px solid var(--bg-slate-400);
-	overflow-y: auto;
+	overflow-y: auto !important;
 	&:not(&-docked) {
 		min-width: 450px;
 	}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -1,7 +1,5 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { render } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 import { Span } from 'types/api/trace/getTraceV2';
 
 import { SpanDuration } from '../Success';
@@ -15,7 +13,6 @@ const DIMMED_SPAN_CLASS = 'dimmed-span';
 const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
 
 // Mock the hooks
-jest.mock('hooks/useSafeNavigate');
 jest.mock('hooks/useUrlQuery');
 jest.mock('@signozhq/badge', () => ({
 	Badge: jest.fn(),
@@ -52,24 +49,17 @@ const mockTraceMetadata = {
 	hasMissingSpans: false,
 };
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
 
 describe('SpanDuration', () => {
 	const mockSetSelectedSpan = jest.fn();
 	const mockUrlQuerySet = jest.fn();
-	const mockSafeNavigate = jest.fn();
 	const mockUrlQueryGet = jest.fn();
 
 	beforeEach(() => {
@@ -81,11 +71,6 @@ describe('SpanDuration', () => {
 			get: mockUrlQueryGet,
 			toString: () => 'spanId=test-span-id',
 		});
-
-		// Mock safe navigate hook
-		(useSafeNavigate as jest.Mock).mockReturnValue({
-			safeNavigate: mockSafeNavigate,
-		});
 	});
 
 	it('updates URL and selected span when clicked', () => {

frontend/src/index.tsx

@@ -16,8 +16,6 @@ const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
 			refetchOnWindowFocus: false,
-			staleTime: 2 * 60 * 1000, // 2 minutes - data becomes stale after 2 minutes
-			cacheTime: 5 * 60 * 1000, // 5 minutes - cache entries are garbage collected after 5 minutes
 			retry(failureCount, error): boolean {
 				if (
 					// in case of manually throwing errors please make sure to send error.response.status

frontend/src/mocks-server/server.ts

@@ -1,7 +1,10 @@
 // src/mocks/server.js
+import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 
 import { handlers } from './handlers';
 
 // This configures a request mocking server with the given request handlers.
 export const server = setupServer(...handlers);
+
+export { rest };

frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx

@@ -28,20 +28,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 // mocking the graph components in this test as this should be handled separately
 jest.mock(
 	'container/TimeSeriesView/TimeSeriesView',

frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx

@@ -35,21 +35,16 @@ jest.mock('container/TraceFlameGraph/index.tsx', () => ({
 	default: (): JSX.Element => <div>TraceFlameGraph</div>,
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 describe('TraceDetail', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		jest.setSystemTime(new Date('2023-10-20'));
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
 	it('should render tracedetail', async () => {
 		const { findByText, getByText, getAllByText, getByPlaceholderText } = render(
 			<MemoryRouter initialEntries={['/trace/000000000000000071dc9b0a338729b4']}>

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -127,7 +127,11 @@ function TraceDetailsV2(): JSX.Element {
 	];
 
 	return (
-		<ResizablePanelGroup direction="horizontal" autoSaveId="trace-drawer">
+		<ResizablePanelGroup
+			direction="horizontal"
+			autoSaveId="trace-drawer"
+			className="trace-layout"
+		>
 			<ResizablePanel minSize={20} maxSize={80} className="trace-left-content">
 				<TraceMetadata
 					traceID={traceId}

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -16,7 +16,6 @@ import {
 } from 'mocks-server/__mockdata__/query_range';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { MemoryRouter } from 'react-router-dom-v5-compat';
 import {
 	act,
@@ -97,22 +96,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
 jest.mock(
 	'components/Uplot/Uplot',
 	() =>
@@ -181,32 +164,31 @@ const checkFilterValues = (
 };
 
 const renderWithTracesExplorerRouter = (
-	component: React.ReactNode,
+	component: React.ReactElement,
 	initialEntries: string[] = [
 		'/traces-explorer/?panelType=list&selectedExplorerView=list',
 	],
 ): ReturnType<typeof render> =>
 	render(
-		<MemoryRouter initialEntries={initialEntries}>
-			<QueryBuilderContext.Provider value={{ ...qbProviderValue }}>
-				{component}
-			</QueryBuilderContext.Provider>
-		</MemoryRouter>,
+		component,
+		{},
+		{
+			initialRoute: initialEntries[0],
+			queryBuilderOverrides: qbProviderValue,
+		},
 	);
 
 describe('TracesExplorer - Filters', () => {
 	// Initial filter panel rendering
 	// Test the initial state like which filters section are opened, default state of duration slider, etc.
 	it('should render the Trace filter', async () => {
-		const { getByText, getAllByText, getByTestId } = render(
-			<MemoryRouter
-				initialEntries={[
-					`${process.env.FRONTEND_API_ENDPOINT}${ROUTES.TRACES_EXPLORER}/?panelType=list&selectedExplorerView=list`,
-				]}
-			>
-				<Filter setOpen={jest.fn()} />
-			</MemoryRouter>,
-		);
+		const {
+			getByText,
+			getAllByText,
+			getByTestId,
+		} = renderWithTracesExplorerRouter(<Filter setOpen={jest.fn()} />, [
+			`${process.env.FRONTEND_API_ENDPOINT}${ROUTES.TRACES_EXPLORER}/?panelType=list&selectedExplorerView=list`,
+		]);
 
 		checkFilterValues(getByText, getAllByText);
 
@@ -249,8 +231,12 @@ describe('TracesExplorer - Filters', () => {
 	it('filter panel actions', async () => {
 		const { getByTestId } = render(
 			<MemoryRouter>
-				<Filter setOpen={jest.fn()} />
+				<Filter setOpen={jest.fn()} />,
 			</MemoryRouter>,
+			{},
+			{
+				initialRoute: '/traces-explorer/?panelType=list&selectedExplorerView=list',
+			},
 		);
 
 		// Check if the section is closed
@@ -275,23 +261,21 @@ describe('TracesExplorer - Filters', () => {
 	});
 
 	it('checking filters should update the query', async () => {
-		const { getByText } = renderWithTracesExplorerRouter(
-			<QueryBuilderContext.Provider
-				value={
-					{
-						currentQuery: {
-							...initialQueriesMap.traces,
-							builder: {
-								...initialQueriesMap.traces.builder,
-								queryData: [initialQueryBuilderFormValues],
-							},
+		const { getByText } = render(
+			<Filter setOpen={jest.fn()} />,
+			{},
+			{
+				queryBuilderOverrides: {
+					...qbProviderValue,
+					currentQuery: {
+						...initialQueriesMap.traces,
+						builder: {
+							...initialQueriesMap.traces.builder,
+							queryData: [initialQueryBuilderFormValues],
 						},
-						redirectWithQueryBuilderData,
-					} as any
-				}
-			>
-				<Filter setOpen={jest.fn()} />
-			</QueryBuilderContext.Provider>,
+					},
+				},
+			},
 		);
 
 		const okCheckbox = getByText('Ok');
@@ -343,9 +327,7 @@ describe('TracesExplorer - Filters', () => {
 			.spyOn(compositeQueryHook, 'useGetCompositeQueryParam')
 			.mockReturnValue(compositeQuery);
 
-		const { findByText, getByTestId } = renderWithTracesExplorerRouter(
-			<Filter setOpen={jest.fn()} />,
-		);
+		const { findByText, getByTestId } = render(<Filter setOpen={jest.fn()} />);
 
 		// check if the default query is applied - composite query has filters - serviceName : demo-app and name : HTTP GET /customer
 		expect(await findByText('demo-app')).toBeInTheDocument();
@@ -369,8 +351,12 @@ describe('TracesExplorer - Filters', () => {
 			},
 		});
 
-		const { getByText, getAllByText } = renderWithTracesExplorerRouter(
+		const { getByText, getAllByText } = render(
 			<Filter setOpen={jest.fn()} />,
+			{},
+			{
+				initialRoute: '/traces-explorer/?panelType=list&selectedExplorerView=list',
+			},
 		);
 
 		checkFilterValues(getByText, getAllByText);
@@ -394,31 +380,28 @@ describe('TracesExplorer - Filters', () => {
 			},
 		});
 
-		const { getByText, getAllByText } = renderWithTracesExplorerRouter(
-			<Filter setOpen={jest.fn()} />,
-		);
+		const { getByText, getAllByText } = render(<Filter setOpen={jest.fn()} />);
 
 		checkFilterValues(getByText, getAllByText);
 	});
 
 	it('should clear filter on clear & reset button click', async () => {
-		const { getByText, getByTestId } = renderWithTracesExplorerRouter(
-			<QueryBuilderContext.Provider
-				value={
-					{
-						currentQuery: {
-							...initialQueriesMap.traces,
-							builder: {
-								...initialQueriesMap.traces.builder,
-								queryData: [initialQueryBuilderFormValues],
-							},
+		const { getByText, getByTestId } = render(
+			<Filter setOpen={jest.fn()} />,
+			{},
+			{
+				initialRoute: '/traces-explorer/?panelType=list&selectedExplorerView=list',
+				queryBuilderOverrides: {
+					currentQuery: {
+						...initialQueriesMap.traces,
+						builder: {
+							...initialQueriesMap.traces.builder,
+							queryData: [initialQueryBuilderFormValues],
 						},
-						redirectWithQueryBuilderData,
-					} as any
-				}
-			>
-				<Filter setOpen={jest.fn()} />
-			</QueryBuilderContext.Provider>,
+					},
+					redirectWithQueryBuilderData,
+				},
+			},
 		);
 
 		// check for the status section content

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.test.tsx

@@ -55,7 +55,7 @@ describe('WorkspaceLocked', () => {
 			),
 		);
 
-		render(<WorkspaceLocked />, {}, 'VIEWER');
+		render(<WorkspaceLocked />, {}, { role: 'VIEWER' });
 		const updateCreditCardBtn = await screen.queryByRole('button', {
 			name: /Continue My Journey/i,
 		});

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -269,7 +269,7 @@ export function DashboardProvider({
 		return data;
 	};
 	const dashboardResponse = useQuery(
-		[REACT_QUERY_KEY.DASHBOARD_BY_ID, isDashboardPage?.params],
+		[REACT_QUERY_KEY.DASHBOARD_BY_ID, isDashboardPage?.params, dashboardId],
 		{
 			enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn,
 			queryFn: async () => {

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -0,0 +1,292 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, waitFor } from '@testing-library/react';
+import getDashboard from 'api/v1/dashboards/id/get';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ROUTES from 'constants/routes';
+import { DashboardProvider, useDashboard } from 'providers/Dashboard/Dashboard';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+
+// Mock the dashboard API
+jest.mock('api/v1/dashboards/id/get');
+jest.mock('api/v1/dashboards/id/lock');
+const mockGetDashboard = jest.mocked(getDashboard);
+
+// Mock useRouteMatch to simulate different route scenarios
+const mockUseRouteMatch = jest.fn();
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useRouteMatch: (): any => mockUseRouteMatch(),
+}));
+
+// Mock other dependencies
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+// Mock only the essential dependencies for Dashboard provider
+jest.mock('providers/App/App', () => ({
+	useAppContext: (): any => ({
+		isLoggedIn: true,
+		user: { email: 'test@example.com', role: 'ADMIN' },
+	}),
+}));
+
+jest.mock('providers/ErrorModalProvider', () => ({
+	useErrorModal: (): any => ({ showErrorModal: jest.fn() }),
+}));
+
+jest.mock('react-redux', () => ({
+	useSelector: jest.fn(() => ({
+		selectedTime: 'GLOBAL_TIME',
+		minTime: '2023-01-01T00:00:00Z',
+		maxTime: '2023-01-01T01:00:00Z',
+	})),
+	useDispatch: jest.fn(() => jest.fn()),
+}));
+
+jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
+
+function TestComponent(): JSX.Element {
+	const { dashboardResponse, dashboardId } = useDashboard();
+
+	return (
+		<div>
+			<div data-testid="dashboard-id">{dashboardId}</div>
+			<div data-testid="query-status">{dashboardResponse.status}</div>
+			<div data-testid="is-loading">{dashboardResponse.isLoading.toString()}</div>
+			<div data-testid="is-fetching">
+				{dashboardResponse.isFetching.toString()}
+			</div>
+		</div>
+	);
+}
+
+// Helper to create a test query client
+function createTestQueryClient(): QueryClient {
+	return new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+				refetchOnWindowFocus: false,
+			},
+		},
+	});
+}
+
+// Helper to render with dashboard provider
+function renderWithDashboardProvider(
+	initialRoute = '/dashboard/test-dashboard-id',
+	routeMatchParams?: { dashboardId: string } | null,
+): any {
+	const queryClient = createTestQueryClient();
+
+	// Mock the route match
+	mockUseRouteMatch.mockReturnValue(
+		routeMatchParams
+			? {
+					path: ROUTES.DASHBOARD,
+					url: `/dashboard/${routeMatchParams.dashboardId}`,
+					isExact: true,
+					params: routeMatchParams,
+			  }
+			: null,
+	);
+
+	return render(
+		<QueryClientProvider client={queryClient}>
+			<MemoryRouter initialEntries={[initialRoute]}>
+				<DashboardProvider>
+					<TestComponent />
+				</DashboardProvider>
+			</MemoryRouter>
+		</QueryClientProvider>,
+	);
+}
+
+describe('Dashboard Provider - Query Key with Route Params', () => {
+	const DASHBOARD_ID = 'test-dashboard-id';
+	const mockDashboardData = {
+		httpStatusCode: 200,
+		data: {
+			id: DASHBOARD_ID,
+			title: 'Test Dashboard',
+			description: 'Test Description',
+			tags: [],
+			data: {
+				title: 'Test Dashboard',
+				layout: [],
+				widgets: [],
+				variables: {},
+				panelMap: {},
+			},
+			createdAt: '2023-01-01T00:00:00Z',
+			updatedAt: '2023-01-01T00:00:00Z',
+			createdBy: 'test-user',
+			updatedBy: 'test-user',
+			locked: false,
+		},
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGetDashboard.mockResolvedValue(mockDashboardData);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('Query Key Behavior', () => {
+		it('should include route params in query key when on dashboard page', async () => {
+			const dashboardId = 'test-dashboard-id';
+			renderWithDashboardProvider(`/dashboard/${dashboardId}`, { dashboardId });
+
+			await waitFor(() => {
+				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId });
+			});
+
+			// Verify the query was called with the correct parameters
+			expect(mockGetDashboard).toHaveBeenCalledTimes(1);
+		});
+
+		it('should refetch when route params change', async () => {
+			const initialDashboardId = 'initial-dashboard-id';
+			const newDashboardId = 'new-dashboard-id';
+
+			// First render with initial dashboard ID
+			const { rerender } = renderWithDashboardProvider(
+				`/dashboard/${initialDashboardId}`,
+				{
+					dashboardId: initialDashboardId,
+				},
+			);
+
+			await waitFor(() => {
+				expect(mockGetDashboard).toHaveBeenCalledWith({ id: initialDashboardId });
+			});
+
+			// Change route params to simulate navigation
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${newDashboardId}`,
+				isExact: true,
+				params: { dashboardId: newDashboardId },
+			});
+
+			// Rerender with new route
+			rerender(
+				<QueryClientProvider client={createTestQueryClient()}>
+					<MemoryRouter initialEntries={[`/dashboard/${newDashboardId}`]}>
+						<DashboardProvider>
+							<TestComponent />
+						</DashboardProvider>
+					</MemoryRouter>
+				</QueryClientProvider>,
+			);
+
+			await waitFor(() => {
+				expect(mockGetDashboard).toHaveBeenCalledWith({ id: newDashboardId });
+			});
+
+			// Should have been called twice - once for each dashboard ID
+			expect(mockGetDashboard).toHaveBeenCalledTimes(2);
+		});
+
+		it('should not fetch when not on dashboard page', () => {
+			// Mock no route match (not on dashboard page)
+			mockUseRouteMatch.mockReturnValue(null);
+
+			renderWithDashboardProvider('/some-other-page', null);
+
+			// Should not call the API
+			expect(mockGetDashboard).not.toHaveBeenCalled();
+		});
+
+		it('should handle undefined route params gracefully', async () => {
+			// Mock route match with undefined params
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: '/dashboard/undefined',
+				isExact: true,
+				params: undefined,
+			});
+
+			renderWithDashboardProvider('/dashboard/undefined');
+
+			// Should not call API when params are undefined
+			expect(mockGetDashboard).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('Cache Behavior', () => {
+		it('should create separate cache entries for different route params', async () => {
+			const queryClient = createTestQueryClient();
+			const dashboardId1 = 'dashboard-1';
+			const dashboardId2 = 'dashboard-2';
+
+			// First dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId1}`,
+				isExact: true,
+				params: { dashboardId: dashboardId1 },
+			});
+
+			const { rerender } = render(
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter initialEntries={[`/dashboard/${dashboardId1}`]}>
+						<DashboardProvider>
+							<TestComponent />
+						</DashboardProvider>
+					</MemoryRouter>
+				</QueryClientProvider>,
+			);
+
+			await waitFor(() => {
+				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId1 });
+			});
+
+			// Second dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId2}`,
+				isExact: true,
+				params: { dashboardId: dashboardId2 },
+			});
+
+			rerender(
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter initialEntries={[`/dashboard/${dashboardId2}`]}>
+						<DashboardProvider>
+							<TestComponent />
+						</DashboardProvider>
+					</MemoryRouter>
+				</QueryClientProvider>,
+			);
+
+			await waitFor(() => {
+				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId2 });
+			});
+
+			// Should have separate cache entries
+			const cacheKeys = queryClient
+				.getQueryCache()
+				.getAll()
+				.map((query) => query.queryKey);
+			expect(cacheKeys).toHaveLength(2);
+			expect(cacheKeys[0]).toEqual([
+				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId1 },
+				dashboardId1,
+			]);
+			expect(cacheKeys[1]).toEqual([
+				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId2 },
+				dashboardId2,
+			]);
+		});
+	});
+});

frontend/src/tests/README.md

@@ -0,0 +1,93 @@
+### Testing Guide
+
+#### Tech Stack
+- React Testing Library (RTL)
+- Jest (runner, assertions, mocking)
+- MSW (Mock Service Worker) for HTTP
+- TypeScript (type-safe tests)
+- JSDOM (browser-like env)
+
+#### Unit Testing: What, Why, How
+- What: Small, isolated tests for components, hooks, and utilities to verify behavior and edge cases.
+- Why: Confidence to refactor, faster feedback than E2E, catches regressions early, documents intended behavior.
+- How: Use our test harness with providers, mock external boundaries (APIs, router), assert on visible behavior and accessible roles, not implementation details.
+
+#### Basic Template
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+#### .cursorrules (Highlights)
+- Import from `tests/test-utils` only.
+- Prefer `userEvent` for real interactions; use `fireEvent` only for low-level events (scroll/resize/setting `scrollTop`).
+- Use MSW to mock network calls; large JSON goes in `mocks-server/__mockdata__`.
+- Keep tests type-safe (`jest.MockedFunction<T>`, avoid `any`).
+- Prefer accessible queries (`getByRole`, `findByRole`) before text and `data-testid`.
+- Pin time only when asserting relative dates; avoid global fake timers otherwise.
+
+Repo-specific reasons:
+- The harness wires Redux, React Query, i18n, timezone, preferences, so importing from RTL directly bypasses critical providers.
+- Some infra deps are globally mocked (e.g., `uplot`) to keep tests fast and stable.
+- For virtualization (react-virtuoso), there is no `userEvent` scroll helper; use `fireEvent.scroll` after setting `element.scrollTop`.
+
+#### Example patterns (from `components/QuickFilters/tests/QuickFilters.test.tsx`)
+MSW overrides per test:
+```ts
+server.use(
+  rest.get(`${ENVIRONMENT.baseURL}/api/v1/orgs/me/filters/logs`, (_req, res, ctx) =>
+    res(ctx.status(200), ctx.json(quickFiltersListResponse)),
+  ),
+  rest.put(`${ENVIRONMENT.baseURL}/api/v1/orgs/me/filters`, async (req, res, ctx) => {
+    // capture payload if needed
+    return res(ctx.status(200), ctx.json({}));
+  }),
+);
+```
+
+Mock hooks minimally at module level:
+```ts
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+  useQueryBuilder: jest.fn(),
+}));
+```
+
+Interact via accessible roles:
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save changes/i }));
+expect(screen.getByText(/ADDED FILTERS/i)).toBeInTheDocument();
+```
+
+Virtualized scroll:
+```ts
+const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
+scroller.scrollTop = 500;
+fireEvent.scroll(scroller);
+```
+
+Routing-dependent behavior:
+```ts
+render(<Page />, undefined, { initialRoute: '/logs-explorer?panelType=list' });
+```
+
+#### Notes
+- Global mocks configured in Jest: `uplot` → `__mocks__/uplotMock.ts`.
+- If a test needs custom behavior (e.g., different API response), override with `server.use(...)` locally.

frontend/src/tests/test-utils.tsx

@@ -2,18 +2,20 @@
 import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { FeatureKeys } from 'constants/features';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
-import ROUTES from 'constants/routes';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import {
+	QueryBuilderContext,
+	QueryBuilderProvider,
+} from 'providers/QueryBuilder';
 import TimezoneProvider from 'providers/Timezone';
 import React, { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import store from 'store';
@@ -23,24 +25,27 @@ import {
 	LicenseState,
 	LicenseStatus,
 } from 'types/api/licensesV3/getActive';
+import { QueryBuilderContextType } from 'types/common/queryBuilder';
 import { ROLES, USER_ROLES } from 'types/roles';
+// import { MemoryRouter as V5MemoryRouter } from 'react-router-dom-v5-compat';
 
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
 			refetchOnWindowFocus: false,
+			retry: false,
 		},
 	},
 });
 
 beforeEach(() => {
-	jest.useFakeTimers();
+	// jest.useFakeTimers();
 	jest.setSystemTime(new Date('2023-10-20'));
 });
 
 afterEach(() => {
 	queryClient.clear();
-	jest.useRealTimers();
+	// jest.useRealTimers();
 });
 
 const mockStore = configureStore([thunk]);
@@ -85,24 +90,6 @@ jest.mock('react-i18next', () => ({
 	}),
 }));
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
-	}),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: jest.fn(),
-	}),
-}));
-
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: (): any => 'PUSH',
-}));
-
 export function getAppContextMock(
 	role: string,
 	appContextOverrides?: Partial<IAppContext>,
@@ -253,48 +240,96 @@ export function getAppContextMock(
 
 export function AllTheProviders({
 	children,
-	role, // Accept the role as a prop
+	role,
 	appContextOverrides,
+	queryBuilderOverrides,
+	initialRoute,
 }: {
 	children: React.ReactNode;
-	role: string; // Define the role prop
-	appContextOverrides: Partial<IAppContext>;
+	role?: string;
+	appContextOverrides?: Partial<IAppContext>;
+	queryBuilderOverrides?: Partial<QueryBuilderContextType>;
+	initialRoute?: string;
 }): ReactElement {
+	// Set default values
+	const roleValue = role || 'ADMIN';
+	const appContextOverridesValue = appContextOverrides || {};
+	const initialRouteValue = initialRoute || '/';
+
+	const queryBuilderContent = queryBuilderOverrides ? (
+		<QueryBuilderContext.Provider
+			value={queryBuilderOverrides as QueryBuilderContextType}
+		>
+			{children}
+		</QueryBuilderContext.Provider>
+	) : (
+		<QueryBuilderProvider>{children}</QueryBuilderProvider>
+	);
+
 	return (
-		<QueryClientProvider client={queryClient}>
-			<Provider store={mockStored(role)}>
-				<AppContext.Provider value={getAppContextMock(role, appContextOverrides)}>
-					<ResourceProvider>
-						<ErrorModalProvider>
-							<BrowserRouter>
+		<MemoryRouter initialEntries={[initialRouteValue]}>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={mockStored(roleValue)}>
+					<AppContext.Provider
+						value={getAppContextMock(roleValue, appContextOverridesValue)}
+					>
+						<ResourceProvider>
+							<ErrorModalProvider>
 								<TimezoneProvider>
 									<PreferenceContextProvider>
-										<QueryBuilderProvider>{children}</QueryBuilderProvider>
+										{queryBuilderContent}
 									</PreferenceContextProvider>
 								</TimezoneProvider>
-							</BrowserRouter>
-						</ErrorModalProvider>
-					</ResourceProvider>
-				</AppContext.Provider>
-			</Provider>
-		</QueryClientProvider>
+							</ErrorModalProvider>
+						</ResourceProvider>
+					</AppContext.Provider>
+				</Provider>
+			</QueryClientProvider>
+		</MemoryRouter>
 	);
 }
 
+AllTheProviders.defaultProps = {
+	role: 'ADMIN',
+	appContextOverrides: {},
+	queryBuilderOverrides: undefined,
+	initialRoute: '/',
+};
+
+interface ProviderProps {
+	role?: string;
+	appContextOverrides?: Partial<IAppContext>;
+	queryBuilderOverrides?: Partial<QueryBuilderContextType>;
+	initialRoute?: string;
+}
+
 const customRender = (
 	ui: ReactElement,
 	options?: Omit<RenderOptions, 'wrapper'>,
-	role = 'ADMIN', // Set a default role
-	appContextOverrides?: Partial<IAppContext>,
-): RenderResult =>
-	render(ui, {
+	providerProps: ProviderProps = {},
+): RenderResult => {
+	const {
+		role = 'ADMIN',
+		appContextOverrides = {},
+		queryBuilderOverrides,
+		initialRoute = '/',
+	} = providerProps;
+
+	return render(ui, {
 		wrapper: () => (
-			<AllTheProviders role={role} appContextOverrides={appContextOverrides || {}}>
+			<AllTheProviders
+				role={role}
+				appContextOverrides={appContextOverrides}
+				queryBuilderOverrides={queryBuilderOverrides}
+				initialRoute={initialRoute}
+			>
 				{ui}
 			</AllTheProviders>
 		),
 		...options,
 	});
+};
 
 export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
 export { customRender as render };

pkg/authz/authz.go

@@ -4,6 +4,7 @@ import (
 	"context"
 
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 )
 
@@ -12,4 +13,7 @@ type AuthZ interface {
 
 	// Check returns error when the upstream authorization server is unavailable or the subject (s) doesn't have relation (r) on object (o).
 	Check(context.Context, *openfgav1.CheckRequestTupleKey) error
+
+	// CheckWithTupleCreation takes upon the responsibility for generating the tuples alongside everything Check does.
+	CheckWithTupleCreation(context.Context, authtypes.Claims, authtypes.Relation, authtypes.Typeable, authtypes.Selector, authtypes.Typeable, ...authtypes.Selector) error
 }

pkg/authz/openfgaauthz/provider.go

@@ -194,3 +194,40 @@ func (provider *provider) Check(ctx context.Context, tupleReq *openfgav1.CheckRe
 
 	return nil
 }
+
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, relation authtypes.Relation, typeable authtypes.Typeable, selector authtypes.Selector, parentTypeable authtypes.Typeable, parentSelectors ...authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeUser, claims.UserID, authtypes.Relation{})
+	if err != nil {
+		return err
+	}
+
+	tuples, err := typeable.Tuples(subject, relation, selector, parentTypeable, parentSelectors...)
+	if err != nil {
+		return err
+	}
+
+	check, err := provider.sequentialCheck(ctx, tuples)
+	if err != nil {
+		return err
+	}
+	if !check {
+		return errors.Newf(errors.TypeForbidden, authtypes.ErrCodeAuthZForbidden, "subject %s cannot %s object %s", subject, relation.StringValue(), typeable.Type().StringValue())
+	}
+
+	return nil
+}
+
+func (provider *provider) sequentialCheck(ctx context.Context, tuplesReq []*openfgav1.CheckRequestTupleKey) (bool, error) {
+	for _, tupleReq := range tuplesReq {
+		err := provider.Check(ctx, tupleReq)
+		if err == nil {
+			return true, nil
+		}
+		if errors.Ast(err, errors.TypeInternal) {
+			// return at the first internal error as the evaluation will be incorrect
+			return false, err
+		}
+	}
+
+	return false, nil
+}

pkg/authz/openfgaschema/base.fga

@@ -8,6 +8,7 @@ type role
 
 type organisation 
   relations
-    define admin: [role#assignee]
-    define editor: [role#assignee] or admin
-    define viewer: [role#assignee] or editor
+    define create: [role#assignee]
+    define read: [role#assignee]
+    define update: [role#assignee]
+    define delete: [role#assignee]

pkg/http/middleware/authz.go

@@ -106,11 +106,15 @@ func (middleware *AuthZ) OpenAccess(next http.HandlerFunc) http.HandlerFunc {
 	})
 }
 
-// each individual APIs should be responsible for defining the relation and the object being accessed, subject will be derived from the request
-func (middleware *AuthZ) Check(next http.HandlerFunc, relation string) http.HandlerFunc {
+func (middleware *AuthZ) Check(next http.HandlerFunc, _ authtypes.Relation, translation authtypes.Relation, _ authtypes.Typeable, _ authtypes.Typeable, _ authtypes.SelectorCallbackFn) http.HandlerFunc {
 	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		checkRequestTupleKey := authtypes.NewTuple("", "", "")
-		err := middleware.authzService.Check(req.Context(), checkRequestTupleKey)
+		claims, err := authtypes.ClaimsFromContext(req.Context())
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
+		err = middleware.authzService.CheckWithTupleCreation(req.Context(), claims, translation, authtypes.TypeableOrganization, authtypes.MustNewSelector(authtypes.TypeOrganization, claims.OrgID), nil)
 		if err != nil {
 			render.Error(rw, err)
 			return

pkg/querier/builder_query.go

@@ -192,6 +192,8 @@ func (q *builderQuery[T]) Execute(ctx context.Context) (*qbtypes.Result, error)
 		return nil, err
 	}
 
+	fmt.Println("====> final Query:", stmt.Query)
+	fmt.Println("====> final Args:", stmt.Args)
 	// Execute the query with proper context for partial value detection
 	result, err := q.executeWithContext(ctx, stmt.Query, stmt.Args)
 	if err != nil {

pkg/query-service/app/server.go

@@ -8,6 +8,8 @@ import (
 	"net/http"
 	_ "net/http/pprof" // http profiler
 
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
+
 	"github.com/gorilla/handlers"
 
 	"github.com/SigNoz/signoz/pkg/alertmanager"
@@ -308,20 +310,24 @@ func makeRulesManager(
 	querier querier.Querier,
 	logger *slog.Logger,
 ) (*rules.Manager, error) {
+	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
+	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
 	managerOpts := &rules.ManagerOptions{
-		TelemetryStore: telemetryStore,
-		Prometheus:     prometheus,
-		Context:        context.Background(),
-		Logger:         zap.L(),
-		Reader:         ch,
-		Querier:        querier,
-		SLogger:        logger,
-		Cache:          cache,
-		EvalDelay:      constants.GetEvalDelay(),
-		SQLStore:       sqlstore,
-		OrgGetter:      orgGetter,
-		Alertmanager:   alertmanager,
+		TelemetryStore:   telemetryStore,
+		Prometheus:       prometheus,
+		Context:          context.Background(),
+		Logger:           zap.L(),
+		Reader:           ch,
+		Querier:          querier,
+		SLogger:          logger,
+		Cache:            cache,
+		EvalDelay:        constants.GetEvalDelay(),
+		OrgGetter:        orgGetter,
+		Alertmanager:     alertmanager,
+		RuleStore:        ruleStore,
+		MaintenanceStore: maintenanceStore,
+		SqlStore:         sqlstore,
 	}
 
 	// create Manager

pkg/query-service/rules/manager.go

@@ -22,7 +22,6 @@ import (
 	querierV5 "github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -98,8 +97,10 @@ type ManagerOptions struct {
 	PrepareTaskFunc     func(opts PrepareTaskOptions) (Task, error)
 	PrepareTestRuleFunc func(opts PrepareTestRuleOptions) (int, *model.ApiError)
 	Alertmanager        alertmanager.Alertmanager
-	SQLStore            sqlstore.SQLStore
 	OrgGetter           organization.Getter
+	RuleStore           ruletypes.RuleStore
+	MaintenanceStore    ruletypes.MaintenanceStore
+	SqlStore            sqlstore.SQLStore
 }
 
 // The Manager manages recording and alerting rules.
@@ -207,14 +208,12 @@ func defaultPrepareTaskFunc(opts PrepareTaskOptions) (Task, error) {
 // by calling the Run method.
 func NewManager(o *ManagerOptions) (*Manager, error) {
 	o = defaultOptions(o)
-	ruleStore := sqlrulestore.NewRuleStore(o.SQLStore)
-	maintenanceStore := sqlrulestore.NewMaintenanceStore(o.SQLStore)
 
 	m := &Manager{
 		tasks:               map[string]Task{},
 		rules:               map[string]Rule{},
-		ruleStore:           ruleStore,
-		maintenanceStore:    maintenanceStore,
+		ruleStore:           o.RuleStore,
+		maintenanceStore:    o.MaintenanceStore,
 		opts:                o,
 		block:               make(chan struct{}),
 		logger:              o.Logger,
@@ -223,8 +222,8 @@ func NewManager(o *ManagerOptions) (*Manager, error) {
 		prepareTaskFunc:     o.PrepareTaskFunc,
 		prepareTestRuleFunc: o.PrepareTestRuleFunc,
 		alertmanager:        o.Alertmanager,
-		sqlstore:            o.SQLStore,
 		orgGetter:           o.OrgGetter,
+		sqlstore:            o.SqlStore,
 	}
 
 	return m, nil
@@ -896,33 +895,37 @@ func (m *Manager) PatchRule(ctx context.Context, ruleStr string, id valuer.UUID)
 		return nil, err
 	}
 
-	// storedRule holds the current stored rule from DB
-	patchedRule := ruletypes.PostableRule{}
-	if err := json.Unmarshal([]byte(ruleStr), &patchedRule); err != nil {
-		zap.L().Error("failed to unmarshal stored rule with given id", zap.String("id", id.StringValue()), zap.Error(err))
+	storedRule := ruletypes.PostableRule{}
+	if err := json.Unmarshal([]byte(storedJSON.Data), &storedRule); err != nil {
+		zap.L().Error("failed to unmarshal rule from db", zap.String("id", id.StringValue()), zap.Error(err))
+		return nil, err
+	}
+
+	if err := json.Unmarshal([]byte(ruleStr), &storedRule); err != nil {
+		zap.L().Error("failed to unmarshal patched rule with given id", zap.String("id", id.StringValue()), zap.Error(err))
 		return nil, err
 	}
 
 	// deploy or un-deploy task according to patched (new) rule state
-	if err := m.syncRuleStateWithTask(ctx, orgID, taskName, &patchedRule); err != nil {
+	if err := m.syncRuleStateWithTask(ctx, orgID, taskName, &storedRule); err != nil {
 		zap.L().Error("failed to sync stored rule state with the task", zap.String("taskName", taskName), zap.Error(err))
 		return nil, err
 	}
 
-	// prepare rule json to write to update db
-	patchedRuleBytes, err := json.Marshal(patchedRule)
+	newStoredJson, err := json.Marshal(&storedRule)
 	if err != nil {
+		zap.L().Error("failed to marshal new stored rule with given id", zap.String("id", id.StringValue()), zap.Error(err))
 		return nil, err
 	}
 
 	now := time.Now()
-	storedJSON.Data = string(patchedRuleBytes)
+	storedJSON.Data = string(newStoredJson)
 	storedJSON.UpdatedBy = claims.Email
 	storedJSON.UpdatedAt = now
 
 	err = m.ruleStore.EditRule(ctx, storedJSON, func(ctx context.Context) error { return nil })
 	if err != nil {
-		if err := m.syncRuleStateWithTask(ctx, orgID, taskName, &patchedRule); err != nil {
+		if err := m.syncRuleStateWithTask(ctx, orgID, taskName, &storedRule); err != nil {
 			zap.L().Error("failed to restore rule after patch failure", zap.String("taskName", taskName), zap.Error(err))
 		}
 		return nil, err
@@ -931,7 +934,7 @@ func (m *Manager) PatchRule(ctx context.Context, ruleStr string, id valuer.UUID)
 	// prepare http response
 	response := ruletypes.GettableRule{
 		Id:           id.StringValue(),
-		PostableRule: patchedRule,
+		PostableRule: storedRule,
 	}
 
 	// fetch state of rule from memory

pkg/query-service/rules/manager_test.go

@@ -0,0 +1,610 @@
+package rules
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"go.uber.org/zap"
+
+	"github.com/SigNoz/signoz/pkg/alertmanager"
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagerserver"
+	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
+	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
+	"github.com/SigNoz/signoz/pkg/query-service/utils"
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/rulestoretest"
+	"github.com/SigNoz/signoz/pkg/sharder"
+	"github.com/SigNoz/signoz/pkg/sharder/noopsharder"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+func TestManager_PatchRule_PayloadVariations(t *testing.T) {
+	// Set up test claims and manager once for all test cases
+	claims := &authtypes.Claims{
+		UserID: "550e8400-e29b-41d4-a716-446655440000",
+		Email:  "test@example.com",
+		Role:   "admin",
+	}
+	manager, mockSQLRuleStore, orgId := setupTestManager(t)
+	claims.OrgID = orgId
+
+	testCases := []struct {
+		name           string
+		originalData   string
+		patchData      string
+		expectedResult func(*ruletypes.GettableRule) bool
+		expectError    bool
+		description    string
+	}{
+		{
+			name: "patch complete rule with task sync validation",
+			originalData: `{
+				"schemaVersion":"v1",
+				"alert": "test-original-alert",
+				"alertType": "METRIC_BASED_ALERT",
+				"ruleType": "threshold_rule",
+				"evalWindow": "5m0s",
+				"condition": {
+					"compositeQuery": {
+						"queryType": "builder",
+						"panelType": "graph",
+						"queries": [
+							{
+								"type": "builder_query",
+								"spec": {
+									"name": "A",
+									"signal": "metrics",
+									"disabled": false,
+									"aggregations": [
+										{
+											"metricName": "container.cpu.time",
+											"timeAggregation": "rate",
+											"spaceAggregation": "sum"
+										}
+									]
+								}
+							}
+						]
+					}
+				},
+				"labels": {
+					"severity": "warning"
+				},
+				"disabled": false,
+				"preferredChannels": ["test-alerts"]
+			}`,
+			patchData: `{
+				"alert": "test-patched-alert",
+				"labels": {
+					"severity": "critical"
+				}
+			}`,
+			expectedResult: func(result *ruletypes.GettableRule) bool {
+				return result.AlertName == "test-patched-alert" &&
+					result.Labels["severity"] == "critical" &&
+					result.Disabled == false
+			},
+			expectError: false,
+		},
+		{
+			name: "patch rule to disabled state",
+			originalData: `{
+				"schemaVersion":"v2",
+				"alert": "test-disable-alert",
+				"alertType": "METRIC_BASED_ALERT",
+				"ruleType": "threshold_rule",
+				"evalWindow": "5m0s",
+				"condition": {
+					"thresholds": {
+						"kind": "basic",
+						"spec": [
+							{
+								"name": "WARNING",
+								"target": 30,
+								"matchType": "1",
+								"op": "1",
+								"selectedQuery": "A",
+								"channels": ["test-alerts"]
+							}
+						]
+					},
+					"compositeQuery": {
+						"queryType": "builder",
+						"panelType": "graph",
+						"queries": [
+							{
+								"type": "builder_query",
+								"spec": {
+									"name": "A",
+									"signal": "metrics",
+									"disabled": false,
+									"aggregations": [
+										{
+											"metricName": "container.memory.usage",
+											"timeAggregation": "avg",
+											"spaceAggregation": "sum"
+										}
+									]
+								}
+							}
+						]
+					}
+				},
+				"evaluation": {
+					"kind": "rolling",
+					"spec": {
+						"evalWindow": "5m",
+						"frequency": "1m"
+					}
+				},
+				"labels": {
+					"severity": "warning"
+				},
+				"disabled": false,
+				"preferredChannels": ["test-alerts"]
+			}`,
+			patchData: `{
+				"disabled": true
+			}`,
+			expectedResult: func(result *ruletypes.GettableRule) bool {
+				return result.Disabled == true
+			},
+			expectError: false,
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			ruleID := valuer.GenerateUUID()
+			existingRule := &ruletypes.Rule{
+				Identifiable: types.Identifiable{
+					ID: ruleID,
+				},
+				TimeAuditable: types.TimeAuditable{
+					CreatedAt: time.Now(),
+					UpdatedAt: time.Now(),
+				},
+				UserAuditable: types.UserAuditable{
+					CreatedBy: "creator@example.com",
+					UpdatedBy: "creator@example.com",
+				},
+				Data:  tc.originalData,
+				OrgID: claims.OrgID,
+			}
+
+			mockSQLRuleStore.ExpectGetStoredRule(ruleID, existingRule)
+			mockSQLRuleStore.ExpectEditRule(existingRule)
+
+			ctx := authtypes.NewContextWithClaims(context.Background(), *claims)
+			result, err := manager.PatchRule(ctx, tc.patchData, ruleID)
+
+			assert.NoError(t, err)
+			assert.NotNil(t, result)
+			assert.Equal(t, ruleID.StringValue(), result.Id)
+
+			if tc.expectedResult != nil {
+				assert.True(t, tc.expectedResult(result), "Expected result validation failed")
+			}
+			taskName := prepareTaskName(result.Id)
+
+			if result.Disabled {
+				syncCompleted := waitForTaskSync(manager, taskName, false, 2*time.Second)
+				assert.True(t, syncCompleted, "Task synchronization should complete within timeout")
+				assert.Nil(t, findTaskByName(manager.RuleTasks(), taskName), "Task should be removed for disabled rule")
+			} else {
+				syncCompleted := waitForTaskSync(manager, taskName, true, 2*time.Second)
+				assert.True(t, syncCompleted, "Task synchronization should complete within timeout")
+				assert.NotNil(t, findTaskByName(manager.RuleTasks(), taskName), "Task should be created/updated for enabled rule")
+				assert.Greater(t, len(manager.Rules()), 0, "Rules should be updated in manager")
+			}
+
+			assert.NoError(t, mockSQLRuleStore.AssertExpectations())
+		})
+	}
+}
+
+func waitForTaskSync(manager *Manager, taskName string, expectedExists bool, timeout time.Duration) bool {
+	deadline := time.Now().Add(timeout)
+	for time.Now().Before(deadline) {
+		task := findTaskByName(manager.RuleTasks(), taskName)
+		exists := task != nil
+
+		if exists == expectedExists {
+			return true
+		}
+		time.Sleep(10 * time.Millisecond)
+	}
+	return false
+}
+
+// findTaskByName finds a task by name in the slice of tasks
+func findTaskByName(tasks []Task, taskName string) Task {
+	for i := 0; i < len(tasks); i++ {
+		if tasks[i].Name() == taskName {
+			return tasks[i]
+		}
+	}
+	return nil
+}
+
+func setupTestManager(t *testing.T) (*Manager, *rulestoretest.MockSQLRuleStore, string) {
+	settings := instrumentationtest.New().ToProviderSettings()
+	testDB := utils.NewQueryServiceDBForTests(t)
+
+	err := utils.CreateTestOrg(t, testDB)
+	if err != nil {
+		t.Fatalf("Failed to create test org: %v", err)
+	}
+	testOrgID, err := utils.GetTestOrgId(testDB)
+	if err != nil {
+		t.Fatalf("Failed to get test org ID: %v", err)
+	}
+
+	//will replace this with alertmanager mock
+	newConfig := alertmanagerserver.NewConfig()
+	defaultConfig, err := alertmanagertypes.NewDefaultConfig(newConfig.Global, newConfig.Route, testOrgID.StringValue())
+	if err != nil {
+		t.Fatalf("Failed to create default alertmanager config: %v", err)
+	}
+
+	_, err = testDB.BunDB().NewInsert().
+		Model(defaultConfig.StoreableConfig()).
+		Exec(context.Background())
+	if err != nil {
+		t.Fatalf("Failed to insert alertmanager config: %v", err)
+	}
+
+	noopSharder, err := noopsharder.New(context.TODO(), settings, sharder.Config{})
+	if err != nil {
+		t.Fatalf("Failed to create noop sharder: %v", err)
+	}
+	orgGetter := implorganization.NewGetter(implorganization.NewStore(testDB), noopSharder)
+	alertManager, err := signozalertmanager.New(context.TODO(), settings, alertmanager.Config{Provider: "signoz", Signoz: alertmanager.Signoz{PollInterval: 10 * time.Second, Config: alertmanagerserver.NewConfig()}}, testDB, orgGetter)
+	if err != nil {
+		t.Fatalf("Failed to create alert manager: %v", err)
+	}
+	mockSQLRuleStore := rulestoretest.NewMockSQLRuleStore()
+
+	options := ManagerOptions{
+		Context:         context.Background(),
+		Logger:          zap.L(),
+		SLogger:         instrumentationtest.New().Logger(),
+		EvalDelay:       time.Minute,
+		PrepareTaskFunc: defaultPrepareTaskFunc,
+		Alertmanager:    alertManager,
+		OrgGetter:       orgGetter,
+		RuleStore:       mockSQLRuleStore,
+	}
+
+	manager, err := NewManager(&options)
+	if err != nil {
+		t.Fatalf("Failed to create manager: %v", err)
+	}
+
+	close(manager.block)
+	return manager, mockSQLRuleStore, testOrgID.StringValue()
+}
+
+func TestCreateRule(t *testing.T) {
+	claims := &authtypes.Claims{
+		Email: "test@example.com",
+	}
+	manager, mockSQLRuleStore, orgId := setupTestManager(t)
+	claims.OrgID = orgId
+	testCases := []struct {
+		name    string
+		ruleStr string
+	}{
+		{
+			name: "validate stored rule data structure",
+			ruleStr: `{
+				"alert": "cpu usage",
+				"ruleType": "threshold_rule",
+				"evalWindow": "5m",
+				"frequency": "1m",
+				"condition": {
+					"compositeQuery": {
+						"queryType": "builder",
+						"builderQueries": {
+							"A": {
+								"expression": "A",
+								"disabled": false,
+								"dataSource": "metrics",
+								"aggregateOperator": "avg",
+								"aggregateAttribute": {
+									"key": "cpu_usage",
+									"type": "Gauge"
+								}
+							}
+						}
+					},
+					"op": "1",
+					"target": 80,
+					"matchType": "1"
+				},
+				"labels": {
+					"severity": "warning"
+				},
+				"annotations": {
+					"summary": "High CPU usage detected"
+				},
+				"preferredChannels": ["test-alerts"]
+			}`,
+		},
+		{
+			name: "create complete v2 rule with thresholds",
+			ruleStr: `{
+				"schemaVersion":"v2",
+				"state": "firing",
+				"alert": "test-multi-threshold-create",
+				"alertType": "METRIC_BASED_ALERT",
+				"ruleType": "threshold_rule",
+				"evalWindow": "5m0s",
+				"condition": {
+					"thresholds": {
+						"kind": "basic",
+						"spec": [
+							{
+								"name": "CRITICAL",
+								"target": 0,
+								"matchType": "1",
+								"op": "1",
+								"selectedQuery": "A",
+								"channels": ["test-alerts"]
+							},
+							{
+								"name": "WARNING",
+								"target": 0,
+								"matchType": "1",
+								"op": "1",
+								"selectedQuery": "A",
+								"channels": ["test-alerts"]
+							}
+						]
+					},
+					"compositeQuery": {
+						"queryType": "builder",
+						"panelType": "graph",
+						"queries": [
+							{
+								"type": "builder_query",
+								"spec": {
+									"name": "A",
+									"signal": "metrics",
+									"disabled": false,
+									"aggregations": [
+										{
+											"metricName": "container.cpu.time",
+											"timeAggregation": "rate",
+											"spaceAggregation": "sum"
+										}
+									]
+								}
+							}
+						]
+					}
+				},
+				"evaluation": {
+					"kind": "rolling",
+					"spec": {
+						"evalWindow": "6m",
+						"frequency": "1m"
+					}
+				},
+				"labels": {
+					"severity": "warning"
+				},
+				"annotations": {
+					"description": "This alert is fired when the defined metric crosses the threshold",
+					"summary": "The rule threshold is set and the observed metric value is evaluated"
+				},
+				"disabled": false,
+				"preferredChannels": ["#test-alerts-v2"],
+				"version": "v5"
+			}`,
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			rule := &ruletypes.Rule{
+				Identifiable: types.Identifiable{
+					ID: valuer.GenerateUUID(),
+				},
+				TimeAuditable: types.TimeAuditable{
+					CreatedAt: time.Now(),
+					UpdatedAt: time.Now(),
+				},
+				UserAuditable: types.UserAuditable{
+					CreatedBy: claims.Email,
+					UpdatedBy: claims.Email,
+				},
+				OrgID: claims.OrgID,
+			}
+			mockSQLRuleStore.ExpectCreateRule(rule)
+
+			ctx := authtypes.NewContextWithClaims(context.Background(), *claims)
+			result, err := manager.CreateRule(ctx, tc.ruleStr)
+
+			assert.NoError(t, err)
+			assert.NotNil(t, result)
+			assert.NotEmpty(t, result.Id, "Result should have a valid ID")
+
+			// Wait for task creation with proper synchronization
+			taskName := prepareTaskName(result.Id)
+			syncCompleted := waitForTaskSync(manager, taskName, true, 2*time.Second)
+			assert.True(t, syncCompleted, "Task creation should complete within timeout")
+			assert.NotNil(t, findTaskByName(manager.RuleTasks(), taskName), "Task should be created with correct name")
+			assert.Greater(t, len(manager.Rules()), 0, "Rules should be added to manager")
+
+			assert.NoError(t, mockSQLRuleStore.AssertExpectations())
+		})
+	}
+}
+
+func TestEditRule(t *testing.T) {
+	// Set up test claims and manager once for all test cases
+	claims := &authtypes.Claims{
+		Email: "test@example.com",
+	}
+	manager, mockSQLRuleStore, orgId := setupTestManager(t)
+	claims.OrgID = orgId
+	testCases := []struct {
+		name    string
+		ruleStr string
+	}{
+		{
+			name: "validate edit rule functionality",
+			ruleStr: `{
+				"alert": "updated cpu usage",
+				"ruleType": "threshold_rule",
+				"evalWindow": "10m",
+				"frequency": "2m",
+				"condition": {
+					"compositeQuery": {
+						"queryType": "builder",
+						"builderQueries": {
+							"A": {
+								"expression": "A",
+								"disabled": false,
+								"dataSource": "metrics",
+								"aggregateOperator": "avg",
+								"aggregateAttribute": {
+									"key": "cpu_usage",
+									"type": "Gauge"
+								}
+							}
+						}
+					},
+					"op": "1",
+					"target": 90,
+					"matchType": "1"
+				},
+				"labels": {
+					"severity": "critical"
+				},
+				"annotations": {
+					"summary": "Very high CPU usage detected"
+				},
+				"preferredChannels": ["critical-alerts"]
+			}`,
+		},
+		{
+			name: "edit complete v2 rule with thresholds",
+			ruleStr: `{
+				"schemaVersion":"v2",
+				"state": "firing",
+				"alert": "test-multi-threshold-edit",
+				"alertType": "METRIC_BASED_ALERT",
+				"ruleType": "threshold_rule",
+				"evalWindow": "5m0s",
+				"condition": {
+					"thresholds": {
+						"kind": "basic",
+						"spec": [
+							{
+								"name": "CRITICAL",
+								"target": 10,
+								"matchType": "1",
+								"op": "1",
+								"selectedQuery": "A",
+								"channels": ["test-alerts"]
+							},
+							{
+								"name": "WARNING",
+								"target": 5,
+								"matchType": "1",
+								"op": "1",
+								"selectedQuery": "A",
+								"channels": ["test-alerts"]
+							}
+						]
+					},
+					"compositeQuery": {
+						"queryType": "builder",
+						"panelType": "graph",
+						"queries": [
+							{
+								"type": "builder_query",
+								"spec": {
+									"name": "A",
+									"signal": "metrics",
+									"disabled": false,
+									"aggregations": [
+										{
+											"metricName": "container.memory.usage",
+											"timeAggregation": "avg",
+											"spaceAggregation": "sum"
+										}
+									]
+								}
+							}
+						]
+					}
+				},
+				"evaluation": {
+					"kind": "rolling",
+					"spec": {
+						"evalWindow": "8m",
+						"frequency": "2m"
+					}
+				},
+				"labels": {
+					"severity": "critical"
+				},
+				"annotations": {
+					"description": "This alert is fired when memory usage crosses the threshold",
+					"summary": "Memory usage threshold exceeded"
+				},
+				"disabled": false,
+				"preferredChannels": ["#critical-alerts-v2"],
+				"version": "v5"
+			}`,
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			ruleID := valuer.GenerateUUID()
+
+			existingRule := &ruletypes.Rule{
+				Identifiable: types.Identifiable{
+					ID: ruleID,
+				},
+				TimeAuditable: types.TimeAuditable{
+					CreatedAt: time.Now(),
+					UpdatedAt: time.Now(),
+				},
+				UserAuditable: types.UserAuditable{
+					CreatedBy: "creator@example.com",
+					UpdatedBy: "creator@example.com",
+				},
+				Data:  `{"alert": "original cpu usage", "disabled": false}`,
+				OrgID: claims.OrgID,
+			}
+
+			mockSQLRuleStore.ExpectGetStoredRule(ruleID, existingRule)
+			mockSQLRuleStore.ExpectEditRule(existingRule)
+
+			ctx := authtypes.NewContextWithClaims(context.Background(), *claims)
+			err := manager.EditRule(ctx, tc.ruleStr, ruleID)
+
+			assert.NoError(t, err)
+
+			// Wait for task update with proper synchronization
+			taskName := prepareTaskName(ruleID.StringValue())
+			syncCompleted := waitForTaskSync(manager, taskName, true, 2*time.Second)
+			assert.True(t, syncCompleted, "Task update should complete within timeout")
+			assert.NotNil(t, findTaskByName(manager.RuleTasks(), taskName), "Task should be updated with correct name")
+			assert.Greater(t, len(manager.Rules()), 0, "Rules should be updated in manager")
+
+			assert.NoError(t, mockSQLRuleStore.AssertExpectations())
+		})
+	}
+}

pkg/ruler/rulestore/rulestoretest/rule.go

@@ -0,0 +1,110 @@
+package rulestoretest
+
+import (
+	"context"
+	"regexp"
+
+	"github.com/DATA-DOG/go-sqlmock"
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstoretest"
+	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// MockSQLRuleStore is a mock RuleStore backed by sqlmock
+type MockSQLRuleStore struct {
+	ruleStore ruletypes.RuleStore
+	mock      sqlmock.Sqlmock
+}
+
+// NewMockSQLRuleStore creates a new MockSQLRuleStore with sqlmock
+func NewMockSQLRuleStore() *MockSQLRuleStore {
+	sqlStore := sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherRegexp)
+	ruleStore := sqlrulestore.NewRuleStore(sqlStore)
+
+	return &MockSQLRuleStore{
+		ruleStore: ruleStore,
+		mock:      sqlStore.Mock(),
+	}
+}
+
+// Mock returns the sqlmock.Sqlmock instance for setting expectations
+func (m *MockSQLRuleStore) Mock() sqlmock.Sqlmock {
+	return m.mock
+}
+
+// CreateRule implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL
+func (m *MockSQLRuleStore) CreateRule(ctx context.Context, rule *ruletypes.Rule, fn func(context.Context, valuer.UUID) error) (valuer.UUID, error) {
+	return m.ruleStore.CreateRule(ctx, rule, fn)
+}
+
+// EditRule implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL
+func (m *MockSQLRuleStore) EditRule(ctx context.Context, rule *ruletypes.Rule, fn func(context.Context) error) error {
+	return m.ruleStore.EditRule(ctx, rule, fn)
+}
+
+// DeleteRule implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL
+func (m *MockSQLRuleStore) DeleteRule(ctx context.Context, id valuer.UUID, fn func(context.Context) error) error {
+	return m.ruleStore.DeleteRule(ctx, id, fn)
+}
+
+// GetStoredRule implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL
+func (m *MockSQLRuleStore) GetStoredRule(ctx context.Context, id valuer.UUID) (*ruletypes.Rule, error) {
+	return m.ruleStore.GetStoredRule(ctx, id)
+}
+
+// GetStoredRules implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL
+func (m *MockSQLRuleStore) GetStoredRules(ctx context.Context, orgID string) ([]*ruletypes.Rule, error) {
+	return m.ruleStore.GetStoredRules(ctx, orgID)
+}
+
+// ExpectCreateRule sets up SQL expectations for CreateRule operation
+func (m *MockSQLRuleStore) ExpectCreateRule(rule *ruletypes.Rule) {
+	rows := sqlmock.NewRows([]string{"id", "created_at", "updated_at", "created_by", "updated_by", "deleted", "data", "org_id"}).
+		AddRow(rule.ID, rule.CreatedAt, rule.UpdatedAt, rule.CreatedBy, rule.UpdatedBy, rule.Deleted, rule.Data, rule.OrgID)
+	expectedPattern := `INSERT INTO "rule" \(.+\) VALUES \(.+` +
+		regexp.QuoteMeta(rule.CreatedBy) + `.+` +
+		regexp.QuoteMeta(rule.OrgID) + `.+\) RETURNING`
+	m.mock.ExpectQuery(expectedPattern).
+		WillReturnRows(rows)
+}
+
+// ExpectEditRule sets up SQL expectations for EditRule operation
+func (m *MockSQLRuleStore) ExpectEditRule(rule *ruletypes.Rule) {
+	expectedPattern := `UPDATE "rule".+` + rule.UpdatedBy + `.+` + rule.OrgID + `.+WHERE \(id = '` + rule.ID.StringValue() + `'\)`
+	m.mock.ExpectExec(expectedPattern).
+		WillReturnResult(sqlmock.NewResult(1, 1))
+}
+
+// ExpectDeleteRule sets up SQL expectations for DeleteRule operation
+func (m *MockSQLRuleStore) ExpectDeleteRule(ruleID valuer.UUID) {
+	expectedPattern := `DELETE FROM "rule".+WHERE \(id = '` + ruleID.StringValue() + `'\)`
+	m.mock.ExpectExec(expectedPattern).
+		WillReturnResult(sqlmock.NewResult(1, 1))
+}
+
+// ExpectGetStoredRule sets up SQL expectations for GetStoredRule operation
+func (m *MockSQLRuleStore) ExpectGetStoredRule(ruleID valuer.UUID, rule *ruletypes.Rule) {
+	rows := sqlmock.NewRows([]string{"id", "created_at", "updated_at", "created_by", "updated_by", "deleted", "data", "org_id"}).
+		AddRow(rule.ID, rule.CreatedAt, rule.UpdatedAt, rule.CreatedBy, rule.UpdatedBy, rule.Deleted, rule.Data, rule.OrgID)
+	expectedPattern := `SELECT (.+) FROM "rule".+WHERE \(id = '` + ruleID.StringValue() + `'\)`
+	m.mock.ExpectQuery(expectedPattern).
+		WillReturnRows(rows)
+}
+
+// ExpectGetStoredRules sets up SQL expectations for GetStoredRules operation
+func (m *MockSQLRuleStore) ExpectGetStoredRules(orgID string, rules []*ruletypes.Rule) {
+	rows := sqlmock.NewRows([]string{"id", "created_at", "updated_at", "created_by", "updated_by", "deleted", "data", "org_id"})
+	for _, rule := range rules {
+		rows.AddRow(rule.ID, rule.CreatedAt, rule.UpdatedAt, rule.CreatedBy, rule.UpdatedBy, rule.Deleted, rule.Data, rule.OrgID)
+	}
+	expectedPattern := `SELECT (.+) FROM "rule".+WHERE \(.+org_id.+'` + orgID + `'\)`
+	m.mock.ExpectQuery(expectedPattern).
+		WillReturnRows(rows)
+}
+
+// AssertExpectations asserts that all SQL expectations were met
+func (m *MockSQLRuleStore) AssertExpectations() error {
+	return m.mock.ExpectationsWereMet()
+}