chore(release): bump to v0.96.0 (#9179)

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>
Co-authored-by: Vikrant Gupta <vikrant@signoz.io>
Co-authored-by: Priyanshu Shrivastava <priyanshu@signoz.io>

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
     container_name: schema-migrator-async
     command:
       - async

.devenv/docker/signoz-otel-collector/compose.yaml

@@ -1,6 +1,6 @@
 services:
   signoz-otel-collector:
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.129.6
     container_name: signoz-otel-collector-dev
     command:
       - --config=/etc/otel-collector-config.yaml

.github/workflows/integrationci.yaml

@@ -21,10 +21,9 @@ jobs:
           - postgres
           - sqlite
         clickhouse-version:
-          - 24.1.2-alpine
           - 25.5.6
         schema-migrator-version:
-          - v0.128.1
+          - v0.129.6
         postgres-version:
           - 15
     if: |

.gitignore

@@ -230,4 +230,6 @@ poetry.toml
 # LSP config files
 pyrightconfig.json
 
-# End of https://www.toptal.com/developers/gitignore/api/python
+# End of https://www.toptal.com/developers/gitignore/api/python
+
+frontend/.cursor/rules/

deploy/docker-swarm/docker-compose.ha.yaml

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.95.0
+    image: signoz/signoz:v0.96.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.6
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.95.0
+    image: signoz/signoz:v0.96.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.6
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.95.0}
+    image: signoz/signoz:${VERSION:-v0.96.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +213,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.6}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.95.0}
+    image: signoz/signoz:${VERSION:-v0.96.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.6}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/go/integration.md

@@ -192,7 +192,7 @@ Tests can be configured using pytest options:
 
 - `--sqlstore-provider` - Choose database provider (default: postgres)
 - `--postgres-version` - PostgreSQL version (default: 15)
-- `--clickhouse-version` - ClickHouse version (default: 24.1.2-alpine)
+- `--clickhouse-version` - ClickHouse version (default: 25.5.6)
 - `--zookeeper-version` - Zookeeper version (default: 3.7.1)
 
 Example:

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/package.json

@@ -139,6 +139,7 @@
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"rehype-raw": "7.0.0",
+		"rrule": "2.8.1",
 		"stream": "^0.0.2",
 		"style-loader": "1.3.0",
 		"styled-components": "^5.3.11",

frontend/src/api/thirdPartyApis/listOverview.ts

