Revert "refactor(frontend): migrate plain antd Input to @signozhq/ui/input (#11401)"

This reverts commit 1f406823d8.

conf/example.yaml

@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-traces:
+tracedetail:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

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.127.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

docs/api/openapi.yml

@@ -2645,30 +2645,6 @@ components:
         legend:
           $ref: '#/components/schemas/DashboardtypesLegend'
       type: object
-    DashboardtypesJSONPatchOperation:
-      properties:
-        from:
-          description: Source JSON Pointer for move/copy ops; ignored for other ops.
-          type: string
-        op:
-          $ref: '#/components/schemas/DashboardtypesPatchOp'
-        path:
-          description: JSON Pointer (RFC 6901) into the dashboard's postable shape
-            — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0,
-            /tags/-.
-          type: string
-        value:
-          description: 'Value to add/replace/test against. The expected type depends
-            on the path. Common shapes (see referenced schemas for the exact field
-            set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N
-            (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable;
-            /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a
-            TagtypesPostableTag; /spec/display/name and other leaf string fields take
-            a string. Required for add/replace/test; ignored for remove/move/copy.'
-      required:
-      - op
-      - path
-      type: object
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
@@ -2884,20 +2860,6 @@ components:
             $ref: '#/components/schemas/DashboardtypesQuery'
           type: array
       type: object
-    DashboardtypesPatchOp:
-      enum:
-      - add
-      - remove
-      - replace
-      - move
-      - copy
-      - test
-      type: string
-    DashboardtypesPatchableDashboardV2:
-      items:
-        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
-      nullable: true
-      type: array
     DashboardtypesPieChartPanelSpec:
       properties:
         formatting:
@@ -3185,27 +3147,6 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
-    DashboardtypesUpdatableDashboardV2:
-      properties:
-        image:
-          type: string
-        name:
-          type: string
-        schemaVersion:
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
-        tags:
-          items:
-            $ref: '#/components/schemas/TagtypesPostableTag'
-          nullable: true
-          type: array
-      required:
-      - schemaVersion
-      - name
-      - tags
-      - spec
-      type: object
     DashboardtypesUpdatablePublicDashboard:
       properties:
         defaultTimeRange:
@@ -12883,12 +12824,6 @@ paths:
                 - data
                 type: object
           description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
         "401":
           content:
             application/json:
@@ -12941,12 +12876,6 @@ paths:
                 - data
                 type: object
           description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
         "401":
           content:
             application/json:
@@ -12959,12 +12888,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -12979,262 +12902,6 @@ paths:
       summary: Get dashboard (v2)
       tags:
       - dashboard
-    patch:
-      deprecated: false
-      description: 'This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard.
-        The patch is applied against the postable view of the dashboard (metadata,
-        data, tags), so individual panels, queries, variables, layouts, or tags can
-        be updated without re-sending the rest of the dashboard. Apply is lenient:
-        `remove` on a missing path is a no-op (idempotent) and `add` creates any missing
-        parent objects, rather than failing as strict RFC 6902 would. The resulting
-        dashboard is still validated. Locked dashboards are rejected.'
-      operationId: PatchDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesPatchableDashboardV2'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Patch dashboard (v2)
-      tags:
-      - dashboard
-    put:
-      deprecated: false
-      description: This endpoint updates a v2-shape dashboard's metadata, data, and
-        tag set. Locked dashboards are rejected.
-      operationId: UpdateDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesUpdatableDashboardV2'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Update dashboard (v2)
-      tags:
-      - dashboard
-  /api/v2/dashboards/{id}/lock:
-    delete:
-      deprecated: false
-      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
-        creator or an org admin may lock or unlock.
-      operationId: UnlockDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Unlock dashboard (v2)
-      tags:
-      - dashboard
-    put:
-      deprecated: false
-      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
-        creator or an org admin may lock or unlock.
-      operationId: LockDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Lock dashboard (v2)
-      tags:
-      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -221,18 +221,6 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
-func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
-}
-
-func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
-}
-
-func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
-	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
-}
-
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

frontend/.oxlintrc.json