@@ -0,0 +1,31 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';
+
+const listOverview = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	const { start, end, show_ip: showIp, filter } = props;
+	try {
+		const response = await ApiBaseInstance.post(
+			`/third-party-apis/overview/list`,
+			{
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default listOverview;

frontend/src/api/v5/queryRange/constants.ts

@@ -124,7 +124,7 @@ export const FUNCTION_NAMES: Record<string, FunctionName> = {
 	RUNNING_DIFF: 'runningDiff',
 	LOG2: 'log2',
 	LOG10: 'log10',
-	CUM_SUM: 'cumSum',
+	CUM_SUM: 'cumulativeSum',
 	EWMA3: 'ewma3',
 	EWMA5: 'ewma5',
 	EWMA7: 'ewma7',

frontend/src/components/CustomTimePicker/timezoneUtils.ts

@@ -119,7 +119,9 @@ const filterAndSortTimezones = (
 			return createTimezoneEntry(normalizedTz, offset);
 		});
 
-const generateTimezoneData = (includeEtcTimezones = false): Timezone[] => {
+export const generateTimezoneData = (
+	includeEtcTimezones = false,
+): Timezone[] => {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const allTimezones = (Intl as any).supportedValuesOf('timeZone');
 	const timezones: Timezone[] = [];

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/HeaderRightSection/AnnouncementsModal.tsx

@@ -0,0 +1,15 @@
+import { Typography } from 'antd';
+
+function AnnouncementsModal(): JSX.Element {
+	return (
+		<div className="announcements-modal-container">
+			<div className="announcements-modal-container-header">
+				<Typography.Text className="announcements-modal-title">
+					Announcements
+				</Typography.Text>
+			</div>
+		</div>
+	);
+}
+
+export default AnnouncementsModal;

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -0,0 +1,160 @@
+import { toast } from '@signozhq/sonner';
+import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { handleContactSupport } from 'pages/Integrations/utils';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
+	const [activeTab, setActiveTab] = useState('feedback');
+	const [feedback, setFeedback] = useState('');
+	const location = useLocation();
+	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async (): Promise<void> => {
+		setIsLoading(true);
+
+		let entityName = 'Feedback';
+		if (activeTab === 'reportBug') {
+			entityName = 'Bug report';
+		} else if (activeTab === 'featureRequest') {
+			entityName = 'Feature request';
+		}
+
+		logEvent('Feedback: Submitted', {
+			data: feedback,
+			type: activeTab,
+			page: location.pathname,
+		})
+			.then(() => {
+				onClose();
+
+				toast.success(`${entityName} submitted successfully`, {
+					position: 'top-right',
+				});
+			})
+			.catch(() => {
+				console.error(`Failed to submit ${entityName}`);
+				toast.error(`Failed to submit ${entityName}`, {
+					position: 'top-right',
+				});
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+	};
+
+	useEffect(
+		() => (): void => {
+			setFeedback('');
+			setActiveTab('feedback');
+		},
+		[],
+	);
+
+	const items = [
+		{
+			label: (
+				<div className="feedback-modal-tab-label">
+					<div className="tab-icon dot feedback-tab" />
+					Feedback
+				</div>
+			),
+			key: 'feedback',
+			value: 'feedback',
+		},
+		{
+			label: (
+				<div className="feedback-modal-tab-label">
+					<div className="tab-icon dot bug-tab" />
+					Report a bug
+				</div>
+			),
+			key: 'reportBug',
+			value: 'reportBug',
+		},
+		{
+			label: (
+				<div className="feedback-modal-tab-label">
+					<div className="tab-icon dot feature-tab" />
+					Feature request
+				</div>
+			),
+			key: 'featureRequest',
+			value: 'featureRequest',
+		},
+	];
+
+	const handleFeedbackChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement>,
+	): void => {
+		setFeedback(e.target.value);
+	};
+
+	const handleContactSupportClick = useCallback((): void => {
+		handleContactSupport(isCloudUserVal);
+	}, [isCloudUserVal]);
+
+	return (
+		<div className="feedback-modal-container">
+			<div className="feedback-modal-header">
+				<Radio.Group
+					value={activeTab}
+					defaultValue={activeTab}
+					optionType="button"
+					className="feedback-modal-tabs"
+					options={items}
+					onChange={(e: RadioChangeEvent): void => setActiveTab(e.target.value)}
+				/>
+			</div>
+			<div className="feedback-modal-content">
+				<div className="feedback-modal-content-header">
+					<Input.TextArea
+						placeholder="Write your feedback here..."
+						rows={6}
+						required
+						className="feedback-input"
+						value={feedback}
+						onChange={handleFeedbackChange}
+					/>
+				</div>
+			</div>
+
+			<div className="feedback-modal-content-footer">
+				<Button
+					className="periscope-btn primary"
+					type="primary"
+					onClick={handleSubmit}
+					loading={isLoading}
+					disabled={feedback.length === 0}
+				>
+					Submit
+				</Button>
+				<div className="feedback-modal-content-footer-info-text">
+					<Typography.Text>
+						Have a specific issue?{' '}
+						<Typography.Link
+							className="contact-support-link"
+							onClick={handleContactSupportClick}
+						>
+							Contact Support{' '}
+						</Typography.Link>
+						or{' '}
+						<a
+							href="https://signoz.io/docs/introduction/"
+							target="_blank"
+							rel="noreferrer"
+							className="read-docs-link"
+						>
+							Read our docs
+						</a>
+					</Typography.Text>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default FeedbackModal;

frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss

@@ -0,0 +1,253 @@
+.header-right-section-container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.share-modal-content,
+.feedback-modal-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 12px;
+	width: 460px;
+
+	border-radius: 4px;
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);
+
+	.absolute-relative-time-toggler-container {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		justify-content: space-between;
+
+		.absolute-relative-time-toggler-label {
+			color: var(--bg-vanilla-100);
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.absolute-relative-time-toggler {
+		display: flex;
+		gap: 4px;
+		align-items: center;
+	}
+
+	.absolute-relative-time-error {
+		font-size: 12px;
+		color: var(--bg-amber-600);
+	}
+
+	.share-link {
+		.url-share-container {
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+			gap: 16px;
+
+			.url-share-container-header {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+
+				.url-share-title,
+				.url-share-sub-title {
+					color: var(--bg-vanilla-100);
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+
+				.url-share-sub-title {
+					font-size: 12px;
+					color: var(--bg-vanilla-300);
+					font-weight: 400;
+					line-height: 18px;
+					letter-spacing: -0.06px;
+				}
+			}
+		}
+	}
+}
+
+.feedback-modal-container {
+	.feedback-modal-tabs {
+		width: 100%;
+		display: flex;
+
+		.ant-radio-button-wrapper {
+			flex: 1;
+			margin: 0px !important;
+
+			border: 1px solid var(--bg-slate-400);
+
+			&:before {
+				display: none;
+			}
+
+			.ant-radio-button-checked {
+				background-color: var(--bg-slate-400);
+			}
+		}
+
+		.feedback-modal-tab-label {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.tab-icon {
+				width: 6px;
+				height: 6px;
+			}
+
+			.feedback-tab {
+				background-color: var(--bg-sakura-500);
+			}
+
+			.bug-tab {
+				background-color: var(--bg-amber-500);
+			}
+
+			.feature-tab {
+				background-color: var(--bg-robin-500);
+			}
+		}
+
+		.ant-tabs-nav-list {
+			.ant-tabs-tab {
+				padding: 6px 16px;
+
+				border-radius: 2px;
+				background: var(--bg-ink-400);
+				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+				border: 1px solid var(--bg-slate-400);
+
+				margin: 0 !important;
+
+				.ant-tabs-tab-btn {
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 166.667% */
+					letter-spacing: -0.06px;
+				}
+
+				&-active {
+					background: var(--bg-slate-400);
+					color: var(--bg-vanilla-100);
+
+					border-bottom: none !important;
+
+					.ant-tabs-tab-btn {
+						color: var(--bg-vanilla-100);
+					}
+				}
+			}
+		}
+	}
+
+	.feedback-modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.feedback-input {
+			resize: none;
+
+			text-area {
+				resize: none;
+			}
+		}
+
+		.feedback-content-include-console-logs {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+		}
+	}
+
+	.feedback-modal-content-footer {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.feedback-modal-content-footer-info-text {
+			font-size: 12px;
+			color: var(--bg-vanilla-400, #c0c1c3);
+			text-align: center;
+
+			/* button/ small  */
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 24px; /* 200% */
+
+			.contact-support-link,
+			.read-docs-link {
+				color: var(--bg-robin-400);
+				font-weight: 500;
+				font-size: 12px;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.share-modal-content,
+	.feedback-modal-container {
+		.absolute-relative-time-toggler-container {
+			.absolute-relative-time-toggler-label {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.share-link {
+			.url-share-container {
+				.url-share-container-header {
+					.url-share-title,
+					.url-share-sub-title {
+						color: var(--bg-ink-400);
+					}
+
+					.url-share-sub-title {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+	}
+
+	.feedback-modal-container {
+		.feedback-modal-tabs {
+			.ant-radio-button-wrapper {
+				flex: 1;
+				margin: 0px !important;
+
+				border: 1px solid var(--bg-vanilla-300);
+
+				&:before {
+					display: none;
+				}
+
+				.ant-radio-button-checked {
+					background-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.feedback-modal-content-footer {
+			.feedback-modal-content-footer-info-text {
+				color: var(--bg-slate-400);
+			}
+		}
+	}
+}

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -0,0 +1,142 @@
+import './HeaderRightSection.styles.scss';
+
+import { Button, Popover } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { Globe, Inbox, SquarePen } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import AnnouncementsModal from './AnnouncementsModal';
+import FeedbackModal from './FeedbackModal';
+import ShareURLModal from './ShareURLModal';
+
+interface HeaderRightSectionProps {
+	enableAnnouncements: boolean;
+	enableShare: boolean;
+	enableFeedback: boolean;
+}
+
+function HeaderRightSection({
+	enableAnnouncements,
+	enableShare,
+	enableFeedback,
+}: HeaderRightSectionProps): JSX.Element | null {
+	const location = useLocation();
+
+	const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
+	const [openShareURLModal, setOpenShareURLModal] = useState(false);
+	const [openAnnouncementsModal, setOpenAnnouncementsModal] = useState(false);
+
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	const handleOpenFeedbackModal = useCallback((): void => {
+		logEvent('Feedback: Clicked', {
+			page: location.pathname,
+		});
+
+		setOpenFeedbackModal(true);
+		setOpenShareURLModal(false);
+		setOpenAnnouncementsModal(false);
+	}, [location.pathname]);
+
+	const handleOpenShareURLModal = useCallback((): void => {
+		logEvent('Share: Clicked', {
+			page: location.pathname,
+		});
+
+		setOpenShareURLModal(true);
+		setOpenFeedbackModal(false);
+		setOpenAnnouncementsModal(false);
+	}, [location.pathname]);
+
+	const handleCloseFeedbackModal = (): void => {
+		setOpenFeedbackModal(false);
+	};
+
+	const handleOpenFeedbackModalChange = (open: boolean): void => {
+		setOpenFeedbackModal(open);
+	};
+
+	const handleOpenAnnouncementsModalChange = (open: boolean): void => {
+		setOpenAnnouncementsModal(open);
+	};
+
+	const handleOpenShareURLModalChange = (open: boolean): void => {
+		setOpenShareURLModal(open);
+	};
+
+	const isLicenseEnabled = isEnterpriseSelfHostedUser || isCloudUser;
+
+	return (
+		<div className="header-right-section-container">
+			{enableFeedback && isLicenseEnabled && (
+				<Popover
+					rootClassName="header-section-popover-root"
+					className="shareable-link-popover"
+					placement="bottomRight"
+					content={<FeedbackModal onClose={handleCloseFeedbackModal} />}
+					destroyTooltipOnHide
+					arrow={false}
+					trigger="click"
+					open={openFeedbackModal}
+					onOpenChange={handleOpenFeedbackModalChange}
+				>
+					<Button
+						className="share-feedback-btn periscope-btn ghost"
+						icon={<SquarePen size={14} />}
+						onClick={handleOpenFeedbackModal}
+					/>
+				</Popover>
+			)}
+
+			{enableAnnouncements && (
+				<Popover
+					rootClassName="header-section-popover-root"
+					className="shareable-link-popover"
+					placement="bottomRight"
+					content={<AnnouncementsModal />}
+					arrow={false}
+					destroyTooltipOnHide
+					trigger="click"
+					open={openAnnouncementsModal}
+					onOpenChange={handleOpenAnnouncementsModalChange}
+				>
+					<Button
+						icon={<Inbox size={14} />}
+						className="periscope-btn ghost announcements-btn"
+						onClick={(): void => {
+							logEvent('Announcements: Clicked', {
+								page: location.pathname,
+							});
+						}}
+					/>
+				</Popover>
+			)}
+
+			{enableShare && (
+				<Popover
+					rootClassName="header-section-popover-root"
+					className="shareable-link-popover"
+					placement="bottomRight"
+					content={<ShareURLModal />}
+					open={openShareURLModal}
+					destroyTooltipOnHide
+					arrow={false}
+					trigger="click"
+					onOpenChange={handleOpenShareURLModalChange}
+				>
+					<Button
+						className="share-link-btn periscope-btn ghost"
+						icon={<Globe size={14} />}
+						onClick={handleOpenShareURLModal}
+					>
+						Share
+					</Button>
+				</Popover>
+			)}
+		</div>
+	);
+}
+
+export default HeaderRightSection;

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -0,0 +1,171 @@
+import { Color } from '@signozhq/design-tokens';
+import { Button, Switch, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import { Check, Info, Link2 } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+const routesToBeSharedWithTime = [
+	ROUTES.LOGS_EXPLORER,
+	ROUTES.TRACES_EXPLORER,
+	ROUTES.METRICS_EXPLORER_EXPLORER,
+	ROUTES.METER_EXPLORER,
+];
+
+function ShareURLModal(): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { selectedTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const [enableAbsoluteTime, setEnableAbsoluteTime] = useState(
+		selectedTime !== 'custom',
+	);
+
+	const startTime = urlQuery.get(QueryParams.startTime);
+	const endTime = urlQuery.get(QueryParams.endTime);
+	const relativeTime = urlQuery.get(QueryParams.relativeTime);
+
+	const [isURLCopied, setIsURLCopied] = useState(false);
+	const [, handleCopyToClipboard] = useCopyToClipboard();
+
+	const isValidateRelativeTime = useMemo(
+		() =>
+			selectedTime !== 'custom' ||
+			(startTime && endTime && selectedTime === 'custom'),
+		[startTime, endTime, selectedTime],
+	);
+
+	const shareURLWithTime = useMemo(
+		() => relativeTime || (startTime && endTime),
+		[relativeTime, startTime, endTime],
+	);
+
+	const isRouteToBeSharedWithTime = useMemo(
+		() =>
+			routesToBeSharedWithTime.some((route) =>
+				matchPath(location.pathname, { path: route, exact: true }),
+			),
+		[location.pathname],
+	);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const processURL = (): string => {
+		let currentUrl = window.location.href;
+		const isCustomTime = !!(startTime && endTime && selectedTime === 'custom');
+
+		if (shareURLWithTime || isRouteToBeSharedWithTime) {
+			if (enableAbsoluteTime || isCustomTime) {
+				if (selectedTime === 'custom') {
+					if (startTime && endTime) {
+						urlQuery.set(QueryParams.startTime, startTime.toString());
+						urlQuery.set(QueryParams.endTime, endTime.toString());
+					}
+				} else {
+					const { minTime, maxTime } = GetMinMax(selectedTime);
+
+					urlQuery.set(QueryParams.startTime, minTime.toString());
+					urlQuery.set(QueryParams.endTime, maxTime.toString());
+				}
+
+				urlQuery.delete(QueryParams.relativeTime);
+
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
+			} else {
+				urlQuery.delete(QueryParams.startTime);
+				urlQuery.delete(QueryParams.endTime);
+
+				urlQuery.set(QueryParams.relativeTime, selectedTime);
+				currentUrl = `${window.location.origin}${
+					location.pathname
+				}?${urlQuery.toString()}`;
+			}
+		}
+
+		return currentUrl;
+	};
+
+	const handleCopyURL = (): void => {
+		const URL = processURL();
+
+		handleCopyToClipboard(URL);
+		setIsURLCopied(true);
+
+		logEvent('Share: Copy link clicked', {
+			page: location.pathname,
+			URL,
+		});
+
+		setTimeout(() => {
+			setIsURLCopied(false);
+		}, 1000);
+	};
+
+	return (
+		<div className="share-modal-content">
+			{(shareURLWithTime || isRouteToBeSharedWithTime) && (
+				<>
+					<div className="absolute-relative-time-toggler-container">
+						<Typography.Text className="absolute-relative-time-toggler-label">
+							Enable absolute time
+						</Typography.Text>
+
+						<div className="absolute-relative-time-toggler">
+							{!isValidateRelativeTime && (
+								<Info size={14} color={Color.BG_AMBER_600} />
+							)}
+							<Switch
+								checked={enableAbsoluteTime}
+								disabled={!isValidateRelativeTime}
+								size="small"
+								onChange={(): void => {
+									setEnableAbsoluteTime((prev) => !prev);
+								}}
+							/>
+						</div>
+					</div>
+
+					{!isValidateRelativeTime && (
+						<div className="absolute-relative-time-error">
+							Please select / enter valid relative time to toggle.
+						</div>
+					)}
+				</>
+			)}
+
+			<div className="share-link">
+				<div className="url-share-container">
+					<div className="url-share-container-header">
+						<Typography.Text className="url-share-title">
+							Share page link
+						</Typography.Text>
+						<Typography.Text className="url-share-sub-title">
+							Share the current page link with your team member
+						</Typography.Text>
+					</div>
+
+					<Button
+						className="periscope-btn secondary"
+						onClick={handleCopyURL}
+						icon={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
+					>
+						Copy page link
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ShareURLModal;

frontend/src/components/HeaderRightSection/__tests__/AnnouncementsModal.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+
+import AnnouncementsModal from '../AnnouncementsModal';
+
+describe('AnnouncementsModal', () => {
+	it('should render announcements modal with title', () => {
+		render(<AnnouncementsModal />);
+
+		expect(screen.getByText('Announcements')).toBeInTheDocument();
+	});
+
+	it('should have proper structure and classes', () => {
+		render(<AnnouncementsModal />);
+
+		const container = screen
+			.getByText('Announcements')
+			.closest('.announcements-modal-container');
+		expect(container).toBeInTheDocument();
+
+		const headerContainer = screen
+			.getByText('Announcements')
+			.closest('.announcements-modal-container-header');
+		expect(headerContainer).toBeInTheDocument();
+	});
+
+	it('should render without any errors', () => {
+		expect(() => render(<AnnouncementsModal />)).not.toThrow();
+	});
+});

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+// Mock dependencies before imports
+import { toast } from '@signozhq/sonner';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { handleContactSupport } from 'pages/Integrations/utils';
+import { useLocation } from 'react-router-dom';
+
+import FeedbackModal from '../FeedbackModal';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+}));
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
+
+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: jest.fn(),
+}));
+
+jest.mock('pages/Integrations/utils', () => ({
+	handleContactSupport: jest.fn(),
+}));
+
+const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
+const mockUseLocation = useLocation as jest.Mock;
+const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
+const mockHandleContactSupport = handleContactSupport as jest.Mock;
+const mockToast = toast as jest.Mocked<typeof toast>;
+
+const mockOnClose = jest.fn();
+
+const mockLocation = {
+	pathname: '/test-path',
+};
+
+describe('FeedbackModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseLocation.mockReturnValue(mockLocation);
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+		});
+		mockToast.success.mockClear();
+		mockToast.error.mockClear();
+	});
+
+	it('should render feedback modal with all tabs', () => {
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		expect(screen.getByText('Feedback')).toBeInTheDocument();
+		expect(screen.getByText('Report a bug')).toBeInTheDocument();
+		expect(screen.getByText('Feature request')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Write your feedback here...'),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+	});
+
+	it('should switch between tabs when clicked', async () => {
+		const user = userEvent.setup();
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		// Initially, feedback radio should be active
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();
+
+		const bugTab = screen.getByText('Report a bug');
+		await user.click(bugTab);
+
+		// Bug radio should now be active
+		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
+		expect(bugRadio).toBeChecked();
+
+		const featureTab = screen.getByText('Feature request');
+		await user.click(featureTab);
+
+		// Feature radio should now be active
+		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
+		expect(featureRadio).toBeChecked();
+	});
+
+	it('should update feedback text when typing in textarea', async () => {
+		const user = userEvent.setup();
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		const textarea = screen.getByPlaceholderText('Write your feedback here...');
+		const testFeedback = 'This is my feedback';
+
+		await user.type(textarea, testFeedback);
+
+		expect(textarea).toHaveValue(testFeedback);
+	});
+
+	it('should submit feedback and log event when submit button is clicked', async () => {
+		const user = userEvent.setup();
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		const textarea = screen.getByPlaceholderText('Write your feedback here...');
+		const submitButton = screen.getByRole('button', { name: /submit/i });
+		const testFeedback = 'Test feedback content';
+
+		await user.type(textarea, testFeedback);
+		await user.click(submitButton);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+			data: testFeedback,
+			type: 'feedback',
+			page: mockLocation.pathname,
+		});
+		expect(mockOnClose).toHaveBeenCalled();
+		expect(mockToast.success).toHaveBeenCalledWith(
+			'Feedback submitted successfully',
+			{
+				position: 'top-right',
+			},
+		);
+	});
+
+	it('should submit bug report with correct type', async () => {
+		const user = userEvent.setup();
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		// Switch to bug report tab
+		const bugTab = screen.getByText('Report a bug');
+		await user.click(bugTab);
+
+		// Verify bug report radio is now active
+		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
+		expect(bugRadio).toBeChecked();
+
+		const textarea = screen.getByPlaceholderText('Write your feedback here...');
+		const submitButton = screen.getByRole('button', { name: /submit/i });
+		const testFeedback = 'This is a bug report';
+
+		await user.type(textarea, testFeedback);
+		await user.click(submitButton);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+			data: testFeedback,
+			type: 'reportBug',
+			page: mockLocation.pathname,
+		});
+		expect(mockOnClose).toHaveBeenCalled();
+		expect(mockToast.success).toHaveBeenCalledWith(
+			'Bug report submitted successfully',
+			{
+				position: 'top-right',
+			},
+		);
+	});
+
+	it('should submit feature request with correct type', async () => {
+		const user = userEvent.setup();
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		// Switch to feature request tab
+		const featureTab = screen.getByText('Feature request');
+		await user.click(featureTab);
+
+		// Verify feature request radio is now active
+		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
+		expect(featureRadio).toBeChecked();
+
+		const textarea = screen.getByPlaceholderText('Write your feedback here...');
+		const submitButton = screen.getByRole('button', { name: /submit/i });
+		const testFeedback = 'This is a feature request';
+
+		await user.type(textarea, testFeedback);
+		await user.click(submitButton);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+			data: testFeedback,
+			type: 'featureRequest',
+			page: mockLocation.pathname,
+		});
+		expect(mockOnClose).toHaveBeenCalled();
+		expect(mockToast.success).toHaveBeenCalledWith(
+			'Feature request submitted successfully',
+			{
+				position: 'top-right',
+			},
+		);
+	});
+
+	it('should call handleContactSupport when contact support link is clicked', async () => {
+		const user = userEvent.setup();
+		const isCloudUser = true;
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser,
+		});
+
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		const contactSupportLink = screen.getByText('Contact Support');
+		await user.click(contactSupportLink);
+
+		expect(mockHandleContactSupport).toHaveBeenCalledWith(isCloudUser);
+	});
+
+	it('should handle non-cloud user for contact support', async () => {
+		const user = userEvent.setup();
+		const isCloudUser = false;
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser,
+		});
+
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		const contactSupportLink = screen.getByText('Contact Support');
+		await user.click(contactSupportLink);
+
+		expect(mockHandleContactSupport).toHaveBeenCalledWith(isCloudUser);
+	});
+
+	it('should render docs link with correct attributes', () => {
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		const docsLink = screen.getByText('Read our docs');
+		expect(docsLink).toHaveAttribute(
+			'href',
+			'https://signoz.io/docs/introduction/',
+		);
+		expect(docsLink).toHaveAttribute('target', '_blank');
+		expect(docsLink).toHaveAttribute('rel', 'noreferrer');
+	});
+
+	it('should reset form state when component unmounts', async () => {
+		const user = userEvent.setup();
+
+		// Render component
+		const { unmount } = render(<FeedbackModal onClose={mockOnClose} />);
+
+		// Change the form state first
+		const textArea = screen.getByPlaceholderText('Write your feedback here...');
+		await user.type(textArea, 'Some feedback text');
+
+		// Change the active tab
+		const bugTab = screen.getByText('Report a bug');
+		await user.click(bugTab);
+
+		// Verify state has changed
+		expect(textArea).toHaveValue('Some feedback text');
+
+		// Unmount the component - this should trigger cleanup
+		unmount();
+
+		// Re-render the component to verify state was reset
+		render(<FeedbackModal onClose={mockOnClose} />);
+
+		// Verify form state is reset
+		const newTextArea = screen.getByPlaceholderText(
+			'Write your feedback here...',
+		);
+		expect(newTextArea).toHaveValue(''); // Should be empty
+
+		// Verify active radio is reset to default (Feedback radio)
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();
+	});
+});

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -0,0 +1,285 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable react/jsx-props-no-spreading */
+// Mock dependencies before imports
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useLocation } from 'react-router-dom';
+
+import HeaderRightSection from '../HeaderRightSection';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+}));
+
+jest.mock('../FeedbackModal', () => ({
+	__esModule: true,
+	default: ({ onClose }: { onClose: () => void }): JSX.Element => (
+		<div data-testid="feedback-modal">
+			<button onClick={onClose} type="button">
+				Close Feedback
+			</button>
+		</div>
+	),
+}));
+
+jest.mock('../ShareURLModal', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="share-modal">Share URL Modal</div>
+	),
+}));
+
+jest.mock('../AnnouncementsModal', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="announcements-modal">Announcements Modal</div>
+	),
+}));
+
+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: jest.fn(),
+}));
+
+const mockLogEvent = logEvent as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
+const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
+
+const defaultProps = {
+	enableAnnouncements: true,
+	enableShare: true,
+	enableFeedback: true,
+};
+
+const mockLocation = {
+	pathname: '/test-path',
+};
+
+describe('HeaderRightSection', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseLocation.mockReturnValue(mockLocation);
+		// Default to licensed user (Enterprise or Cloud)
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: true,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
+	});
+
+	it('should render all buttons when all features are enabled', () => {
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(3);
+		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
+
+		// Check for feedback button by class
+		const feedbackButton = document.querySelector(
+			'.share-feedback-btn[class*="share-feedback-btn"]',
+		);
+		expect(feedbackButton).toBeInTheDocument();
+
+		// Check for announcements button by finding the inbox icon
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).toBeInTheDocument();
+	});
+
+	it('should render only enabled features', () => {
+		render(
+			<HeaderRightSection
+				enableAnnouncements={false}
+				enableShare={false}
+				enableFeedback
+			/>,
+		);
+
+		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(1);
+		expect(
+			screen.queryByRole('button', { name: /share/i }),
+		).not.toBeInTheDocument();
+
+		// Check that inbox icon is not present
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).not.toBeInTheDocument();
+
+		// Check that feedback button is present
+		const squarePenIcon = document.querySelector('.lucide-square-pen');
+		expect(squarePenIcon).toBeInTheDocument();
+	});
+
+	it('should open feedback modal and log event when feedback button is clicked', async () => {
+		const user = userEvent.setup();
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
+		expect(feedbackButton).toBeInTheDocument();
+
+		await user.click(feedbackButton!);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
+			page: mockLocation.pathname,
+		});
+		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
+	});
+
+	it('should open share modal and log event when share button is clicked', async () => {
+		const user = userEvent.setup();
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const shareButton = screen.getByRole('button', { name: /share/i });
+		await user.click(shareButton);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
+			page: mockLocation.pathname,
+		});
+		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
+	});
+
+	it('should log event when announcements button is clicked', async () => {
+		const user = userEvent.setup();
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const announcementsButton = document
+			.querySelector('.lucide-inbox')
+			?.closest('button');
+		expect(announcementsButton).toBeInTheDocument();
+
+		await user.click(announcementsButton!);
+
+		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
+			page: mockLocation.pathname,
+		});
+	});
+
+	it('should close feedback modal when onClose is called', async () => {
+		const user = userEvent.setup();
+		render(<HeaderRightSection {...defaultProps} />);
+
+		// Open feedback modal
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
+		expect(feedbackButton).toBeInTheDocument();
+
+		await user.click(feedbackButton!);
+		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
+
+		// Close feedback modal
+		const closeFeedbackButton = screen.getByText('Close Feedback');
+		await user.click(closeFeedbackButton);
+		expect(screen.queryByTestId('feedback-modal')).not.toBeInTheDocument();
+	});
+
+	it('should close other modals when opening feedback modal', async () => {
+		const user = userEvent.setup();
+		render(<HeaderRightSection {...defaultProps} />);
+
+		// Open share modal first
+		const shareButton = screen.getByRole('button', { name: /share/i });
+		await user.click(shareButton);
+		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
+
+		// Open feedback modal - should close share modal
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
+		expect(feedbackButton).toBeInTheDocument();
+
+		await user.click(feedbackButton!);
+		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
+		expect(screen.queryByTestId('share-modal')).not.toBeInTheDocument();
+	});
+
+	it('should show feedback button for Cloud users when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: true,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).toBeInTheDocument();
+	});
+
+	it('should show feedback button for Enterprise self-hosted users when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: true,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).toBeInTheDocument();
+	});
+
+	it('should hide feedback button for Community users even when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: true,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).not.toBeInTheDocument();
+	});
+
+	it('should hide feedback button for Community Enterprise users even when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: true,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).not.toBeInTheDocument();
+	});
+
+	it('should render correct number of buttons when feedback is hidden due to license', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: true,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		// Should have 2 buttons (announcements + share) instead of 3
+		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(2);
+
+		// Verify which buttons are present
+		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).toBeInTheDocument();
+
+		// Verify feedback button is not present
+		const feedbackIcon = document.querySelector('.lucide-square-pen');
+		expect(feedbackIcon).not.toBeInTheDocument();
+	});
+});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -0,0 +1,289 @@
+// Mock dependencies before imports
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+
+import ShareURLModal from '../ShareURLModal';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+	matchPath: jest.fn(),
+}));
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn(),
+}));
+
+jest.mock('lib/getMinMax', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: jest.fn(),
+}));
+
+// Mock window.location
+const mockLocation = {
+	href: 'https://example.com/test-path?param=value',
+	origin: 'https://example.com',
+};
+Object.defineProperty(window, 'location', {
+	value: mockLocation,
+	writable: true,
+});
+
+const mockLogEvent = logEvent as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
+const mockUseUrlQuery = useUrlQuery as jest.Mock;
+const mockUseSelector = useSelector as jest.Mock;
+const mockGetMinMax = GetMinMax as jest.Mock;
+const mockUseCopyToClipboard = useCopyToClipboard as jest.Mock;
+const mockMatchPath = matchPath as jest.Mock;
+
+const mockUrlQuery = {
+	get: jest.fn(),
+	set: jest.fn(),
+	delete: jest.fn(),
+	toString: jest.fn(() => 'param=value'),
+};
+
+const mockHandleCopyToClipboard = jest.fn();
+
+const TEST_PATH = '/test-path';
+const ENABLE_ABSOLUTE_TIME_TEXT = 'Enable absolute time';
+
+describe('ShareURLModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		mockUseLocation.mockReturnValue({
+			pathname: TEST_PATH,
+		});
+
+		mockUseUrlQuery.mockReturnValue(mockUrlQuery);
+
+		mockUseSelector.mockReturnValue({
+			selectedTime: '5min',
+		});
+
+		mockGetMinMax.mockReturnValue({
+			minTime: 1000000,
+			maxTime: 2000000,
+		});
+
+		mockUseCopyToClipboard.mockReturnValue([null, mockHandleCopyToClipboard]);
+
+		mockMatchPath.mockReturnValue(false);
+
+		// Reset URL query mocks - all return null by default
+		mockUrlQuery.get.mockReturnValue(null);
+
+		// Reset mock functions
+		mockUrlQuery.set.mockClear();
+		mockUrlQuery.delete.mockClear();
+		mockUrlQuery.toString.mockReturnValue('param=value');
+	});
+
+	it('should render share modal with copy button', () => {
+		render(<ShareURLModal />);
+
+		expect(screen.getByText('Share page link')).toBeInTheDocument();
+		expect(
+			screen.getByText('Share the current page link with your team member'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /copy page link/i }),
+		).toBeInTheDocument();
+	});
+
+	it('should copy URL and log event when copy button is clicked', async () => {
+		const user = userEvent.setup();
+		render(<ShareURLModal />);
+
+		const copyButton = screen.getByRole('button', { name: /copy page link/i });
+		await user.click(copyButton);
+
+		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
+			page: TEST_PATH,
+			URL: expect.any(String),
+		});
+	});
+
+	it('should show absolute time toggle when on time-enabled route', () => {
+		mockMatchPath.mockReturnValue(true); // Simulate being on a route that supports time
+
+		render(<ShareURLModal />);
+
+		expect(screen.getByText(ENABLE_ABSOLUTE_TIME_TEXT)).toBeInTheDocument();
+		expect(screen.getByRole('switch')).toBeInTheDocument();
+	});
+
+	it('should show absolute time toggle when URL has time parameters', () => {
+		mockUrlQuery.get.mockImplementation((key: string) =>
+			key === 'relativeTime' ? '5min' : null,
+		);
+
+		render(<ShareURLModal />);
+
+		expect(screen.getByText(ENABLE_ABSOLUTE_TIME_TEXT)).toBeInTheDocument();
+	});
+
+	it('should toggle absolute time switch', async () => {
+		const user = userEvent.setup();
+		mockMatchPath.mockReturnValue(true);
+		mockUseSelector.mockReturnValue({
+			selectedTime: '5min', // Non-custom time should enable absolute time by default
+		});
+
+		render(<ShareURLModal />);
+
+		const toggleSwitch = screen.getByRole('switch');
+		// Should be checked by default for non-custom time
+		expect(toggleSwitch).toBeChecked();
+
+		await user.click(toggleSwitch);
+		expect(toggleSwitch).not.toBeChecked();
+	});
+
+	it('should disable toggle when relative time is invalid', () => {
+		mockUseSelector.mockReturnValue({
+			selectedTime: 'custom',
+		});
+
+		// Invalid - missing start and end time for custom
+		mockUrlQuery.get.mockReturnValue(null);
+
+		mockMatchPath.mockReturnValue(true);
+
+		render(<ShareURLModal />);
+
+		expect(
+			screen.getByText('Please select / enter valid relative time to toggle.'),
+		).toBeInTheDocument();
+		expect(screen.getByRole('switch')).toBeDisabled();
+	});
+
+	it('should process URL with absolute time for non-custom time', async () => {
+		const user = userEvent.setup();
+		mockMatchPath.mockReturnValue(true);
+		mockUseSelector.mockReturnValue({
+			selectedTime: '5min',
+		});
+
+		render(<ShareURLModal />);
+
+		// Absolute time should be enabled by default for non-custom time
+		// Click copy button directly
+		const copyButton = screen.getByRole('button', { name: /copy page link/i });
+		await user.click(copyButton);
+
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('startTime', '1000000');
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('endTime', '2000000');
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('relativeTime');
+	});
+
+	it('should process URL with custom time parameters', async () => {
+		const user = userEvent.setup();
+		mockMatchPath.mockReturnValue(true);
+		mockUseSelector.mockReturnValue({
+			selectedTime: 'custom',
+		});
+
+		mockUrlQuery.get.mockImplementation((key: string) => {
+			switch (key) {
+				case 'startTime':
+					return '1500000';
+				case 'endTime':
+					return '1600000';
+				default:
+					return null;
+			}
+		});
+
+		render(<ShareURLModal />);
+
+		// Should be enabled by default for custom time
+		const copyButton = screen.getByRole('button', { name: /copy page link/i });
+		await user.click(copyButton);
+
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('startTime', '1500000');
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('endTime', '1600000');
+	});
+
+	it('should process URL with relative time when absolute time is disabled', async () => {
+		const user = userEvent.setup();
+		mockMatchPath.mockReturnValue(true);
+		mockUseSelector.mockReturnValue({
+			selectedTime: '5min',
+		});
+
+		render(<ShareURLModal />);
+
+		// Disable absolute time first (it's enabled by default for non-custom time)
+		const toggleSwitch = screen.getByRole('switch');
+		await user.click(toggleSwitch);
+
+		const copyButton = screen.getByRole('button', { name: /copy page link/i });
+		await user.click(copyButton);
+
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('startTime');
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('endTime');
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('relativeTime', '5min');
+	});
+
+	it('should handle routes that should be shared with time', async () => {
+		const user = userEvent.setup();
+		mockUseLocation.mockReturnValue({
+			pathname: ROUTES.LOGS_EXPLORER,
+		});
+
+		mockMatchPath.mockImplementation(
+			(pathname: string, options: any) => options.path === ROUTES.LOGS_EXPLORER,
+		);
+
+		render(<ShareURLModal />);
+
+		expect(screen.getByText(ENABLE_ABSOLUTE_TIME_TEXT)).toBeInTheDocument();
+		expect(screen.getByRole('switch')).toBeChecked();
+
+		// on clicking copy page link, the copied url should have startTime and endTime
+		const copyButton = screen.getByRole('button', { name: /copy page link/i });
+
+		await user.click(copyButton);
+
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('startTime', '1000000');
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('endTime', '2000000');
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('relativeTime');
+
+		// toggle the switch to share url with relative time
+		const toggleSwitch = screen.getByRole('switch');
+		await user.click(toggleSwitch);
+
+		await user.click(copyButton);
+
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('startTime');
+		expect(mockUrlQuery.delete).toHaveBeenCalledWith('endTime');
+		expect(mockUrlQuery.set).toHaveBeenCalledWith('relativeTime', '5min');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -80,20 +80,24 @@ const stopEventsExtension = EditorView.domEventHandlers({
 });
 
 function QuerySearch({
+	placeholder,
 	onChange,
 	queryData,
 	dataSource,
 	onRun,
 	signalSource,
+	hardcodedAttributeKeys,
 }: {
+	placeholder?: string;
 	onChange: (value: string) => void;
 	queryData: IBuilderQuery;
 	dataSource: DataSource;
 	signalSource?: string;
+	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [query, setQuery] = useState<string>(queryData.filter?.expression || '');
+	const [query, setQuery] = useState<string>('');
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
 	const [activeKey, setActiveKey] = useState<string>('');
 	const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
@@ -104,6 +108,10 @@ function QuerySearch({
 		errors: [],
 	});
 
+	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
+	const [isFocused, setIsFocused] = useState(false);
+	const [hasInteractedWithQB, setHasInteractedWithQB] = useState(false);
+
 	const handleQueryValidation = (newQuery: string): void => {
 		try {
 			const validationResponse = validateQuery(newQuery);
@@ -123,13 +131,28 @@ function QuerySearch({
 
 	useEffect(() => {
 		const newQuery = queryData.filter?.expression || '';
-		// Only mark as external change if the query actually changed from external source
+		// Only update query from external source when editor is not focused
+		// When focused, just update the lastExternalQuery to track changes
 		if (newQuery !== lastExternalQuery) {
 			setQuery(newQuery);
 			setIsExternalQueryChange(true);
 			setLastExternalQuery(newQuery);
 		}
-	}, [queryData.filter?.expression, lastExternalQuery]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [queryData.filter?.expression]);
+
+	useEffect(() => {
+		// Update the query when the editor is blurred and the query has changed
+		// Only call onChange if the editor has been focused before (not on initial mount)
+		if (
+			!isFocused &&
+			hasInteractedWithQB &&
+			query !== queryData.filter?.expression
+		) {
+			onChange(query);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isFocused]);
 
 	// Validate query when it changes externally (from queryData)
 	useEffect(() => {
@@ -145,9 +168,6 @@ function QuerySearch({
 
 	const [showExamples] = useState(false);
 
-	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
-	const [isFocused, setIsFocused] = useState(false);
-
 	const [
 		isFetchingCompleteValuesList,
 		setIsFetchingCompleteValuesList,
@@ -161,6 +181,9 @@ function QuerySearch({
 	const lastFetchedKeyRef = useRef<string>('');
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
+	const [shouldRunQueryPostUpdate, setShouldRunQueryPostUpdate] = useState(
+		false,
+	);
 
 	const { handleRunQuery } = useQueryBuilder();
 
@@ -206,6 +229,7 @@ function QuerySearch({
 
 			return (): void => clearTimeout(timeoutId);
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[isFocused],
 	);
 
@@ -219,6 +243,11 @@ function QuerySearch({
 				return;
 			}
 
+			if (hardcodedAttributeKeys) {
+				setKeySuggestions(hardcodedAttributeKeys);
+				return;
+			}
+
 			lastFetchedKeyRef.current = searchText || '';
 
 			const response = await getKeySuggestions({
@@ -254,6 +283,7 @@ function QuerySearch({
 			toggleSuggestions,
 			queryData.aggregateAttribute?.key,
 			signalSource,
+			hardcodedAttributeKeys,
 		],
 	);
 
@@ -545,7 +575,6 @@ function QuerySearch({
 
 	const handleChange = (value: string): void => {
 		setQuery(value);
-		onChange(value);
 		// Mark as internal change to avoid triggering external validation
 		setIsExternalQueryChange(false);
 		// Update lastExternalQuery to prevent external validation trigger
@@ -1209,6 +1238,25 @@ function QuerySearch({
 		</div>
 	);
 
+	// Effect to handle query run after update
+	useEffect(
+		() => {
+			// Only run the query post updating the filter expression.
+			// This runs the query in the next update cycle of react, when it's guaranteed that the query is updated.
+			// Because both the things are sequential and react batches the updates so it was still taking the old query.
+			if (shouldRunQueryPostUpdate) {
+				if (onRun && typeof onRun === 'function') {
+					onRun(query);
+				} else {
+					handleRunQuery();
+				}
+				setShouldRunQueryPostUpdate(false);
+			}
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[shouldRunQueryPostUpdate, handleRunQuery, onRun],
+	);
+
 	return (
 		<div className="code-mirror-where-clause">
 			{editingMode && (
@@ -1283,6 +1331,7 @@ function QuerySearch({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1319,11 +1368,14 @@ function QuerySearch({
 									// and instead run a custom action
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
-										if (onRun && typeof onRun === 'function') {
-											onRun(query);
-										} else {
-											handleRunQuery();
+										if (
+											onChange &&
+											typeof onChange === 'function' &&
+											query !== queryData.filter?.expression
+										) {
+											onChange(query);
 										}
+										setShouldRunQueryPostUpdate(true);
 										return true;
 									},
 								},
@@ -1336,14 +1388,19 @@ function QuerySearch({
 							]),
 						),
 					]}
-					placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
+					placeholder={placeholder}
 					basicSetup={{
 						lineNumbers: false,
 					}}
 					onFocus={(): void => {
 						setIsFocused(true);
+						setHasInteractedWithQB(true);
 					}}
 					onBlur={handleBlur}
+					onCreateEditor={(view: EditorView): EditorView => {
+						editorRef.current = view;
+						return view;
+					}}
 				/>
 
 				{query && validation.isValid === false && !isFocused && (
@@ -1483,6 +1540,9 @@ function QuerySearch({
 QuerySearch.defaultProps = {
 	onRun: undefined,
 	signalSource: '',
+	hardcodedAttributeKeys: undefined,
+	placeholder:
+		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 };
 
 export default QuerySearch;

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -0,0 +1,380 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable import/named */
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import * as UseQBModule from 'hooks/queryBuilder/useQueryBuilder';
+import React from 'react';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import type { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QuerySearch from '../QuerySearch/QuerySearch';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { selectedDashboard: undefined } => ({
+		selectedDashboard: undefined,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
+	const handleRunQuery = jest.fn();
+	return {
+		__esModule: true,
+		useQueryBuilder: (): { handleRunQuery: () => void } => ({ handleRunQuery }),
+		handleRunQuery,
+	};
+});
+
+jest.mock('@codemirror/autocomplete', () => ({
+	autocompletion: (): Record<string, unknown> => ({}),
+	closeCompletion: (): boolean => true,
+	completionKeymap: [] as unknown[],
+	startCompletion: (): boolean => true,
+}));
+
+jest.mock('@codemirror/lang-javascript', () => ({
+	javascript: (): Record<string, unknown> => ({}),
+}));
+
+jest.mock('@uiw/codemirror-theme-copilot', () => ({
+	copilot: {},
+}));
+
+jest.mock('@uiw/codemirror-theme-github', () => ({
+	githubLight: {},
+}));
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest.fn().mockResolvedValue({
+		data: {
+			data: { keys: {} as Record<string, QueryKeyDataSuggestionsProps[]> },
+		},
+	}),
+}));
+
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn().mockResolvedValue({
+		data: { data: { values: { stringValues: [], numberValues: [] } } },
+	}),
+}));
+
+// Mock CodeMirror to a simple textarea to make it testable and call onUpdate
+jest.mock(
+	'@uiw/react-codemirror',
+	(): Record<string, unknown> => {
+		// Minimal EditorView shape used by the component
+		class EditorViewMock {}
+		(EditorViewMock as any).domEventHandlers = (): unknown => ({} as unknown);
+		(EditorViewMock as any).lineWrapping = {} as unknown;
+		(EditorViewMock as any).editable = { of: () => ({}) } as unknown;
+
+		const keymap = { of: (arr: unknown) => arr } as unknown;
+		const Prec = { highest: (ext: unknown) => ext } as unknown;
+
+		type CodeMirrorProps = {
+			value?: string;
+			onChange?: (v: string) => void;
+			onFocus?: () => void;
+			onBlur?: () => void;
+			placeholder?: string;
+			onCreateEditor?: (view: unknown) => unknown;
+			onUpdate?: (arg: {
+				view: {
+					state: {
+						selection: { main: { head: number } };
+						doc: {
+							toString: () => string;
+							lineAt: (
+								_pos: number,
+							) => { number: number; from: number; to: number; text: string };
+						};
+					};
+				};
+			}) => void;
+			'data-testid'?: string;
+			extensions?: unknown[];
+		};
+
+		function CodeMirrorMock({
+			value,
+			onChange,
+			onFocus,
+			onBlur,
+			placeholder,
+			onCreateEditor,
+			onUpdate,
+			'data-testid': dataTestId,
+			extensions,
+		}: CodeMirrorProps): JSX.Element {
+			const [localValue, setLocalValue] = React.useState<string>(value ?? '');
+
+			// Provide a fake editor instance
+			React.useEffect(() => {
+				if (onCreateEditor) {
+					onCreateEditor(new EditorViewMock() as any);
+				}
+				// eslint-disable-next-line react-hooks/exhaustive-deps
+			}, []);
+
+			// Call onUpdate whenever localValue changes to simulate cursor and doc
+			React.useEffect(() => {
+				if (onUpdate) {
+					const text = String(localValue ?? '');
+					const head = text.length;
+					onUpdate({
+						view: {
+							state: {
+								selection: { main: { head } },
+								doc: {
+									toString: (): string => text,
+									lineAt: () => ({
+										number: 1,
+										from: 0,
+										to: text.length,
+										text,
+									}),
+								},
+							},
+						},
+					});
+				}
+				// eslint-disable-next-line react-hooks/exhaustive-deps
+			}, [localValue]);
+
+			const handleKeyDown = (
+				e: React.KeyboardEvent<HTMLTextAreaElement>,
+			): void => {
+				const isModEnter = e.key === 'Enter' && (e.metaKey || e.ctrlKey);
+				if (!isModEnter) return;
+				const exts: unknown[] = Array.isArray(extensions) ? extensions : [];
+				const flat: unknown[] = exts.flatMap((x: unknown) =>
+					Array.isArray(x) ? x : [x],
+				);
+				const keyBindings = flat.filter(
+					(x) =>
+						Boolean(x) &&
+						typeof x === 'object' &&
+						'key' in (x as Record<string, unknown>),
+				) as Array<{ key?: string; run?: () => boolean | void }>;
+				keyBindings
+					.filter((b) => b.key === 'Mod-Enter' && typeof b.run === 'function')
+					.forEach((b) => {
+						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+						b.run!();
+					});
+			};
+
+			return (
+				<textarea
+					data-testid={dataTestId || 'query-where-clause-editor'}
+					placeholder={placeholder}
+					value={localValue}
+					onChange={(e): void => {
+						setLocalValue(e.target.value);
+						if (onChange) {
+							onChange(e.target.value);
+						}
+					}}
+					onFocus={onFocus}
+					onBlur={onBlur}
+					onKeyDown={handleKeyDown}
+					style={{ width: '100%', minHeight: 80 }}
+				/>
+			);
+		}
+
+		return {
+			__esModule: true,
+			default: CodeMirrorMock,
+			EditorView: EditorViewMock,
+			keymap,
+			Prec,
+		};
+	},
+);
+const handleRunQueryMock = ((UseQBModule as unknown) as {
+	handleRunQuery: jest.MockedFunction<() => void>;
+}).handleRunQuery;
+
+const PLACEHOLDER_TEXT =
+	"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')";
+const TESTID_EDITOR = 'query-where-clause-editor';
+const SAMPLE_KEY_TYPING = 'http.';
+const SAMPLE_VALUE_TYPING_INCOMPLETE = " service.name = '";
+const SAMPLE_VALUE_TYPING_COMPLETE = " service.name = 'frontend'";
+const SAMPLE_STATUS_QUERY = " status_code = '200'";
+
+describe('QuerySearch', () => {
+	it('renders with placeholder', () => {
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		expect(screen.getByPlaceholderText(PLACEHOLDER_TEXT)).toBeInTheDocument();
+	});
+
+	it('calls onChange on blur after user edits', async () => {
+		const handleChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<QuerySearch
+				onChange={handleChange}
+				queryData={initialQueriesMap.metrics.builder.queryData[0]}
+				dataSource={DataSource.METRICS}
+			/>,
+		);
+
+		const editor = screen.getByTestId(TESTID_EDITOR);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+		// Blur triggers validation + onChange (only if focused at least once and value changed)
+		editor.blur();
+
+		await waitFor(() => expect(handleChange).toHaveBeenCalledTimes(1));
+		expect(handleChange.mock.calls[0][0]).toContain("service.name = 'frontend'");
+	});
+
+	it('fetches key suggestions when typing a key (debounced)', async () => {
+		jest.useFakeTimers();
+		const advance = (ms: number): void => {
+			jest.advanceTimersByTime(ms);
+		};
+		const user = userEvent.setup({
+			advanceTimers: advance,
+			pointerEventsCheck: 0,
+		});
+		const mockedGetKeys = getKeySuggestions as jest.MockedFunction<
+			typeof getKeySuggestions
+		>;
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		const editor = screen.getByTestId(TESTID_EDITOR);
+		await user.type(editor, SAMPLE_KEY_TYPING);
+		advance(1000);
+
+		await waitFor(() => expect(mockedGetKeys).toHaveBeenCalled(), {
+			timeout: 3000,
+		});
+		jest.useRealTimers();
+	});
+
+	it('fetches value suggestions when editing value context', async () => {
+		jest.useFakeTimers();
+		const advance = (ms: number): void => {
+			jest.advanceTimersByTime(ms);
+		};
+		const user = userEvent.setup({
+			advanceTimers: advance,
+			pointerEventsCheck: 0,
+		});
+		const mockedGetValues = getValueSuggestions as jest.MockedFunction<
+			typeof getValueSuggestions
+		>;
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		const editor = screen.getByTestId(TESTID_EDITOR);
+		await user.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
+		advance(1000);
+
+		await waitFor(() => expect(mockedGetValues).toHaveBeenCalled(), {
+			timeout: 3000,
+		});
+		jest.useRealTimers();
+	});
+
+	it('fetches key suggestions on mount for LOGS', async () => {
+		jest.useFakeTimers();
+		const mockedGetKeysOnMount = getKeySuggestions as jest.MockedFunction<
+			typeof getKeySuggestions
+		>;
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		jest.advanceTimersByTime(1000);
+
+		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
+			timeout: 3000,
+		});
+
+		const lastArgs = mockedGetKeysOnMount.mock.calls[
+			mockedGetKeysOnMount.mock.calls.length - 1
+		]?.[0] as { signal: unknown; searchText: string };
+		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
+		jest.useRealTimers();
+	});
+
+	it('calls provided onRun on Mod-Enter', async () => {
+		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+				onRun={onRun}
+			/>,
+		);
+
+		const editor = screen.getByTestId(TESTID_EDITOR);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_STATUS_QUERY);
+		await user.keyboard('{Meta>}{Enter}{/Meta}');
+
+		await waitFor(() => expect(onRun).toHaveBeenCalled());
+	});
+
+	it('calls handleRunQuery when Mod-Enter without onRun', async () => {
+		const mockedHandleRunQuery = handleRunQueryMock as jest.MockedFunction<
+			() => void
+		>;
+		mockedHandleRunQuery.mockClear();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		const editor = screen.getByTestId(TESTID_EDITOR);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+		await user.keyboard('{Meta>}{Enter}{/Meta}');
+
+		await waitFor(() => expect(mockedHandleRunQuery).toHaveBeenCalled());
+	});
+});

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/components/RouteTab/RouteTab.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RouteTab from './index';
 import { RouteTabProps } from './types';

frontend/src/components/RouteTab/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsProps } from 'antd';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import {
 	generatePath,
 	matchPath,
@@ -17,6 +18,7 @@ function RouteTab({
 	activeKey,
 	onChangeHandler,
 	history,
+	showRightSection,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -61,12 +63,22 @@ function RouteTab({
 			items={items}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...rest}
+			tabBarExtraContent={
+				showRightSection && (
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare
+						enableFeedback
+					/>
+				)
+			}
 		/>
 	);
 }
 
 RouteTab.defaultProps = {
 	onChangeHandler: undefined,
+	showRightSection: true,
 };
 
 export default RouteTab;

frontend/src/components/RouteTab/types.ts

@@ -13,4 +13,5 @@ export interface RouteTabProps {
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
 	history: History<unknown>;
+	showRightSection: boolean;
 }

frontend/src/components/Uplot/Uplot.tsx

@@ -18,6 +18,11 @@ import UPlot from 'uplot';
 
 import { dataMatch, optionsUpdateState } from './utils';
 
+// Extended uPlot interface with custom properties
+interface ExtendedUPlot extends uPlot {
+	_legendScrollCleanup?: () => void;
+}
+
 export interface UplotProps {
 	options: uPlot.Options;
 	data: uPlot.AlignedData;
@@ -66,6 +71,12 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 
 		const destroy = useCallback((chart: uPlot | null) => {
 			if (chart) {
+				// Clean up legend scroll event listener
+				const extendedChart = chart as ExtendedUPlot;
+				if (extendedChart._legendScrollCleanup) {
+					extendedChart._legendScrollCleanup();
+				}
+
 				onDeleteRef.current?.(chart);
 				chart.destroy();
 				chartRef.current = null;

frontend/src/constants/queryFunctionOptions.ts

@@ -125,7 +125,7 @@ export const queryFunctionsTypesConfig: QueryFunctionConfigType = {
 	log10: {
 		showInput: false,
 	},
-	cumSum: {
+	cumulativeSum: {
 		showInput: false,
 	},
 	ewma3: {

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/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -157,9 +157,12 @@ function DomainDetails({
 				<div className="domain-details-drawer-header">
 					<div className="domain-details-drawer-header-title">
 						<Divider type="vertical" />
-						<Typography.Text className="title">
-							{domainData.domainName}
-						</Typography.Text>
+
+						{domainData?.domainName && (
+							<Typography.Text className="title">
+								{domainData.domainName}
+							</Typography.Text>
+						)}
 					</div>
 					<div className="domain-details-drawer-header-right-container">
 						<DateTimeSelectionV2

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -2,36 +2,29 @@ import '../Explorer.styles.scss';
 
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table, Typography } from 'antd';
-import axios from 'api';
 import logEvent from 'api/common/logEvent';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import cx from 'classnames';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
+import { get } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
-import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
-import {
-	columnsConfig,
-	formatDataForTable,
-	hardcodedAttributeKeys,
-} from '../../utils';
+import { columnsConfig, formatDataForTable } from '../../utils';
 import DomainDetails from './DomainDetails/DomainDetails';
 
 function DomainList(): JSX.Element {
@@ -53,6 +46,21 @@ function DomainList(): JSX.Element {
 		entityVersion: '',
 	});
 
+	const compositeData = useGetCompositeQueryParam();
+
+	const { data, isLoading, isFetching } = useListOverview({
+		start: minTime,
+		end: maxTime,
+		show_ip: Boolean(showIP),
+		filter: {
+			expression: `kind_string = 'Client' ${get(
+				compositeData,
+				'builder.queryData[0].filter.expression',
+				'',
+			)}`,
+		},
+	});
+
 	// initialise tab with default query.
 	useShareBuilderUrl({
 		defaultValue: {
@@ -74,63 +82,21 @@ function DomainList(): JSX.Element {
 		},
 	});
 
-	const compositeData = useGetCompositeQueryParam();
-
-	const handleChangeTagFilters = useCallback(
-		(value: IBuilderQuery['filters']) => {
-			handleChangeQueryData('filters', value);
+	const handleSearchChange = useCallback(
+		(value: string) => {
+			(handleChangeQueryData as HandleChangeQueryDataV5)('filter', {
+				expression: value,
+			});
 		},
 		[handleChangeQueryData],
 	);
 
-	const fetchApiOverview = async (): Promise<
-		SuccessResponse<any> | ErrorResponse
-	> => {
-		const requestBody = {
-			start: minTime,
-			end: maxTime,
-			show_ip: showIP,
-			filters: {
-				op: 'AND',
-				items: [
-					{
-						id: '212678b9',
-						key: {
-							key: 'kind_string',
-							dataType: 'string',
-							type: '',
-						},
-						op: '=',
-						value: 'Client',
-					},
-					...(compositeData?.builder?.queryData[0]?.filters?.items || []),
-				],
-			},
-		};
-
-		try {
-			const response = await axios.post(
-				'/third-party-apis/overview/list',
-				requestBody,
-			);
-			return {
-				statusCode: 200,
-				error: null,
-				message: response.data.status,
-				payload: response.data,
-			};
-		} catch (error) {
-			return ErrorResponseHandler(error as AxiosError);
-		}
-	};
-
-	const { data, isLoading, isFetching } = useQuery(
-		[REACT_QUERY_KEY.GET_DOMAINS_LIST, minTime, maxTime, compositeData, showIP],
-		fetchApiOverview,
-	);
-
 	const formattedDataForTable = useMemo(
-		() => formatDataForTable(data?.payload?.data?.result[0]?.table?.rows),
+		() =>
+			formatDataForTable(
+				data?.data?.data?.data.results[0]?.data || [],
+				data?.data?.data?.data.results[0]?.columns || [],
+			),
 		[data],
 	);
 
@@ -150,13 +116,13 @@ function DomainList(): JSX.Element {
 				showAutoRefresh={false}
 				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
 			/>
-			{/* add bottom border here */}
 			<div className={cx('api-monitoring-list-header')}>
-				<QueryBuilderSearchV2
-					query={query}
-					onChange={handleChangeTagFilters}
-					placeholder="Search filters..."
-					hardcodedAttributeKeys={hardcodedAttributeKeys}
+				<QuerySearch
+					dataSource={DataSource.TRACES}
+					queryData={query}
+					onChange={handleSearchChange}
+					placeholder="Enter your filter query (e.g., deployment.environment = 'otel-demo' AND service.name = 'frontend')"
+					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
 			<Table

frontend/src/container/ApiMonitoring/__tests__/APIMonitoringUtils.test.tsx

@@ -3,10 +3,11 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
-import { SPAN_ATTRIBUTES } from './Explorer/Domains/DomainDetails/constants';
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import {
 	endPointStatusCodeColumns,
 	extractPortAndEndpoint,
+	formatDataForTable,
 	formatTopErrorsDataForTable,
 	getAllEndpointsWidgetData,
 	getCustomFiltersForBarChart,
@@ -24,7 +25,8 @@ import {
 	getTopErrorsCoRelationQueryFilters,
 	getTopErrorsQueryPayload,
 	TopErrorsResponseRow,
-} from './utils';
+} from '../utils';
+import { APIMonitoringColumnsMock } from './mock';
 
 // Mock or define DataTypes since it seems to be missing from imports
 const DataTypes = {
@@ -34,9 +36,9 @@ const DataTypes = {
 };
 
 // Mock the external utils dependencies that are used within our tested functions
-jest.mock('./utils', () => {
+jest.mock('../utils', () => {
 	// Import the actual module to partial mock
-	const originalModule = jest.requireActual('./utils');
+	const originalModule = jest.requireActual('../utils');
 
 	// Return a mocked version
 	return {
@@ -157,6 +159,54 @@ describe('API Monitoring Utils', () => {
 		});
 	});
 
+	// New tests for formatDataForTable
+	describe('formatDataForTable', () => {
+		it('should format rows correctly with valid data', () => {
+			const columns = APIMonitoringColumnsMock;
+			const data = [
+				[
+					'test-domain', // domainName
+					'10', // endpoints
+					'25', // rps
+					'2.5', // error_rate
+					'15000000', // p99 (ns) -> 15 ms
+					'2025-09-17T12:54:17.040Z', // lastseen
+				],
+			];
+
+			const result = formatDataForTable(data as any, columns as any);
+
+			expect(result).toHaveLength(1);
+			expect(result[0].domainName).toBe('test-domain');
+			expect(result[0].endpointCount).toBe('10');
+			expect(result[0].rate).toBe('25');
+			expect(result[0].errorRate).toBe('2.5');
+			expect(result[0].latency).toBe(15);
+			expect(result[0].lastUsed).toBe('2025-09-17T12:54:17.040Z');
+		});
+
+		it('should handle n/a and undefined values', () => {
+			const columns = APIMonitoringColumnsMock;
+			const data = [
+				[
+					'test-domain',
+					'n/a', // endpoints -> 0
+					'n/a', // rps -> '-'
+					'n/a', // error_rate -> 0
+					'n/a', // p99 -> '-'
+					'n/a', // lastseen -> '-'
+				],
+			];
+
+			const result = formatDataForTable(data as any, columns as any);
+
+			expect(result[0].endpointCount).toBe(0);
+			expect(result[0].rate).toBe('-');
+			expect(result[0].errorRate).toBe(0);
+			expect(result[0].latency).toBe('-');
+			expect(result[0].lastUsed).toBe('-');
+		});
+	});
 	describe('getGroupByFiltersFromGroupByValues', () => {
 		it('should convert row data to filters correctly', () => {
 			// Arrange
@@ -1288,7 +1338,7 @@ describe('API Monitoring Utils', () => {
 			// Setup a mock
 			jest
 				.spyOn(
-					jest.requireActual('./utils'),
+					jest.requireActual('../utils'),
 					'getFormattedEndPointStatusCodeChartData',
 				)
 				.mockReturnValue({

frontend/src/container/ApiMonitoring/__tests__/mock.ts

@@ -0,0 +1,65 @@
+import { domainNameKey } from '../constants';
+import { APIMonitoringResponseColumn } from '../types';
+
+export const APIMonitoringColumnsMock: APIMonitoringResponseColumn[] = [
+	{
+		name: domainNameKey,
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'string',
+		queryName: '',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'attribute',
+	},
+	{
+		name: 'endpoints',
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'number',
+		queryName: 'endpoints',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'metric',
+	},
+	{
+		name: 'rps',
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'number',
+		queryName: 'rps',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'metric',
+	},
+	{
+		name: 'error_rate',
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'number',
+		queryName: 'error_rate',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'metric',
+	},
+	{
+		name: 'p99',
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'number',
+		queryName: 'p99',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'metric',
+	},
+	{
+		name: 'lastseen',
+		signal: 'traces',
+		fieldContext: '',
+		fieldDataType: 'number',
+		queryName: 'lastseen',
+		aggregationIndex: 0,
+		meta: {},
+		columnType: 'metric',
+	},
+];

frontend/src/container/ApiMonitoring/constants.ts

@@ -0,0 +1,30 @@
+import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+
+import { SPAN_ATTRIBUTES } from './Explorer/Domains/DomainDetails/constants';
+
+export const ApiMonitoringHardcodedAttributeKeys: QueryKeyDataSuggestionsProps[] = [
+	{
+		label: 'deployment.environment',
+		type: 'resource',
+		name: 'deployment.environment',
+		signal: 'traces',
+		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
+	},
+	{
+		label: 'service.name',
+		type: 'resource',
+		name: 'service.name',
+		signal: 'traces',
+		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
+	},
+	{
+		label: 'rpc.method',
+		type: 'tag',
+		name: 'rpc.method',
+		signal: 'traces',
+		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
+	},
+];
+
+export const domainNameKey = SPAN_ATTRIBUTES.SERVER_NAME;

frontend/src/container/ApiMonitoring/types.ts

@@ -0,0 +1,39 @@
+import { domainNameKey } from './constants';
+
+export interface APIMonitoringResponseRow {
+	data: {
+		endpoints: number | string;
+		error_rate: number | string;
+		lastseen: number | string;
+		[domainNameKey]: string;
+		p99: number | string;
+		rps: number | string;
+	};
+}
+
+export interface APIMonitoringResponseColumn {
+	name: string;
+	signal: string;
+	fieldContext: string;
+	fieldDataType: string;
+	queryName: string;
+	aggregationIndex: number;
+	meta: Record<string, any>;
+	columnType: string;
+}
+
+export interface EndPointsResponseRow {
+	data: {
+		[key: string]: string | number | undefined;
+	};
+}
+
+export interface APIDomainsRowData {
+	key: string;
+	domainName: string;
+	endpointCount: number | string;
+	rate: number | string;
+	errorRate: number | string;
+	latency: number | string;
+	lastUsed: string;
+}

frontend/src/container/ApiMonitoring/utils.tsx

@@ -32,7 +32,13 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
+import { domainNameKey } from './constants';
 import { SPAN_ATTRIBUTES } from './Explorer/Domains/DomainDetails/constants';
+import {
+	APIDomainsRowData,
+	APIMonitoringResponseColumn,
+	EndPointsResponseRow,
+} from './types';
 
 export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
@@ -243,84 +249,47 @@ export const columnsConfig: ColumnType<APIDomainsRowData>[] = [
 	},
 ];
 
-// Rename this to a proper name
-export const hardcodedAttributeKeys: BaseAutocompleteData[] = [
-	{
-		key: 'deployment.environment',
-		dataType: DataTypes.String,
-		type: 'resource',
-	},
-	{
-		key: 'service.name',
-		dataType: DataTypes.String,
-		type: 'resource',
-	},
-	{
-		key: 'rpc.method',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-];
-
-const domainNameKey = SPAN_ATTRIBUTES.SERVER_NAME;
-
-interface APIMonitoringResponseRow {
-	data: {
-		endpoints: number | string;
-		error_rate: number | string;
-		lastseen: number | string;
-		[domainNameKey]: string;
-		p99: number | string;
-		rps: number | string;
-	};
-}
-
-interface EndPointsResponseRow {
-	data: {
-		[key: string]: string | number | undefined;
-	};
-}
-
-export interface APIDomainsRowData {
-	key: string;
-	domainName: string;
-	endpointCount: number | string;
-	rate: number | string;
-	errorRate: number | string;
-	latency: number | string;
-	lastUsed: string;
-}
-
-// Rename this to a proper name
 export const formatDataForTable = (
-	data: APIMonitoringResponseRow[],
-): APIDomainsRowData[] =>
-	data?.map((domain) => ({
-		key: v4(),
-		domainName: domain?.data[domainNameKey] || '-',
-		endpointCount:
-			domain?.data?.endpoints === 'n/a' || domain?.data?.endpoints === undefined
-				? 0
-				: domain?.data?.endpoints,
-		rate:
-			domain?.data?.rps === 'n/a' || domain?.data?.rps === undefined
-				? '-'
-				: domain?.data?.rps,
-		errorRate:
-			domain?.data?.error_rate === 'n/a' || domain?.data?.error_rate === undefined
-				? 0
-				: domain?.data?.error_rate,
-		latency:
-			domain?.data?.p99 === 'n/a' || domain?.data?.p99 === undefined
-				? '-'
-				: Math.round(Number(domain?.data?.p99) / 1000000), // Convert from nanoseconds to milliseconds
-		lastUsed:
-			domain?.data?.lastseen === 'n/a' || domain?.data?.lastseen === undefined
-				? '-'
-				: new Date(
-						Math.floor(Number(domain?.data?.lastseen) / 1000000),
-				  ).toISOString(), // Convert from nanoseconds to milliseconds
-	}));
+	data: string[][],
+	columns: APIMonitoringResponseColumn[],
+): APIDomainsRowData[] => {
+	const indexMap = columns.reduce((acc, column, index) => {
+		if (column.name === domainNameKey) {
+			acc[column.name] = index;
+		} else {
+			acc[column.queryName] = index;
+		}
+		return acc;
+	}, {} as Record<string, number>);
+
+	return data.map((row) => {
+		const rowData: APIDomainsRowData = {
+			key: v4(),
+			domainName: row[indexMap[domainNameKey]],
+			endpointCount:
+				row[indexMap.endpoints] === 'n/a' || row[indexMap.endpoints] === undefined
+					? 0
+					: row[indexMap.endpoints],
+			rate:
+				row[indexMap.rps] === 'n/a' || row[indexMap.rps] === undefined
+					? '-'
+					: row[indexMap.rps],
+			errorRate:
+				row[indexMap.error_rate] === 'n/a' || row[indexMap.error_rate] === undefined
+					? 0
+					: row[indexMap.error_rate],
+			latency:
+				row[indexMap.p99] === 'n/a' || row[indexMap.p99] === undefined
+					? '-'
+					: Math.round(Number(row[indexMap.p99]) / 1000000),
+			lastUsed:
+				row[indexMap.lastseen] === 'n/a' || row[indexMap.lastseen] === undefined
+					? '-'
+					: new Date(row[indexMap.lastseen]).toISOString(),
+		};
+		return rowData;
+	});
+};
 
 export const getDomainMetricsQueryPayload = (
 	domainName: string,

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/AlertCondition/AlertCondition.tsx

@@ -6,13 +6,16 @@ import { Activity, ChartLine } from 'lucide-react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { useCreateAlertState } from '../context';
+import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
 import Stepper from '../Stepper';
+import { showCondensedLayout } from '../utils';
 import AlertThreshold from './AlertThreshold';
 import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
+	const showCondensedLayoutFlag = showCondensedLayout();
 
 	const showMultipleTabs =
 		alertType === AlertTypes.ANOMALY_BASED_ALERT ||
@@ -75,6 +78,11 @@ function AlertCondition(): JSX.Element {
 			</div>
 			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && <AlertThreshold />}
 			{alertType === AlertTypes.ANOMALY_BASED_ALERT && <AnomalyThreshold />}
+			{showCondensedLayoutFlag ? (
+				<div className="condensed-advanced-options-container">
+					<AdvancedOptions />
+				</div>
+			) : null}
 		</div>
 	);
 }

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -2,6 +2,7 @@ import './styles.scss';
 
 import { Button, Select, Typography } from 'antd';
 import getAllChannels from 'api/channels/getAll';
+import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Plus } from 'lucide-react';
 import { useQuery } from 'react-query';
@@ -17,6 +18,8 @@ import {
 	THRESHOLD_MATCH_TYPE_OPTIONS,
 	THRESHOLD_OPERATOR_OPTIONS,
 } from '../context/constants';
+import EvaluationSettings from '../EvaluationSettings/EvaluationSettings';
+import { showCondensedLayout } from '../utils';
 import ThresholdItem from './ThresholdItem';
 import { UpdateThreshold } from './types';
 import {
@@ -37,6 +40,7 @@ function AlertThreshold(): JSX.Element {
 	>(['getChannels'], {
 		queryFn: () => getAllChannels(),
 	});
+	const showCondensedLayoutFlag = showCondensedLayout();
 	const channels = data?.data || [];
 
 	const { currentQuery } = useQueryBuilder();
@@ -81,8 +85,18 @@ function AlertThreshold(): JSX.Element {
 		});
 	};
 
+	const evaluationWindowContext = showCondensedLayoutFlag ? (
+		<EvaluationSettings />
+	) : (
+		<strong>Evaluation Window.</strong>
+	);
+
 	return (
-		<div className="alert-threshold-container">
+		<div
+			className={classNames('alert-threshold-container', {
+				'condensed-alert-threshold-container': showCondensedLayoutFlag,
+			})}
+		>
 			{/* Main condition sentence */}
 			<div className="alert-condition-sentences">
 				<div className="alert-condition-sentence">
@@ -128,7 +142,7 @@ function AlertThreshold(): JSX.Element {
 						options={THRESHOLD_MATCH_TYPE_OPTIONS}
 					/>
 					<Typography.Text className="sentence-text">
-						during the <strong>Evaluation Window.</strong>
+						during the {evaluationWindowContext}
 					</Typography.Text>
 				</div>
 			</div>

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

@@ -84,6 +84,9 @@
 				color: var(--text-vanilla-400);
 				font-size: 14px;
 				line-height: 1.5;
+				display: flex;
+				align-items: center;
+				gap: 8px;
 			}
 
 			.ant-select {
@@ -275,3 +278,43 @@
 		}
 	}
 }
+
+.condensed-alert-threshold-container,
+.condensed-anomaly-threshold-container {
+	width: 100%;
+}
+
+.condensed-advanced-options-container {
+	margin-top: 16px;
+	width: fit-parent;
+}
+
+.condensed-evaluation-settings-container {
+	.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);
+
+		.evaluate-alert-conditions-button-left {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+		}
+
+		.evaluate-alert-conditions-button-right {
+			display: flex;
+			align-items: center;
+			color: var(--bg-vanilla-400);
+			gap: 8px;
+
+			.evaluate-alert-conditions-button-right-text {
+				font-size: 12px;
+				font-weight: 500;
+				background-color: var(--bg-slate-400);
+				padding: 1px 4px;
+			}
+		}
+	}
+}

frontend/src/container/CreateAlertV2/CreateAlertV2.tsx

@@ -7,7 +7,10 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import AlertCondition from './AlertCondition';
 import { CreateAlertProvider } from './context';
 import CreateAlertHeader from './CreateAlertHeader';
+import EvaluationSettings from './EvaluationSettings';
+import NotificationSettings from './NotificationSettings';
 import QuerySection from './QuerySection';
+import { showCondensedLayout } from './utils';
 
 function CreateAlertV2({
 	initialQuery = initialQueriesMap.metrics,
@@ -16,14 +19,18 @@ function CreateAlertV2({
 }): JSX.Element {
 	useShareBuilderUrl({ defaultValue: initialQuery });
 
+	const showCondensedLayoutFlag = showCondensedLayout();
+
 	return (
-		<div className="create-alert-v2-container">
-			<CreateAlertProvider>
+		<CreateAlertProvider>
+			<div className="create-alert-v2-container">
 				<CreateAlertHeader />
 				<QuerySection />
 				<AlertCondition />
-			</CreateAlertProvider>
-		</div>
+				{!showCondensedLayoutFlag ? <EvaluationSettings /> : null}
+				<NotificationSettings />
+			</div>
+		</CreateAlertProvider>
 	);
 }
 

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/AdvancedOptions.tsx

@@ -0,0 +1,129 @@
+import { Collapse, Input, Select, Typography } from 'antd';
+import { Y_AXIS_CATEGORIES } from 'components/YAxisUnitSelector/constants';
+
+import { useCreateAlertState } from '../context';
+import AdvancedOptionItem from './AdvancedOptionItem';
+import EvaluationCadence from './EvaluationCadence';
+
+function AdvancedOptions(): JSX.Element {
+	const { advancedOptions, setAdvancedOptions } = useCreateAlertState();
+
+	const timeOptions = Y_AXIS_CATEGORIES.find(
+		(category) => category.name === 'Time',
+	)?.units.map((unit) => ({ label: unit.name, value: unit.id }));
+
+	return (
+		<div className="advanced-options-container">
+			<Collapse bordered={false}>
+				<Collapse.Panel header="ADVANCED OPTIONS" key="1">
+					<EvaluationCadence />
+					<AdvancedOptionItem
+						title="Alert when data stops coming"
+						description="Send notification if no data is received for a specified time period."
+						tooltipText="Useful for monitoring data pipelines or services that should continuously send data. For example, alert if no logs are received for 10 minutes"
+						input={
+							<div className="advanced-option-item-input-group">
+								<Input
+									placeholder="Enter tolerance limit..."
+									type="number"
+									style={{ width: 100 }}
+									onChange={(e): void =>
+										setAdvancedOptions({
+											type: 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING',
+											payload: {
+												toleranceLimit: Number(e.target.value),
+												timeUnit: advancedOptions.sendNotificationIfDataIsMissing.timeUnit,
+											},
+										})
+									}
+									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
+								/>
+								<Select
+									style={{ width: 120 }}
+									options={timeOptions}
+									placeholder="Select time unit"
+									onChange={(value): void =>
+										setAdvancedOptions({
+											type: 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING',
+											payload: {
+												toleranceLimit:
+													advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit,
+												timeUnit: value as string,
+											},
+										})
+									}
+									value={advancedOptions.sendNotificationIfDataIsMissing.timeUnit}
+								/>
+							</div>
+						}
+					/>
+					<AdvancedOptionItem
+						title="Minimum data required"
+						description="Only trigger alert when there are enough data points to make a reliable decision."
+						tooltipText="Prevents false alarms when there's insufficient data. For example, require at least 5 data points before checking if CPU usage is above 80%."
+						input={
+							<div className="advanced-option-item-input-group">
+								<Input
+									placeholder="Enter minimum datapoints..."
+									style={{ width: 100 }}
+									type="number"
+									onChange={(e): void =>
+										setAdvancedOptions({
+											type: 'SET_ENFORCE_MINIMUM_DATAPOINTS',
+											payload: {
+												minimumDatapoints: Number(e.target.value),
+											},
+										})
+									}
+									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
+								/>
+								<Typography.Text>Datapoints</Typography.Text>
+							</div>
+						}
+					/>
+					<AdvancedOptionItem
+						title="Account for data delay"
+						description="Shift the evaluation window backwards to account for data processing delays."
+						tooltipText="Use when your data takes time to arrive on the platform. For example, if logs typically arrive 5 minutes late, set a 5-minute delay so the alert checks the correct time window."
+						input={
+							<div className="advanced-option-item-input-group">
+								<Input
+									placeholder="Enter delay..."
+									style={{ width: 100 }}
+									type="number"
+									onChange={(e): void =>
+										setAdvancedOptions({
+											type: 'SET_DELAY_EVALUATION',
+											payload: {
+												delay: Number(e.target.value),
+												timeUnit: advancedOptions.delayEvaluation.timeUnit,
+											},
+										})
+									}
+									value={advancedOptions.delayEvaluation.delay}
+								/>
+								<Select
+									style={{ width: 120 }}
+									options={timeOptions}
+									placeholder="Select time unit"
+									onChange={(value): void =>
+										setAdvancedOptions({
+											type: 'SET_DELAY_EVALUATION',
+											payload: {
+												delay: advancedOptions.delayEvaluation.delay,
+												timeUnit: value as string,
+											},
+										})
+									}
+									value={advancedOptions.delayEvaluation.timeUnit}
+								/>
+							</div>
+						}
+					/>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default AdvancedOptions;

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/EvaluationSettings.tsx

@@ -0,0 +1,91 @@
+import './styles.scss';
+
+import { Button, Popover, Typography } from 'antd';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useState } from 'react';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import { useCreateAlertState } from '../context';
+import Stepper from '../Stepper';
+import { showCondensedLayout } from '../utils';
+import AdvancedOptions from './AdvancedOptions';
+import EvaluationWindowPopover from './EvaluationWindowPopover';
+import { getEvaluationWindowTypeText, getTimeframeText } from './utils';
+
+function EvaluationSettings(): JSX.Element {
+	const {
+		alertType,
+		evaluationWindow,
+		setEvaluationWindow,
+	} = useCreateAlertState();
+	const [
+		isEvaluationWindowPopoverOpen,
+		setIsEvaluationWindowPopoverOpen,
+	] = useState(false);
+	const showCondensedLayoutFlag = showCondensedLayout();
+
+	const popoverContent = (
+		<Popover
+			open={isEvaluationWindowPopoverOpen}
+			onOpenChange={(visibility: boolean): void => {
+				setIsEvaluationWindowPopoverOpen(visibility);
+			}}
+			content={
+				<EvaluationWindowPopover
+					evaluationWindow={evaluationWindow}
+					setEvaluationWindow={setEvaluationWindow}
+				/>
+			}
+			trigger="click"
+			showArrow={false}
+		>
+			<Button>
+				<div className="evaluate-alert-conditions-button-left">
+					{getTimeframeText(evaluationWindow)}
+				</div>
+				<div className="evaluate-alert-conditions-button-right">
+					<div className="evaluate-alert-conditions-button-right-text">
+						{getEvaluationWindowTypeText(evaluationWindow.windowType)}
+					</div>
+					{isEvaluationWindowPopoverOpen ? (
+						<ChevronUp size={16} />
+					) : (
+						<ChevronDown size={16} />
+					)}
+				</div>
+			</Button>
+		</Popover>
+	);
+
+	// Layout consists of only the evaluation window popover
+	if (showCondensedLayoutFlag) {
+		return (
+			<div
+				className="condensed-evaluation-settings-container"
+				data-testid="condensed-evaluation-settings-container"
+			>
+				{popoverContent}
+			</div>
+		);
+	}
+
+	// Layout consists of
+	// - Stepper header
+	// - Evaluation window popover
+	// - Advanced options
+	return (
+		<div className="evaluation-settings-container">
+			<Stepper stepNumber={3} label="Evaluation settings" />
+			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && (
+				<div className="evaluate-alert-conditions-container">
+					<Typography.Text>Check conditions using data from</Typography.Text>
+					<div className="evaluate-alert-conditions-separator" />
+					{popoverContent}
+				</div>
+			)}
+			<AdvancedOptions />
+		</div>
+	);
+}
+
+export default EvaluationSettings;

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

@@ -0,0 +1,221 @@
+import { Input, Select, Typography } from 'antd';
+import { useMemo } from 'react';
+
+import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
+import {
+	CUMULATIVE_WINDOW_DESCRIPTION,
+	ROLLING_WINDOW_DESCRIPTION,
+	TIMEZONE_DATA,
+} from '../constants';
+import TimeInput from '../TimeInput';
+import { IEvaluationWindowDetailsProps } from '../types';
+import { getCumulativeWindowTimeframeText } 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;
+	}, []);
+
+	const displayText = useMemo(() => {
+		if (
+			evaluationWindow.windowType === 'rolling' &&
+			evaluationWindow.timeframe === 'custom'
+		) {
+			return `Last ${evaluationWindow.startingAt.number} ${
+				ADVANCED_OPTIONS_TIME_UNIT_OPTIONS.find(
+					(option) => option.value === evaluationWindow.startingAt.unit,
+				)?.label
+			}`;
+		}
+		if (evaluationWindow.windowType === 'cumulative') {
+			return getCumulativeWindowTimeframeText(evaluationWindow);
+		}
+		return '';
+	}, [evaluationWindow]);
+
+	if (
+		evaluationWindow.windowType === 'rolling' &&
+		evaluationWindow.timeframe !== 'custom'
+	) {
+		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,
+				unit: evaluationWindow.startingAt.unit,
+			},
+		});
+	};
+
+	const handleTimeChange = (value: string): void => {
+		setEvaluationWindow({
+			type: 'SET_STARTING_AT',
+			payload: {
+				number: evaluationWindow.startingAt.number,
+				time: value,
+				timezone: evaluationWindow.startingAt.timezone,
+				unit: evaluationWindow.startingAt.unit,
+			},
+		});
+	};
+
+	const handleUnitChange = (value: string): void => {
+		setEvaluationWindow({
+			type: 'SET_STARTING_AT',
+			payload: {
+				number: evaluationWindow.startingAt.number,
+				time: evaluationWindow.startingAt.time,
+				timezone: evaluationWindow.startingAt.timezone,
+				unit: value,
+			},
+		});
+	};
+
+	const handleTimezoneChange = (value: string): void => {
+		setEvaluationWindow({
+			type: 'SET_STARTING_AT',
+			payload: {
+				number: evaluationWindow.startingAt.number,
+				time: evaluationWindow.startingAt.time,
+				timezone: value,
+				unit: evaluationWindow.startingAt.unit,
+			},
+		});
+	};
+
+	if (isCurrentHour) {
+		return (
+			<div className="evaluation-window-details">
+				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>{displayText}</Typography.Text>
+				<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">
+				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>{displayText}</Typography.Text>
+				<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">
+				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>{displayText}</Typography.Text>
+				<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 className="evaluation-window-details">
+			<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
+			<Typography.Text>Specify custom duration</Typography.Text>
+			<Typography.Text>{displayText}</Typography.Text>
+			<div className="select-group">
+				<Typography.Text>VALUE</Typography.Text>
+				<Input
+					name="value"
+					type="number"
+					value={evaluationWindow.startingAt.number}
+					onChange={(e): void => handleNumberChange(e.target.value)}
+					placeholder="Enter value"
+				/>
+			</div>
+			<div className="select-group time-select-group">
+				<Typography.Text>UNIT</Typography.Text>
+				<Select
+					options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+					value={evaluationWindow.startingAt.unit || null}
+					onChange={handleUnitChange}
+					placeholder="Select unit"
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default EvaluationWindowDetails;

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

@@ -0,0 +1,161 @@
+import { Button, Typography } from 'antd';
+import classNames from 'classnames';
+import { Check } from 'lucide-react';
+
+import {
+	CUMULATIVE_WINDOW_DESCRIPTION,
+	EVALUATION_WINDOW_TIMEFRAME,
+	EVALUATION_WINDOW_TYPE,
+	ROLLING_WINDOW_DESCRIPTION,
+} from '../constants';
+import {
+	CumulativeWindowTimeframes,
+	IEvaluationWindowPopoverProps,
+	RollingWindowTimeframes,
+} from '../types';
+import EvaluationWindowDetails from './EvaluationWindowDetails';
+import { useKeyboardNavigationForEvaluationWindowPopover } from './useKeyboardNavigation';
+
+function EvaluationWindowPopover({
+	evaluationWindow,
+	setEvaluationWindow,
+}: IEvaluationWindowPopoverProps): JSX.Element {
+	const {
+		containerRef,
+		firstItemRef,
+	} = useKeyboardNavigationForEvaluationWindowPopover({
+		onSelect: (value: string, sectionId: string): void => {
+			if (sectionId === 'window-type') {
+				setEvaluationWindow({
+					type: 'SET_WINDOW_TYPE',
+					payload: value as 'rolling' | 'cumulative',
+				});
+			} else if (sectionId === 'timeframe') {
+				setEvaluationWindow({
+					type: 'SET_TIMEFRAME',
+					payload: value as RollingWindowTimeframes | CumulativeWindowTimeframes,
+				});
+			}
+		},
+		onEscape: (): void => {
+			const triggerElement = document.querySelector(
+				'[aria-haspopup="true"]',
+			) as HTMLElement;
+			triggerElement?.focus();
+		},
+	});
+
+	const renderEvaluationWindowContent = (
+		label: string,
+		contentOptions: Array<{ label: string; value: string }>,
+		currentValue: string,
+		onChange: (value: string) => void,
+		sectionId: string,
+	): JSX.Element => (
+		<div className="evaluation-window-content-item" data-section-id={sectionId}>
+			<Typography.Text className="evaluation-window-content-item-label">
+				{label}
+			</Typography.Text>
+			<div className="evaluation-window-content-list">
+				{contentOptions.map((option, index) => (
+					<div
+						className={classNames('evaluation-window-content-list-item', {
+							active: currentValue === option.value,
+						})}
+						key={option.value}
+						role="button"
+						tabIndex={0}
+						data-value={option.value}
+						data-section-id={sectionId}
+						onClick={(): void => onChange(option.value)}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								onChange(option.value);
+							}
+						}}
+						ref={index === 0 ? firstItemRef : undefined}
+					>
+						<Typography.Text>{option.label}</Typography.Text>
+						{currentValue === option.value && <Check size={12} />}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+
+	const renderSelectionContent = (): JSX.Element => {
+		if (evaluationWindow.windowType === 'rolling') {
+			if (evaluationWindow.timeframe === 'custom') {
+				return (
+					<EvaluationWindowDetails
+						evaluationWindow={evaluationWindow}
+						setEvaluationWindow={setEvaluationWindow}
+					/>
+				);
+			}
+			return (
+				<div className="selection-content">
+					<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
+					<Button type="link">Read the docs</Button>
+				</div>
+			);
+		}
+
+		if (
+			evaluationWindow.windowType === 'cumulative' &&
+			!evaluationWindow.timeframe
+		) {
+			return (
+				<div className="selection-content">
+					<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+					<Button type="link">Read the docs</Button>
+				</div>
+			);
+		}
+
+		return (
+			<EvaluationWindowDetails
+				evaluationWindow={evaluationWindow}
+				setEvaluationWindow={setEvaluationWindow}
+			/>
+		);
+	};
+
+	return (
+		<div
+			className="evaluation-window-popover"
+			ref={containerRef}
+			role="menu"
+			aria-label="Evaluation window options"
+		>
+			<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',
+						}),
+					'window-type',
+				)}
+				{renderEvaluationWindowContent(
+					'TIMEFRAME',
+					EVALUATION_WINDOW_TIMEFRAME[evaluationWindow.windowType],
+					evaluationWindow.timeframe,
+					(value: string): void =>
+						setEvaluationWindow({
+							type: 'SET_TIMEFRAME',
+							payload: value as RollingWindowTimeframes | CumulativeWindowTimeframes,
+						}),
+					'timeframe',
+				)}
+				{renderSelectionContent()}
+			</div>
+		</div>
+	);
+}
+
+export default EvaluationWindowPopover;

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

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

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/useKeyboardNavigation.ts

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+interface UseKeyboardNavigationOptions {
+	onSelect?: (value: string, sectionId: string) => void;
+	onEscape?: () => void;
+}
+
+export const useKeyboardNavigationForEvaluationWindowPopover = ({
+	onSelect,
+	onEscape,
+}: UseKeyboardNavigationOptions = {}): {
+	containerRef: React.RefObject<HTMLDivElement>;
+	firstItemRef: React.RefObject<HTMLDivElement>;
+} => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const firstItemRef = useRef<HTMLDivElement>(null);
+
+	const getFocusableItems = useCallback((): HTMLElement[] => {
+		if (!containerRef.current) return [];
+
+		return Array.from(
+			containerRef.current.querySelectorAll(
+				'.evaluation-window-content-list-item[tabindex="0"]',
+			),
+		) as HTMLElement[];
+	}, []);
+
+	const getInteractiveElements = useCallback((): HTMLElement[] => {
+		if (!containerRef.current) return [];
+
+		const detailsSection = containerRef.current.querySelector(
+			'.evaluation-window-details',
+		);
+		if (!detailsSection) return [];
+
+		return Array.from(
+			detailsSection.querySelectorAll(
+				'input, select, button, [tabindex="0"], [tabindex="-1"]',
+			),
+		) as HTMLElement[];
+	}, []);
+
+	const getCurrentIndex = useCallback((items: HTMLElement[]): number => {
+		const activeElement = document.activeElement as HTMLElement;
+		return items.findIndex((item) => item === activeElement);
+	}, []);
+
+	const navigateWithinSection = useCallback(
+		(direction: 'up' | 'down'): void => {
+			const items = getFocusableItems();
+			if (items.length === 0) return;
+
+			const currentIndex = getCurrentIndex(items);
+			let nextIndex: number;
+			if (direction === 'down') {
+				nextIndex = (currentIndex + 1) % items.length;
+			} else {
+				nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+			}
+
+			items[nextIndex]?.focus();
+		},
+		[getFocusableItems, getCurrentIndex],
+	);
+
+	const navigateToDetails = useCallback((): void => {
+		const interactiveElements = getInteractiveElements();
+		interactiveElements[0]?.focus();
+	}, [getInteractiveElements]);
+
+	const navigateBackToSection = useCallback((): void => {
+		const items = getFocusableItems();
+		items[0]?.focus();
+	}, [getFocusableItems]);
+
+	const navigateBetweenSections = useCallback(
+		(direction: 'left' | 'right'): void => {
+			const activeElement = document.activeElement as HTMLElement;
+			const isInDetails = activeElement?.closest('.evaluation-window-details');
+
+			if (isInDetails && direction === 'left') {
+				navigateBackToSection();
+				return;
+			}
+
+			const items = getFocusableItems();
+			if (items.length === 0) return;
+
+			const currentIndex = getCurrentIndex(items);
+			const DATA_ATTR = 'data-section-id';
+			const currentSectionId = items[currentIndex]?.getAttribute(DATA_ATTR);
+
+			if (currentSectionId === 'window-type' && direction === 'right') {
+				const timeframeItem = items.find(
+					(item) => item.getAttribute(DATA_ATTR) === 'timeframe',
+				);
+				timeframeItem?.focus();
+			} else if (currentSectionId === 'timeframe' && direction === 'left') {
+				const windowTypeItem = items.find(
+					(item) => item.getAttribute(DATA_ATTR) === 'window-type',
+				);
+				windowTypeItem?.focus();
+			} else if (currentSectionId === 'timeframe' && direction === 'right') {
+				navigateToDetails();
+			}
+		},
+		[
+			navigateBackToSection,
+			navigateToDetails,
+			getFocusableItems,
+			getCurrentIndex,
+		],
+	);
+
+	const handleSelection = useCallback((): void => {
+		const activeElement = document.activeElement as HTMLElement;
+		if (!activeElement || !onSelect) return;
+
+		const value = activeElement.getAttribute('data-value');
+		const sectionId = activeElement.getAttribute('data-section-id');
+
+		if (value && sectionId) {
+			onSelect(value, sectionId);
+		}
+	}, [onSelect]);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent): void => {
+			switch (event.key) {
+				case 'ArrowDown':
+					event.preventDefault();
+					navigateWithinSection('down');
+					break;
+				case 'ArrowUp':
+					event.preventDefault();
+					navigateWithinSection('up');
+					break;
+				case 'ArrowLeft':
+					event.preventDefault();
+					navigateBetweenSections('left');
+					break;
+				case 'ArrowRight':
+					event.preventDefault();
+					navigateBetweenSections('right');
+					break;
+				case 'Enter':
+				case ' ':
+					event.preventDefault();
+					handleSelection();
+					break;
+				case 'Escape':
+					event.preventDefault();
+					onEscape?.();
+					break;
+				default:
+					break;
+			}
+		},
+		[navigateWithinSection, navigateBetweenSections, handleSelection, onEscape],
+	);
+
+	useEffect((): (() => void) | undefined => {
+		const container = containerRef.current;
+		if (!container) return undefined;
+
+		container.addEventListener('keydown', handleKeyDown);
+		return (): void => container.removeEventListener('keydown', handleKeyDown);
+	}, [handleKeyDown]);
+
+	useEffect((): void => {
+		if (firstItemRef.current) {
+			firstItemRef.current.focus();
+		}
+	}, []);
+
+	return {
+		containerRef: containerRef as React.RefObject<HTMLDivElement>,
+		firstItemRef: firstItemRef as React.RefObject<HTMLDivElement>,
+	};
+};

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

@@ -0,0 +1,88 @@
+.time-input-container {
+	display: flex;
+	align-items: center;
+	gap: 0;
+
+	.time-input-field {
+		width: 40px;
+		height: 32px;
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-400);
+		color: var(--bg-vanilla-100);
+		font-family: 'Space Mono', monospace;
+		font-size: 14px;
+		font-weight: 600;
+		text-align: center;
+		border-radius: 4px;
+
+		&::placeholder {
+			color: var(--bg-vanilla-400);
+			font-family: 'Space Mono', monospace;
+		}
+
+		&: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);
+			outline: none;
+		}
+
+		&:disabled {
+			background-color: var(--bg-ink-300);
+			color: var(--bg-vanilla-400);
+			cursor: not-allowed;
+
+			&:hover {
+				border-color: var(--bg-slate-400);
+			}
+		}
+	}
+
+	.time-input-separator {
+		color: var(--bg-vanilla-400);
+		font-size: 14px;
+		font-weight: 600;
+		margin: 0 4px;
+		user-select: none;
+	}
+}
+
+.lightMode {
+	.time-input-container {
+		.time-input-field {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+
+			&::placeholder {
+				color: var(--bg-ink-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);
+			}
+
+			&:disabled {
+				background-color: var(--bg-vanilla-300);
+				color: var(--bg-ink-300);
+				cursor: not-allowed;
+
+				&:hover {
+					border-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.time-input-separator {
+			color: var(--bg-ink-300);
+		}
+	}
+}

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

@@ -0,0 +1,195 @@
+import './TimeInput.scss';
+
+import { Input } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+export interface TimeInputProps {
+	value?: string; // Format: "HH:MM:SS"
+	onChange?: (value: string) => void;
+	disabled?: boolean;
+	className?: string;
+}
+
+function TimeInput({
+	value = '00:00:00',
+	onChange,
+	disabled = false,
+	className = '',
+}: TimeInputProps): JSX.Element {
+	const [hours, setHours] = useState('00');
+	const [minutes, setMinutes] = useState('00');
+	const [seconds, setSeconds] = useState('00');
+
+	// Parse initial value
+	useEffect(() => {
+		if (value) {
+			const timeParts = value.split(':');
+			if (timeParts.length === 3) {
+				setHours(timeParts[0]);
+				setMinutes(timeParts[1]);
+				setSeconds(timeParts[2]);
+			}
+		}
+	}, [value]);
+
+	const notifyChange = (h: string, m: string, s: string): void => {
+		const rawValue = `${h}:${m}:${s}`;
+		onChange?.(rawValue);
+	};
+
+	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);
+	};
+
+	const handleHoursChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		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);
+		notifyChange(newHours, minutes, seconds);
+	};
+
+	const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		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);
+		notifyChange(hours, newMinutes, seconds);
+	};
+
+	const handleSecondsChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		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);
+		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
+	const getNextField = (current: string): string => {
+		switch (current) {
+			case 'hours':
+				return 'minutes';
+			case 'minutes':
+				return 'seconds';
+			default:
+				return 'hours';
+		}
+	};
+
+	const getPrevField = (current: string): string => {
+		switch (current) {
+			case 'seconds':
+				return 'minutes';
+			case 'minutes':
+				return 'hours';
+			default:
+				return 'seconds';
+		}
+	};
+
+	// Handle key navigation
+	const handleKeyDown = (
+		e: React.KeyboardEvent<HTMLInputElement>,
+		currentField: 'hours' | 'minutes' | 'seconds',
+	): void => {
+		if (e.key === 'ArrowRight' || e.key === 'Tab') {
+			e.preventDefault();
+			const nextField = document.querySelector(
+				`[data-field="${getNextField(currentField)}"]`,
+			) as HTMLInputElement;
+			nextField?.focus();
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			const prevField = document.querySelector(
+				`[data-field="${getPrevField(currentField)}"]`,
+			) as HTMLInputElement;
+			prevField?.focus();
+		}
+	};
+
+	return (
+		<div className={`time-input-container ${className}`}>
+			<Input
+				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>
+	);
+}
+
+TimeInput.defaultProps = {
+	value: '00:00:00',
+	onChange: undefined,
+	disabled: false,
+	className: '',
+};
+
+export default TimeInput;

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

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

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__/AdvancedOptions.test.tsx

@@ -0,0 +1,141 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+
+import AdvancedOptions from '../AdvancedOptions';
+import { createMockAlertContextState } from './testUtils';
+
+const mockSetAdvancedOptions = jest.fn();
+jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setAdvancedOptions: mockSetAdvancedOptions,
+	}),
+);
+
+const ALERT_WHEN_DATA_STOPS_COMING_TEXT = 'Alert when data stops coming';
+const MINIMUM_DATA_REQUIRED_TEXT = 'Minimum data required';
+const ACCOUNT_FOR_DATA_DELAY_TEXT = 'Account for data delay';
+const ADVANCED_OPTION_ITEM_CLASS = '.advanced-option-item';
+const SWITCH_ROLE_SELECTOR = '[role="switch"]';
+
+describe('AdvancedOptions', () => {
+	it('should render evaluation cadence and the advanced options minimized by default', () => {
+		render(<AdvancedOptions />);
+		expect(screen.getByText('ADVANCED OPTIONS')).toBeInTheDocument();
+		expect(screen.queryByText('How often to check')).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(ALERT_WHEN_DATA_STOPS_COMING_TEXT),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(MINIMUM_DATA_REQUIRED_TEXT),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
+		).not.toBeInTheDocument();
+	});
+
+	it('should be able to expand the advanced options', () => {
+		render(<AdvancedOptions />);
+
+		expect(
+			screen.queryByText(ALERT_WHEN_DATA_STOPS_COMING_TEXT),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(MINIMUM_DATA_REQUIRED_TEXT),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
+		).not.toBeInTheDocument();
+
+		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
+		fireEvent.click(collapse);
+
+		expect(screen.getByText('How often to check')).toBeInTheDocument();
+		expect(screen.getByText('Alert when data stops coming')).toBeInTheDocument();
+		expect(screen.getByText('Minimum data required')).toBeInTheDocument();
+		expect(screen.getByText('Account for data delay')).toBeInTheDocument();
+	});
+
+	it('"Alert when data stops coming" works as expected', () => {
+		render(<AdvancedOptions />);
+
+		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
+		fireEvent.click(collapse);
+
+		const alertWhenDataStopsComingContainer = screen
+			.getByText(ALERT_WHEN_DATA_STOPS_COMING_TEXT)
+			.closest(ADVANCED_OPTION_ITEM_CLASS);
+		const alertWhenDataStopsComingSwitch = alertWhenDataStopsComingContainer?.querySelector(
+			SWITCH_ROLE_SELECTOR,
+		) as HTMLElement;
+
+		fireEvent.click(alertWhenDataStopsComingSwitch);
+
+		const toleranceInput = screen.getByPlaceholderText(
+			'Enter tolerance limit...',
+		);
+		fireEvent.change(toleranceInput, { target: { value: '10' } });
+
+		expect(mockSetAdvancedOptions).toHaveBeenCalledWith({
+			type: 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING',
+			payload: {
+				toleranceLimit: 10,
+				timeUnit: 'min',
+			},
+		});
+	});
+
+	it('"Minimum data required" works as expected', () => {
+		render(<AdvancedOptions />);
+
+		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
+		fireEvent.click(collapse);
+
+		const minimumDataRequiredContainer = screen
+			.getByText(MINIMUM_DATA_REQUIRED_TEXT)
+			.closest(ADVANCED_OPTION_ITEM_CLASS);
+		const minimumDataRequiredSwitch = minimumDataRequiredContainer?.querySelector(
+			SWITCH_ROLE_SELECTOR,
+		) as HTMLElement;
+
+		fireEvent.click(minimumDataRequiredSwitch);
+
+		const minimumDataRequiredInput = screen.getByPlaceholderText(
+			'Enter minimum datapoints...',
+		);
+		fireEvent.change(minimumDataRequiredInput, { target: { value: '10' } });
+
+		expect(mockSetAdvancedOptions).toHaveBeenCalledWith({
+			type: 'SET_ENFORCE_MINIMUM_DATAPOINTS',
+			payload: {
+				minimumDatapoints: 10,
+			},
+		});
+	});
+
+	it('"Account for data delay" works as expected', () => {
+		render(<AdvancedOptions />);
+
+		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
+		fireEvent.click(collapse);
+
+		const accountForDataDelayContainer = screen
+			.getByText(ACCOUNT_FOR_DATA_DELAY_TEXT)
+			.closest(ADVANCED_OPTION_ITEM_CLASS);
+		const accountForDataDelaySwitch = accountForDataDelayContainer?.querySelector(
+			SWITCH_ROLE_SELECTOR,
+		) as HTMLElement;
+
+		fireEvent.click(accountForDataDelaySwitch);
+
+		const delayInput = screen.getByPlaceholderText('Enter delay...');
+		fireEvent.change(delayInput, { target: { value: '10' } });
+
+		expect(mockSetAdvancedOptions).toHaveBeenCalledWith({
+			type: 'SET_DELAY_EVALUATION',
+			payload: {
+				delay: 10,
+				timeUnit: 'min',
+			},
+		});
+	});
+});

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__/EvaluationSettings.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import * as alertState from 'container/CreateAlertV2/context';
+import * as utils from 'container/CreateAlertV2/utils';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import EvaluationSettings from '../EvaluationSettings';
+import { createMockAlertContextState } from './testUtils';
+
+const mockSetEvaluationWindow = jest.fn();
+jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setEvaluationWindow: mockSetEvaluationWindow,
+	}),
+);
+
+jest.mock('../AdvancedOptions', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="advanced-options">AdvancedOptions</div>
+	),
+}));
+
+const EVALUATION_SETTINGS_TEXT = 'Evaluation settings';
+const CHECK_CONDITIONS_USING_DATA_FROM_TEXT =
+	'Check conditions using data from';
+
+describe('EvaluationSettings', () => {
+	it('should render the default evaluation settings layout', () => {
+		render(<EvaluationSettings />);
+		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
+		expect(
+			screen.getByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('advanced-options')).toBeInTheDocument();
+	});
+
+	it('should not render evaluation window for anomaly based alert', () => {
+		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
+			createMockAlertContextState({
+				alertType: AlertTypes.ANOMALY_BASED_ALERT,
+			}),
+		);
+		render(<EvaluationSettings />);
+		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
+		expect(
+			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render the condensed evaluation settings layout', () => {
+		jest.spyOn(utils, 'showCondensedLayout').mockReturnValueOnce(true);
+		render(<EvaluationSettings />);
+		// Header, check conditions using data from and advanced options should be hidden
+		expect(screen.queryByText(EVALUATION_SETTINGS_TEXT)).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
+		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('advanced-options')).not.toBeInTheDocument();
+		// Only evaluation window popover should be visible
+		expect(
+			screen.getByTestId('condensed-evaluation-settings-container'),
+		).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,200 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+
+import EvaluationWindowDetails from '../EvaluationWindowPopover/EvaluationWindowDetails';
+import { createMockEvaluationWindowState } from './testUtils';
+
+const mockEvaluationWindowState = createMockEvaluationWindowState();
+const mockSetEvaluationWindow = jest.fn();
+
+describe('EvaluationWindowDetails', () => {
+	it('should render the evaluation window details for rolling mode with custom timeframe', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'rolling',
+					timeframe: 'custom',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '5',
+						unit: UniversalYAxisUnit.MINUTES,
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.getByText(
+				'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.',
+			),
+		).toBeInTheDocument();
+		expect(screen.getByText('Specify custom duration')).toBeInTheDocument();
+		expect(screen.getByText('Last 5 Minutes')).toBeInTheDocument();
+	});
+
+	it('renders the evaluation window details for cumulative mode with current hour', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '1',
+						timezone: 'UTC',
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.getByText('Current hour, starting at minute 1 (UTC)'),
+		).toBeInTheDocument();
+	});
+
+	it('renders the evaluation window details for cumulative mode with current day', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentDay',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						time: '00:00:00',
+						timezone: 'UTC',
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.getByText('Current day, starting from 00:00:00 (UTC)'),
+		).toBeInTheDocument();
+	});
+
+	it('renders the evaluation window details for cumulative mode with current month', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentMonth',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '1',
+						time: '00:00:00',
+						timezone: 'UTC',
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.getByText('Current month, starting from day 1 at 00:00:00 (UTC)'),
+		).toBeInTheDocument();
+	});
+
+	it('should be able to change the value in rolling mode with custom timeframe', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'rolling',
+					timeframe: 'custom',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '5',
+						unit: UniversalYAxisUnit.MINUTES,
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+
+		const valueInput = screen.getByPlaceholderText('Enter value');
+		fireEvent.change(valueInput, { target: { value: '10' } });
+		expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+			type: 'SET_STARTING_AT',
+			payload: { ...mockEvaluationWindowState.startingAt, number: '10' },
+		});
+	});
+
+	it('should be able to change the value in cumulative mode with current hour', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '1',
+						timezone: 'UTC',
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+
+		const selectComponent = screen.getByRole('combobox');
+		fireEvent.mouseDown(selectComponent);
+		const option = screen.getByText('10');
+		fireEvent.click(option);
+		expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+			type: 'SET_STARTING_AT',
+			payload: {
+				...mockEvaluationWindowState.startingAt,
+				number: 10,
+				timezone: 'UTC',
+			},
+		});
+	});
+
+	it('should be able to change the value in cumulative mode with current day', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentDay',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						time: '00:00:00',
+						timezone: 'UTC',
+					},
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+
+		const timeInputs = screen.getAllByDisplayValue('00');
+		const hoursInput = timeInputs[0];
+		fireEvent.change(hoursInput, { target: { value: '10' } });
+		expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+			type: 'SET_STARTING_AT',
+			payload: {
+				...mockEvaluationWindowState.startingAt,
+				time: '10:00:00',
+				timezone: 'UTC',
+			},
+		});
+	});
+
+	it('should be able to change the value in cumulative mode with current month', () => {
+		render(
+			<EvaluationWindowDetails
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentMonth',
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+
+		const comboboxes = screen.getAllByRole('combobox');
+		const daySelectComponent = comboboxes[0];
+		fireEvent.mouseDown(daySelectComponent);
+		const option = screen.getByText('10');
+		fireEvent.click(option);
+		expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+			type: 'SET_STARTING_AT',
+			payload: { ...mockEvaluationWindowState.startingAt, number: 10 },
+		});
+	});
+});

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

@@ -0,0 +1,298 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { EvaluationWindowState } from 'container/CreateAlertV2/context/types';
+
+import {
+	EVALUATION_WINDOW_TIMEFRAME,
+	EVALUATION_WINDOW_TYPE,
+} from '../constants';
+import EvaluationWindowPopover from '../EvaluationWindowPopover';
+import { createMockEvaluationWindowState } from './testUtils';
+
+const mockEvaluationWindow: EvaluationWindowState = createMockEvaluationWindowState();
+const mockSetEvaluationWindow = jest.fn();
+
+const EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS =
+	'.evaluation-window-content-list-item';
+const EVALUATION_WINDOW_DETAILS_TEST_ID = 'evaluation-window-details';
+const ENTER_VALUE_PLACEHOLDER = 'Enter value';
+const EVALUATION_WINDOW_TEXT = 'EVALUATION WINDOW';
+const LAST_5_MINUTES_TEXT = 'Last 5 minutes';
+
+jest.mock('../EvaluationWindowPopover/EvaluationWindowDetails', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid={EVALUATION_WINDOW_DETAILS_TEST_ID}>
+			<input placeholder={ENTER_VALUE_PLACEHOLDER} />
+		</div>
+	),
+}));
+
+describe('EvaluationWindowPopover', () => {
+	it('should render the evaluation window popover with 3 sections', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={mockEvaluationWindow}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(screen.getByText(EVALUATION_WINDOW_TEXT)).toBeInTheDocument();
+	});
+
+	it('should render all window type options with rolling selected', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={mockEvaluationWindow}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		EVALUATION_WINDOW_TYPE.forEach((option) => {
+			expect(screen.getByText(option.label)).toBeInTheDocument();
+		});
+		const rollingItem = screen
+			.getByText('Rolling')
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(rollingItem).toHaveClass('active');
+
+		const cumulativeItem = screen
+			.getByText('Cumulative')
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(cumulativeItem).not.toHaveClass('active');
+	});
+
+	it('should render all window type options with cumulative selected', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		EVALUATION_WINDOW_TYPE.forEach((option) => {
+			expect(screen.getByText(option.label)).toBeInTheDocument();
+		});
+
+		const cumulativeItem = screen
+			.getByText('Cumulative')
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(cumulativeItem).toHaveClass('active');
+		const rollingItem = screen
+			.getByText('Rolling')
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(rollingItem).not.toHaveClass('active');
+	});
+
+	it('should render all timeframe options in rolling mode with last 5 minutes selected by default', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={mockEvaluationWindow}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		EVALUATION_WINDOW_TIMEFRAME.rolling.forEach((option) => {
+			expect(screen.getByText(option.label)).toBeInTheDocument();
+		});
+		const last5MinutesItem = screen
+			.getByText(LAST_5_MINUTES_TEXT)
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(last5MinutesItem).toHaveClass('active');
+	});
+
+	it('should render all timeframe options in cumulative mode with current hour selected by default', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		EVALUATION_WINDOW_TIMEFRAME.cumulative.forEach((option) => {
+			expect(screen.getByText(option.label)).toBeInTheDocument();
+		});
+		const currentHourItem = screen
+			.getByText('Current hour')
+			.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+		expect(currentHourItem).toHaveClass('active');
+	});
+
+	it('renders help text in details section for rolling mode with non-custom timeframe', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={mockEvaluationWindow}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.getByText(
+				'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.',
+			),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByTestId(EVALUATION_WINDOW_DETAILS_TEST_ID),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders EvaluationWindowDetails component in details section for rolling mode with custom timeframe', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={createMockEvaluationWindowState({
+					timeframe: 'custom',
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+
+		expect(
+			screen.queryByText(
+				'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.',
+			),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId(EVALUATION_WINDOW_DETAILS_TEST_ID),
+		).toBeInTheDocument();
+	});
+
+	it('renders EvaluationWindowDetails component in details section for cumulative mode', () => {
+		render(
+			<EvaluationWindowPopover
+				evaluationWindow={createMockEvaluationWindowState({
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+				})}
+				setEvaluationWindow={mockSetEvaluationWindow}
+			/>,
+		);
+		expect(
+			screen.queryByText(
+				'A Cumulative Window has a fixed starting point and expands over time.',
+			),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId(EVALUATION_WINDOW_DETAILS_TEST_ID),
+		).toBeInTheDocument();
+	});
+
+	describe('keyboard navigation', () => {
+		it('should navigate down through window type options', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const rollingItem = screen
+				.getByText('Rolling')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			rollingItem?.focus();
+
+			fireEvent.keyDown(rollingItem, { key: 'ArrowDown' });
+			const cumulativeItem = screen
+				.getByText('Cumulative')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS);
+			expect(cumulativeItem).toHaveFocus();
+		});
+
+		it('should navigate up through window type options', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const cumulativeItem = screen
+				.getByText('Cumulative')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			cumulativeItem?.focus();
+
+			fireEvent.keyDown(cumulativeItem, { key: 'ArrowUp' });
+			const rollingItem = screen
+				.getByText('Rolling')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS);
+			expect(rollingItem).toHaveFocus();
+		});
+
+		it('should navigate right from window type to timeframe', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const rollingItem = screen
+				.getByText('Rolling')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			rollingItem?.focus();
+
+			fireEvent.keyDown(rollingItem, { key: 'ArrowRight' });
+			const timeframeItem = screen
+				.getByText(LAST_5_MINUTES_TEXT)
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS);
+			expect(timeframeItem).toHaveFocus();
+		});
+
+		it('should navigate left from timeframe to window type', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const timeframeItem = screen
+				.getByText(LAST_5_MINUTES_TEXT)
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			timeframeItem?.focus();
+
+			fireEvent.keyDown(timeframeItem, { key: 'ArrowLeft' });
+			const rollingItem = screen
+				.getByText('Rolling')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS);
+			expect(rollingItem).toHaveFocus();
+		});
+
+		it('should select option with Enter key', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const cumulativeItem = screen
+				.getByText('Cumulative')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			cumulativeItem?.focus();
+
+			fireEvent.keyDown(cumulativeItem, { key: 'Enter' });
+			expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+				type: 'SET_WINDOW_TYPE',
+				payload: 'cumulative',
+			});
+		});
+
+		it('should select option with Space key', () => {
+			render(
+				<EvaluationWindowPopover
+					evaluationWindow={mockEvaluationWindow}
+					setEvaluationWindow={mockSetEvaluationWindow}
+				/>,
+			);
+
+			const cumulativeItem = screen
+				.getByText('Cumulative')
+				.closest(EVALUATION_WINDOW_CONTENT_LIST_ITEM_CLASS) as HTMLElement;
+			cumulativeItem?.focus();
+
+			fireEvent.keyDown(cumulativeItem, { key: ' ' });
+			expect(mockSetEvaluationWindow).toHaveBeenCalledWith({
+				type: 'SET_WINDOW_TYPE',
+				payload: 'cumulative',
+			});
+		});
+	});
+});

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

@@ -0,0 +1,241 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TimeInput from '../TimeInput/TimeInput';
+
+describe('TimeInput', () => {
+	const mockOnChange = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should render with default value', () => {
+		render(<TimeInput />);
+
+		expect(screen.getAllByDisplayValue('00')).toHaveLength(3); // hours, minutes, seconds
+	});
+
+	it('should render with provided value', () => {
+		render(<TimeInput value="12:34:56" />);
+
+		expect(screen.getByDisplayValue('12')).toBeInTheDocument(); // hours
+		expect(screen.getByDisplayValue('34')).toBeInTheDocument(); // minutes
+		expect(screen.getByDisplayValue('56')).toBeInTheDocument(); // seconds
+	});
+
+	it('should handle hours changes', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '12' } });
+
+		expect(mockOnChange).toHaveBeenCalledWith('12:00:00');
+	});
+
+	it('should handle minutes changes', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+		fireEvent.change(minutesInput, { target: { value: '30' } });
+
+		expect(mockOnChange).toHaveBeenCalledWith('00:30:00');
+	});
+
+	it('should handle seconds changes', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const secondsInput = screen.getAllByDisplayValue('00')[2];
+		fireEvent.change(secondsInput, { target: { value: '45' } });
+
+		expect(mockOnChange).toHaveBeenCalledWith('00:00:45');
+	});
+
+	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');
+	});
+
+	it('should filter non-numeric characters', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '1a2b3c' } });
+
+		expect(mockOnChange).toHaveBeenCalledWith('12:00:00');
+	});
+
+	it('should limit input to 2 characters', () => {
+		render(<TimeInput onChange={mockOnChange} />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		fireEvent.change(hoursInput, { target: { value: '123456' } });
+
+		expect(hoursInput).toHaveValue('12');
+		expect(mockOnChange).toHaveBeenCalledWith('12:00:00');
+	});
+
+	it('should handle keyboard navigation with ArrowRight', async () => {
+		const user = userEvent.setup();
+		render(<TimeInput />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+
+		await user.click(hoursInput);
+		await user.keyboard('{ArrowRight}');
+
+		expect(minutesInput).toHaveFocus();
+	});
+
+	it('should handle keyboard navigation with ArrowLeft', async () => {
+		const user = userEvent.setup();
+		render(<TimeInput />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+
+		await user.click(minutesInput);
+		await user.keyboard('{ArrowLeft}');
+
+		expect(hoursInput).toHaveFocus();
+	});
+
+	it('should handle Tab navigation', async () => {
+		const user = userEvent.setup();
+		render(<TimeInput />);
+
+		const hoursInput = screen.getAllByDisplayValue('00')[0];
+		const minutesInput = screen.getAllByDisplayValue('00')[1];
+
+		await user.click(hoursInput);
+		await user.keyboard('{Tab}');
+
+		expect(minutesInput).toHaveFocus();
+	});
+
+	it('should disable inputs when disabled prop is true', () => {
+		render(<TimeInput disabled />);
+
+		const inputs = screen.getAllByRole('textbox');
+		inputs.forEach((input) => {
+			expect(input).toBeDisabled();
+		});
+	});
+
+	it('should update internal state when value prop changes', () => {
+		const { rerender } = render(<TimeInput value="01:02:03" />);
+
+		expect(screen.getByDisplayValue('01')).toBeInTheDocument();
+		expect(screen.getByDisplayValue('02')).toBeInTheDocument();
+		expect(screen.getByDisplayValue('03')).toBeInTheDocument();
+
+		rerender(<TimeInput value="04:05:06" />);
+
+		expect(screen.getByDisplayValue('04')).toBeInTheDocument();
+		expect(screen.getByDisplayValue('05')).toBeInTheDocument();
+		expect(screen.getByDisplayValue('06')).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,37 @@
+import {
+	INITIAL_ADVANCED_OPTIONS_STATE,
+	INITIAL_ALERT_STATE,
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_EVALUATION_WINDOW_STATE,
+	INITIAL_NOTIFICATION_SETTINGS_STATE,
+} from 'container/CreateAlertV2/context/constants';
+import {
+	EvaluationWindowState,
+	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(),
+	notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
+	setNotificationSettings: jest.fn(),
+	...overrides,
+});
+
+export const createMockEvaluationWindowState = (
+	overrides?: Partial<EvaluationWindowState>,
+): EvaluationWindowState => ({
+	...INITIAL_EVALUATION_WINDOW_STATE,
+	...overrides,
+});

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

@@ -0,0 +1,656 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable import/first */
+
+// 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';
+jest.mock('dayjs', () => {
+	const originalDayjs = jest.requireActual('dayjs');
+	const mockDayjs = jest.fn((date?: string | Date) => {
+		if (date) {
+			return originalDayjs(date);
+		}
+		return originalDayjs(MOCK_DATE_STRING);
+	});
+	Object.keys(originalDayjs).forEach((key) => {
+		((mockDayjs as unknown) as Record<string, unknown>)[key] = originalDayjs[key];
+	});
+	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([
+		{ 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();
+	});
+
+	describe('getEvaluationWindowTypeText', () => {
+		it('should return correct text for rolling window', () => {
+			expect(getEvaluationWindowTypeText('rolling')).toBe('Rolling');
+		});
+
+		it('should return correct text for cumulative window', () => {
+			expect(getEvaluationWindowTypeText('cumulative')).toBe('Cumulative');
+		});
+
+		it('should default to empty string for unknown type', () => {
+			expect(
+				getEvaluationWindowTypeText('unknown' as 'rolling' | 'cumulative'),
+			).toBe('');
+		});
+	});
+
+	describe('getCumulativeWindowTimeframeText', () => {
+		it('should return correct text for current hour', () => {
+			expect(
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentHour',
+				}),
+			).toBe('Current hour, starting at minute 0 (UTC)');
+		});
+
+		it('should return correct text for current day', () => {
+			expect(
+				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({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentMonth',
+				}),
+			).toBe('Current month, starting from day 0 at 00:00:00 (UTC)');
+		});
+
+		it('should default to empty string for unknown timeframe', () => {
+			expect(
+				getCumulativeWindowTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'unknown',
+				}),
+			).toBe('');
+		});
+	});
+
+	describe('getRollingWindowTimeframeText', () => {
+		it('should return correct text for last 5 minutes', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_5_MINUTES),
+			).toBe('Last 5 minutes');
+		});
+
+		it('should return correct text for last 10 minutes', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_10_MINUTES),
+			).toBe('Last 10 minutes');
+		});
+
+		it('should return correct text for last 15 minutes', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_15_MINUTES),
+			).toBe('Last 15 minutes');
+		});
+
+		it('should return correct text for last 30 minutes', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_30_MINUTES),
+			).toBe('Last 30 minutes');
+		});
+
+		it('should return correct text for last 1 hour', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_1_HOUR),
+			).toBe('Last 1 hour');
+		});
+
+		it('should return correct text for last 2 hours', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_2_HOURS),
+			).toBe('Last 2 hours');
+		});
+
+		it('should return correct text for last 4 hours', () => {
+			expect(
+				getRollingWindowTimeframeText(RollingWindowTimeframes.LAST_4_HOURS),
+			).toBe('Last 4 hours');
+		});
+
+		it('should default to Last 5 minutes for unknown timeframe', () => {
+			expect(
+				getRollingWindowTimeframeText('unknown' as RollingWindowTimeframes),
+			).toBe('');
+		});
+	});
+
+	describe('getCustomRollingWindowTimeframeText', () => {
+		it('should return correct text for custom rolling window', () => {
+			expect(getCustomRollingWindowTimeframeText(mockEvaluationWindowState)).toBe(
+				'Last 0 Minutes',
+			);
+		});
+	});
+
+	describe('getTimeframeText', () => {
+		it('should call getCustomRollingWindowTimeframeText for custom rolling window', () => {
+			expect(
+				getTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'rolling',
+					timeframe: 'custom',
+					startingAt: {
+						...mockEvaluationWindowState.startingAt,
+						number: '4',
+					},
+				}),
+			).toBe('Last 4 Minutes');
+		});
+
+		it('should call getRollingWindowTimeframeText for rolling window', () => {
+			expect(getTimeframeText(mockEvaluationWindowState)).toBe('Last 5 minutes');
+		});
+
+		it('should call getCumulativeWindowTimeframeText for cumulative window', () => {
+			expect(
+				getTimeframeText({
+					...mockEvaluationWindowState,
+					windowType: 'cumulative',
+					timeframe: 'currentDay',
+				}),
+			).toBe('Current day, starting from 00:00:00 (UTC)');
+		});
+	});
+
+	describe('buildAlertScheduleFromRRule', () => {
+		const mockRRule = {
+			all: jest.fn((callback) => {
+				const dates = [
+					new Date(MOCK_DATE_STRING),
+					new Date('2024-01-16T10:30:00Z'),
+					new Date('2024-01-17T10:30:00Z'),
+				];
+				dates.forEach((date, index) => callback(date, index));
+			}),
+		};
+
+		beforeEach(() => {
+			(rrulestr as jest.Mock).mockReturnValue(mockRRule);
+		});
+
+		it('should return null for empty rrule string', () => {
+			const result = buildAlertScheduleFromRRule('', null, '10:30:00');
+			expect(result).toBeNull();
+		});
+
+		it('should build schedule from valid rrule string', () => {
+			const result = buildAlertScheduleFromRRule(
+				FREQ_DAILY,
+				null,
+				TEN_THIRTY_TIME,
+			);
+
+			expect(rrulestr).toHaveBeenCalledWith(FREQ_DAILY);
+			expect(result).toEqual([
+				new Date(MOCK_DATE_STRING),
+				new Date('2024-01-16T10:30:00Z'),
+				new Date('2024-01-17T10:30:00Z'),
+			]);
+		});
+
+		it('should handle rrule with DTSTART', () => {
+			const date = dayjs('2024-01-20');
+			buildAlertScheduleFromRRule(FREQ_DAILY, date, NINE_AM_TIME);
+
+			// When date is provided, DTSTART is automatically added to the rrule string
+			expect(rrulestr).toHaveBeenCalledWith(
+				expect.stringMatching(/DTSTART:20240120T\d{6}Z/),
+			);
+		});
+
+		it('should handle rrule without DTSTART', () => {
+			// Test with no date provided - should use original rrule string
+			const result = buildAlertScheduleFromRRule(FREQ_DAILY, null, NINE_AM_TIME);
+
+			expect(rrulestr).toHaveBeenCalledWith(FREQ_DAILY);
+			expect(result).toHaveLength(3);
+		});
+
+		it('should handle escaped newlines', () => {
+			buildAlertScheduleFromRRule('FREQ=DAILY\\nINTERVAL=1', null, '10:30:00');
+
+			expect(rrulestr).toHaveBeenCalledWith('FREQ=DAILY\nINTERVAL=1');
+		});
+
+		it('should limit occurrences to maxOccurrences', () => {
+			const result = buildAlertScheduleFromRRule(FREQ_DAILY, null, '10:30:00', 2);
+
+			expect(result).toHaveLength(2);
+		});
+
+		it('should return null on error', () => {
+			(rrulestr as jest.Mock).mockImplementation(() => {
+				throw new Error('Invalid rrule');
+			});
+
+			const result = buildAlertScheduleFromRRule('INVALID', null, '10:30:00');
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('buildAlertScheduleFromCustomSchedule', () => {
+		it('should generate monthly occurrences', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['1', '15'],
+				'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',
+				'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'],
+				'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 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',
+				['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',
+				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 skip 31st on 30-day months', () => {
+			const result = buildAlertScheduleFromCustomSchedule(
+				'month',
+				['31'],
+				'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',
+				'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',
+			]);
+		});
+	});
+
+	describe('isValidRRule', () => {
+		beforeEach(() => {
+			(rrulestr as jest.Mock).mockReturnValue({});
+		});
+
+		it('should return true for valid rrule', () => {
+			expect(isValidRRule(FREQ_DAILY)).toBe(true);
+			expect(rrulestr).toHaveBeenCalledWith(FREQ_DAILY);
+		});
+
+		it('should handle escaped newlines', () => {
+			expect(isValidRRule('FREQ=DAILY\\nINTERVAL=1')).toBe(true);
+			expect(rrulestr).toHaveBeenCalledWith('FREQ=DAILY\nINTERVAL=1');
+		});
+
+		it('should return false for invalid rrule', () => {
+			(rrulestr as jest.Mock).mockImplementation(() => {
+				throw new Error('Invalid rrule');
+			});
+
+			expect(isValidRRule('INVALID')).toBe(false);
+		});
+	});
+});

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