@@ -291,8 +291,6 @@
     // Prevents the usage of specific antd components in favor of our lib
     "signoz/no-signozhq-ui-barrel": "error",
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
-    "signoz/no-css-module-bracket-access": "warn",
-    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "no-restricted-globals": [
       "error",
       {

frontend/.stylelintrc.cjs

@@ -2,33 +2,9 @@
 const path = require('path');
 
 module.exports = {
-	plugins: [
-		path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-deep-nesting.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-id-selectors.js'),
-		path.join(
-			__dirname,
-			'stylelint-rules/css-modules/no-bare-element-selectors.js',
-		),
-		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
-	],
+	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
 	customSyntax: 'postcss-scss',
 	rules: {
-		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
 	},
-	overrides: [
-		{
-			// CSS module-specific rules
-			files: ['**/*.module.scss'],
-			rules: {
-				'local/no-deep-nesting': [true, { severity: 'warning' }],
-				'local/no-id-selectors': true,
-				'local/no-bare-element-selectors': true,
-				'local/prefer-css-variables': [true, { severity: 'warning' }],
-				'local/class-name-pattern': [true, { severity: 'warning' }],
-			},
-		},
-	],
 };

frontend/AGENTS.md

@@ -23,8 +23,6 @@ You are operating within a constrained context window and strict system prompts.
 - Always add data-testid or testId (if supported) to critical/behavioral components like inputs, buttons, etc...
   - When creating test, these IDs should be used instead of finding by role.
 - Never create barrel files.
-- When writing new css, prefer CSS Modules
-  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`

frontend/__mocks__/useSafeNavigate.ts

@@ -0,0 +1,28 @@
+// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+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) => {},
+	) as jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>,
+});

frontend/docs/css-modules-guide.md

@@ -1,471 +0,0 @@
-# CSS Modules Guide for AI Agents
-
-## Config (vite.config.ts)
-
-```ts
-css: {
-  modules: {
-    localsConvention: 'camelCaseOnly',
-  },
-}
-```
-
-**Critical:** `camelCaseOnly` exports ONLY camelCase keys. Original kebab-case NOT accessible.
-
-## Quick Reference
-
-| CSS Class | JS Access | Works? |
-|-----------|-----------|--------|
-| `.alertHistory` | `styles.alertHistory` | Yes |
-| `.alert-history` | `styles.alertHistory` | Yes |
-| `.alert-history` | `styles['alert-history']` | NO - undefined |
-
-## Bad Patterns
-
-### Class Naming
-
-```scss
-// BAD: Bracket access won't work
-.my-class { }
-// Then in JS: styles['my-class'] -> undefined
-
-// BAD: Collision - both become same key
-.alertHistory { }
-.alert-history { }  // -> styles.alertHistory (conflicts)
-
-// BAD: Underscore inconsistency
-.my_class { }  // -> styles.myClass (confusing)
-
-// GOOD: Direct camelCase
-.alertHistory { }
-.statsCard { }
-```
-
-### Nesting
-
-```scss
-// BAD: Deep nesting - specificity wars, hard to override
-.container {
-  .wrapper {
-    .inner {
-      .content { }
-    }
-  }
-}
-
-// BAD: Nesting creates separate classes you might not expect
-.button {
-  .icon { }  // -> styles.icon (separate class, not scoped under .button)
-}
-
-// GOOD: Flat structure
-.container { }
-.containerWrapper { }
-.containerContent { }
-
-// GOOD: Nesting only for pseudo/states
-.button {
-  &:hover { }
-  &:disabled { }
-  &::before { }
-}
-```
-
-### Global Escapes
-
-```scss
-// BAD: Overusing global
-:global {
-  .everything { }
-  .in-here { }
-  .is-global { }
-}
-
-// BAD: Global without necessity
-:global(.myComponent) { }  // defeats purpose of modules
-
-// GOOD: Targeted global for third-party overrides
-.container {
-  :global(.ant-modal-content) {
-    padding: 0;
-  }
-}
-```
-
-### Selectors
-
-```scss
-// BAD: ID selectors - not reusable
-#myComponent { }
-
-// BAD: Element selectors without scope
-div { }  // affects ALL divs in component
-
-// BAD: Complex selectors
-.container > div + span ~ p { }
-
-// GOOD: Class-only selectors
-.container { }
-.title { }
-```
-
-### Variables & Values
-
-```scss
-// BAD: Hardcoded colors
-.button {
-  background: #1890ff;
-  color: white;
-}
-
-// BAD: Magic numbers
-.container {
-  padding: 17px;
-  margin-left: 43px;
-}
-
-// GOOD: Semantic tokens (theme-aware)
-.button {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.card {
-  background: var(--l2-background);
-  color: var(--l2-foreground);
-}
-
-// GOOD: Spacing system
-.container {
-  padding: var(--spacing-4);
-  margin-left: var(--spacing-5);
-}
-```
-
-## Design Tokens (@signozhq/design-tokens)
-
-Prefer semantic tokens over hardcoded values.
-
-You can read the ./node_modules/@signozhq/design-tokens/dist/style.css to find complete list of available tokens.
-
-### Spacing
-
-```scss
-// Spacing scale (index -> px):
-// --spacing-0=0    --spacing-1=2    --spacing-2=4    --spacing-3=6    --spacing-4=8
-// --spacing-5=10   --spacing-6=12   --spacing-7=14   --spacing-8=16   --spacing-10=20
-// --spacing-12=24  --spacing-16=32  --spacing-20=40  --spacing-24=48  --spacing-32=64
-// --spacing-40=80  --spacing-48=96  --spacing-56=112 --spacing-64=128
-// (index != px; --spacing-2 is 4px, not 2px)
-.container {
-  padding: var(--spacing-4);      // 8px
-  gap: var(--spacing-6);          // 12px
-  margin-bottom: var(--spacing-8); // 16px
-}
-
-// Also available: --padding-* and --margin-* (rem-based)
-// --padding-1 = 0.25rem, --padding-4 = 1rem, etc.
-```
-
-### Typography
-
-```scss
-// Font sizes (preferred)
-.title {
-  font-size: var(--periscope-font-size-large);   // 18px
-  font-size: var(--periscope-font-size-medium);  // 16px
-  font-size: var(--periscope-font-size-base);    // 13px
-  font-size: var(--periscope-font-size-small);   // 11px
-}
-
-// Alternative scale (rem-based)
-.heading {
-  font-size: var(--font-size-xl);  // 1.25rem
-  font-size: var(--font-size-lg);  // 1.125rem
-  font-size: var(--font-size-base); // 1rem
-  font-size: var(--font-size-sm);  // 0.875rem
-}
-
-// Font weights
-.bold {
-  font-weight: var(--font-weight-semibold); // 600
-  font-weight: var(--font-weight-medium);   // 500
-  font-weight: var(--font-weight-normal);   // 400
-}
-
-// Line heights
-.text {
-  line-height: var(--line-height-20); // 20px
-  line-height: var(--line-height-24); // 24px
-}
-```
-
-### Colors (Prefer Semantic Tokens)
-
-Use L1/L2/L3 semantic tokens - they handle light/dark theme automatically.
-
-```scss
-// BAD: Primitive tokens (fixed value across themes, won't swap on theme change)
-.card {
-  background: var(--bg-ink-400);
-  color: var(--text-vanilla-100);
-}
-
-// GOOD: L1/L2/L3 tokens (theme-aware - swap automatically light/dark)
-.card {
-  background: var(--l1-background);  // base layer
-  color: var(--l1-foreground);       // primary text
-}
-
-.panel {
-  background: var(--l2-background);  // elevated surface
-  color: var(--l2-foreground);       // secondary text
-  border-color: var(--l2-border);
-}
-
-.nested {
-  background: var(--l3-background);  // nested/inset
-  color: var(--l3-foreground);       // tertiary text
-}
-
-// Hover states
-.card:hover {
-  background: var(--l1-background-hover);
-  color: var(--l1-foreground-hover);
-}
-
-// Semantic action colors (also theme-aware)
-.primary {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.danger {
-  background: var(--danger-background);
-  color: var(--danger-foreground);
-}
-
-.success {
-  background: var(--success-background);
-  color: var(--success-foreground);
-}
-
-.warning {
-  background: var(--warning-background);
-  color: var(--warning-foreground);
-}
-
-// Accent colors (for highlights, badges, etc.)
-.accent {
-  background: var(--accent-primary);        // robin blue
-  background: var(--accent-forest);         // green
-  background: var(--accent-cherry);         // red
-  background: var(--accent-amber);          // yellow
-}
-```
-
-**Token hierarchy:**
-- Primitive tokens (`--bg-*`, `--text-*`, etc.) have fixed values across themes.
-- Semantic tokens (L1/L2/L3, `--primary-*`, `--danger-*`, etc.) automatically swap based on theme.
-- L1 = base/root layer
-- L2 = elevated surfaces (cards, panels)
-- L3 = nested/inset elements
-
-## Overriding @signozhq/ui Components
-
-Components expose CSS variables for customization.
-
-You can ensure they exist by looking at ./node_modules/@signozhq/ui/dist.
-Never write a override without confirm it exists.
-
-Override via:
-
-### Method 1: CSS Variables (Preferred)
-
-Each component exposes `--<component>-<property>` variables:
-
-```scss
-// Override Button
-.customButton {
-  --button-background: var(--success-background);
-  --button-border-radius: var(--radius-2);
-  --button-padding: var(--spacing-4) var(--spacing-8);
-  --button-font-size: var(--periscope-font-size-base);
-}
-
-// Override Input
-.customInput {
-  --input-height: 2.5rem;
-  --input-border-color: var(--l2-border);
-  --input-padding: var(--spacing-2) var(--spacing-6);
-  --input-placeholder-color: var(--l3-foreground);
-}
-
-// Override nested parts
-.customInput {
-  --input-prefix-padding: 0 var(--spacing-4) 0 var(--spacing-6);
-  --input-suffix-color: var(--accent-primary);
-}
-```
-
-### Method 2: Data Attributes
-
-Components use data attributes for variants/states. Target them for state-specific overrides:
-
-```scss
-// Target variant
-.wrapper :global([data-variant="outlined"]) {
-  --button-border-color: var(--accent-primary);
-}
-
-// Target size
-.wrapper :global([data-size="sm"]) {
-  --button-font-size: var(--periscope-font-size-small);
-}
-
-// Target color
-.wrapper :global([data-color="destructive"]) {
-  --button-background: var(--danger-background);
-}
-
-// Target state (Radix patterns)
-.popover :global([data-state="open"]) {
-  opacity: 1;
-}
-
-.tooltip :global([data-side="top"]) {
-  margin-bottom: var(--spacing-2);
-}
-```
-
-### Common Component CSS Variables
-
-**Button:**
-- `--button-background`, `--button-border-radius`, `--button-padding`
-- `--button-font-size`, `--button-height`, `--button-gap`
-- `--button-hover-background`, `--button-disabled-opacity`
-
-**Input:**
-- `--input-height`, `--input-border-color`, `--input-background`
-- `--input-padding`, `--input-font-size`, `--input-placeholder-color`
-- `--input-focus-outline-color`, `--input-hover-border-color`
-- `--input-prefix-*`, `--input-suffix-*` for adornments
-
-**General pattern:** `--<component>-<property>` or `--<component>-<state>-<property>`
-
-## Good Patterns
-
-### Structure
-
-```scss
-// Flat, descriptive, component-scoped
-.alertHistory { }
-.alertHistoryHeader { }
-.alertHistoryContent { }
-.alertHistoryFooter { }
-
-// State modifiers as separate classes
-.alertHistory { }
-.alertHistoryLoading { }
-.alertHistoryEmpty { }
-.alertHistoryError { }
-```
-
-### Composition
-
-```scss
-// GOOD: Composing styles
-.baseButton {
-  padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--radius-2);
-}
-
-.primaryButton {
-  composes: baseButton;
-  background: var(--primary-background);
-}
-```
-
-### Pseudo Elements
-
-```scss
-.button {
-  // States
-  &:hover { opacity: 0.9; }
-  &:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-
-  // Pseudo elements
-  &::before { content: ''; }
-  &::after { content: ''; }
-}
-```
-
-### Media Queries
-
-```scss
-.container {
-  display: flex;
-  flex-direction: column;
-  
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-}
-```
-
-## JS Import Patterns
-
-```tsx
-// GOOD
-import styles from './Component.module.scss';
-
-<div className={styles.container}>
-  <span className={styles.title}>Title</span>
-</div>
-
-// GOOD: Conditional classes
-<div className={`${styles.button} ${isActive ? styles.buttonActive : ''}`}>
-
-// GOOD: With clsx/classnames
-<div className={clsx(styles.button, { [styles.buttonActive]: isActive })}>
-
-// BAD: Bracket access (may be undefined)
-<div className={styles['button-active']}>  // undefined if CSS has .button-active
-
-// BAD: String interpolation for class names
-<div className={`${styles.button}-active`}>  // won't work
-```
-
-## Checklist Before Committing
-
-- [ ] All class names use camelCase in CSS
-- [ ] No bracket access (`styles['...']`) in JS unless verified
-- [ ] No deep class nesting (max 3 class levels; pseudo-classes/elements and parent-reference selectors like `&.active`, `&#bar` are not counted)
-- [ ] No hardcoded colors - use `--l1/l2/l3-*` semantic tokens (not `--bg-*` primitives)
-- [ ] No magic numbers - use `--spacing-*` tokens
-- [ ] Typography uses `--periscope-font-size-*` or `--font-size-*` tokens
-- [ ] @signozhq/ui overrides use CSS variables, not direct class overrides
-- [ ] Global escapes only for third-party overrides
-- [ ] No ID selectors
-- [ ] No bare element selectors
-
-## Lint Rules
-
-### JS/TS (oxlint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `signoz/no-css-module-bracket-access` | warn | `styles['kebab-case']`, dynamic access |
-
-### CSS/SCSS (stylelint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `local/no-deep-nesting` | warning | class nesting >3 levels (pseudo-classes/elements and parent-reference selectors `&.foo`, `&#bar` not counted; configurable via `maxDepth` secondary option) |
-| `local/no-id-selectors` | error | `#id` selectors |
-| `local/no-bare-element-selectors` | error | root-level `div`, `span` etc |
-| `local/prefer-css-variables` | warning | hardcoded colors |
-| `local/class-name-pattern` | warning | kebab-case, snake_case, PascalCase |
-
-Run: `pnpm lint:styles` to check CSS modules.

frontend/jest.config.ts

@@ -1,8 +1,6 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH =
-	'<rootDir>/src/__tests__/safeNavigateMock.ts';
-const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -24,8 +22,6 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
-		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

frontend/plugins/rules/no-css-module-bracket-access.mjs

@@ -1,144 +0,0 @@
-/**
- * Rule: no-css-module-bracket-access
- *
- * Prevents bracket access on CSS module imports that may fail with camelCaseOnly config.
- *
- * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case class names are
- * converted to camelCase and the original key is NOT exported.
- *
- * This rule catches patterns like:
- *   styles['my-class']     // BAD - undefined if CSS has .my-class
- *   styles['myClass']      // OK but prefer dot notation
- *   styles.myClass         // GOOD
- *
- * Catches:
- * - Bracket access with kebab-case strings (always fails)
- * - Bracket access with any string literal (warn - prefer dot notation)
- * - Dynamic bracket access (warn - risky)
- */
-
-const CSS_MODULE_IMPORT_NAMES = new Set([
-	'styles',
-	'classes',
-	'css',
-	'classNames',
-]);
-
-function looksLikeCssModuleImport(name) {
-	// Common patterns: styles, componentStyles, alertHistoryStyles
-	return (
-		CSS_MODULE_IMPORT_NAMES.has(name) ||
-		name.endsWith('Styles') ||
-		name.endsWith('Classes') ||
-		name.endsWith('Css')
-	);
-}
-
-function isKebabCase(str) {
-	return str.includes('-');
-}
-
-function isSnakeCase(str) {
-	return str.includes('_');
-}
-
-export default {
-	create(context) {
-		return {
-			MemberExpression(node) {
-				// Only check bracket notation: styles['...']
-				if (!node.computed) {
-					return;
-				}
-
-				const object = node.object;
-				if (object.type !== 'Identifier') {
-					return;
-				}
-
-				// Check if this looks like a CSS module import
-				if (!looksLikeCssModuleImport(object.name)) {
-					return;
-				}
-
-				const property = node.property;
-
-				// Dynamic access: styles[variable]
-				if (property.type === 'Identifier') {
-					context.report({
-						node,
-						message: `Dynamic CSS module access '${object.name}[${property.name}]' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify the key exists.`,
-					});
-					return;
-				}
-
-				// Template literal: styles[\`...\`]
-				if (property.type === 'TemplateLiteral') {
-					context.report({
-						node,
-						message: `Template literal CSS module access is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Prefer dot notation.`,
-					});
-					return;
-				}
-
-				// Numeric / boolean / null literal: styles[0]. Not a class lookup; ignore.
-				if (property.type === 'Literal' && typeof property.value !== 'string') {
-					return;
-				}
-
-				// String literal: styles['...']
-				if (property.type === 'Literal' && typeof property.value === 'string') {
-					const className = property.value;
-
-					// Kebab-case will definitely fail
-					if (isKebabCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses kebab-case which won't work with 'camelCaseOnly' config. Use '${object.name}.${toCamelCase(className)}' instead.`,
-						});
-						return;
-					}
-
-					// Snake_case is suspicious
-					if (isSnakeCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses snake_case which may not work as expected. Prefer camelCase: '${object.name}.${toCamelCase(className)}'.`,
-						});
-						return;
-					}
-
-					// Valid camelCase but using bracket notation - prefer dot
-					if (/^[a-z][a-zA-Z0-9]*$/.test(className)) {
-						context.report({
-							node,
-							message: `Prefer dot notation: '${object.name}.${className}' instead of '${object.name}['${className}']'.`,
-						});
-					}
-					return;
-				}
-
-				// Catch-all for other dynamic expressions:
-				//   styles['prefix' + suffix]   (BinaryExpression)
-				//   styles[isActive && 'foo']   (LogicalExpression)
-				//   styles[isActive ? 'a' : 'b'] (ConditionalExpression)
-				//   styles[fn()]                (CallExpression)
-				context.report({
-					node,
-					message: `Dynamic CSS module access on '${object.name}' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify each key resolves to an exported camelCase class.`,
-				});
-			},
-		};
-	},
-};
-
-function toCamelCase(str) {
-	return str
-		.split(/[-_]/)
-		.map((part, i) =>
-			i === 0
-				? part.toLowerCase()
-				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
-		)
-		.join('');
-}

frontend/plugins/signoz.mjs

@@ -11,7 +11,6 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
-import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 
 export default {
 	meta: {
@@ -24,6 +23,5 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
-		'no-css-module-bracket-access': noCssModuleBracketAccess,
 	},
 };

frontend/src/__tests__/logEventMock.ts

@@ -1,11 +0,0 @@
-// Shared mock for `api/common/logEvent`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `api/common/logEvent` in test code resolves to this file.
-// Tests can import `logEventMock` to assert analytics calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-export const logEventMock: jest.MockedFunction<
-	(eventName: string, attributes?: Record<string, unknown>) => void
-> = jest.fn();
-
-export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -1,29 +0,0 @@
-// Shared mock for `hooks/useSafeNavigate`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `hooks/useSafeNavigate` in test code resolves to this file.
-// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-	newTab?: boolean;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-export const safeNavigateMock: jest.MockedFunction<
-	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-> = jest.fn();
-
-export const useSafeNavigate = (): {
-	safeNavigate: typeof safeNavigateMock;
-} => ({
-	safeNavigate: safeNavigateMock,
-});

frontend/src/api/generated/services/dashboard/index.ts

@@ -21,10 +21,8 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
-	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
-	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -35,13 +33,7 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
-	LockDashboardV2PathParameters,
-	PatchDashboardV2200,
-	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
-	UnlockDashboardV2PathParameters,
-	UpdateDashboardV2200,
-	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -824,360 +816,3 @@ export const invalidateGetDashboardV2 = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.
- * @summary Patch dashboard (v2)
- */
-export const patchDashboardV2 = (
-	{ id }: PatchDashboardV2PathParameters,
-	dashboardtypesPatchableDashboardV2DTONull?: BodyType<DashboardtypesPatchableDashboardV2DTO | null> | null,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PatchDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesPatchableDashboardV2DTONull,
-		signal,
-	});
-};
-
-export const getPatchDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchDashboardV2>>
->;
-export type PatchDashboardV2MutationBody =
-	| BodyType<DashboardtypesPatchableDashboardV2DTO | null>
-	| undefined;
-export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Patch dashboard (v2)
- */
-export const usePatchDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
- * @summary Update dashboard (v2)
- */
-export const updateDashboardV2 = (
-	{ id }: UpdateDashboardV2PathParameters,
-	dashboardtypesUpdatableDashboardV2DTO?: BodyType<DashboardtypesUpdatableDashboardV2DTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesUpdatableDashboardV2DTO,
-		signal,
-	});
-};
-
-export const getUpdateDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateDashboardV2>>
->;
-export type UpdateDashboardV2MutationBody =
-	| BodyType<DashboardtypesUpdatableDashboardV2DTO>
-	| undefined;
-export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update dashboard (v2)
- */
-export const useUpdateDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Unlock dashboard (v2)
- */
-export const unlockDashboardV2 = (
-	{ id }: UnlockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getUnlockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['unlockDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		{ pathParams: UnlockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return unlockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UnlockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof unlockDashboardV2>>
->;
-
-export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Unlock dashboard (v2)
- */
-export const useUnlockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getUnlockDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Lock dashboard (v2)
- */
-export const lockDashboardV2 = (
-	{ id }: LockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'PUT',
-		signal,
-	});
-};
-
-export const getLockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['lockDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		{ pathParams: LockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return lockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type LockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof lockDashboardV2>>
->;
-
-export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Lock dashboard (v2)
- */
-export const useLockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getLockDashboardV2MutationOptions(options));
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -4653,32 +4653,6 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
-export enum DashboardtypesPatchOpDTO {
-	add = 'add',
-	remove = 'remove',
-	replace = 'replace',
-	move = 'move',
-	copy = 'copy',
-	test = 'test',
-}
-export interface DashboardtypesJSONPatchOperationDTO {
-	/**
-	 * @type string
-	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
-	 */
-	from?: string;
-	op: DashboardtypesPatchOpDTO;
-	/**
-	 * @type string
-	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-.
-	 */
-	path: string;
-	/**
-	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
-	 */
-	value?: unknown;
-}
-
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4688,13 +4662,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 }
-/**
- * @nullable
- */
-export type DashboardtypesPatchableDashboardV2DTO =
-	| DashboardtypesJSONPatchOperationDTO[]
-	| null;
-
 export interface DashboardtypesPostableDashboardV2DTO {
 	/**
 	 * @type boolean
@@ -4738,26 +4705,6 @@ export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/ClickHouseSQL' = 'signoz/ClickHouseSQL',
 	'signoz/TraceOperator' = 'signoz/TraceOperator',
 }
-export interface DashboardtypesUpdatableDashboardV2DTO {
-	/**
-	 * @type string
-	 */
-	image?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	schemaVersion: string;
-	spec: DashboardtypesDashboardSpecDTO;
-	/**
-	 * @type array,null
-	 */
-	tags: TagtypesPostableTagDTO[] | null;
-}
-
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9529,34 +9476,6 @@ export type GetDashboardV2200 = {
 	status: string;
 };
 
-export type PatchDashboardV2PathParameters = {
-	id: string;
-};
-export type PatchDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateDashboardV2PathParameters = {
-	id: string;
-};
-export type UpdateDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UnlockDashboardV2PathParameters = {
-	id: string;
-};
-export type LockDashboardV2PathParameters = {
-	id: string;
-};
 export type GetFeatures200 = {
 	/**
 	 * @type array

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

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -41,22 +41,14 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
-		border-radius: 0;
-		box-shadow: none;
 		outline: none;
-		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
+		&.ant-input:focus {
 			box-shadow: none;
-			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Card, Form } from 'antd';
+import { Card, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

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

@@ -3,12 +3,17 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 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(),
@@ -30,6 +35,7 @@ jest.mock('container/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;
@@ -44,7 +50,6 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -111,7 +116,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -144,7 +149,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -177,7 +182,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

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

@@ -2,11 +2,16 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 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(),
@@ -45,6 +50,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
+const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -114,7 +120,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -127,7 +133,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -144,7 +150,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

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

@@ -5,13 +5,18 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 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(),
@@ -48,6 +53,7 @@ Object.defineProperty(window, 'location', {
 	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;
@@ -119,7 +125,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -266,14 +266,6 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -299,21 +291,5 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
-
-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
-		}
 	}
 }

frontend/src/components/QueryBuilderV2/utils.ts

@@ -721,53 +721,6 @@ export const removeKeysFromExpression = (
 	return result?.text ?? '';
 };
 
-const escapeRegExp = (value: string): string =>
-	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-export const createVariablePlaceholderRegExp = (
-	variableName: string,
-): RegExp => {
-	const escapedName = escapeRegExp(variableName);
-	// (?![\w.]) prevents $env from matching inside $environment or $env.attr
-	return new RegExp(
-		`(\\$${escapedName}(?![\\w.])|\\{\\{\\s*\\.?${escapedName}\\s*\\}\\}|\\[\\[\\s*${escapedName}\\s*\\]\\])`,
-		'g',
-	);
-};
-
-const matchesVariablePlaceholder = (
-	text: string,
-	variableName: string,
-): boolean => createVariablePlaceholderRegExp(variableName).test(text);
-
-export const removeVariableFromExpression = (
-	expression: string | undefined,
-	variableName: string,
-): string => {
-	if (!expression) {
-		return '';
-	}
-
-	const queryPairs = extractQueryPairs(expression);
-
-	const keysToRemove = queryPairs
-		.filter((pair) => {
-			const singleValue = pair.value?.toString() ?? '';
-			const listValues = (pair.valueList ?? []).join(' ');
-			return (
-				matchesVariablePlaceholder(singleValue, variableName) ||
-				matchesVariablePlaceholder(listValues, variableName)
-			);
-		})
-		.map((pair) => pair.key);
-
-	if (keysToRemove.length === 0) {
-		return expression;
-	}
-
-	return removeKeysFromExpression(expression, keysToRemove, `$${variableName}`);
-};
-
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,23 +4,6 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
-
-	.search {
-		input {
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-			--input-font-size: 14px;
-			--input-border-color: var(--l1-border);
-			--input-focus-border-color: var(--primary-background);
-			--input-focus-outline-width: 0;
-			--input-focus-outline-offset: 0;
-		}
-	}
-
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Skeleton } from 'antd';
+import { Button, Input, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,6 +139,7 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
+jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,6 +24,8 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
+jest.mock('api/common/logEvent', () => jest.fn());
+
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -137,7 +139,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEventMock('Global Shortcut: Sidebar Toggle', {
+				logEvent('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -153,13 +155,10 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Global Shortcut: Sidebar Toggle',
-				{
-					previousState: false,
-					newState: true,
-				},
-			);
+			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
+				previousState: false,
+				newState: true,
+			});
 		});
 
 		it('should update user preference in context', async () => {

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select, Tooltip } from 'antd';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

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

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
+
 import './TimeInput.scss';
 
 export interface TimeInputProps {

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

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,10 +16,9 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Modal, Popover, Tooltip } from 'antd';
+import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -1,328 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
-
-// ---------------------------------------------------------------------------
-// Shared fixture helpers
-// ---------------------------------------------------------------------------
-
-const EMPTY_BUILDER = {
-	queryData: [] as any,
-	queryFormulas: [],
-	queryTraceOperator: [],
-};
-
-const BASE_WIDGET = {
-	opacity: '1',
-	nullZeroValues: 'null',
-	timePreferance: 'GLOBAL_TIME' as const,
-	softMin: null,
-	softMax: null,
-	selectedLogFields: null,
-	selectedTracesFields: null,
-};
-
-const DEFAULT_QUERY_DATA = {
-	queryName: 'q1',
-	// In QB v5, expression holds the query label (A/B/C), not a filter expression
-	expression: 'A',
-	dataSource: DataSource.METRICS,
-	functions: [],
-	groupBy: [],
-	filters: { items: [] as any[], op: 'AND' as const },
-	legend: '',
-	disabled: false,
-	having: [],
-	limit: null,
-	stepInterval: null,
-	orderBy: [],
-	selectColumns: [],
-	source: '' as const,
-};
-
-/**
- * Build a dashboard with a single builder widget.
- * Only supply the fields your test actually cares about.
- */
-const buildBuilderDashboard = (
-	filterExpression: string,
-	queryDataOverrides: Record<string, any> = {},
-): Dashboard => ({
-	id: 'dash1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'Widget 1',
-				description: '',
-				query: {
-					id: 'query1',
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					clickhouse_sql: [],
-					builder: {
-						queryData: [
-							{
-								...DEFAULT_QUERY_DATA,
-								...queryDataOverrides,
-								filter: { expression: filterExpression },
-							},
-						],
-						queryFormulas: [],
-						queryTraceOperator: [],
-					},
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildClickhouseDashboard = (query: string): Dashboard => ({
-	id: 'dash-ch',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'CH',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'w1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: '',
-				description: '',
-				query: {
-					id: 'q1',
-					queryType: EQueryType.CLICKHOUSE,
-					promql: [],
-					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildPromqlDashboard = (query: string): Dashboard => ({
-	id: 'dash-prom',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'PromQL Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-prom',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'PromQL Widget',
-				description: '',
-				query: {
-					id: 'query-prom',
-					queryType: EQueryType.PROM,
-					promql: [{ name: 'A', query, legend: '', disabled: false }],
-					clickhouse_sql: [],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
-const chQuery = (sql: string, varName: string): string => {
-	const result = removeVariableReferencesFromDashboard(
-		buildClickhouseDashboard(sql),
-		varName,
-	);
-	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
-};
-
-/** Extract the first builder queryData from a cleaned dashboard. */
-const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
-	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('removeVariableReferencesFromDashboard', () => {
-	describe('builder filter expression cleanup', () => {
-		it('removes a variable clause from filter.expression', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-
-		it('leaves no dangling AND/OR after removing a variable clause', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const { expression } = firstBuilderQueryData(result).filter;
-
-			expect(expression).toBe("env = 'prod'");
-			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
-			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
-		});
-
-		it('does not remove $environment clause when deleting $env', () => {
-			const dashboard = buildBuilderDashboard(
-				'env = $env AND deployment.environment = $environment',
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				'deployment.environment = $environment',
-			);
-		});
-
-		it('leaves literal filter expressions untouched when removing a variable', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-		});
-
-		it('removes only the variable clause, preserving a literal clause on the same key', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND service.name = 'api-gateway'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway'",
-			);
-		});
-
-		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
-			const dashboard = buildBuilderDashboard("env = 'prod'");
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-	});
-
-	describe('PromQL query cleanup', () => {
-		it('removes variable placeholder from a promql query', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
-				'service',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe(
-				'sum(rate(http_requests_total{}[5m]))',
-			);
-		});
-
-		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('up{env="$env", job="api"}'),
-				'env',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
-		});
-	});
-
-	describe('ClickHouse SQL query cleanup', () => {
-		it('removes a quoted variable clause and its WHERE keyword', () => {
-			expect(
-				chQuery(
-					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
-					'service',
-				),
-			).toBe('SELECT count() FROM signoz_logs');
-		});
-
-		it('removes a middle clause: AND env={{.env}} AND', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
-		});
-
-		it('removes the first clause: env={{.env}} AND rest', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE b=2');
-		});
-
-		it('removes the last clause: rest AND env=$env', () => {
-			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
-				'SELECT count() FROM t WHERE a=1',
-			);
-		});
-
-		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
-			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
-				'SELECT count() FROM t',
-			);
-		});
-
-		it('falls back to token-only strip for a bare variable in SELECT', () => {
-			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
-				'SELECT FROM table',
-			);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('is idempotent — calling twice produces the same result', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const twice = removeVariableReferencesFromDashboard(once, 'service');
-
-			expect(twice).toStrictEqual(once);
-		});
-
-		it('handles a dashboard with no widgets without throwing', () => {
-			const dashboard: Dashboard = {
-				id: 'dash-empty',
-				createdAt: '',
-				updatedAt: '',
-				createdBy: '',
-				updatedBy: '',
-				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
-			};
-
-			expect(() =>
-				removeVariableReferencesFromDashboard(dashboard, 'service'),
-			).not.toThrow();
-		});
-	});
-});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx

@@ -1,8 +1,6 @@
 import {
 	convertFiltersToExpressionWithExistingQuery,
-	createVariablePlaceholderRegExp,
 	removeKeysFromExpression,
-	removeVariableFromExpression,
 } from 'components/QueryBuilderV2/utils';
 import { cloneDeep, isArray, isEmpty } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -159,139 +157,6 @@ const updateAfterRemoval = (
 	};
 };
 
-const removeVariablePlaceholders = (
-	text: string | undefined,
-	variableName: string,
-): string => {
-	if (!text) {
-		return '';
-	}
-
-	const tokenPattern = createVariablePlaceholderRegExp(variableName);
-
-	// Step 1: attempt clause-aware removal for SQL WHERE patterns.
-	// Strips the entire `key op $var` unit plus its adjacent AND/OR so we
-	// never leave a dangling `key = ` in unquoted ClickHouse SQL clauses.
-	// Handles three shapes:
-	//   (a) preceding conjunction:  AND key = $var
-	//   (b) following conjunction:  key = $var AND
-	//   (c) standalone clause:      key = $var  (end of expression)
-	const escapedToken = tokenPattern.source;
-	const clausePattern = new RegExp(
-		// (a) conjunction before the clause
-		`\\s*\\b(?:AND|OR)\\b\\s+[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?` +
-			// (b)+(c) clause first, optional conjunction after
-			`|[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?(?:\\s*\\b(?:AND|OR)\\b)?`,
-		'gi',
-	);
-
-	const withClauseRemoval = text.replace(clausePattern, '');
-	if (withClauseRemoval !== text) {
-		return withClauseRemoval
-			.replace(/\s{2,}/g, ' ')
-			.replace(/\bWHERE\s*$/i, '')
-			.trim();
-	}
-
-	// Step 2: fallback — bare variable usage outside a key-op-value pattern
-	// (e.g. SELECT $metric, LIMIT $n). Token-only removal is correct here.
-	return text
-		.replace(tokenPattern, '')
-		.replace(/\s{2,}/g, ' ')
-		.trim();
-};
-
-const removeVariableReferencesFromQueryData = (
-	queryData: IBuilderQuery,
-	variableName: string,
-): IBuilderQuery => {
-	const updatedFilter = queryData.filter?.expression
-		? {
-				...queryData.filter,
-				expression: removeVariableFromExpression(
-					queryData.filter.expression,
-					variableName,
-				),
-			}
-		: queryData.filter;
-
-	return { ...queryData, filter: updatedFilter };
-};
-
-const removeVariableReferencesFromWidget = (
-	widget: Widgets,
-	variableName: string,
-): Widgets => {
-	let updatedWidget = { ...widget };
-
-	if (updatedWidget.query?.builder?.queryData) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				builder: {
-					...updatedWidget.query.builder,
-					queryData: updatedWidget.query.builder.queryData.map((queryData) =>
-						removeVariableReferencesFromQueryData(queryData, variableName),
-					),
-				},
-			},
-		};
-	}
-
-	if (updatedWidget.query?.promql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				promql: updatedWidget.query.promql.map((promqlQuery) => ({
-					...promqlQuery,
-					query: removeVariablePlaceholders(promqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	if (updatedWidget.query?.clickhouse_sql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				clickhouse_sql: updatedWidget.query.clickhouse_sql.map((sqlQuery) => ({
-					...sqlQuery,
-					query: removeVariablePlaceholders(sqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	return updatedWidget;
-};
-
-export const removeVariableReferencesFromDashboard = (
-	dashboard: Dashboard | undefined,
-	variableName: string,
-): Dashboard | undefined => {
-	if (!dashboard || !variableName) {
-		return dashboard;
-	}
-
-	const updatedDashboard = cloneDeep(dashboard);
-
-	if (updatedDashboard.data.widgets) {
-		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
-			(widget) => {
-				if ('query' in widget) {
-					return removeVariableReferencesFromWidget(widget as Widgets, variableName);
-				}
-				return widget;
-			},
-		);
-	}
-
-	return updatedDashboard;
-};
-
 /**
  * A function that takes a dashboard configuration and a list of tag filters
  * and returns an updated dashboard with the filters appended to widget queries.

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -18,11 +18,10 @@ import { convertVariablesToDbFormat } from 'container/DashboardContainer/Dashboa
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { toast } from '@signozhq/ui/sonner';
+import { useNotifications } from 'hooks/useNotifications';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -93,6 +92,8 @@ function VariablesSettings({
 	const { dashboardData, setDashboardData } = useDashboardStore();
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { notifications } = useNotifications();
+
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
 	const [existingVariableNamesMap, setExistingVariableNamesMap] = useState<
@@ -200,7 +201,9 @@ function VariablesSettings({
 				onSuccess: (updatedDashboard) => {
 					if (updatedDashboard.data) {
 						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
+						notifications.success({
+							message: t('variable_updated_successfully'),
+						});
 					}
 				},
 			},
@@ -253,11 +256,6 @@ function VariablesSettings({
 	};
 
 	const handleDeleteConfirm = (): void => {
-		if (!dashboardData || !variableToDelete.current) {
-			setDeleteVariableModal(false);
-			return;
-		}
-
 		const newVariablesArr = variablesTableData.filter(
 			(variable: IDashboardVariable) =>
 				variable.id !== variableToDelete?.current?.id,
@@ -265,31 +263,7 @@ function VariablesSettings({
 
 		const updatedVariables = convertVariablesToDbFormat(newVariablesArr);
 
-		const cleanedDashboard =
-			removeVariableReferencesFromDashboard(
-				dashboardData,
-				variableToDelete.current.name || '',
-			) || dashboardData;
-
-		updateMutation.mutateAsync(
-			{
-				id: dashboardData.id,
-
-				data: {
-					...cleanedDashboard.data,
-					variables: updatedVariables,
-				},
-			},
-			{
-				onSuccess: (updatedDashboard) => {
-					if (updatedDashboard.data) {
-						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
-					}
-				},
-			},
-		);
-
+		updateVariables(updatedVariables);
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -502,7 +476,6 @@ function VariablesSettings({
 				open={deleteVariableModal}
 				onOk={handleDeleteConfirm}
 				onCancel={handleDeleteCancel}
-				okButtonProps={{ loading: updateMutation.isLoading }}
 			>
 				<Typography.Text>
 					Are you sure you want to delete variable{' '}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,7 +1,8 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -46,7 +47,10 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -10,13 +10,17 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	enableDrillDown?: boolean;
 }
 

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,10 +1,16 @@
-import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
+const mockLogEvent = jest.fn();
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -78,7 +84,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,6 +22,7 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
+	Input,
 	Modal,
 	RefSelectProps,
 	Select,
@@ -29,7 +30,6 @@ import {
 } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, FormInstance, Input, Select } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -66,6 +67,20 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
+	const queryRangeCalledRef = useRef(false);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			if (!queryRangeCalledRef.current) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+		return (): void => clearTimeout(timeoutId);
+	}, [widget?.id]);
+
 	const {
 		minTime,
 		maxTime,
@@ -256,12 +271,14 @@ function GridCardGraph({
 						});
 					}
 				}
+				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
+				queryRangeCalledRef.current = true;
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -5,11 +5,9 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -23,7 +21,10 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,8 +6,7 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, Modal } from 'antd';
+import { Button, Form, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/GridValueComponent/types.ts

@@ -1,7 +1,8 @@
 import { UseQueryResult } from 'react-query';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { SuccessResponse } from 'types/api';
 import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -12,7 +13,10 @@ export type GridValueComponentProps = {
 	thresholds?: ThresholdProps[];
 	// Context menu related props
 	widget?: Widgets;
-	queryResponse?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	contextLinks?: ContextLinksData;
 	enableDrillDown?: boolean;
 };

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
+	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form } from 'antd';
+import { Button, Form, Input } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -89,7 +89,7 @@ export function AlertsEmptyState({
 									onClick={onClickNewAlertHandler}
 									disabled={!addNewAlert}
 									loading={loading}
-									testId="add-alert"
+									data-testid="add-alert"
 								>
 									<span className={styles.buttonContent}>
 										<Plus size="md" />
@@ -97,12 +97,7 @@ export function AlertsEmptyState({
 									</span>
 								</Button>
 								{onRefresh && (
-									<Button
-										onClick={onRefresh}
-										prefix={<RefreshCw />}
-										color="secondary"
-										testId="list-alerts-empty-refresh-button"
-									>
+									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
 										Refresh
 									</Button>
 								)}

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.actions.test.tsx

@@ -1,215 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { findAlertRow, renderListAlertRules } from './_helpers';
-
-async function openActionsMenu(row: HTMLElement): Promise<void> {
-	const trigger = row.querySelector(
-		'[data-testid="alert-actions"]',
-	) as HTMLElement | null;
-	expect(trigger).not.toBeNull();
-	const user = userEvent.setup({ delay: null });
-	await user.click(trigger as HTMLElement);
-	// Radix renders the menu items in a portal once the trigger is activated.
-	await screen.findByRole('menu');
-}
-
-async function clickMenuItem(label: string): Promise<void> {
-	const user = userEvent.setup({ delay: null });
-	const item = await screen.findByRole('menuitem', { name: label });
-	await user.click(item);
-}
-
-describe('ListAlertRules — actions menu', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders Enable/Disable/Edit/Edit in New Tab/Clone/Delete items after opening the menu', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-
-		expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-
-		await openActionsMenu(row);
-
-		const items = screen.getAllByRole('menuitem');
-		const labels = items.map((it) => it.textContent);
-		expect(labels).toStrictEqual(
-			expect.arrayContaining([
-				'Edit',
-				'Edit in New Tab',
-				'Clone',
-				'Delete',
-				'Disable',
-			]),
-		);
-	});
-
-	it('disabled rule (rule-4) shows "Enable" instead of "Disable"', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('Disabled Alert');
-		await openActionsMenu(row);
-
-		const items = screen.getAllByRole('menuitem');
-		const labels = items.map((it) => it.textContent);
-		expect(labels).toContain('Enable');
-		expect(labels).not.toContain('Disable');
-	});
-
-	it('toggle action: clicking Disable sends PATCH with disabled:true', async () => {
-		let capturedBody: unknown = null;
-		let capturedPath: string | null = null;
-		server.use(
-			rest.patch('http://localhost/api/v2/rules/:id', async (req, res, ctx) => {
-				capturedBody = await req.json();
-				capturedPath = req.params.id as string;
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Disable');
-
-		await waitFor(() => {
-			expect(capturedBody).toStrictEqual(
-				expect.objectContaining({ disabled: true }),
-			);
-		});
-		expect(capturedPath).toBe('rule-1');
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('edit action: clicking Edit navigates via safeNavigate and logs event', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Edit');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock.mock.calls[0][0]).toContain('ruleId=rule-1');
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Edit', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('edit in new tab action: clicking opens with newTab:true', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Edit in New Tab');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		const [url, options] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('ruleId=rule-1');
-		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
-	});
-
-	it('clone action: sends POST with " - Copy" suffix and opens the cloned rule returned by the API', async () => {
-		let capturedPostBody: unknown = null;
-		server.use(
-			rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
-				capturedPostBody = await req.json();
-				return res(
-					ctx.status(201),
-					ctx.json({
-						data: {
-							...(capturedPostBody as Record<string, unknown>),
-							id: 'cloned-from-server',
-						},
-						status: 'success',
-					}),
-				);
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Clone');
-
-		await waitFor(() => {
-			expect(capturedPostBody).toStrictEqual(
-				expect.objectContaining({ alert: 'High CPU Alert - Copy' }),
-			);
-		});
-
-		// The id from the server response round-trips into the navigate URL — this
-		// protects against a regression where the code hardcodes the id.
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock.mock.calls[0][0]).toContain(
-			'ruleId=cloned-from-server',
-		);
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Clone', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('delete action: sends DELETE for the rule id', async () => {
-		let deletedId: string | null = null;
-		server.use(
-			rest.delete('http://localhost/api/v2/rules/:id', (req, res, ctx) => {
-				deletedId = req.params.id as string;
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Delete');
-
-		await waitFor(() => {
-			expect(deletedId).toBe('rule-1');
-		});
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Delete', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('error path: PATCH is still attempted when server returns 500', async () => {
-		let patchAttempted = false;
-		server.use(
-			rest.patch('http://localhost/api/v2/rules/:id', (_, res, ctx) => {
-				patchAttempted = true;
-				return res(ctx.status(500), ctx.json({ status: 'error' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Disable');
-
-		await waitFor(() => {
-			expect(patchAttempted).toBe(true);
-		});
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.columns.test.tsx

@@ -1,79 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-const COLUMN_STORAGE_KEY = '@signoz/table-columns/alert-rules-columns';
-
-describe('ListAlertRules — columns selector', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		localStorage.clear();
-	});
-
-	it('opens columns popover and lists toggleable columns', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByTestId('alert-columns-button'));
-
-		// Popover should reveal "Toggle Columns" heading + per-column labels.
-		await screen.findByText('Toggle Columns');
-		expect(screen.getByText('Created At')).toBeInTheDocument();
-		expect(screen.getByText('Created By')).toBeInTheDocument();
-		expect(screen.getByText('Updated At')).toBeInTheDocument();
-		expect(screen.getByText('Updated By')).toBeInTheDocument();
-	});
-
-	it('default-hidden columns (Created At/By, Updated At/By) are not in the table header', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const headers = document.querySelectorAll('th');
-		const headerTexts = Array.from(headers).map((h) => h.textContent || '');
-		expect(headerTexts.some((t) => t.includes('Created At'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Created By'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Updated At'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Updated By'))).toBe(false);
-	});
-
-	it('toggling Created At on writes to localStorage and adds the header', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const headersBefore = Array.from(document.querySelectorAll('th')).map(
-			(h) => h.textContent ?? '',
-		);
-		expect(headersBefore.some((t) => t.includes('Created At'))).toBe(false);
-
-		await user.click(screen.getByTestId('alert-columns-button'));
-		await screen.findByText('Toggle Columns');
-
-		const checkbox = document.getElementById('col-createdAt');
-		expect(checkbox).not.toBeNull();
-		await user.click(checkbox as HTMLElement);
-
-		await waitFor(() => {
-			const stored = window.localStorage.getItem(COLUMN_STORAGE_KEY);
-			expect(stored).not.toBeNull();
-			const parsed = JSON.parse(stored as string);
-			expect(parsed.hiddenColumnIds).not.toContain('createdAt');
-		});
-
-		await waitFor(() => {
-			const headersAfter = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headersAfter.some((t) => t.includes('Created At'))).toBe(true);
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.empty.test.tsx

@@ -1,91 +0,0 @@
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — empty states', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders AlertsEmptyState when API returns no rules', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
-			),
-		);
-
-		renderListAlertRules();
-
-		await screen.findByText('No Alert rules yet.');
-		expect(
-			screen.getByText('Create an Alert Rule to get started'),
-		).toBeInTheDocument();
-
-		// New Alert Rule button is visible and triggers safeNavigate to ALERTS_NEW.
-		await user.click(screen.getByTestId('add-alert'));
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: false }),
-		);
-	});
-
-	it('renders ErrorEmptyState when API returns 500; refresh triggers a refetch', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		let callCount = 0;
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) => {
-				callCount += 1;
-				if (callCount === 1) {
-					return res(ctx.status(500), ctx.json({ status: 'error' }));
-				}
-				return res(
-					ctx.status(200),
-					ctx.json({ data: alertRulesFixture, status: 'success' }),
-				);
-			}),
-		);
-
-		renderListAlertRules();
-
-		await screen.findByTestId('error-empty-state');
-
-		await user.click(screen.getByTestId('error-refresh-button'));
-
-		const rule = await screen.findByText('High CPU Alert');
-		expect(rule).toBeInTheDocument();
-	});
-
-	it('renders NoResultsEmptyState when search yields no match; Clear Search resets', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const searchInput = screen.getByTestId('list-alerts-search-input');
-		await user.clear(searchInput);
-		await user.type(searchInput, 'totally-not-found');
-
-		await screen.findByTestId('no-results-empty-state');
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'No matching alert rules',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'No alert rules match your search. Try adjusting your search criteria.',
-		);
-
-		await user.click(screen.getByTestId('no-results-clear-button'));
-
-		const rule = await screen.findByText('High CPU Alert');
-		expect(rule).toBeInTheDocument();
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.list.test.tsx

@@ -1,123 +0,0 @@
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — list rendering', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders alert rules from API', async () => {
-		renderListAlertRules();
-
-		await expect(
-			screen.findByTestId('alert-row-rule-1-name'),
-		).resolves.toHaveTextContent('High CPU Alert');
-		expect(screen.getByTestId('alert-row-rule-2-name')).toHaveTextContent(
-			'Memory Pending Alert',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-name')).toHaveTextContent(
-			'Healthy Alert',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-name')).toHaveTextContent(
-			'Disabled Alert',
-		);
-	});
-
-	it('renders state badges via STATE_CONFIG mapping', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveTextContent(
-			'Firing',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveTextContent(
-			'Pending',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveTextContent('OK');
-		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveTextContent(
-			'Disabled',
-		);
-		expect(screen.getByTestId('alert-row-rule-5-state')).toHaveTextContent('OK');
-	});
-
-	it('renders state badges with semantic colors', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveAttribute(
-			'data-color',
-			'cherry',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveAttribute(
-			'data-color',
-			'amber',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveAttribute(
-			'data-color',
-			'forest',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveAttribute(
-			'data-color',
-			'vanilla',
-		);
-	});
-
-	it('renders severity badges for rules with severity', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-severity')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveTextContent(
-			'critical',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveTextContent(
-			'warning',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-severity')).toHaveTextContent(
-			'info',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-severity')).toHaveTextContent(
-			'critical',
-		);
-		expect(screen.getByTestId('alert-row-rule-5-severity')).toHaveTextContent(
-			'-',
-		);
-		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveAttribute(
-			'data-color',
-			'cherry',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveAttribute(
-			'data-color',
-			'amber',
-		);
-	});
-
-	it('renders header controls (search, columns, new alert)', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-name')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('list-alerts-search-input')).toBeInTheDocument();
-		expect(
-			screen.getByPlaceholderText('Search by Alert Name, Severity and Labels'),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('alert-columns-button')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.newAlert.test.tsx

@@ -1,65 +0,0 @@
-import { logEventMock } from '__tests__/logEventMock';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — new alert button', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('plain click navigates to ALERTS_NEW with newTab:false', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: false }),
-		);
-	});
-
-	it('logs Alert: New alert button clicked', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-
-		await waitFor(() => {
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Alert: New alert button clicked',
-				expect.objectContaining({ layout: 'new' }),
-			);
-		});
-	});
-
-	it('ctrl+click on New Alert opens in a new tab (newTab:true)', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.keyboard('{Control>}');
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-		await user.keyboard('{/Control}');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: true }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.pagination.test.tsx

@@ -1,64 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { alertRulesPaginationFixture } from 'mocks-server/__mockdata__/alert_rules';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen, waitFor } from 'tests/test-utils';
-import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — pagination', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({ data: alertRulesPaginationFixture, status: 'success' }),
-				),
-			),
-		);
-	});
-
-	it('shows first 10 rows on page 1 (default limit)', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		for (let i = 0; i < 10; i += 1) {
-			expect(screen.getByText(`Pag Rule ${i}`)).toBeInTheDocument();
-		}
-		expect(screen.queryByText('Pag Rule 10')).not.toBeInTheDocument();
-		expect(screen.queryByText('Pag Rule 14')).not.toBeInTheDocument();
-	});
-
-	it('shows total count when showTotalCount is enabled', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		const totalCount = await screen.findByTestId('pagination-total-count');
-		expect(totalCount.textContent).toContain('Showing');
-		expect(totalCount.textContent).toContain('of 15');
-	});
-
-	it('navigates to page 2 and shows remaining rows', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		const nextBtn = screen.getByLabelText('Go to next page');
-		await user.click(nextBtn);
-
-		await waitFor(() => {
-			expect(screen.getByText('Pag Rule 10')).toBeInTheDocument();
-			expect(screen.getByText('Pag Rule 14')).toBeInTheDocument();
-			expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
-		});
-
-		await waitFor(() => {
-			expect(getCurrentNuqsQueryString()).toContain('page=2');
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.permissions.test.tsx

@@ -1,71 +0,0 @@
-import { screen, waitFor } from 'tests/test-utils';
-import { USER_ROLES } from 'types/roles';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — permissions', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('VIEWER role hides "New Alert" button and "Actions" column', async () => {
-		renderListAlertRules({ role: USER_ROLES.VIEWER });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.queryByTestId('list-alerts-new-alert-button'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /new alert/i }),
-		).not.toBeInTheDocument();
-
-		const headers = Array.from(document.querySelectorAll('th')).map(
-			(h) => h.textContent ?? '',
-		);
-		expect(headers.some((t) => t.includes('Actions'))).toBe(false);
-		expect(screen.queryByTestId('alert-actions')).not.toBeInTheDocument();
-	});
-
-	it('ADMIN role shows "New Alert" button and "Actions" column', async () => {
-		renderListAlertRules({ role: USER_ROLES.ADMIN });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-
-		await waitFor(() => {
-			const headers = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
-		});
-		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
-	});
-
-	it('EDITOR role behaves like ADMIN (New Alert + Actions visible)', async () => {
-		renderListAlertRules({ role: USER_ROLES.EDITOR });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-
-		await waitFor(() => {
-			const headers = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
-		});
-		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -1,52 +0,0 @@
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — row click navigation', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('clicking a row calls safeNavigate to alerts/overview with composite query + ruleId', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		const ruleCell = await screen.findByText('High CPU Alert');
-
-		const td = ruleCell.closest('td');
-		expect(td).not.toBeNull();
-		await user.click(td as HTMLElement);
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-
-		const [url] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('/alerts/overview?');
-		expect(url).toContain('ruleId=rule-1');
-		expect(url).toContain('panelTypes=graph');
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('ctrl+click on a row navigates with newTab option', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		const ruleCell = await screen.findByText('High CPU Alert');
-
-		const td = ruleCell.closest('td');
-		await user.keyboard('{Control>}');
-		await user.click(td as HTMLElement);
-		await user.keyboard('{/Control}');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-
-		const [url, options] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('ruleId=rule-1');
-		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.search.test.tsx

@@ -1,99 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
-
-import { renderListAlertRules } from './_helpers';
-
-function getSearchInput(): HTMLInputElement {
-	return screen.getByTestId('list-alerts-search-input') as HTMLInputElement;
-}
-
-describe('ListAlertRules — search', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('filters rows by alert name with debounce', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
-
-		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
-		});
-	});
-
-	it('filters rows by label values (severity)', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'warning');
-
-		await waitFor(() => {
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
-		});
-	});
-
-	it('restores all rows when search is cleared', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
-
-		await waitFor(() => {
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
-		});
-
-		await user.clear(getSearchInput());
-
-		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.getByText('Healthy Alert')).toBeInTheDocument();
-		});
-	});
-
-	it('shows no-results state when no match', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'zzzzzz-no-match');
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
-			expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-				'No matching alert rules',
-			);
-		});
-	});
-
-	it('resets page to 1 when search debounce fires', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules({ initialRoute: '/?page=2' });
-
-		// Page 2 of the 4-rule fixture has no rows; we only need the search input
-		// to be mounted, which happens before data is fetched.
-		const input = await screen.findByTestId('list-alerts-search-input');
-		await user.clear(input);
-		await user.type(input, 'CPU');
-
-		await waitFor(() => {
-			expect(getCurrentNuqsQueryString()).not.toContain('page=2');
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.utils.test.ts

@@ -1,232 +0,0 @@
-import { logEventMock } from '__tests__/logEventMock';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertRule } from '../types';
-import {
-	ALERT_ACTIONS,
-	alertActionLogEvent,
-	filterRulesByFilters,
-	getAlertSortValue,
-	sortRules,
-} from '../utils';
-
-const baseRule = {
-	id: 'r1',
-	alert: 'Rule 1',
-	alertType: 'METRIC_BASED_ALERT',
-	state: 'inactive',
-	labels: { severity: 'info' },
-	condition: {},
-	createdAt: '2023-10-15T10:00:00Z',
-	updatedAt: '2023-10-19T10:00:00Z',
-} as unknown as AlertRule;
-
-const makeRule = (overrides: Partial<AlertRule>): AlertRule => ({
-	...baseRule,
-	...overrides,
-});
-
-describe('getAlertSortValue', () => {
-	it('returns state for "state"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: RuletypesAlertStateDTO.firing }),
-				'state',
-			),
-		).toBe('firing');
-	});
-
-	it('returns alert name for "name"', () => {
-		expect(getAlertSortValue(makeRule({ alert: 'My Rule' }), 'name')).toBe(
-			'My Rule',
-		);
-	});
-
-	it('returns severity label for "severity"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ labels: { severity: 'critical' } }),
-				'severity',
-			),
-		).toBe('critical');
-	});
-
-	it('returns createdAt as ms', () => {
-		const rule = makeRule({ createdAt: '2023-10-15T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'createdAt');
-		expect(result).toBe(new Date('2023-10-15T10:00:00Z').getTime());
-	});
-
-	it('returns updatedAt as ms', () => {
-		const rule = makeRule({ updatedAt: '2023-10-19T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'updatedAt');
-		expect(result).toBe(new Date('2023-10-19T10:00:00Z').getTime());
-	});
-
-	it('returns 0 when createdAt missing', () => {
-		expect(
-			getAlertSortValue(makeRule({ createdAt: undefined }), 'createdAt'),
-		).toBe(0);
-	});
-
-	it('returns empty for unknown column', () => {
-		expect(getAlertSortValue(baseRule, 'xxx')).toBe('');
-	});
-
-	it('returns empty for missing fields', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'state',
-			),
-		).toBe('');
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'severity',
-			),
-		).toBe('');
-	});
-});
-
-describe('sortRules', () => {
-	const r1 = makeRule({ id: '1', alert: 'A' });
-	const r2 = makeRule({ id: '2', alert: 'B' });
-	const r3 = makeRule({ id: '3', alert: 'C' });
-
-	it('sorts ascending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortRules([r3, r1, r2], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['A', 'B', 'C']);
-	});
-
-	it('sorts descending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'desc' };
-		const result = sortRules([r1, r2, r3], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'B', 'A']);
-	});
-
-	it('returns unsorted when orderBy is null', () => {
-		const result = sortRules([r3, r1, r2], null);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'A', 'B']);
-	});
-});
-
-describe('filterRulesByFilters', () => {
-	const r1 = makeRule({
-		id: '1',
-		alert: 'R1',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'critical' },
-	});
-	const r2 = makeRule({
-		id: '2',
-		alert: 'R2',
-		state: RuletypesAlertStateDTO.inactive,
-		labels: { severity: 'warning' },
-	});
-	const r3 = makeRule({
-		id: '3',
-		alert: 'R3',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'warning' },
-	});
-	const rules = [r1, r2, r3];
-
-	it('returns input when filters empty', () => {
-		expect(filterRulesByFilters(rules, [])).toStrictEqual(rules);
-	});
-
-	it('filters by state', () => {
-		const result = filterRulesByFilters(rules, ['state:firing']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
-	});
-
-	it('filters by severity', () => {
-		const result = filterRulesByFilters(rules, ['severity:warning']);
-		expect(result.map((r) => r.id)).toStrictEqual(['2', '3']);
-	});
-
-	it('combines state AND severity', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'severity:warning',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['3']);
-	});
-
-	it('OR within same key (state)', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'state:inactive',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '2', '3']);
-	});
-
-	it('matches values case-insensitively', () => {
-		const result = filterRulesByFilters(rules, ['state:FIRING']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
-	});
-
-	it('ignores prefixes with wrong case (state: is required lowercase)', () => {
-		const result = filterRulesByFilters(rules, ['STATE:FIRING']);
-		expect(result).toStrictEqual(rules);
-	});
-
-	it('returns empty when no rule matches', () => {
-		expect(filterRulesByFilters(rules, ['state:nonexistent'])).toStrictEqual([]);
-	});
-
-	it('ignores unknown prefix', () => {
-		expect(filterRulesByFilters(rules, ['foo:bar'])).toStrictEqual(rules);
-	});
-});
-
-describe('alertActionLogEvent', () => {
-	it('logs with mapped action label', () => {
-		const rule = makeRule({
-			id: 'rule-1',
-			alert: 'My Rule',
-			alertType: 'METRIC_BASED_ALERT' as AlertRule['alertType'],
-		});
-		alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
-		expect(logEventMock).toHaveBeenCalledWith('Alert: Action', {
-			ruleId: 'rule-1',
-			dataSource: expect.any(String),
-			name: 'My Rule',
-			action: 'Edit',
-		});
-	});
-
-	it('falls back to raw action when unmapped', () => {
-		alertActionLogEvent('custom', baseRule);
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'custom' }),
-		);
-	});
-
-	it('maps TOGGLE action', () => {
-		alertActionLogEvent(ALERT_ACTIONS.TOGGLE, baseRule);
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable' }),
-		);
-	});
-
-	it('maps DELETE and CLONE', () => {
-		alertActionLogEvent(ALERT_ACTIONS.DELETE, baseRule);
-		alertActionLogEvent(ALERT_ACTIONS.CLONE, baseRule);
-		expect(logEventMock).toHaveBeenNthCalledWith(
-			1,
-			'Alert: Action',
-			expect.objectContaining({ action: 'Delete' }),
-		);
-		expect(logEventMock).toHaveBeenNthCalledWith(
-			2,
-			'Alert: Action',
-			expect.objectContaining({ action: 'Clone' }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/_helpers.tsx

@@ -1,65 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, RenderResult, screen } from '@testing-library/react';
-import ListAlertRules from 'container/ListAlertRules';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { AppContext } from 'providers/App/App';
-import TimezoneProvider from 'providers/Timezone';
-import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
-import { getAppContextMock } from 'tests/test-utils';
-
-interface RenderOptions {
-	role?: string;
-	initialRoute?: string;
-}
-
-export function renderListAlertRules(
-	options: RenderOptions = {},
-): RenderResult {
-	const { role = 'ADMIN', initialRoute = '/' } = options;
-
-	const initialSearch = initialRoute.includes('?')
-		? initialRoute.slice(initialRoute.indexOf('?'))
-		: '';
-	resetNuqsState(initialSearch);
-
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: false },
-			mutations: { retry: false },
-		},
-	});
-
-	return render(
-		<MemoryRouter initialEntries={[initialRoute]}>
-			<NuqsTestingAdapter
-				searchParams={initialSearch}
-				onUrlUpdate={onNuqsUrlUpdate}
-				rateLimitFactor={0}
-				hasMemory
-			>
-				<QueryClientProvider client={queryClient}>
-					<AppContext.Provider value={getAppContextMock(role)}>
-						<TimezoneProvider>
-							<VirtuosoMockContext.Provider
-								value={{ viewportHeight: 800, itemHeight: 46 }}
-							>
-								<ListAlertRules />
-							</VirtuosoMockContext.Provider>
-						</TimezoneProvider>
-					</AppContext.Provider>
-				</QueryClientProvider>
-			</NuqsTestingAdapter>
-		</MemoryRouter>,
-	);
-}
-
-export async function findAlertRow(alertName: string): Promise<HTMLElement> {
-	const cell = await screen.findByText(alertName, {}, { timeout: 5000 });
-	const row = cell.closest('tr');
-	if (!row) {
-		throw new Error(`Row not found for alert "${alertName}"`);
-	}
-	return row as HTMLElement;
-}

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -47,7 +47,6 @@ function ColumnSelector<TData>({
 					size="sm"
 					color="secondary"
 					prefix={<Columns3 size={14} />}
-					data-testid="alert-columns-button"
 				>
 					Columns
 				</Button>

frontend/src/container/ListAlertRules/index.tsx

@@ -136,7 +136,6 @@ function ListAlertRules(): JSX.Element {
 								prefix={<Plus size={14} />}
 								onClick={handleNewAlert}
 								color="primary"
-								testId="list-alerts-new-alert-button"
 							>
 								New Alert
 							</Button>
@@ -158,7 +157,6 @@ function ListAlertRules(): JSX.Element {
 						value={searchText}
 						onChange={handleSearchChange}
 						suffix={<Search size={14} className={styles.searchIcon} />}
-						testId="list-alerts-search-input"
 					/>
 				</div>
 			)}

frontend/src/container/ListAlertRules/table.config.tsx

@@ -26,18 +26,14 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => {
+			cell: ({ value }): JSX.Element => {
 				const state = String(value ?? '').toLowerCase();
 				const config = STATE_CONFIG[state] ?? {
 					color: 'secondary' as BadgeColor,
 					label: 'Unknown',
 				};
 				return (
-					<Badge
-						color={config.color}
-						variant="outline"
-						testId={`alert-row-${row.id ?? ''}-state`}
-					>
+					<Badge color={config.color} variant="outline">
 						{config.label}
 					</Badge>
 				);
@@ -51,11 +47,8 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => (
-				<TanStackTable.Text
-					title={value}
-					data-testid={`alert-row-${row.id ?? ''}-name`}
-				>
+			cell: ({ value }): JSX.Element => (
+				<TanStackTable.Text title={value}>
 					{String(value ?? '-')}
 				</TanStackTable.Text>
 			),
@@ -67,20 +60,15 @@ export function getAlertRuleColumns(
 			width: { fixed: '120px' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => {
+			cell: ({ value }): JSX.Element => {
 				const severity = String(value ?? '').toLowerCase();
 				if (!severity) {
-					return (
-						<TanStackTable.Text data-testid={`alert-row-${row.id ?? ''}-severity`}>
-							-
-						</TanStackTable.Text>
-					);
+					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
 				return (
 					<Badge
 						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
 						variant="outline"
-						testId={`alert-row-${row.id ?? ''}-severity`}
 					>
 						{severity}
 					</Badge>

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
+import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,9 +12,17 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex, Modal, Popover, Skeleton, Table, Tooltip } from 'antd';
+import {
+	Button,
+	Flex,
+	Input,
+	Modal,
+	Popover,
+	Skeleton,
+	Table,
+	Tooltip,
+} from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
@@ -232,7 +240,7 @@ function DashboardsList(): JSX.Element {
 		isLocked: !!e.locked || false,
 		lastUpdatedBy: e.updatedBy,
 		image: e.data.image || Base64Icons[0],
-		variables: e.data.variables ?? {},
+		variables: e.data.variables,
 		widgets: e.data.widgets,
 		layout: e.data.layout,
 		panelMap: e.data.panelMap,

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,9 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';

frontend/src/container/LogsExplorerViews/index.tsx

@@ -10,7 +10,7 @@ import {
 	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import getFromLocalstorage from 'api/browser/localstorage/get';
 import setToLocalstorage from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -42,6 +42,7 @@ import useUrlQueryData from 'hooks/useUrlQueryData';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -76,6 +77,7 @@ function LogsExplorerViewsContainer({
 	handleChangeSelectedView: ChangeViewFunctionType;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
+	const dispatch = useDispatch();
 
 	const [showFrequencyChart, setShowFrequencyChart] = useState(
 		() => getFromLocalstorage(LOCALSTORAGE.SHOW_FREQUENCY_CHART) === 'true',
@@ -88,9 +90,10 @@ function LogsExplorerViewsContainer({
 		DEFAULT_PER_PAGE_VALUE,
 	);
 
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, selectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const currentMinTimeRef = useRef<number>(minTime);
 
@@ -326,6 +329,16 @@ function LogsExplorerViewsContainer({
 			currentMinTimeRef.current !== minTime ||
 			orderByChanged
 		) {
+			// Recalculate global time when query changes i.e. stage and run query clicked
+			if (
+				!!requestData?.id &&
+				stagedQuery?.id &&
+				requestData?.id !== stagedQuery?.id &&
+				selectedTime !== 'custom'
+			) {
+				dispatch(UpdateTimeInterval(selectedTime));
+			}
+
 			const newRequestData = getRequestData(stagedQuery, {
 				filters: listQuery?.filters || initialFilters,
 				filter: listQuery?.filter || { expression: '' },
@@ -347,6 +360,8 @@ function LogsExplorerViewsContainer({
 		minTime,
 		activeLogId,
 		selectedPanelType,
+		dispatch,
+		selectedTime,
 		maxTime,
 		orderBy,
 	]);

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

@@ -108,21 +108,13 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => {
-	const { useQueryBuilder } = jest.requireActual(
-		'hooks/queryBuilder/useQueryBuilder',
-	);
-	const { useSyncTimeOnStagedQueryChange } = jest.requireActual(
-		'hooks/queryBuilder/useSyncTimeOnStagedQueryChange',
-	);
-
-	return function MockDateTimeSelection(): JSX.Element {
-		const { stagedQuery } = useQueryBuilder();
-		useSyncTimeOnStagedQueryChange(stagedQuery?.id);
-		return <div>MockDateTimeSelection</div>;
-	};
-});
-
+jest.mock(
+	'container/TopNav/DateTimeSelectionV2/index.tsx',
+	() =>
+		function MockDateTimeSelection(): JSX.Element {
+			return <div>MockDateTimeSelection</div>;
+		},
+);
 jest.mock(
 	'container/LogsExplorerChart',
 	() =>

frontend/src/container/LogsFilters/index.tsx

@@ -2,8 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Col } from 'antd';
+import { Col, Input } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,8 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select } from 'antd';
+import { Button, Input, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MCPServerSettings/MCPServerSettings.test.tsx

@@ -1,8 +1,8 @@
-import { logEventMock } from '__tests__/logEventMock';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import MCPServerSettings from './MCPServerSettings';
 
+const mockLogEvent = jest.fn();
 const mockCopyToClipboard = jest.fn();
 const mockHistoryPush = jest.fn();
 const mockUseGetGlobalConfig = jest.fn();
@@ -11,6 +11,11 @@ const mockUseGetTenantLicense = jest.fn();
 const mockToastSuccess = jest.fn();
 const mockToastWarning = jest.fn();
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
 jest.mock('api/generated/services/global', () => ({
 	useGetGlobalConfig: (...args: unknown[]): unknown =>
 		mockUseGetGlobalConfig(...args),
@@ -143,7 +148,7 @@ describe('MCPServerSettings', () => {
 
 		render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
 
-		expect(logEventMock).toHaveBeenCalledWith('MCP Settings: Page viewed', {
+		expect(mockLogEvent).toHaveBeenCalledWith('MCP Settings: Page viewed', {
 			role: 'ADMIN',
 		});
 	});

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,7 +1,6 @@
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
-// supports the `onWheel` handler (used to blur on scroll for number inputs).
-import { Input, Select } from 'antd';
+import { Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Input } from '@signozhq/ui/input';
-import { Button, Collapse, Select, Spin } from 'antd';
+import { Button, Collapse, Input, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

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

@@ -1,6 +1,5 @@
 import userEvent from '@testing-library/user-event';
 import MySettingsContainer from 'container/MySettings';
-import { logEventMock } from '__tests__/logEventMock';
 import {
 	act,
 	fireEvent,
@@ -13,6 +12,7 @@ import APIError from 'types/api/error';
 import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
+const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
 const updateMyPasswordFn = jest.fn();
@@ -62,6 +62,11 @@ jest.mock('hooks/useDarkMode', () => ({
 	})),
 }));
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn((eventName, data) => logEventFunction(eventName, data)),
+}));
+
 const errorNotification = jest.fn();
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
@@ -130,7 +135,7 @@ describe('MySettings Flows', () => {
 
 			await waitFor(() => {
 				expect(toggleThemeFunction).toHaveBeenCalled();
-				expect(logEventMock).toHaveBeenCalledWith(
+				expect(logEventFunction).toHaveBeenCalledWith(
 					'Account Settings: Theme Changed',
 					{
 						theme: 'light',

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,8 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Tooltip } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
 import {
 	DropdownMenu,
 	DropdownMenuContent,

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -28,8 +28,9 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import { UpdateTimeInterval } from 'store/actions';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 function WidgetGraph({
@@ -201,7 +202,10 @@ function WidgetGraph({
 
 interface WidgetGraphProps {
 	selectedWidget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	enableDrillDown?: boolean;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/util.ts

@@ -1,12 +1,11 @@
-import { QueryRangeRequestV5 } from 'api/v5/v5';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Column, QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function populateMultipleResults(
-	responseData: SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5>,
-): SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5> {
+	responseData: SuccessResponse<MetricRangePayloadProps, unknown>,
+): SuccessResponse<MetricRangePayloadProps, unknown> {
 	const queryResults = responseData?.payload?.data?.newResult?.data?.result;
 	const allFormattedResults: QueryData[] = [];
 
@@ -67,19 +66,17 @@ export function populateMultipleResults(
 	}
 
 	// Create a copy instead of mutating the original
-	const updatedResponseData: SuccessResponse<
-		MetricRangePayloadProps,
-		QueryRangeRequestV5
-	> = {
-		...responseData,
-		payload: {
-			...responseData.payload,
-			data: {
-				...responseData.payload.data,
-				result: allFormattedResults,
+	const updatedResponseData: SuccessResponse<MetricRangePayloadProps, unknown> =
+		{
+			...responseData,
+			payload: {
+				...responseData.payload,
+				data: {
+					...responseData.payload.data,
+					result: allFormattedResults,
+				},
 			},
-		},
-	};
+		};
 
 	return updatedResponseData;
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
-// supports the `spellCheck` prop on the URL input below.
-import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
+import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/NewWidget/index.tsx

@@ -52,6 +52,7 @@ import {
 	getSelectedWidgetIndex,
 } from 'providers/Dashboard/util';
 import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
 	ContextLinksData,
@@ -60,7 +61,7 @@ import {
 } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { IField } from 'types/api/logs/fields';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -397,7 +398,7 @@ function NewWidget({
 
 	// State to hold query response for sharing between left and right containers
 	const [queryResponse, setQueryResponse] = useState<
-		UseQueryResult<MetricQueryRangeSuccessResponse, Error>
+		UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
 	>(null as any);
 
 	// request data should be handled by the parent and the child components should consume the same

frontend/src/container/NewWidget/types.ts

@@ -2,8 +2,9 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { SuccessResponse, Warning } from 'types/api';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { timePreferance } from './RightContainer/timeItems';
 
@@ -28,7 +29,9 @@ export interface WidgetGraphProps {
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	isLoadingPanelData: boolean;
 	setQueryResponse?: Dispatch<
-		SetStateAction<UseQueryResult<MetricQueryRangeSuccessResponse, Error>>
+		SetStateAction<
+			UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
+		>
 	>;
 	enableDrillDown?: boolean;
 	dashboardData: Dashboard | undefined;
@@ -36,7 +39,12 @@ export interface WidgetGraphProps {
 }
 
 export type WidgetGraphContainerProps = {
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown> & {
+			warning?: Warning;
+		},
+		Error
+	>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	selectedWidget: Widgets;

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Card, Form, Select, Space } from 'antd';
+import { Button, Card, Form, Input, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Card, Form, Space } from 'antd';
+import { Button, Card, Form, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/__tests__/InviteTeamMembers.test.tsx

@@ -9,6 +9,11 @@ import {
 
 import InviteTeamMembers from '../InviteTeamMembers';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
 	(args: { message: string }) => void
 >;

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

@@ -4,6 +4,11 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import OnboardingQuestionaire from '../index';
 
 // Mock dependencies
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('lib/history', () => ({
 	__esModule: true,
 	default: {

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, FormInstance, Select, Space } from 'antd';
+import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -1,6 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridTableComponent from 'container/GridTableComponent';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
+import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
 import { PanelWrapperProps } from './panelWrapper.types';
 
@@ -19,7 +20,7 @@ function TablePanelWrapper({
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
 	const { thresholds } = widget;
 
-	const queryRangeRequest = queryResponse.data?.params;
+	const queryRangeRequest = queryResponse.data?.params as QueryRangeRequestV5;
 
 	return (
 		<GridTableComponent

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,6 +1,4 @@
 import { ChangeEventHandler, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
-// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Space, Tooltip } from 'antd';
+import { Flex, Form, Input, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';