@@ -0,0 +1,69 @@
+import { generateTimezoneData } from 'components/CustomTimePicker/timezoneUtils';
+
+export const EVALUATION_WINDOW_TYPE = [
+	{ label: 'Rolling', value: 'rolling' },
+	{ label: 'Cumulative', value: 'cumulative' },
+];
+
+export const EVALUATION_WINDOW_TIMEFRAME = {
+	rolling: [
+		{ label: 'Last 5 minutes', value: '5m0s' },
+		{ label: 'Last 10 minutes', value: '10m0s' },
+		{ label: 'Last 15 minutes', value: '15m0s' },
+		{ label: 'Last 30 minutes', value: '30m0s' },
+		{ label: 'Last 1 hour', value: '1h0m0s' },
+		{ label: 'Last 2 hours', value: '2h0m0s' },
+		{ label: 'Last 4 hours', value: '4h0m0s' },
+		{ label: 'Custom', value: 'custom' },
+	],
+	cumulative: [
+		{ label: 'Current hour', value: 'currentHour' },
+		{ label: 'Current day', value: 'currentDay' },
+		{ label: 'Current month', value: 'currentMonth' },
+	],
+};
+
+export const EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS = [
+	{ label: 'DAY', value: 'day' },
+	{ label: 'WEEK', value: 'week' },
+	{ label: 'MONTH', value: 'month' },
+];
+
+export const EVALUATION_CADENCE_REPEAT_EVERY_WEEK_OPTIONS = [
+	{ label: 'SUNDAY', value: 'sunday' },
+	{ label: 'MONDAY', value: 'monday' },
+	{ label: 'TUESDAY', value: 'tuesday' },
+	{ label: 'WEDNESDAY', value: 'wednesday' },
+	{ label: 'THURSDAY', value: 'thursday' },
+	{ label: 'FRIDAY', value: 'friday' },
+	{ label: 'SATURDAY', value: 'saturday' },
+];
+
+export const EVALUATION_CADENCE_REPEAT_EVERY_MONTH_OPTIONS = Array.from(
+	{ length: 31 },
+	(_, i) => {
+		const value = String(i + 1);
+		return { label: value, value };
+	},
+);
+
+export const WEEKDAY_MAP: { [key: string]: number } = {
+	sunday: 0,
+	monday: 1,
+	tuesday: 2,
+	wednesday: 3,
+	thursday: 4,
+	friday: 5,
+	saturday: 6,
+};
+
+export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
+	label: `${timezone.name} (${timezone.offset})`,
+	value: timezone.value,
+}));
+
+export const CUMULATIVE_WINDOW_DESCRIPTION =
+	'A Cumulative Window has a fixed starting point and expands over time.';
+
+export const ROLLING_WINDOW_DESCRIPTION =
+	'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.';

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

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

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

@@ -0,0 +1,389 @@
+.evaluation-settings-container {
+	margin: 16px;
+
+	.evaluate-alert-conditions-container {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		background-color: var(--bg-ink-400);
+		padding: 16px;
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-500);
+		margin-bottom: 16px;
+
+		.ant-typography {
+			color: var(--bg-vanilla-400);
+			font-size: 14px;
+		}
+
+		.evaluate-alert-conditions-separator {
+			flex: 1;
+			height: 1px;
+			border-top: 1px dashed var(--bg-slate-400);
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: var(--bg-ink-300);
+			border: 1px solid var(--bg-slate-400);
+
+			.evaluate-alert-conditions-button-left {
+				color: var(--bg-vanilla-400);
+				font-size: 12px;
+				padding-right: 16px;
+			}
+
+			.evaluate-alert-conditions-button-right {
+				display: flex;
+				align-items: center;
+				color: var(--bg-vanilla-400);
+				gap: 8px;
+
+				.evaluate-alert-conditions-button-right-text {
+					font-size: 12px;
+					font-weight: 500;
+					background-color: var(--bg-slate-400);
+					padding: 1px 4px;
+				}
+			}
+		}
+	}
+}
+
+.advanced-options-container {
+	.ant-collapse {
+		.ant-collapse-item {
+			.ant-collapse-header {
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-500);
+
+				.ant-collapse-header-text {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+				}
+			}
+
+			.ant-collapse-content {
+				.ant-collapse-content-box {
+					background-color: var(--bg-ink-400);
+				}
+			}
+		}
+	}
+}
+
+.ant-popover-arrow {
+	display: none !important;
+}
+
+.ant-popover-content {
+	background-color: var(--bg-ink-400);
+	border: 1px solid var(--bg-slate-400);
+	border-radius: 4px;
+	padding: 0;
+	margin: 10px;
+
+	.ant-popover-inner {
+		background-color: var(--bg-ink-400);
+		border: none;
+		padding: 0;
+
+		.evaluation-window-popover {
+			min-width: 500px;
+
+			.evaluation-window-content {
+				display: flex;
+
+				.evaluation-window-content-item {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+					border-right: 1px solid var(--bg-slate-400);
+					padding: 12px 16px;
+					min-width: 250px;
+					min-height: 300px;
+
+					.evaluation-window-content-item-label {
+						color: var(--bg-slate-50);
+						font-size: 11px;
+						line-height: 18px;
+						font-weight: 500;
+					}
+
+					.evaluation-window-content-list {
+						display: flex;
+						flex-direction: column;
+
+						.evaluation-window-content-list-item {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							margin: 0 -16px;
+							padding: 4px 16px;
+
+							.ant-typography {
+								color: var(--bg-vanilla-400);
+								font-weight: 400;
+							}
+
+							&.active {
+								background-color: var(--bg-slate-500);
+								border-left: 2px solid var(--bg-robin-500);
+								.ant-typography {
+									font-weight: 500;
+									color: var(--bg-vanilla-100);
+								}
+							}
+
+							&:hover {
+								cursor: pointer;
+								background-color: var(--bg-slate-500);
+							}
+						}
+					}
+				}
+
+				.selection-content {
+					padding: 16px;
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+					width: 400px;
+
+					.ant-typography {
+						color: var(--bg-vanilla-400);
+					}
+
+					.ant-btn {
+						width: fit-content;
+					}
+				}
+			}
+
+			.evaluation-window-footer {
+				display: flex;
+				justify-content: flex-end;
+				gap: 8px;
+				background-color: var(--bg-ink-300);
+				border-top: 1px solid var(--bg-slate-400);
+				padding: 16px;
+			}
+
+			.ant-btn {
+				background-color: var(--bg-ink-200);
+				border: 1px solid var(--bg-slate-200);
+				color: var(--bg-vanilla-400);
+				font-size: 14px;
+			}
+		}
+	}
+}
+
+.evaluation-window-details {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 400px;
+	min-height: 300px;
+	padding: 16px;
+
+	.select-group {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+
+		.ant-typography {
+			color: var(--bg-slate-50);
+			font-size: 11px;
+			line-height: 18px;
+			font-weight: 500;
+		}
+	}
+
+	.time-select-group {
+		.ant-input-group {
+			flex-direction: row;
+			gap: 8px;
+
+			.ant-select {
+				width: 40px;
+			}
+		}
+	}
+
+	.ant-typography {
+		color: var(--bg-vanilla-400);
+		font-size: 13px;
+		font-weight: 500;
+	}
+
+	.ant-select {
+		width: 60%;
+		background-color: var(--bg-ink-300);
+		border: 1px solid var(--bg-slate-400);
+		color: var(--bg-vanilla-100);
+		height: 32px;
+
+		.ant-select-selector {
+			background-color: var(--bg-ink-300);
+			border: 1px solid var(--bg-slate-400);
+			color: var(--bg-vanilla-100);
+			height: 32px;
+		}
+
+		&:hover {
+			border-color: var(--bg-ink-400);
+		}
+	}
+
+	.select-group .ant-input:not(.time-input-field) {
+		background-color: var(--bg-ink-300);
+		border: 1px solid var(--bg-slate-400);
+		color: var(--bg-vanilla-100);
+		height: 32px;
+		width: 60%;
+	}
+}
+
+.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);
+					}
+				}
+			}
+		}
+	}
+
+	.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-ink-400);
+		}
+
+		.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);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,69 @@
+import { Dispatch, SetStateAction } from 'react';
+
+import {
+	EvaluationWindowAction,
+	EvaluationWindowState,
+} from '../context/types';
+
+export interface IAdvancedOptionItemProps {
+	title: string;
+	description: string;
+	input: JSX.Element;
+	tooltipText?: string;
+	onToggle?: () => void;
+}
+
+export enum RollingWindowTimeframes {
+	'LAST_5_MINUTES' = '5m0s',
+	'LAST_10_MINUTES' = '10m0s',
+	'LAST_15_MINUTES' = '15m0s',
+	'LAST_30_MINUTES' = '30m0s',
+	'LAST_1_HOUR' = '1h0m0s',
+	'LAST_2_HOURS' = '2h0m0s',
+	'LAST_4_HOURS' = '4h0m0s',
+}
+
+export enum CumulativeWindowTimeframes {
+	'CURRENT_HOUR' = 'currentHour',
+	'CURRENT_DAY' = 'currentDay',
+	'CURRENT_MONTH' = 'currentMonth',
+}
+
+export interface IEvaluationWindowPopoverProps {
+	evaluationWindow: EvaluationWindowState;
+	setEvaluationWindow: Dispatch<EvaluationWindowAction>;
+}
+
+export interface IEvaluationWindowDetailsProps {
+	evaluationWindow: EvaluationWindowState;
+	setEvaluationWindow: Dispatch<EvaluationWindowAction>;
+}
+
+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 {
+	value?: string; // Format: "HH:MM:SS"
+	onChange?: (value: string) => void;
+	placeholder?: string;
+	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

@@ -0,0 +1,295 @@
+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';
+
+// Extend dayjs with timezone plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export const getEvaluationWindowTypeText = (
+	windowType: 'rolling' | 'cumulative',
+): string => {
+	switch (windowType) {
+		case 'rolling':
+			return 'Rolling';
+		case 'cumulative':
+			return 'Cumulative';
+		default:
+			return '';
+	}
+};
+
+export const getCumulativeWindowTimeframeText = (
+	evaluationWindow: EvaluationWindowState,
+): string => {
+	switch (evaluationWindow.timeframe) {
+		case CumulativeWindowTimeframes.CURRENT_HOUR:
+			return `Current hour, starting at minute ${evaluationWindow.startingAt.number} (${evaluationWindow.startingAt.timezone})`;
+		case CumulativeWindowTimeframes.CURRENT_DAY:
+			return `Current day, starting from ${evaluationWindow.startingAt.time} (${evaluationWindow.startingAt.timezone})`;
+		case CumulativeWindowTimeframes.CURRENT_MONTH:
+			return `Current month, starting from day ${evaluationWindow.startingAt.number} at ${evaluationWindow.startingAt.time} (${evaluationWindow.startingAt.timezone})`;
+		default:
+			return '';
+	}
+};
+
+export const getRollingWindowTimeframeText = (
+	timeframe: RollingWindowTimeframes,
+): string => {
+	switch (timeframe) {
+		case RollingWindowTimeframes.LAST_5_MINUTES:
+			return 'Last 5 minutes';
+		case RollingWindowTimeframes.LAST_10_MINUTES:
+			return 'Last 10 minutes';
+		case RollingWindowTimeframes.LAST_15_MINUTES:
+			return 'Last 15 minutes';
+		case RollingWindowTimeframes.LAST_30_MINUTES:
+			return 'Last 30 minutes';
+		case RollingWindowTimeframes.LAST_1_HOUR:
+			return 'Last 1 hour';
+		case RollingWindowTimeframes.LAST_2_HOURS:
+			return 'Last 2 hours';
+		case RollingWindowTimeframes.LAST_4_HOURS:
+			return 'Last 4 hours';
+		default:
+			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 = (
+	evaluationWindow: EvaluationWindowState,
+): string => {
+	if (evaluationWindow.windowType === 'rolling') {
+		if (evaluationWindow.timeframe === 'custom') {
+			return getCustomRollingWindowTimeframeText(evaluationWindow);
+		}
+		return getRollingWindowTimeframeText(
+			evaluationWindow.timeframe as RollingWindowTimeframes,
+		);
+	}
+	return getCumulativeWindowTimeframeText(evaluationWindow);
+};
+
+export function buildAlertScheduleFromRRule(
+	rruleString: string,
+	date: Dayjs | null,
+	startAt: string,
+	maxOccurrences = 10,
+): Date[] | null {
+	try {
+		if (!rruleString) return null;
+
+		// Handle literal \n in string
+		let finalRRuleString = rruleString.replace(/\\n/g, '\n');
+
+		if (date) {
+			const dt = dayjs(date);
+			if (!dt.isValid()) throw new Error('Invalid date provided');
+
+			const [hours = 0, minutes = 0, seconds = 0] = startAt.split(':').map(Number);
+
+			const dtWithTime = dt
+				.set('hour', hours)
+				.set('minute', minutes)
+				.set('second', seconds)
+				.set('millisecond', 0);
+
+			const dtStartStr = dtWithTime
+				.toISOString()
+				.replace(/[-:]/g, '')
+				.replace(/\.\d{3}Z$/, 'Z');
+
+			if (!/DTSTART/i.test(finalRRuleString)) {
+				finalRRuleString = `DTSTART:${dtStartStr}\n${finalRRuleString}`;
+			}
+		}
+
+		const rruleObj = rrulestr(finalRRuleString);
+		const occurrences: Date[] = [];
+		rruleObj.all((date, index) => {
+			if (index >= maxOccurrences) return false;
+			occurrences.push(date);
+			return true;
+		});
+
+		return occurrences;
+	} catch (error) {
+		return null;
+	}
+}
+
+function generateMonthlyOccurrences(
+	targetDays: number[],
+	hours: number,
+	minutes: number,
+	seconds: number,
+	maxOccurrences: number,
+): Date[] {
+	const occurrences: Date[] = [];
+	const currentMonth = dayjs().startOf('month');
+
+	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;
+
+			const daysInMonth = monthDate.daysInMonth();
+			if (day <= daysInMonth) {
+				const targetDate = monthDate
+					.date(day)
+					.hour(hours)
+					.minute(minutes)
+					.second(seconds);
+				if (targetDate.isAfter(currentDate)) {
+					occurrences.push(targetDate.toDate());
+				}
+			}
+		});
+	}
+
+	return occurrences;
+}
+
+function generateWeeklyOccurrences(
+	targetWeekdays: number[],
+	hours: number,
+	minutes: number,
+	seconds: number,
+	maxOccurrences: number,
+): Date[] {
+	const occurrences: Date[] = [];
+	const currentWeek = dayjs().startOf('week');
+
+	const currentDate = dayjs();
+
+	for (let weekOffset = 0; weekOffset < maxOccurrences; weekOffset++) {
+		const weekDate = currentWeek.add(weekOffset, 'week');
+		targetWeekdays.forEach((weekday) => {
+			if (occurrences.length >= maxOccurrences) return;
+
+			const targetDate = weekDate
+				.day(weekday)
+				.hour(hours)
+				.minute(minutes)
+				.second(seconds);
+			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;
+}
+
+export function buildAlertScheduleFromCustomSchedule(
+	repeatEvery: string,
+	occurence: string[],
+	startAt: string,
+	maxOccurrences = 10,
+): Date[] | null {
+	try {
+		const [hours = 0, minutes = 0, seconds = 0] = startAt.split(':').map(Number);
+		let occurrences: Date[] = [];
+
+		if (repeatEvery === 'month') {
+			const targetDays = occurence
+				.map((day) => parseInt(day, 10))
+				.filter((day) => !Number.isNaN(day));
+			occurrences = generateMonthlyOccurrences(
+				targetDays,
+				hours,
+				minutes,
+				seconds,
+				maxOccurrences,
+			);
+		} else if (repeatEvery === 'week') {
+			const targetWeekdays = occurence
+				.map((day) => WEEKDAY_MAP[day.toLowerCase()])
+				.filter((day) => day !== undefined);
+			occurrences = generateWeeklyOccurrences(
+				targetWeekdays,
+				hours,
+				minutes,
+				seconds,
+				maxOccurrences,
+			);
+		} else if (repeatEvery === 'day') {
+			occurrences = generateDailyOccurrences(
+				hours,
+				minutes,
+				seconds,
+				maxOccurrences,
+			);
+		}
+
+		occurrences.sort((a, b) => a.getTime() - b.getTime());
+		return occurrences.slice(0, maxOccurrences);
+	} catch (error) {
+		Sentry.captureEvent({
+			message: `Error building alert schedule from custom schedule: ${
+				error instanceof Error ? error.message : 'Unknown error'
+			}`,
+			level: 'error',
+		});
+		return null;
+	}
+}
+
+export function isValidRRule(rruleString: string): boolean {
+	try {
+		// normalize escaped \n
+		const finalRRuleString = rruleString.replace(/\\n/g, '\n');
+		rrulestr(finalRRuleString); // will throw if invalid
+		return true;
+	} catch {
+		return false;
+	}
+}

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -0,0 +1,97 @@
+import { Select, Tooltip, Typography } from 'antd';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Info } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { useCreateAlertState } from '../context';
+
+function MultipleNotifications(): JSX.Element {
+	const {
+		notificationSettings,
+		setNotificationSettings,
+	} = useCreateAlertState();
+	const { currentQuery } = useQueryBuilder();
+
+	const spaceAggregationOptions = useMemo(() => {
+		const allGroupBys = currentQuery.builder.queryData?.reduce<string[]>(
+			(acc, query) => {
+				const groupByKeys = query.groupBy?.map((groupBy) => groupBy.key) || [];
+				return [...acc, ...groupByKeys];
+			},
+			[],
+		);
+		const uniqueGroupBys = [...new Set(allGroupBys)];
+		return uniqueGroupBys.map((key) => ({
+			label: key,
+			value: key,
+		}));
+	}, [currentQuery.builder.queryData]);
+
+	const isMultipleNotificationsEnabled = spaceAggregationOptions.length > 0;
+
+	const multipleNotificationsInput = useMemo(() => {
+		const placeholder = isMultipleNotificationsEnabled
+			? 'Select fields to group by (optional)'
+			: 'No grouping fields available';
+		let input = (
+			<div>
+				<Select
+					options={spaceAggregationOptions}
+					onChange={(value): void => {
+						setNotificationSettings({
+							type: 'SET_MULTIPLE_NOTIFICATIONS',
+							payload: value,
+						});
+					}}
+					value={notificationSettings.multipleNotifications}
+					mode="multiple"
+					placeholder={placeholder}
+					disabled={!isMultipleNotificationsEnabled}
+					aria-disabled={!isMultipleNotificationsEnabled}
+					maxTagCount={3}
+				/>
+				{isMultipleNotificationsEnabled && (
+					<Typography.Paragraph className="multiple-notifications-select-description">
+						{notificationSettings.multipleNotifications?.length
+							? `Alerts with same ${notificationSettings.multipleNotifications?.join(
+									', ',
+							  )} will be grouped`
+							: 'Empty = all matching alerts combined into one notification'}
+					</Typography.Paragraph>
+				)}
+			</div>
+		);
+		if (!isMultipleNotificationsEnabled) {
+			input = (
+				<Tooltip title="Add 'Group by' fields to your query to enable alert grouping">
+					{input}
+				</Tooltip>
+			);
+		}
+		return input;
+	}, [
+		isMultipleNotificationsEnabled,
+		notificationSettings.multipleNotifications,
+		setNotificationSettings,
+		spaceAggregationOptions,
+	]);
+
+	return (
+		<div className="multiple-notifications-container">
+			<div className="multiple-notifications-header">
+				<Typography.Text className="multiple-notifications-header-title">
+					Group alerts by{' '}
+					<Tooltip title="Group similar alerts together to reduce notification volume. Leave empty to combine all matching alerts into one notification without grouping.">
+						<Info size={16} />
+					</Tooltip>
+				</Typography.Text>
+				<Typography.Text className="multiple-notifications-header-description">
+					Combine alerts with the same field values into a single notification.
+				</Typography.Text>
+			</div>
+			{multipleNotificationsInput}
+		</div>
+	);
+}
+
+export default MultipleNotifications;

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -0,0 +1,92 @@
+import { Button, Popover, Tooltip, Typography } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { Info } from 'lucide-react';
+
+import { useCreateAlertState } from '../context';
+
+function NotificationMessage(): JSX.Element {
+	const {
+		notificationSettings,
+		setNotificationSettings,
+	} = useCreateAlertState();
+
+	const templateVariables = [
+		{ variable: '{{alertname}}', description: 'Name of the alert rule' },
+		{
+			variable: '{{value}}',
+			description: 'Current value that triggered the alert',
+		},
+		{
+			variable: '{{threshold}}',
+			description: 'Threshold value from alert condition',
+		},
+		{ variable: '{{unit}}', description: 'Unit of measurement for the metric' },
+		{
+			variable: '{{severity}}',
+			description: 'Alert severity level (Critical, Warning, Info)',
+		},
+		{
+			variable: '{{queryname}}',
+			description: 'Name of the query that triggered the alert',
+		},
+		{
+			variable: '{{labels}}',
+			description: 'All labels associated with the alert',
+		},
+		{
+			variable: '{{timestamp}}',
+			description: 'Timestamp when alert was triggered',
+		},
+	];
+
+	const templateVariableContent = (
+		<div className="template-variable-content">
+			<Typography.Text strong>Available Template Variables:</Typography.Text>
+			{templateVariables.map((item) => (
+				<div className="template-variable-content-item" key={item.variable}>
+					<code>{item.variable}</code>
+					<Typography.Text>{item.description}</Typography.Text>
+				</div>
+			))}
+		</div>
+	);
+
+	return (
+		<div className="notification-message-container">
+			<div className="notification-message-header">
+				<div className="notification-message-header-content">
+					<Typography.Text className="notification-message-header-title">
+						Notification Message
+						<Tooltip title="Customize the message content sent in alert notifications. Template variables like {{alertname}}, {{value}}, and {{threshold}} will be replaced with actual values when the alert fires.">
+							<Info size={16} />
+						</Tooltip>
+					</Typography.Text>
+					<Typography.Text className="notification-message-header-description">
+						Custom message content for alert notifications. Use template variables to
+						include dynamic information.
+					</Typography.Text>
+				</div>
+				<div className="notification-message-header-actions">
+					<Popover content={templateVariableContent}>
+						<Button type="text">
+							<Info size={12} />
+							Variables
+						</Button>
+					</Popover>
+				</div>
+			</div>
+			<TextArea
+				value={notificationSettings.description}
+				onChange={(e): void =>
+					setNotificationSettings({
+						type: 'SET_DESCRIPTION',
+						payload: e.target.value,
+					})
+				}
+				placeholder="Enter notification message..."
+			/>
+		</div>
+	);
+}
+
+export default NotificationMessage;

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -0,0 +1,112 @@
+import './styles.scss';
+
+import { Input, Select, Typography } from 'antd';
+
+import { useCreateAlertState } from '../context';
+import {
+	ADVANCED_OPTIONS_TIME_UNIT_OPTIONS as RE_NOTIFICATION_UNIT_OPTIONS,
+	RE_NOTIFICATION_CONDITION_OPTIONS,
+} from '../context/constants';
+import AdvancedOptionItem from '../EvaluationSettings/AdvancedOptionItem';
+import Stepper from '../Stepper';
+import { showCondensedLayout } from '../utils';
+import MultipleNotifications from './MultipleNotifications';
+import NotificationMessage from './NotificationMessage';
+
+function NotificationSettings(): JSX.Element {
+	const showCondensedLayoutFlag = showCondensedLayout();
+
+	const {
+		notificationSettings,
+		setNotificationSettings,
+	} = useCreateAlertState();
+
+	const repeatNotificationsInput = (
+		<div className="repeat-notifications-input">
+			<Typography.Text>Every</Typography.Text>
+			<Input
+				value={notificationSettings.reNotification.value}
+				placeholder="Enter time interval..."
+				disabled={!notificationSettings.reNotification.enabled}
+				type="number"
+				onChange={(e): void => {
+					setNotificationSettings({
+						type: 'SET_RE_NOTIFICATION',
+						payload: {
+							enabled: notificationSettings.reNotification.enabled,
+							value: parseInt(e.target.value, 10),
+							unit: notificationSettings.reNotification.unit,
+							conditions: notificationSettings.reNotification.conditions,
+						},
+					});
+				}}
+			/>
+			<Select
+				value={notificationSettings.reNotification.unit || null}
+				placeholder="Select unit"
+				disabled={!notificationSettings.reNotification.enabled}
+				options={RE_NOTIFICATION_UNIT_OPTIONS}
+				onChange={(value): void => {
+					setNotificationSettings({
+						type: 'SET_RE_NOTIFICATION',
+						payload: {
+							enabled: notificationSettings.reNotification.enabled,
+							value: notificationSettings.reNotification.value,
+							unit: value,
+							conditions: notificationSettings.reNotification.conditions,
+						},
+					});
+				}}
+			/>
+			<Typography.Text>while</Typography.Text>
+			<Select
+				mode="multiple"
+				value={notificationSettings.reNotification.conditions || null}
+				placeholder="Select conditions"
+				disabled={!notificationSettings.reNotification.enabled}
+				options={RE_NOTIFICATION_CONDITION_OPTIONS}
+				onChange={(value): void => {
+					setNotificationSettings({
+						type: 'SET_RE_NOTIFICATION',
+						payload: {
+							enabled: notificationSettings.reNotification.enabled,
+							value: notificationSettings.reNotification.value,
+							unit: notificationSettings.reNotification.unit,
+							conditions: value,
+						},
+					});
+				}}
+			/>
+		</div>
+	);
+
+	return (
+		<div className="notification-settings-container">
+			<Stepper
+				stepNumber={showCondensedLayoutFlag ? 3 : 4}
+				label="Notification settings"
+			/>
+			<NotificationMessage />
+			<div className="notification-settings-content">
+				<MultipleNotifications />
+				<AdvancedOptionItem
+					title="Repeat notifications"
+					description="Send periodic notifications while the alert condition remains active."
+					tooltipText="Continue sending periodic notifications while the alert condition persists. Useful for ensuring critical alerts aren't missed during long-running incidents. Configure how often to repeat and under what conditions."
+					input={repeatNotificationsInput}
+					onToggle={(): void => {
+						setNotificationSettings({
+							type: 'SET_RE_NOTIFICATION',
+							payload: {
+								...notificationSettings.reNotification,
+								enabled: !notificationSettings.reNotification.enabled,
+							},
+						});
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default NotificationSettings;

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/MultipleNotifications.test.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as createAlertContext from 'container/CreateAlertV2/context';
+import {
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_NOTIFICATION_SETTINGS_STATE,
+} from 'container/CreateAlertV2/context/constants';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+
+import MultipleNotifications from '../MultipleNotifications';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+
+const TEST_QUERY = 'test-query';
+const TEST_GROUP_BY_FIELDS = [{ key: 'service' }, { key: 'environment' }];
+const TRUE = 'true';
+const FALSE = 'false';
+const COMBOBOX_ROLE = 'combobox';
+const ARIA_DISABLED_ATTR = 'aria-disabled';
+const mockSetNotificationSettings = jest.fn();
+const mockUseQueryBuilder = {
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					queryName: TEST_QUERY,
+					groupBy: [],
+				},
+			],
+		},
+	},
+};
+
+const initialAlertThresholdState = createMockAlertContextState().thresholdState;
+jest.spyOn(createAlertContext, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		thresholdState: {
+			...initialAlertThresholdState,
+			selectedQuery: TEST_QUERY,
+		},
+		setNotificationSettings: mockSetNotificationSettings,
+	}),
+);
+
+describe('MultipleNotifications', () => {
+	const { useQueryBuilder } = jest.requireMock(
+		'hooks/queryBuilder/useQueryBuilder',
+	);
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useQueryBuilder.mockReturnValue(mockUseQueryBuilder);
+	});
+
+	it('should render the multiple notifications component with no grouping fields and disabled input by default', () => {
+		render(<MultipleNotifications />);
+		expect(screen.getByText('Group alerts by')).toBeInTheDocument();
+		expect(
+			screen.getByText(
+				'Combine alerts with the same field values into a single notification.',
+			),
+		).toBeInTheDocument();
+		expect(screen.getByText('No grouping fields available')).toBeInTheDocument();
+		const select = screen.getByRole(COMBOBOX_ROLE);
+		expect(select).toHaveAttribute(ARIA_DISABLED_ATTR, TRUE);
+	});
+
+	it('should render the multiple notifications component with grouping fields and enabled input when space aggregation options are set', () => {
+		useQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							queryName: TEST_QUERY,
+							groupBy: TEST_GROUP_BY_FIELDS,
+						},
+					],
+				},
+			},
+		});
+		render(<MultipleNotifications />);
+
+		expect(
+			screen.getByText(
+				'Empty = all matching alerts combined into one notification',
+			),
+		).toBeInTheDocument();
+		const select = screen.getByRole(COMBOBOX_ROLE);
+		expect(select).toHaveAttribute(ARIA_DISABLED_ATTR, FALSE);
+	});
+
+	it('should render the multiple notifications component with grouping fields and enabled input when space aggregation options are set and multiple notifications are enabled', () => {
+		useQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							queryName: TEST_QUERY,
+							groupBy: TEST_GROUP_BY_FIELDS,
+						},
+					],
+				},
+			},
+		});
+		jest.spyOn(createAlertContext, 'useCreateAlertState').mockReturnValue(
+			createMockAlertContextState({
+				thresholdState: {
+					...INITIAL_ALERT_THRESHOLD_STATE,
+					selectedQuery: TEST_QUERY,
+				},
+				notificationSettings: {
+					...INITIAL_NOTIFICATION_SETTINGS_STATE,
+					multipleNotifications: ['service', 'environment'],
+				},
+				setNotificationSettings: mockSetNotificationSettings,
+			}),
+		);
+
+		render(<MultipleNotifications />);
+
+		expect(
+			screen.getByText('Alerts with same service, environment will be grouped'),
+		).toBeInTheDocument();
+		const select = screen.getByRole(COMBOBOX_ROLE);
+		expect(select).toHaveAttribute(ARIA_DISABLED_ATTR, FALSE);
+	});
+
+	it('should render unique group by options from all queries', async () => {
+		useQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							queryName: 'test-query-1',
+							groupBy: [{ key: 'http.status_code' }],
+						},
+						{
+							queryName: 'test-query-2',
+							groupBy: [{ key: 'service' }],
+						},
+					],
+				},
+			},
+		});
+
+		render(<MultipleNotifications />);
+
+		const select = screen.getByRole(COMBOBOX_ROLE);
+		await userEvent.click(select);
+
+		expect(
+			screen.getByRole('option', { name: 'http.status_code' }),
+		).toBeInTheDocument();
+		expect(screen.getByRole('option', { name: 'service' })).toBeInTheDocument();
+	});
+});

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/NotificationMessage.test.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as createAlertContext from 'container/CreateAlertV2/context';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+
+import NotificationMessage from '../NotificationMessage';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+const mockSetNotificationSettings = jest.fn();
+const initialNotificationSettingsState = createMockAlertContextState()
+	.notificationSettings;
+jest.spyOn(createAlertContext, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		notificationSettings: {
+			...initialNotificationSettingsState,
+			description: '',
+		},
+		setNotificationSettings: mockSetNotificationSettings,
+	}),
+);
+
+describe('NotificationMessage', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders textarea with message and placeholder', () => {
+		render(<NotificationMessage />);
+		expect(screen.getByText('Notification Message')).toBeInTheDocument();
+		const textarea = screen.getByPlaceholderText('Enter notification message...');
+		expect(textarea).toBeInTheDocument();
+	});
+
+	it('updates notification settings when textarea value changes', async () => {
+		const user = userEvent.setup();
+		render(<NotificationMessage />);
+		const textarea = screen.getByPlaceholderText('Enter notification message...');
+		await user.type(textarea, 'x');
+		expect(mockSetNotificationSettings).toHaveBeenLastCalledWith({
+			type: 'SET_DESCRIPTION',
+			payload: 'x',
+		});
+	});
+
+	it('displays existing description value', () => {
+		jest.spyOn(createAlertContext, 'useCreateAlertState').mockImplementation(
+			() =>
+				({
+					notificationSettings: {
+						description: 'Existing message',
+					},
+					setNotificationSettings: mockSetNotificationSettings,
+				} as any),
+		);
+
+		render(<NotificationMessage />);
+
+		const textarea = screen.getByDisplayValue('Existing message');
+		expect(textarea).toBeInTheDocument();
+	});
+});