Merge branch 'main' into nv/dashboard-migration

cmd/enterprise/server.go

@@ -177,11 +177,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 				return nil, err
 			}
 			azureCloudProviderModule := implcloudprovider.NewAzureCloudProvider(defStore)
-			gcpCloudProviderModule := implcloudprovider.NewGCPCloudProvider(defStore)
 			cloudProvidersMap := map[cloudintegrationtypes.CloudProviderType]cloudintegration.CloudProviderModule{
 				cloudintegrationtypes.CloudProviderTypeAWS:   awsCloudProviderModule,
 				cloudintegrationtypes.CloudProviderTypeAzure: azureCloudProviderModule,
-				cloudintegrationtypes.CloudProviderTypeGCP:   gcpCloudProviderModule,
 			}
 
 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)

conf/example.yaml

@@ -65,31 +65,15 @@ web:
     posthog:
       # Whether to enable PostHog in web.
       enabled: false
-      # The PostHog project API key.
-      key: ""
-      # The PostHog API host. Defaults to https://us.i.posthog.com when empty.
-      api_host: ""
-      # The PostHog UI host. Used when api_host points at a reverse proxy.
-      ui_host: ""
     appcues:
       # Whether to enable Appcues in web.
       enabled: false
-      # The Appcues account/app ID.
-      app_id: ""
     sentry:
       # Whether to enable Sentry in web.
       enabled: false
-      # The Sentry DSN.
-      dsn: ""
-      # The Sentry tunnel URL.
-      tunnel: ""
     pylon:
       # Whether to enable Pylon in web.
       enabled: false
-      # The Pylon app ID.
-      app_id: ""
-      # The Pylon identity verification secret.
-      identity_secret: ""
 
 ##################### Cache #####################
 cache:

docs/api/openapi.yml

@@ -1024,8 +1024,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPAccountConfig'
       type: object
     CloudintegrationtypesAgentReport:
       nullable: true
@@ -1171,8 +1169,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifact'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureConnectionArtifact'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPConnectionArtifact'
       type: object
     CloudintegrationtypesCredentials:
       properties:
@@ -1203,46 +1199,6 @@ components:
           nullable: true
           type: array
       type: object
-    CloudintegrationtypesGCPAccountConfig:
-      properties:
-        deploymentProjectId:
-          type: string
-        deploymentRegion:
-          type: string
-        projectIds:
-          items:
-            type: string
-          type: array
-      required:
-      - deploymentProjectId
-      - deploymentRegion
-      - projectIds
-      type: object
-    CloudintegrationtypesGCPConnectionArtifact:
-      type: object
-    CloudintegrationtypesGCPIntegrationConfig:
-      type: object
-    CloudintegrationtypesGCPServiceConfig:
-      properties:
-        logs:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceLogsConfig'
-        metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceMetricsConfig'
-      type: object
-    CloudintegrationtypesGCPServiceLogsConfig:
-      properties:
-        enabled:
-          type: boolean
-      required:
-      - enabled
-      type: object
-    CloudintegrationtypesGCPServiceMetricsConfig:
-      properties:
-        enabled:
-          type: boolean
-      required:
-      - enabled
-      type: object
     CloudintegrationtypesGettableAccountWithConnectionArtifact:
       properties:
         connectionArtifact:
@@ -1375,8 +1331,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPAccountConfig'
       type: object
     CloudintegrationtypesPostableAgentCheckIn:
       properties:
@@ -1401,8 +1355,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSIntegrationConfig'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureIntegrationConfig'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
       type: object
     CloudintegrationtypesService:
       properties:
@@ -1447,8 +1399,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSServiceConfig'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceConfig'
       type: object
     CloudintegrationtypesServiceDashboard:
       properties:
@@ -1491,7 +1441,6 @@ components:
       - cosmosdb
       - cassandradb
       - redis
-      - cloudsql
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -1553,8 +1502,6 @@ components:
           $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesUpdatableAzureAccountConfig'
-        gcp:
-          $ref: '#/components/schemas/CloudintegrationtypesUpdatableGCPAccountConfig'
       type: object
     CloudintegrationtypesUpdatableAzureAccountConfig:
       properties:
@@ -1565,22 +1512,6 @@ components:
       required:
       - resourceGroups
       type: object
-    CloudintegrationtypesUpdatableGCPAccountConfig:
-      properties:
-        deploymentProjectId:
-          type: string
-        deploymentRegion:
-          type: string
-        projectIds:
-          items:
-            type: string
-          nullable: true
-          type: array
-      required:
-      - deploymentProjectId
-      - deploymentRegion
-      - projectIds
-      type: object
     CloudintegrationtypesUpdatableService:
       properties:
         config:
@@ -2695,7 +2626,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3637,7 +3567,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3674,7 +3603,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -6281,25 +6209,6 @@ components:
       - asc
       - desc
       type: string
-    Querybuildertypesv5PreviewStatement:
-      properties:
-        db.statement.args:
-          items: {}
-          type: array
-        db.statement.query:
-          type: string
-        estimate:
-          items:
-            $ref: '#/components/schemas/TelemetrystoretypesEstimateEntry'
-          type: array
-        granules:
-          $ref: '#/components/schemas/TelemetrystoretypesGranules'
-      required:
-      - db.statement.query
-      - db.statement.args
-      - estimate
-      - granules
-      type: object
     Querybuildertypesv5PromQuery:
       properties:
         disabled:
@@ -6620,40 +6529,6 @@ components:
       required:
       - type
       type: object
-    Querybuildertypesv5QueryPreview:
-      properties:
-        error: {}
-        statements:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5PreviewStatement'
-          type: array
-        valid:
-          type: boolean
-        warnings:
-          items:
-            type: string
-          type: array
-      required:
-      - valid
-      - error
-      - warnings
-      - statements
-      type: object
-    Querybuildertypesv5QueryRangePreviewResponse:
-      description: Response from the v5 query range preview (dry-run) endpoint. For
-        each query in the composite query, returns the underlying ClickHouse statement(s)
-        it renders to without executing them (one per PromQL metric selector; exactly
-        one for builder/ClickHouse/trace-operator queries), with the optional EXPLAIN
-        ESTIMATE and granule analysis attached per statement when requested.
-      properties:
-        compositeQuery:
-          additionalProperties:
-            $ref: '#/components/schemas/Querybuildertypesv5QueryPreview'
-          nullable: true
-          type: object
-      required:
-      - compositeQuery
-      type: object
     Querybuildertypesv5QueryRangeRequest:
       description: Request body for the v5 query range endpoint. Supports builder
         queries (traces, logs, metrics), formulas, joins, trace operators, PromQL,
@@ -8004,96 +7879,6 @@ components:
       - key
       - value
       type: object
-    TelemetrystoretypesEstimateEntry:
-      properties:
-        database:
-          type: string
-        marks:
-          format: int64
-          type: integer
-        parts:
-          format: int64
-          type: integer
-        rows:
-          format: int64
-          type: integer
-        table:
-          type: string
-      required:
-      - database
-      - table
-      - parts
-      - rows
-      - marks
-      type: object
-    TelemetrystoretypesGranules:
-      nullable: true
-      properties:
-        initial:
-          format: int64
-          type: integer
-        reads:
-          items:
-            $ref: '#/components/schemas/TelemetrystoretypesMergeTreeRead'
-          type: array
-        selected:
-          format: int64
-          type: integer
-        skipped:
-          format: int64
-          type: integer
-      required:
-      - initial
-      - selected
-      - skipped
-      - reads
-      type: object
-    TelemetrystoretypesIndexStep:
-      properties:
-        condition:
-          type: string
-        initialGranules:
-          format: int64
-          type: integer
-        initialParts:
-          format: int64
-          type: integer
-        keys:
-          items:
-            type: string
-          type: array
-        name:
-          type: string
-        selectedGranules:
-          format: int64
-          type: integer
-        selectedParts:
-          format: int64
-          type: integer
-        type:
-          type: string
-      required:
-      - type
-      - name
-      - keys
-      - condition
-      - initialParts
-      - selectedParts
-      - initialGranules
-      - selectedGranules
-      type: object
-    TelemetrystoretypesMergeTreeRead:
-      properties:
-        steps:
-          items:
-            $ref: '#/components/schemas/TelemetrystoretypesIndexStep'
-          type: array
-        table:
-          type: string
-      required:
-      - table
-      - steps
-      type: object
     TelemetrytypesFieldContext:
       enum:
       - metric
@@ -23625,75 +23410,6 @@ paths:
       summary: Query range
       tags:
       - querier
-  /api/v5/query_range/preview:
-    post:
-      deprecated: false
-      description: 'Validate a composite query without executing it. Accepts the same
-        payload as the query range endpoint. By default (verbose=true) returns, for
-        each query, the rendered underlying ClickHouse statement(s) with each statement''s
-        EXPLAIN ESTIMATE (per-table parts/rows/marks) and granule index analysis (candidate/surviving
-        granules and the per-index pruning funnel). Pass ?verbose=false for the lightweight
-        per-query verdict (valid/error/warnings) with no rendered SQL and no ClickHouse
-        round trips. Intended for agentic/dry-run consumption: per-query errors are
-        reported in the response rather than failing the whole request.'
-      operationId: QueryRangePreviewV5
-      parameters:
-      - in: query
-        name: verbose
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangePreviewResponse'
-                  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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Query range preview
-      tags:
-      - querier
   /api/v5/substitute_vars:
     post:
       deprecated: false

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/gcpcloudprovider.go

@@ -1,36 +0,0 @@
-package implcloudprovider
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
-	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
-)
-
-type gcpcloudprovider struct {
-	serviceDefinitions cloudintegrationtypes.ServiceDefinitionStore
-}
-
-func NewGCPCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore) cloudintegration.CloudProviderModule {
-	return &gcpcloudprovider{
-		serviceDefinitions: defStore,
-	}
-}
-
-func (g *gcpcloudprovider) BuildIntegrationConfig(ctx context.Context, account *cloudintegrationtypes.Account, services []*cloudintegrationtypes.StorableCloudIntegrationService) (*cloudintegrationtypes.ProviderIntegrationConfig, error) {
-	// for manual flow we don't have any integration config to return, so returning empty config for now.
-	return &cloudintegrationtypes.ProviderIntegrationConfig{}, nil
-}
-
-func (g *gcpcloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
-	// for manual flow we don't have any connection artifact to return, so returning empty artifact for now.
-	return &cloudintegrationtypes.ConnectionArtifact{}, nil
-}
-
-func (g *gcpcloudprovider) GetServiceDefinition(ctx context.Context, serviceID cloudintegrationtypes.ServiceID) (*cloudintegrationtypes.ServiceDefinition, error) {
-	return g.serviceDefinitions.Get(ctx, cloudintegrationtypes.CloudProviderTypeGCP, serviceID)
-}
-
-func (g *gcpcloudprovider) ListServiceDefinitions(ctx context.Context) ([]*cloudintegrationtypes.ServiceDefinition, error) {
-	return g.serviceDefinitions.List(ctx, cloudintegrationtypes.CloudProviderTypeGCP)
-}

ee/querier/handler.go

@@ -101,10 +101,6 @@ func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
 	h.community.QueryRange(rw, req)
 }
 
-func (h *handler) QueryRangePreview(rw http.ResponseWriter, req *http.Request) {
-	h.community.QueryRangePreview(rw, req)
-}
-
 func (h *handler) QueryRawStream(rw http.ResponseWriter, req *http.Request) {
 	h.community.QueryRawStream(rw, req)
 }

frontend/public/locales/en-GB/titles.json

@@ -61,7 +61,5 @@
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
-	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
 }

frontend/public/locales/en/titles.json

@@ -86,7 +86,5 @@
 	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
-	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
 }

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

@@ -12,8 +12,6 @@ import type {
 } from 'react-query';
 
 import type {
-	QueryRangePreviewV5200,
-	QueryRangePreviewV5Params,
 	QueryRangeV5200,
 	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
@@ -106,107 +104,6 @@ export const useQueryRangeV5 = <
 > => {
 	return useMutation(getQueryRangeV5MutationOptions(options));
 };
-/**
- * Validate a composite query without executing it. Accepts the same payload as the query range endpoint. By default (verbose=true) returns, for each query, the rendered underlying ClickHouse statement(s) with each statement's EXPLAIN ESTIMATE (per-table parts/rows/marks) and granule index analysis (candidate/surviving granules and the per-index pruning funnel). Pass ?verbose=false for the lightweight per-query verdict (valid/error/warnings) with no rendered SQL and no ClickHouse round trips. Intended for agentic/dry-run consumption: per-query errors are reported in the response rather than failing the whole request.
- * @summary Query range preview
- */
-export const queryRangePreviewV5 = (
-	querybuildertypesv5QueryRangeRequestDTO?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>,
-	params?: QueryRangePreviewV5Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<QueryRangePreviewV5200>({
-		url: `/api/v5/query_range/preview`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		params,
-		signal,
-	});
-};
-
-export const getQueryRangePreviewV5MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangePreviewV5>>,
-		TError,
-		{
-			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: QueryRangePreviewV5Params;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof queryRangePreviewV5>>,
-	TError,
-	{
-		data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-		params?: QueryRangePreviewV5Params;
-	},
-	TContext
-> => {
-	const mutationKey = ['queryRangePreviewV5'];
-	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 queryRangePreviewV5>>,
-		{
-			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: QueryRangePreviewV5Params;
-		}
-	> = (props) => {
-		const { data, params } = props ?? {};
-
-		return queryRangePreviewV5(data, params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type QueryRangePreviewV5MutationResult = NonNullable<
-	Awaited<ReturnType<typeof queryRangePreviewV5>>
->;
-export type QueryRangePreviewV5MutationBody =
-	| BodyType<Querybuildertypesv5QueryRangeRequestDTO>
-	| undefined;
-export type QueryRangePreviewV5MutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Query range preview
- */
-export const useQueryRangePreviewV5 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangePreviewV5>>,
-		TError,
-		{
-			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: QueryRangePreviewV5Params;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof queryRangePreviewV5>>,
-	TError,
-	{
-		data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-		params?: QueryRangePreviewV5Params;
-	},
-	TContext
-> => {
-	return useMutation(getQueryRangePreviewV5MutationOptions(options));
-};
 /**
  * Replace variables in a query
  * @summary Replace variables

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

@@ -2630,25 +2630,9 @@ export interface CloudintegrationtypesAzureAccountConfigDTO {
 	resourceGroups: string[];
 }
 
-export interface CloudintegrationtypesGCPAccountConfigDTO {
-	/**
-	 * @type string
-	 */
-	deploymentProjectId: string;
-	/**
-	 * @type string
-	 */
-	deploymentRegion: string;
-	/**
-	 * @type array
-	 */
-	projectIds: string[];
-}
-
 export interface CloudintegrationtypesAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSAccountConfigDTO;
 	azure?: CloudintegrationtypesAzureAccountConfigDTO;
-	gcp?: CloudintegrationtypesGCPAccountConfigDTO;
 }
 
 export interface CloudintegrationtypesAccountDTO {
@@ -2756,29 +2740,9 @@ export interface CloudintegrationtypesAzureServiceConfigDTO {
 	metrics: CloudintegrationtypesAzureServiceMetricsConfigDTO;
 }
 
-export interface CloudintegrationtypesGCPServiceLogsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-}
-
-export interface CloudintegrationtypesGCPServiceMetricsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-}
-
-export interface CloudintegrationtypesGCPServiceConfigDTO {
-	logs?: CloudintegrationtypesGCPServiceLogsConfigDTO;
-	metrics?: CloudintegrationtypesGCPServiceMetricsConfigDTO;
-}
-
 export interface CloudintegrationtypesServiceConfigDTO {
 	aws?: CloudintegrationtypesAWSServiceConfigDTO;
 	azure?: CloudintegrationtypesAzureServiceConfigDTO;
-	gcp?: CloudintegrationtypesGCPServiceConfigDTO;
 }
 
 export enum CloudintegrationtypesServiceIDDTO {
@@ -2809,7 +2773,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cosmosdb = 'cosmosdb',
 	cassandradb = 'cassandradb',
 	redis = 'redis',
-	cloudsql = 'cloudsql',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -2874,14 +2837,9 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }
 
-export interface CloudintegrationtypesGCPConnectionArtifactDTO {
-	[key: string]: unknown;
-}
-
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws?: CloudintegrationtypesAWSConnectionArtifactDTO;
 	azure?: CloudintegrationtypesAzureConnectionArtifactDTO;
-	gcp?: CloudintegrationtypesGCPConnectionArtifactDTO;
 }
 
 export interface CloudintegrationtypesCredentialsDTO {
@@ -2914,10 +2872,6 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }
 
-export interface CloudintegrationtypesGCPIntegrationConfigDTO {
-	[key: string]: unknown;
-}
-
 export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
@@ -3009,7 +2963,6 @@ export type CloudintegrationtypesIntegrationConfigDTO =
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
 	azure?: CloudintegrationtypesAzureIntegrationConfigDTO;
-	gcp?: CloudintegrationtypesGCPIntegrationConfigDTO;
 }
 
 export interface CloudintegrationtypesGettableAgentCheckInDTO {
@@ -3072,7 +3025,6 @@ export interface CloudintegrationtypesGettableServicesMetadataDTO {
 export interface CloudintegrationtypesPostableAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSPostableAccountConfigDTO;
 	azure?: CloudintegrationtypesAzureAccountConfigDTO;
-	gcp?: CloudintegrationtypesGCPAccountConfigDTO;
 }
 
 export interface CloudintegrationtypesPostableAccountDTO {
@@ -3202,25 +3154,9 @@ export interface CloudintegrationtypesUpdatableAzureAccountConfigDTO {
 	resourceGroups: string[];
 }
 
-export interface CloudintegrationtypesUpdatableGCPAccountConfigDTO {
-	/**
-	 * @type string
-	 */
-	deploymentProjectId: string;
-	/**
-	 * @type string
-	 */
-	deploymentRegion: string;
-	/**
-	 * @type array,null
-	 */
-	projectIds: string[] | null;
-}
-
 export interface CloudintegrationtypesUpdatableAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSAccountConfigDTO;
 	azure?: CloudintegrationtypesUpdatableAzureAccountConfigDTO;
-	gcp?: CloudintegrationtypesUpdatableGCPAccountConfigDTO;
 }
 
 export interface CloudintegrationtypesUpdatableAccountDTO {
@@ -3402,7 +3338,6 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -3930,7 +3865,6 @@ export interface DashboardtypesComparisonThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -4211,7 +4145,6 @@ export interface DashboardtypesTableThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -7619,126 +7552,6 @@ export interface Querybuildertypesv5FormatOptionsDTO {
 	formatTableResultForUI?: boolean;
 }
 
-export interface TelemetrystoretypesEstimateEntryDTO {
-	/**
-	 * @type string
-	 */
-	database: string;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	marks: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	parts: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	rows: number;
-	/**
-	 * @type string
-	 */
-	table: string;
-}
-
-export interface TelemetrystoretypesIndexStepDTO {
-	/**
-	 * @type string
-	 */
-	condition: string;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	initialGranules: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	initialParts: number;
-	/**
-	 * @type array
-	 */
-	keys: string[];
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	selectedGranules: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	selectedParts: number;
-	/**
-	 * @type string
-	 */
-	type: string;
-}
-
-export interface TelemetrystoretypesMergeTreeReadDTO {
-	/**
-	 * @type array
-	 */
-	steps: TelemetrystoretypesIndexStepDTO[];
-	/**
-	 * @type string
-	 */
-	table: string;
-}
-
-export type TelemetrystoretypesGranulesDTOAnyOf = {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	initial: number;
-	/**
-	 * @type array
-	 */
-	reads: TelemetrystoretypesMergeTreeReadDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	selected: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	skipped: number;
-};
-
-/**
- * @nullable
- */
-export type TelemetrystoretypesGranulesDTO =
-	TelemetrystoretypesGranulesDTOAnyOf | null;
-
-export interface Querybuildertypesv5PreviewStatementDTO {
-	/**
-	 * @type array
-	 */
-	'db.statement.args': unknown[];
-	/**
-	 * @type string
-	 */
-	'db.statement.query': string;
-	/**
-	 * @type array
-	 */
-	estimate: TelemetrystoretypesEstimateEntryDTO[];
-	granules: TelemetrystoretypesGranulesDTO | null;
-}
-
 export interface Querybuildertypesv5TimeSeriesDataDTO {
 	/**
 	 * @type array,null
@@ -7820,41 +7633,6 @@ export type Querybuildertypesv5QueryDataDTO =
 			results?: unknown[] | null;
 	  });
 
-export interface Querybuildertypesv5QueryPreviewDTO {
-	error: unknown;
-	/**
-	 * @type array
-	 */
-	statements: Querybuildertypesv5PreviewStatementDTO[];
-	/**
-	 * @type boolean
-	 */
-	valid: boolean;
-	/**
-	 * @type array
-	 */
-	warnings: string[];
-}
-
-export type Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQueryAnyOf =
-	{ [key: string]: Querybuildertypesv5QueryPreviewDTO };
-
-/**
- * @nullable
- */
-export type Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQuery =
-	Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQueryAnyOf | null;
-
-/**
- * Response from the v5 query range preview (dry-run) endpoint. For each query in the composite query, returns the underlying ClickHouse statement(s) it renders to without executing them (one per PromQL metric selector; exactly one for builder/ClickHouse/trace-operator queries), with the optional EXPLAIN ESTIMATE and granule analysis attached per statement when requested.
- */
-export interface Querybuildertypesv5QueryRangePreviewResponseDTO {
-	/**
-	 * @type object,null
-	 */
-	compositeQuery: Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQuery;
-}
-
 export enum Querybuildertypesv5VariableTypeDTO {
 	query = 'query',
 	dynamic = 'dynamic',
@@ -11729,22 +11507,6 @@ export type QueryRangeV5200 = {
 	status: string;
 };
 
-export type QueryRangePreviewV5Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	verbose?: string;
-};
-
-export type QueryRangePreviewV5200 = {
-	data: Querybuildertypesv5QueryRangePreviewResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ReplaceVariables200 = {
 	data: Querybuildertypesv5QueryRangeRequestDTO;
 	/**

frontend/src/components/InviteMembers/__tests__/InviteMembers.submission.test.tsx

@@ -167,7 +167,6 @@ describe('InviteMembers - Submission', () => {
 							success: false,
 						}),
 					]),
-					expect.any(Array),
 				);
 			});
 		});
@@ -244,7 +243,6 @@ describe('InviteMembers - Submission', () => {
 						error: 'User already exists',
 					}),
 				]),
-				expect.any(Array),
 			);
 
 			await expect(

frontend/src/components/InviteMembers/types.ts

@@ -22,9 +22,9 @@ export interface FooterRenderProps {
 
 export interface UseInviteMembersOptions {
 	initialRowCount?: number;
-	onSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
-	onPartialSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
-	onAllFailed?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onSuccess?: () => void;
+	onPartialSuccess?: (results: InviteResult[]) => void;
+	onAllFailed?: (results: InviteResult[]) => void;
 }
 
 export interface UseInviteMembersReturn {
@@ -56,9 +56,9 @@ export interface InviteMembersProps {
 	showHeader?: boolean;
 	showAddButton?: boolean;
 
-	onSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
-	onPartialSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
-	onAllFailed?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onSuccess?: () => void;
+	onPartialSuccess?: (results: InviteResult[]) => void;
+	onAllFailed?: (results: InviteResult[]) => void;
 
 	renderFooter?: (props: FooterRenderProps) => ReactNode;
 }

frontend/src/components/InviteMembers/useInviteMembers.ts

@@ -207,11 +207,11 @@ export function useInviteMembers(
 		const successes = results.filter((r) => r.success);
 
 		if (failures.length === 0) {
-			onSuccess?.(results, touched);
+			onSuccess?.();
 		} else if (successes.length > 0) {
-			onPartialSuccess?.(results, touched);
+			onPartialSuccess?.(results);
 		} else {
-			onAllFailed?.(results, touched);
+			onAllFailed?.(results);
 		}
 
 		return results;

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -0,0 +1,254 @@
+.invite-members-modal {
+	max-width: 700px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-family: Inter, sans-serif;
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.invite-members-modal__content {
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-8);
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.invite-members-modal__table {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+}
+
+.invite-members-modal__table-header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+	width: 100%;
+
+	.email-header {
+		flex: 0 0 240px;
+	}
+
+	.role-header {
+		flex: 1 0 0;
+		min-width: 0;
+	}
+
+	.action-header {
+		flex: 0 0 32px;
+	}
+
+	.table-header-cell {
+		font-family: Inter, sans-serif;
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.07px;
+		color: var(--foreground);
+	}
+}
+
+.invite-members-modal__container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	width: 100%;
+}
+
+.team-member-row {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-8);
+	width: 100%;
+
+	> .email-cell {
+		flex: 0 0 240px;
+	}
+
+	> .role-cell {
+		flex: 1 0 0;
+		min-width: 0;
+	}
+
+	> .action-cell {
+		flex: 0 0 32px;
+	}
+}
+
+.team-member-cell {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	&.action-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 32px;
+	}
+}
+
+.team-member-email-input {
+	width: 100%;
+	height: 32px;
+	color: var(--l1-foreground);
+	background-color: var(--l2-background);
+	border-color: var(--l1-border);
+	font-size: var(--paragraph-base-400-font-size);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+
+	&:focus {
+		border-color: var(--primary);
+		box-shadow: none;
+	}
+}
+.team-member-role-select {
+	width: 100%;
+
+	.ant-select-selector {
+		height: 32px;
+		border-radius: 2px;
+		background-color: var(--l2-background) !important;
+		border: 1px solid var(--border) !important;
+		padding: 0 var(--padding-2) !important;
+
+		.ant-select-selection-placeholder {
+			color: var(--l3-foreground);
+			opacity: 0.4;
+			font-size: var(--paragraph-base-400-font-size);
+			letter-spacing: -0.07px;
+			line-height: 32px;
+		}
+
+		.ant-select-selection-item {
+			font-size: var(--paragraph-base-400-font-size);
+			letter-spacing: -0.07px;
+			color: var(--l1-foreground);
+			line-height: 32px;
+		}
+	}
+
+	.ant-select-arrow {
+		color: var(--foreground);
+	}
+
+	&.ant-select-focused .ant-select-selector,
+	&:not(.ant-select-disabled):hover .ant-select-selector {
+		border-color: var(--primary);
+	}
+}
+
+.remove-team-member-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	min-width: 32px;
+	border: none;
+	border-radius: 2px;
+	background: transparent;
+	color: var(--destructive);
+	opacity: 0.6;
+	padding: 0;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
+	box-shadow: none;
+
+	&:hover {
+		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+		opacity: 0.9;
+	}
+}
+
+.email-error-message {
+	display: block;
+	font-family: Inter, sans-serif;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-18);
+	color: var(--destructive);
+}
+
+.invite-team-members-error-callout {
+	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+	border: 1px solid color-mix(in srgb, var(--danger-background) 20%, transparent);
+	border-radius: 4px;
+	animation: horizontal-shaking 300ms ease-out;
+}
+
+.invite-members-modal__error-callout {
+	display: flex;
+}
+
+@keyframes horizontal-shaking {
+	0% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(5px);
+	}
+	50% {
+		transform: translateX(-5px);
+	}
+	75% {
+		transform: translateX(5px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+.invite-members-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: 0;
+	flex-shrink: 0;
+}
+
+.invite-members-modal__footer-right {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.add-another-member-button {
+	&:hover {
+		border-color: var(--primary);
+		border-style: dashed;
+		color: var(--l1-foreground);
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -0,0 +1,337 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Style } from '@signozhq/design-tokens';
+import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import { toast } from '@signozhq/ui/sonner';
+import { Select } from 'antd';
+import inviteUsers from 'api/v1/invite/bulk/create';
+import sendInvite from 'api/v1/invite/create';
+import { cloneDeep, debounce } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { ROLES } from 'types/roles';
+import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
+import { popupContainer } from 'utils/selectPopupContainer';
+import { v4 as uuid } from 'uuid';
+
+import './InviteMembersModal.styles.scss';
+
+interface InviteRow {
+	id: string;
+	email: string;
+	role: ROLES | '';
+}
+
+export interface InviteMembersModalProps {
+	open: boolean;
+	onClose: () => void;
+	onComplete?: () => void;
+}
+
+const EMPTY_ROW = (): InviteRow => ({ id: uuid(), email: '', role: '' });
+
+const isRowTouched = (row: InviteRow): boolean =>
+	row.email.trim() !== '' || Boolean(row.role && row.role.trim() !== '');
+
+function InviteMembersModal({
+	open,
+	onClose,
+	onComplete,
+}: InviteMembersModalProps): JSX.Element {
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
+	const [rows, setRows] = useState<InviteRow[]>(() => [
+		EMPTY_ROW(),
+		EMPTY_ROW(),
+		EMPTY_ROW(),
+	]);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
+		{},
+	);
+	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
+	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
+
+	const resetAndClose = useCallback((): void => {
+		setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
+		setEmailValidity({});
+		setHasInvalidEmails(false);
+		setHasInvalidRoles(false);
+		onClose();
+	}, [onClose]);
+
+	useEffect(() => {
+		if (open) {
+			setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
+		}
+	}, [open]);
+
+	const getValidationErrorMessage = (): string => {
+		if (hasInvalidEmails && hasInvalidRoles) {
+			return 'Please enter valid emails and select roles for team members';
+		}
+		if (hasInvalidEmails) {
+			return 'Please enter valid emails for team members';
+		}
+		return 'Please select roles for team members';
+	};
+
+	const validateAllUsers = useCallback((): boolean => {
+		let isValid = true;
+		let hasEmailErrors = false;
+		let hasRoleErrors = false;
+
+		const updatedEmailValidity: Record<string, boolean> = {};
+
+		const touchedRows = rows.filter(isRowTouched);
+
+		touchedRows.forEach((row) => {
+			const emailValid = EMAIL_REGEX.test(row.email);
+			const roleValid = Boolean(row.role && row.role.trim() !== '');
+
+			if (!emailValid || !row.email) {
+				isValid = false;
+				hasEmailErrors = true;
+			}
+			if (!roleValid) {
+				isValid = false;
+				hasRoleErrors = true;
+			}
+
+			if (row.id) {
+				updatedEmailValidity[row.id] = emailValid;
+			}
+		});
+
+		setEmailValidity(updatedEmailValidity);
+		setHasInvalidEmails(hasEmailErrors);
+		setHasInvalidRoles(hasRoleErrors);
+
+		return isValid;
+	}, [rows]);
+
+	const debouncedValidateEmail = useMemo(
+		() =>
+			debounce((email: string, rowId: string) => {
+				const isValid = EMAIL_REGEX.test(email);
+				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
+			}, 500),
+		[],
+	);
+
+	useEffect(() => {
+		if (!open) {
+			debouncedValidateEmail.cancel();
+		}
+		return (): void => {
+			debouncedValidateEmail.cancel();
+		};
+	}, [open, debouncedValidateEmail]);
+
+	const updateEmail = (id: string, email: string): void => {
+		const updatedRows = cloneDeep(rows);
+		const rowToUpdate = updatedRows.find((r) => r.id === id);
+		if (rowToUpdate) {
+			rowToUpdate.email = email;
+			setRows(updatedRows);
+
+			if (hasInvalidEmails) {
+				setHasInvalidEmails(false);
+			}
+			if (emailValidity[id] === false) {
+				setEmailValidity((prev) => ({ ...prev, [id]: true }));
+			}
+
+			debouncedValidateEmail(email, id);
+		}
+	};
+
+	const updateRole = (id: string, role: ROLES): void => {
+		const updatedRows = cloneDeep(rows);
+		const rowToUpdate = updatedRows.find((r) => r.id === id);
+		if (rowToUpdate) {
+			rowToUpdate.role = role;
+			setRows(updatedRows);
+
+			if (hasInvalidRoles) {
+				setHasInvalidRoles(false);
+			}
+		}
+	};
+
+	const addRow = (): void => {
+		setRows((prev) => [...prev, EMPTY_ROW()]);
+	};
+
+	const removeRow = (id: string): void => {
+		setRows((prev) => prev.filter((r) => r.id !== id));
+	};
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		if (!validateAllUsers()) {
+			return;
+		}
+
+		const touchedRows = rows.filter(isRowTouched);
+		if (touchedRows.length === 0) {
+			return;
+		}
+
+		setIsSubmitting(true);
+		try {
+			if (touchedRows.length === 1) {
+				const row = touchedRows[0];
+				await sendInvite({
+					email: row.email.trim(),
+					name: '',
+					role: row.role as ROLES,
+					frontendBaseUrl: getBaseUrl(),
+				});
+			} else {
+				await inviteUsers({
+					invites: touchedRows.map((row) => ({
+						email: row.email.trim(),
+						name: '',
+						role: row.role,
+						frontendBaseUrl: getBaseUrl(),
+					})),
+				});
+			}
+			toast.success('Invites sent successfully', { position: 'top-right' });
+			resetAndClose();
+			onComplete?.();
+		} catch (err) {
+			showErrorModal(err as APIError);
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
+
+	const touchedRows = rows.filter(isRowTouched);
+	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
+
+	return (
+		<DialogWrapper
+			title="Invite Team Members"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					resetAndClose();
+				}
+			}}
+			showCloseButton
+			width="wide"
+			className="invite-members-modal"
+			disableOutsideClick={isErrorModalVisible}
+		>
+			<div className="invite-members-modal__content">
+				<div className="invite-members-modal__table">
+					<div className="invite-members-modal__table-header">
+						<div className="table-header-cell email-header">Email address</div>
+						<div className="table-header-cell role-header">Roles</div>
+						<div className="table-header-cell action-header" />
+					</div>
+					<div className="invite-members-modal__container">
+						{rows.map(
+							(row): JSX.Element => (
+								<div key={row.id} className="team-member-row">
+									<div className="team-member-cell email-cell">
+										<Input
+											type="email"
+											placeholder="john@signoz.io"
+											value={row.email}
+											onChange={(e): void => updateEmail(row.id, e.target.value)}
+											className="team-member-email-input"
+											name={`invite-email-${row.id}`}
+											autoComplete="email"
+										/>
+										{emailValidity[row.id] === false && row.email.trim() !== '' && (
+											<span className="email-error-message">Invalid email address</span>
+										)}
+									</div>
+									<div className="team-member-cell role-cell">
+										<Select
+											value={row.role || undefined}
+											onChange={(role): void => updateRole(row.id, role as ROLES)}
+											className="team-member-role-select"
+											placeholder="Select roles"
+											suffixIcon={<ChevronDown size={14} />}
+											getPopupContainer={popupContainer}
+										>
+											<Select.Option value="VIEWER">Viewer</Select.Option>
+											<Select.Option value="EDITOR">Editor</Select.Option>
+											<Select.Option value="ADMIN">Admin</Select.Option>
+										</Select>
+									</div>
+									<div className="team-member-cell action-cell">
+										{rows.length > 1 && (
+											<Button
+												variant="ghost"
+												color="destructive"
+												onClick={(): void => removeRow(row.id)}
+												aria-label="Remove row"
+											>
+												<Trash2 size={12} />
+											</Button>
+										)}
+									</div>
+								</div>
+							),
+						)}
+					</div>
+				</div>
+
+				{(hasInvalidEmails || hasInvalidRoles) && (
+					<div className="invite-members-modal__error-callout">
+						<Callout
+							type="error"
+							size="small"
+							showIcon
+							title={getValidationErrorMessage()}
+						/>
+					</div>
+				)}
+			</div>
+
+			<DialogFooter className="invite-members-modal__footer">
+				<Button
+					variant="dashed"
+					color="secondary"
+					className="add-another-member-button"
+					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					onClick={addRow}
+				>
+					Add another
+				</Button>
+
+				<div className="invite-members-modal__footer-right">
+					<Button
+						type="button"
+						variant="solid"
+						color="secondary"
+						onClick={resetAndClose}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={handleSubmit}
+						disabled={isSubmitDisabled}
+						loading={isSubmitting}
+					>
+						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
+					</Button>
+				</div>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default InviteMembersModal;

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

@@ -0,0 +1,276 @@
+import inviteUsers from 'api/v1/invite/bulk/create';
+import sendInvite from 'api/v1/invite/create';
+import { StatusCodes } from 'http-status-codes';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import APIError from 'types/api/error';
+
+import InviteMembersModal from '../InviteMembersModal';
+
+const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
+	new APIError({
+		httpStatusCode: code,
+		error: { code: 'already_exists', message, url: '', errors: [] },
+	});
+
+jest.mock('api/v1/invite/create');
+jest.mock('api/v1/invite/bulk/create');
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
+
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
+const mockSendInvite = jest.mocked(sendInvite);
+const mockInviteUsers = jest.mocked(inviteUsers);
+
+const defaultProps = {
+	open: true,
+	onClose: jest.fn(),
+	onComplete: jest.fn(),
+};
+
+describe('InviteMembersModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		showErrorModal.mockClear();
+		mockSendInvite.mockResolvedValue({
+			httpStatusCode: 200,
+			data: { data: 'test', status: 'success' },
+		});
+		mockInviteUsers.mockResolvedValue({ httpStatusCode: 200, data: null });
+	});
+
+	it('renders 3 initial empty rows and disables the submit button', () => {
+		render(<InviteMembersModal {...defaultProps} />);
+
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+		expect(emailInputs).toHaveLength(3);
+
+		expect(
+			screen.getByRole('button', { name: /invite team members/i }),
+		).toBeDisabled();
+	});
+
+	it('adds a row when "Add another" is clicked and removes a row via trash button', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<InviteMembersModal {...defaultProps} />);
+
+		await user.click(screen.getByRole('button', { name: /add another/i }));
+		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(4);
+
+		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
+		await user.click(removeButtons[0]);
+		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(3);
+	});
+
+	describe('validation callout messages', () => {
+		it('shows combined message when email is invalid and role is missing', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'not-an-email',
+			);
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await expect(
+				screen.findByText(
+					'Please enter valid emails and select roles for team members',
+				),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows email-only message when email is invalid but role is selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+			await user.type(emailInputs[0], 'not-an-email');
+
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await expect(
+				screen.findByText('Please enter valid emails for team members'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('shows role-only message when email is valid but role is missing', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'valid@signoz.io',
+			);
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await expect(
+				screen.findByText('Please select roles for team members'),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	it('uses sendInvite (single) when only one row is filled', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onComplete = jest.fn();
+
+		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
+
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+		await user.type(emailInputs[0], 'single@signoz.io');
+
+		const roleSelects = screen.getAllByText('Select roles');
+		await user.click(roleSelects[0]);
+		await user.click(await screen.findByText('Viewer'));
+
+		await user.click(
+			screen.getByRole('button', { name: /invite team members/i }),
+		);
+
+		await waitFor(() => {
+			expect(mockSendInvite).toHaveBeenCalledWith(
+				expect.objectContaining({ email: 'single@signoz.io', role: 'VIEWER' }),
+			);
+			expect(mockInviteUsers).not.toHaveBeenCalled();
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	describe('error handling', () => {
+		it('shows BE message on single invite 409', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'An invite already exists for this email: single@signoz.io',
+			);
+			mockSendInvite.mockRejectedValue(error);
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'single@signoz.io',
+			);
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
+			});
+		});
+
+		it('shows BE message on bulk invite 409', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'An invite already exists for this email: alice@signoz.io',
+			);
+			mockInviteUsers.mockRejectedValue(error);
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+			await user.type(emailInputs[0], 'alice@signoz.io');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+
+			await user.type(emailInputs[1], 'bob@signoz.io');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			const editorOptions = await screen.findAllByText('Editor');
+			await user.click(editorOptions[editorOptions.length - 1]);
+
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
+			});
+		});
+
+		it('shows BE message on generic error', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'Internal server error',
+				StatusCodes.INTERNAL_SERVER_ERROR,
+			);
+			mockSendInvite.mockRejectedValue(error);
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'single@signoz.io',
+			);
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
+			});
+		});
+	});
+
+	it('uses inviteUsers (bulk) when multiple rows are filled', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onComplete = jest.fn();
+
+		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
+
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+
+		await user.type(emailInputs[0], 'alice@signoz.io');
+		await user.click(screen.getAllByText('Select roles')[0]);
+		await user.click(await screen.findByText('Viewer'));
+
+		await user.type(emailInputs[1], 'bob@signoz.io');
+		await user.click(screen.getAllByText('Select roles')[0]);
+		const editorOptions = await screen.findAllByText('Editor');
+		await user.click(editorOptions[editorOptions.length - 1]);
+
+		await user.click(
+			screen.getByRole('button', { name: /invite team members/i }),
+		);
+
+		await waitFor(() => {
+			expect(mockInviteUsers).toHaveBeenCalledWith({
+				invites: expect.arrayContaining([
+					expect.objectContaining({ email: 'alice@signoz.io', role: 'VIEWER' }),
+					expect.objectContaining({ email: 'bob@signoz.io', role: 'EDITOR' }),
+				]),
+			});
+			expect(mockSendInvite).not.toHaveBeenCalled();
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+});

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -3,6 +3,7 @@
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
+	overflow: hidden;
 	border-radius: 4px;
 }
 

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -32,13 +32,10 @@ export function useRoles(): {
 	};
 }
 
-export function getRoleOptions(
-	roles: AuthtypesRoleDTO[],
-	valueField: 'id' | 'name',
-): RoleOption[] {
+export function getRoleOptions(roles: AuthtypesRoleDTO[]): RoleOption[] {
 	return roles.map((role) => ({
 		label: role.name ?? '',
-		value: role[valueField] ?? '',
+		value: role.id ?? '',
 	}));
 }
 
@@ -85,7 +82,6 @@ interface BaseProps {
 	error?: APIError;
 	onRefetch?: () => void;
 	disabled?: boolean;
-	valueField?: 'id' | 'name';
 }
 
 interface SingleProps extends BaseProps {
@@ -117,7 +113,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});
 
 	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles, props.valueField || 'id');
+	const options = getRoleOptions(roles);
 
 	const {
 		mode,

frontend/src/components/TagKeyValueInput/TagKeyValueInput.module.scss

@@ -1,90 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	width: 100%;
-}
-
-.field {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 6px;
-	padding: 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-}
-
-// Sienna chip — matches the dashboard list-row tag badge.
-.tag {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	max-width: 240px;
-	height: 24px;
-	padding: 2px 4px 2px 8px;
-	border-radius: 50px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	color: var(--bg-sienna-400);
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	cursor: text;
-}
-
-.tagLabel {
-	--button-height: auto;
-	--button-padding: 0;
-	--button-gap: 0;
-	--button-variant-ghost-background-color: transparent;
-	--button-variant-ghost-hover-background-color: transparent;
-	--button-variant-ghost-color: inherit;
-	--button-variant-ghost-hover-color: inherit;
-	overflow: hidden;
-	max-width: 200px;
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	cursor: text;
-}
-
-.remove {
-	// Size overrides to fit the chip, plus a sienna-tinted hover — the Button's
-	// default ghost hover is a grey that clashes with the chip. Resting color is
-	// left at the Button default.
-	--button-height: 16px;
-	--button-padding: 0;
-	--button-border-radius: 50%;
-	--button-variant-ghost-hover-background-color: color-mix(
-		in srgb,
-		var(--bg-sienna-500) 22%,
-		transparent
-	);
-	--button-variant-ghost-hover-color: var(--bg-sienna-400);
-	width: 16px;
-	min-width: 16px;
-	flex: none;
-}
-
-.input {
-	flex: 1;
-	min-width: 120px;
-	border: none;
-	background: transparent;
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.editInput {
-	width: 160px;
-	height: 24px;
-}
-
-.error {
-	color: var(--bg-cherry-500);
-	font-size: 12px;
-}

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -1,164 +0,0 @@
-import { type ChangeEvent, type KeyboardEvent, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import { X } from '@signozhq/icons';
-import cx from 'classnames';
-
-import { parseKeyValueTag } from './utils';
-
-import styles from './TagKeyValueInput.module.scss';
-
-interface TagKeyValueInputProps {
-	// Tags as `key:value` strings.
-	tags: string[];
-	onTagsChange: (tags: string[]) => void;
-	placeholder?: string;
-	// Override the outer container styling per host (e.g. the create modal).
-	className?: string;
-	testId?: string;
-}
-
-// Strict key:value tag editor. A tag is committed only on Enter and only when
-// it parses to a valid `key:value` pair — bare values are rejected with an
-// inline error. Existing chips can be edited inline (double-click), and removed.
-function TagKeyValueInput({
-	tags,
-	onTagsChange,
-	placeholder = 'key:value',
-	className,
-	testId = 'tag-key-value-input',
-}: TagKeyValueInputProps): JSX.Element {
-	const [inputValue, setInputValue] = useState('');
-	const [error, setError] = useState('');
-	const [editIndex, setEditIndex] = useState(-1);
-	const [editValue, setEditValue] = useState('');
-
-	const removeTag = (tag: string): void => {
-		onTagsChange(tags.filter((t) => t !== tag));
-	};
-
-	const commit = (): void => {
-		const raw = inputValue.trim();
-		if (!raw) {
-			return;
-		}
-		const normalized = parseKeyValueTag(raw);
-		if (!normalized) {
-			setError('Tags must be in key:value format (both sides required).');
-			return;
-		}
-		if (tags.includes(normalized)) {
-			setError('This tag already exists.');
-			return;
-		}
-		onTagsChange([...tags, normalized]);
-		setInputValue('');
-		setError('');
-	};
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.target.value);
-		if (error) {
-			setError('');
-		}
-	};
-
-	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			commit();
-		}
-	};
-
-	const startEdit = (index: number): void => {
-		setEditIndex(index);
-		setEditValue(tags[index]);
-		setError('');
-	};
-
-	const cancelEdit = (): void => {
-		setEditIndex(-1);
-		setEditValue('');
-	};
-
-	const commitEdit = (): void => {
-		const normalized = parseKeyValueTag(editValue);
-		// Drop into a no-op (revert) on invalid or duplicate edits rather than
-		// stranding the user in an un-exitable edit box.
-		if (normalized && !tags.some((t, i) => t === normalized && i !== editIndex)) {
-			onTagsChange(tags.map((t, i) => (i === editIndex ? normalized : t)));
-		}
-		cancelEdit();
-	};
-
-	const handleEditKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			commitEdit();
-		} else if (e.key === 'Escape') {
-			e.preventDefault();
-			cancelEdit();
-		}
-	};
-
-	return (
-		<div className={cx(styles.container, className)}>
-			<div className={styles.field}>
-				{tags.map((tag, index) =>
-					index === editIndex ? (
-						<Input
-							key={tag}
-							className={styles.editInput}
-							value={editValue}
-							autoFocus
-							testId={`${testId}-edit`}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-								setEditValue(e.target.value)
-							}
-							onKeyDown={handleEditKeyDown}
-							onBlur={commitEdit}
-						/>
-					) : (
-						<div key={tag} className={styles.tag} data-testid={`${testId}-chip`}>
-							<Button
-								variant="ghost"
-								color="secondary"
-								className={styles.tagLabel}
-								title="Double-click to edit"
-								onDoubleClick={(): void => startEdit(index)}
-							>
-								{tag}
-							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								className={styles.remove}
-								aria-label={`Remove ${tag}`}
-								onClick={(): void => removeTag(tag)}
-							>
-								<X size={12} />
-							</Button>
-						</div>
-					),
-				)}
-				<Input
-					className={styles.input}
-					value={inputValue}
-					placeholder={placeholder}
-					testId={testId}
-					onChange={handleChange}
-					onKeyDown={handleKeyDown}
-				/>
-			</div>
-			{error && (
-				<Typography className={styles.error} data-testid={`${testId}-error`}>
-					{error}
-				</Typography>
-			)}
-		</div>
-	);
-}
-
-export default TagKeyValueInput;

frontend/src/components/TagKeyValueInput/utils.test.ts

@@ -1,31 +0,0 @@
-import { parseKeyValueTag } from './utils';
-
-describe('parseKeyValueTag', () => {
-	it('normalizes a valid key:value pair', () => {
-		expect(parseKeyValueTag('env:prod')).toBe('env:prod');
-	});
-
-	it('trims whitespace around key and value', () => {
-		expect(parseKeyValueTag('  env :  prod ')).toBe('env:prod');
-	});
-
-	it('keeps colons inside the value', () => {
-		expect(parseKeyValueTag('url:http://x')).toBe('url:http://x');
-	});
-
-	it('rejects a bare value with no colon', () => {
-		expect(parseKeyValueTag('prod')).toBeNull();
-	});
-
-	it('rejects an empty key', () => {
-		expect(parseKeyValueTag(':prod')).toBeNull();
-	});
-
-	it('rejects an empty value', () => {
-		expect(parseKeyValueTag('env:')).toBeNull();
-	});
-
-	it('rejects blank input', () => {
-		expect(parseKeyValueTag('   ')).toBeNull();
-	});
-});

frontend/src/components/TagKeyValueInput/utils.ts

@@ -1,17 +0,0 @@
-// Tags are strictly key:value. Parse a raw input into a normalized `key:value`
-// string, or null if it isn't a valid pair (both sides non-empty). The first
-// colon separates key from value, so values may themselves contain colons
-// (e.g. `url:http://x`).
-export function parseKeyValueTag(raw: string): string | null {
-	const trimmed = raw.trim();
-	const idx = trimmed.indexOf(':');
-	if (idx <= 0) {
-		return null;
-	}
-	const key = trimmed.slice(0, idx).trim();
-	const value = trimmed.slice(idx + 1).trim();
-	if (!key || !value) {
-		return null;
-	}
-	return `${key}:${value}`;
-}

frontend/src/components/YAxisUnitSelector/__tests__/formatter.test.tsx

@@ -680,13 +680,6 @@ describe('formatUniversalUnit', () => {
 	});
 
 	describe('Datetime', () => {
-		beforeAll(() => {
-			jest.useFakeTimers().setSystemTime(new Date('2026-01-01T00:00:00Z'));
-		});
-		afterAll(() => {
-			jest.useRealTimers();
-		});
-
 		it('formats datetime units', () => {
 			expect(formatUniversalUnit(900, UniversalYAxisUnit.DATETIME_FROM_NOW)).toBe(
 				'56 years ago',

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss

@@ -1,28 +1,7 @@
-.filtersBar {
-	display: flex;
-	gap: var(--spacing-6);
-	align-items: center;
-	justify-content: space-between;
-}
-
-.filtersBarLeft {
-	display: flex;
-	gap: var(--spacing-6);
-	align-items: center;
-}
-
-.filtersBarSearch {
-	width: 280px;
-}
-
-.filtersBarSource {
-	width: 160px;
-}
-
 .pageError {
 	padding: var(--spacing-6) var(--spacing-8);
 	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--accent-cherry) 8%, transparent);
-	color: var(--accent-cherry);
+	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
+	color: var(--text-cherry-400);
 	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -1,164 +1,52 @@
 import { useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
 import { useTableParams } from 'components/TanStackTableView';
-import useComponentPermission from 'hooks/useComponentPermission';
-import useDebounce from 'hooks/useDebounce';
-import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
-import { useAppContext } from 'providers/App/App';
+import { Typography } from '@signozhq/ui/typography';
 
-import {
-	LIMIT_KEY,
-	PAGE_KEY,
-	PAGE_SIZE,
-	SEARCH_DEBOUNCE_MS,
-	SEARCH_KEY,
-	SOURCE_FILTER_OPTIONS,
-	SOURCE_FILTER_TO_IS_OVERRIDE,
-	SOURCE_KEY,
-	type SourceFilter,
-} from '../constants';
-import type { PricingRule } from '../types';
-import DeleteConfirmDialog from './components/DeleteConfirmDialog';
-import ModelCostDrawer, {
-	useModelCostDrawer,
-} from './components/ModelCostDrawer';
-import ModelCostsTable from './components/ModelCostsTable';
-import { useModelCostDelete } from './hooks/useModelCostDelete';
+import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
 import styles from './ModelCostTabPanel.module.scss';
+import ModelCostsTable from './components/ModelCostsTable';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
-// "Model costs" tab: the priced-model listing, search + source filter, the add/
-// edit drawer, and pagination. Page and page size live in the URL (shareable/
-// reload-safe) and are owned by TanStackTable via enableQueryParams — this tab
-// reads them back through the same useTableParams hook so the two stay in lockstep.
 function ModelCostTabPanel(): JSX.Element {
-	const { page, limit, setPage } = useTableParams(
+	const { page, limit } = useTableParams(
 		{ page: PAGE_KEY, limit: LIMIT_KEY },
 		{ page: 1, limit: PAGE_SIZE },
 	);
 
-	const [search, setSearch] = useQueryState(
-		SEARCH_KEY,
-		parseAsString.withDefault(''),
-	);
-	const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_MS);
-
-	const [source, setSource] = useQueryState(
-		SOURCE_KEY,
-		parseAsStringEnum<SourceFilter>(
-			SOURCE_FILTER_OPTIONS.map((option) => option.value),
-		).withDefault('all'),
-	);
-
-	const handleSearchChange = (
-		event: React.ChangeEvent<HTMLInputElement>,
-	): void => {
-		void setSearch(event.target.value || null);
-		setPage(1);
-	};
-
-	const clearSearch = (): void => {
-		void setSearch(null);
-		setPage(1);
-	};
-
-	const handleSourceChange = (value: string | string[]): void => {
-		void setSource(value as SourceFilter);
-		setPage(1);
-	};
-
-	const isOverride = SOURCE_FILTER_TO_IS_OVERRIDE[source];
-
+	// Search + source filters are intentionally omitted for now — the list API
+	// doesn't honour them yet. They'll be reintroduced here once it does.
 	const listParams: ListLLMPricingRulesParams = {
 		offset: (page - 1) * limit,
 		limit,
-		...(debouncedSearch ? { q: debouncedSearch } : {}),
-		...(isOverride !== undefined ? { isOverride } : {}),
 	};
 
-	const { data, isLoading, isError } = useListLLMPricingRules(listParams, {
-		query: {
-			enabled: search === debouncedSearch,
-		},
-	});
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
 
-	const { user } = useAppContext();
-	const [canManagePricing] = useComponentPermission(
-		['manage_llm_pricing'],
-		user.role,
+	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
+		() => data?.data?.items || [],
+		[data],
 	);
-
-	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
 	const total = data?.data?.total ?? 0;
 
-	const drawer = useModelCostDrawer();
-	const deletion = useModelCostDelete();
-
 	return (
 		<>
-			<div className={styles.filtersBar}>
-				<div className={styles.filtersBarLeft}>
-					<Input
-						className={styles.filtersBarSearch}
-						placeholder="Search by model or provider"
-						value={search}
-						onChange={handleSearchChange}
-						prefix={<Search size={14} />}
-						suffix={
-							search ? (
-								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									prefix={<X size={14} />}
-									onClick={clearSearch}
-									aria-label="Clear search"
-									testId="model-cost-search-clear"
-								/>
-							) : undefined
-						}
-						testId="model-cost-search"
-					/>
-					<SelectSimple
-						className={styles.filtersBarSource}
-						items={SOURCE_FILTER_OPTIONS}
-						value={source}
-						onChange={handleSourceChange}
-						testId="source-filter"
-					/>
-				</div>
-				{canManagePricing && (
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Plus size={14} />}
-						onClick={(): void => drawer.openForAdd()}
-						testId="add-model-cost-btn"
-					>
-						Add model cost
-					</Button>
-				)}
-			</div>
-
 			{isError && (
 				<div className={styles.pageError} role="alert">
 					Failed to load pricing rules. Please try again.
 				</div>
 			)}
 
+			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
 			<ModelCostsTable
 				rules={rules}
 				isLoading={isLoading}
 				total={total}
-				selectedRuleId={drawer.selectedRuleId}
-				canManage={canManagePricing}
-				onEdit={drawer.openForEdit}
-				onDelete={deletion.requestDelete}
+				selectedRuleId={null}
+				canManage={false}
+				onEdit={(): void => undefined}
+				onDelete={(): void => undefined}
 			/>
 
 			<footer>
@@ -166,29 +54,6 @@ function ModelCostTabPanel(): JSX.Element {
 					All prices per 1M tokens (USD)
 				</Typography.Text>
 			</footer>
-
-			{drawer.isOpen && (
-				<ModelCostDrawer
-					isOpen={drawer.isOpen}
-					mode={drawer.mode}
-					initialDraft={drawer.initialDraft}
-					onClose={drawer.close}
-					onSave={drawer.save}
-					isSaving={drawer.isSaving}
-					saveError={drawer.saveError}
-					canManage={canManagePricing}
-				/>
-			)}
-
-			{deletion.pendingDelete && (
-				<DeleteConfirmDialog
-					open
-					modelName={deletion.pendingDelete.modelName}
-					isDeleting={deletion.isDeleting}
-					onConfirm={deletion.confirmDelete}
-					onCancel={deletion.cancelDelete}
-				/>
-			)}
 		</>
 	);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/DeleteConfirmDialog.tsx

@@ -1,64 +0,0 @@
-import { AlertDialog } from '@signozhq/ui/alert-dialog';
-import { Button } from '@signozhq/ui/button';
-import { Trash2, X } from '@signozhq/icons';
-
-interface DeleteConfirmDialogProps {
-	open: boolean;
-	modelName: string;
-	isDeleting: boolean;
-	onConfirm: () => void;
-	onCancel: () => void;
-}
-
-// Confirmation step before deleting a model cost — deletion is irreversible, so
-// the destructive action is gated behind an explicit confirm. AlertDialog blocks
-// outside-click dismissal and hides the close button to force an explicit choice.
-function DeleteConfirmDialog({
-	open,
-	modelName,
-	isDeleting,
-	onConfirm,
-	onCancel,
-}: DeleteConfirmDialogProps): JSX.Element {
-	return (
-		<AlertDialog
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onCancel();
-				}
-			}}
-			width="narrow"
-			title="Delete Model Cost Data "
-			titleIcon={<Trash2 size={16} />}
-			footer={
-				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						onClick={onCancel}
-						prefix={<X size={12} />}
-						testId="drawer-delete-cancel-btn"
-					>
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isDeleting}
-						onClick={onConfirm}
-						prefix={<Trash2 size={12} />}
-						testId="drawer-delete-confirm-btn"
-					>
-						Delete
-					</Button>
-				</>
-			}
-		>
-			Are you sure you want to delete <strong>{modelName}</strong>? Once deleted,
-			this action cannot be undone.
-		</AlertDialog>
-	);
-}
-
-export default DeleteConfirmDialog;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/index.ts

@@ -1 +0,0 @@
-export { default } from './DeleteConfirmDialog';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss

@@ -1,58 +0,0 @@
-.drawerSection {
-	composes: drawerSection from './shared.module.scss';
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.required {
-	composes: required from './shared.module.scss';
-}
-
-.modelCostDrawer {
-	// Uniform horizontal padding across header / body / footer. The header and
-	// footer read these dialog vars; the body (rendered in drawer-description)
-	// is set directly below.
-	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
-	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
-
-	display: flex;
-	overflow-y: auto;
-
-	// The drawer body — children render inside [data-slot='drawer-description']
-	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
-	[data-slot='drawer-description'] {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-12);
-		padding: var(--spacing-10) var(--spacing-12);
-	}
-
-	[data-slot='select-content'] {
-		width: var(--radix-select-trigger-width);
-	}
-}
-
-.title {
-	h3 {
-		margin: 0;
-		font-size: var(--periscope-font-size-medium);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	p {
-		margin: var(--spacing-2) 0 0;
-		color: var(--l3-foreground);
-		font-size: 12px;
-	}
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	// Horizontal padding is provided by the drawer-footer slot var above.
-	padding: 0;
-	width: 100%;
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.tsx

@@ -1,238 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-import { Controller, useForm } from 'react-hook-form';
-
-import PatternEditor from './components/PatternEditor';
-import PricingFields from './components/PricingFields';
-import SourceSelector from './components/SourceSelector';
-import { PROVIDER_OPTIONS } from '../../../constants';
-import styles from './ModelCostDrawer.module.scss';
-import {
-	validateModelName,
-	validatePricing,
-	validateProvider,
-} from '../../../utils';
-import type { DrawerDraft, DrawerMode } from '../../../types';
-
-interface ModelCostDrawerProps {
-	isOpen: boolean;
-	mode: DrawerMode;
-	initialDraft: DrawerDraft;
-	onClose: () => void;
-	onSave: (draft: DrawerDraft) => void;
-	isSaving: boolean;
-	saveError: string | null;
-	canManage: boolean;
-}
-
-function ModelCostDrawer({
-	isOpen,
-	mode,
-	initialDraft,
-	onClose,
-	onSave,
-	isSaving,
-	saveError,
-	canManage,
-}: ModelCostDrawerProps): JSX.Element {
-	// Default mode validates on submit, then re-validates on change — so we don't
-	// flag empty fields before the user has tried to save, but errors clear live
-	// once they start fixing them.
-	const {
-		control,
-		handleSubmit,
-		watch,
-		formState: { isDirty },
-	} = useForm<DrawerDraft>({
-		defaultValues: initialDraft,
-	});
-
-	const isOverride = watch('isOverride');
-
-	// Metadata (model id / provider / patterns / source) is editable by any
-	// manager. Pricing fields are editable only once the user picks "User
-	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
-	// Admin-only, so non-managers can't edit anything.
-	const metadataReadOnly = !canManage;
-	const pricingReadOnly = !canManage || !isOverride;
-
-	// Non-managers can only view (write APIs are Admin-only), so the drawer is a
-	// read-only "View" rather than "Edit"/"Add".
-	let drawerTitle = 'Add model cost';
-	if (!canManage) {
-		drawerTitle = 'View model cost';
-	} else if (mode === 'edit') {
-		drawerTitle = 'Edit model cost';
-	}
-
-	const footer = (
-		<div className={styles.footer}>
-			<Button
-				variant="outlined"
-				color="secondary"
-				onClick={onClose}
-				testId="drawer-cancel-btn"
-			>
-				{canManage ? 'Cancel' : 'Close'}
-			</Button>
-			{canManage && (
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={handleSubmit(onSave)}
-					disabled={!isDirty}
-					loading={isSaving}
-					testId="drawer-save-btn"
-				>
-					Save
-				</Button>
-			)}
-		</div>
-	);
-
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			direction="right"
-			width="base"
-			className={styles.modelCostDrawer}
-			footer={footer}
-			title={drawerTitle}
-			drawerHeaderProps={{ className: styles.title }}
-		>
-			<div className={styles.drawerSection}>
-				<label htmlFor="billing-model-id">
-					Billing model ID{' '}
-					<span className={styles.required} aria-hidden="true">
-						*
-					</span>
-				</label>
-				<Controller
-					name="modelName"
-					control={control}
-					rules={{
-						validate: (value): true | string => validateModelName(value, mode),
-					}}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<Input
-								id="billing-model-id"
-								placeholder="e.g. openai:gpt-4o"
-								required
-								value={field.value}
-								disabled={mode === 'edit' || metadataReadOnly}
-								aria-invalid={!!fieldState.error}
-								onChange={(e): void => field.onChange(e.target.value)}
-								testId="drawer-model-id-input"
-							/>
-							{fieldState.error && (
-								<Typography.Text as="p" size="small" color="danger" role="alert">
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-
-			<div className={styles.drawerSection}>
-				<label htmlFor="provider-select">Provider</label>
-				<Controller
-					name="provider"
-					control={control}
-					rules={{ validate: validateProvider }}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<SelectSimple
-								id="provider-select"
-								value={field.value}
-								onChange={(value): void => field.onChange(value as string)}
-								items={PROVIDER_OPTIONS}
-								disabled={mode === 'edit' || metadataReadOnly}
-								className={styles.fullWidth}
-								withPortal={false}
-								testId="drawer-provider-select"
-							/>
-							{fieldState.error && (
-								<Typography.Text size="small" color="danger" role="alert">
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-
-			<Controller
-				name="patterns"
-				control={control}
-				render={({ field }): JSX.Element => (
-					<PatternEditor
-						patterns={field.value}
-						isReadOnly={metadataReadOnly}
-						onChange={field.onChange}
-					/>
-				)}
-			/>
-
-			{/* Source is auto vs. override — a choice only a manager can make, so
-			    there's nothing to show a read-only viewer. */}
-			{canManage && (
-				<Controller
-					name="isOverride"
-					control={control}
-					// Pricing requirements depend on this toggle, so re-validate pricing
-					// whenever the source changes (clears/sets the pricing error).
-					rules={{ deps: ['pricing'] }}
-					render={({ field }): JSX.Element => (
-						<SourceSelector
-							isOverride={field.value}
-							isReadOnly={metadataReadOnly}
-							disableAuto={mode === 'add' || !initialDraft.sourceId}
-							onChange={field.onChange}
-						/>
-					)}
-				/>
-			)}
-
-			<Controller
-				name="pricing"
-				control={control}
-				rules={{
-					validate: (value, values): true | string =>
-						validatePricing(value, values.isOverride),
-				}}
-				render={({ field, fieldState }): JSX.Element => (
-					<>
-						<PricingFields
-							pricing={field.value}
-							isReadOnly={pricingReadOnly}
-							onChange={(patch): void => field.onChange({ ...field.value, ...patch })}
-						/>
-						{fieldState.error && (
-							<Typography.Text as="p" size="small" color="danger" role="alert">
-								{fieldState.error.message}
-							</Typography.Text>
-						)}
-					</>
-				)}
-			/>
-
-			{saveError && (
-				<Typography.Text as="p" size="small" color="danger" role="alert">
-					{saveError}
-				</Typography.Text>
-			)}
-		</DrawerWrapper>
-	);
-}
-
-export default ModelCostDrawer;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss

@@ -1,69 +0,0 @@
-.drawerSection {
-	composes: drawerSection from '../../shared.module.scss';
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.pricingField {
-	composes: pricingField from '../../shared.module.scss';
-}
-
-.cacheModeField {
-	margin-top: var(--spacing-5);
-}
-
-.extraBucketsSection {
-	margin-top: var(--spacing-7);
-	gap: var(--spacing-5);
-}
-
-.extraBucketsSectionHead {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.bucketRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-
-	input {
-		flex: 1 auto auto;
-		min-width: 0;
-	}
-}
-
-.bucketRowName {
-	flex: 0 0 110px;
-}
-
-.bucketAddBtn {
-	width: 100%;
-}
-
-.bucketPicker {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: var(--spacing-5);
-	padding: var(--spacing-6);
-	border-radius: 6px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-}
-
-.bucketPickerTitle {
-	font-size: var(--periscope-font-size-small);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
-}
-
-.bucketPickerChips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--spacing-4);
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx

@@ -1,179 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-
-import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from '../../../../../constants';
-import styles from './ExtraPricingBuckets.module.scss';
-import { parsePricingAmount } from '../../../../../utils';
-import type { CacheBucketKey, DrawerDraft } from '../../../../../types';
-import { Tooltip } from 'antd';
-
-type Pricing = DrawerDraft['pricing'];
-
-interface ExtraPricingBucketsProps {
-	pricing: Pricing;
-	isReadOnly: boolean;
-	onChange: (patch: Partial<Pricing>) => void;
-}
-
-function ExtraPricingBuckets({
-	pricing,
-	isReadOnly,
-	onChange,
-}: ExtraPricingBucketsProps): JSX.Element {
-	const [isExtraPricingBucketOpen, setIsExtraPricingBucketOpen] =
-		useState<boolean>(false);
-
-	// Track which buckets are shown separately from their value, so a freshly
-	// added bucket can start blank (value null) instead of being seeded to 0.
-	// Seeded from buckets that already carry a value (edit mode).
-	const [addedKeys, setAddedKeys] = useState<Set<CacheBucketKey>>(
-		() =>
-			new Set(
-				CACHE_BUCKETS.filter((b) => pricing[b.key] !== null).map((b) => b.key),
-			),
-	);
-
-	const addedBuckets = CACHE_BUCKETS.filter((b) => addedKeys.has(b.key));
-	const availableBuckets = CACHE_BUCKETS.filter((b) => !addedKeys.has(b.key));
-	const patchBucket = (key: CacheBucketKey, value: number | null): void => {
-		const patch: Partial<Pricing> = { [key]: value };
-		onChange(patch);
-	};
-
-	const addBucket = (key: CacheBucketKey): void => {
-		// Leave the value null so the field renders blank until the user types.
-		setAddedKeys((prev) => new Set(prev).add(key));
-		// Close the picker once nothing is left to add.
-		if (availableBuckets.length <= 1) {
-			setIsExtraPricingBucketOpen(false);
-		}
-	};
-
-	const removeBucket = (key: CacheBucketKey): void => {
-		setAddedKeys((prev) => {
-			const next = new Set(prev);
-			next.delete(key);
-			return next;
-		});
-		patchBucket(key, null);
-	};
-
-	return (
-		<div className={cx(styles.extraBucketsSection, styles.drawerSection)}>
-			<div className={styles.extraBucketsSectionHead}>
-				<Typography.Text as="span" size="small" color="muted">
-					Extra pricing buckets
-				</Typography.Text>
-				<Typography.Text as="span" size="small" color="muted">
-					optional
-				</Typography.Text>
-			</div>
-
-			{addedBuckets.map((bucket) => (
-				<div className={styles.bucketRow} key={bucket.key}>
-					<Typography.Text as="span" className={styles.bucketRowName}>
-						{bucket.label}
-					</Typography.Text>
-					<Input
-						type="number"
-						min={0}
-						step={0.01}
-						value={pricing[bucket.key] ?? ''}
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							// Clearing the field is allowed — the row stays mounted because
-							// presence is tracked in `addedKeys`, not the value. Removal is
-							// explicit via the trash button.
-							patchBucket(bucket.key, parsePricingAmount(e.target.value))
-						}
-						testId={`drawer-${bucket.testId}-cost`}
-					/>
-					<Tooltip title="Pricing per 1M tokens" placement="left">
-						<Typography.Text size="xs" color="muted">
-							1M
-						</Typography.Text>
-					</Tooltip>
-
-					{!isReadOnly && (
-						<Button
-							size="icon"
-							variant="ghost"
-							color="destructive"
-							onClick={(): void => removeBucket(bucket.key)}
-							aria-label={`Remove ${bucket.label}`}
-							data-testid={`drawer-remove-${bucket.testId}`}
-							prefix={<Trash2 size={14} />}
-						/>
-					)}
-				</div>
-			))}
-
-			{addedBuckets.length > 0 && (
-				<div className={cx(styles.pricingField, styles.cacheModeField)}>
-					<label htmlFor="cache-mode">Cache mode</label>
-					<SelectSimple
-						id="cache-mode"
-						value={pricing.cacheMode}
-						items={CACHE_MODE_OPTIONS}
-						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
-						disabled={isReadOnly}
-						className={styles.fullWidth}
-						withPortal={false}
-						testId="drawer-cache-mode"
-					/>
-				</div>
-			)}
-
-			{!isReadOnly && !isExtraPricingBucketOpen && availableBuckets.length > 0 && (
-				<Button
-					variant="dashed"
-					color="secondary"
-					className={styles.bucketAddBtn}
-					prefix={<Plus size={14} />}
-					onClick={(): void => setIsExtraPricingBucketOpen(true)}
-					testId="drawer-add-bucket-btn"
-				>
-					Add pricing bucket
-				</Button>
-			)}
-
-			{!isReadOnly && isExtraPricingBucketOpen && (
-				<div className={styles.bucketPicker} data-testid="drawer-bucket-picker">
-					<div className={styles.bucketPickerTitle}>Add a pricing bucket</div>
-					<div className={styles.bucketPickerChips}>
-						{availableBuckets.map((bucket) => (
-							<Button
-								key={bucket.key}
-								variant="outlined"
-								color="secondary"
-								size="sm"
-								prefix={<Plus size={12} />}
-								onClick={(): void => addBucket(bucket.key)}
-								testId={`drawer-add-bucket-${bucket.testId}`}
-							>
-								{bucket.label}
-							</Button>
-						))}
-					</div>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setIsExtraPricingBucketOpen(false)}
-						testId="drawer-add-bucket-cancel"
-					>
-						Cancel
-					</Button>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ExtraPricingBuckets;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/index.ts

@@ -1 +0,0 @@
-export { default } from './ExtraPricingBuckets';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss

@@ -1,49 +0,0 @@
-.drawerSection {
-	composes: drawerSection from '../../shared.module.scss';
-}
-
-.help {
-	composes: help from '../../shared.module.scss';
-}
-
-.patternBox {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	padding: var(--spacing-6);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-}
-
-.patternChips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--spacing-3);
-	min-height: 28px;
-}
-
-.patternChip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.patternChipRemove {
-	background: transparent;
-	border: none;
-	padding: 0;
-	margin-left: 2px;
-	cursor: pointer;
-	color: inherit;
-	display: inline-flex;
-	align-items: center;
-
-	&:hover {
-		color: var(--accent-cherry);
-	}
-}
-
-.patternAdd {
-	display: flex;
-	gap: var(--spacing-3);
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx

@@ -1,102 +0,0 @@
-import { useState } from 'react';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import { X } from '@signozhq/icons';
-
-import styles from './PatternEditor.module.scss';
-
-interface PatternEditorProps {
-	patterns: string[];
-	isReadOnly: boolean;
-	onChange: (patterns: string[]) => void;
-}
-
-// Model-name prefix patterns as removable chips + an add input.
-function PatternEditor({
-	patterns,
-	isReadOnly,
-	onChange,
-}: PatternEditorProps): JSX.Element {
-	const [patternInput, setPatternInput] = useState<string>('');
-
-	const addPattern = (): void => {
-		const next = patternInput.trim();
-		if (!next || patterns.includes(next)) {
-			setPatternInput('');
-			return;
-		}
-		onChange([...patterns, next]);
-		setPatternInput('');
-	};
-
-	const removePattern = (pattern: string): void => {
-		onChange(patterns.filter((p) => p !== pattern));
-	};
-
-	return (
-		<div className={styles.drawerSection}>
-			<Typography.Text as="span">
-				Model name patterns{' '}
-				<Typography.Text as="span" color="muted">
-					(prefix match)
-				</Typography.Text>
-			</Typography.Text>
-			<div className={styles.patternBox}>
-				<div className={styles.patternChips}>
-					{patterns.map((pattern) => (
-						<Badge
-							key={pattern}
-							color="vanilla"
-							variant="outline"
-							className={styles.patternChip}
-						>
-							{pattern}*
-							{!isReadOnly && (
-								<button
-									type="button"
-									aria-label={`Remove pattern ${pattern}`}
-									className={styles.patternChipRemove}
-									onClick={(): void => removePattern(pattern)}
-								>
-									<X size={10} />
-								</button>
-							)}
-						</Badge>
-					))}
-				</div>
-				{!isReadOnly && (
-					<div className={styles.patternAdd}>
-						<Input
-							placeholder="Add pattern…"
-							value={patternInput}
-							onChange={(e): void => setPatternInput(e.target.value)}
-							onKeyDown={(e): void => {
-								if (e.key === 'Enter') {
-									e.preventDefault();
-									addPattern();
-								}
-							}}
-							testId="drawer-pattern-input"
-						/>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={addPattern}
-							testId="drawer-pattern-add-btn"
-						>
-							+ Add
-						</Button>
-					</div>
-				)}
-			</div>
-			<Typography.Text as="p" size="small" color="muted">
-				Each pattern uses <strong>prefix matching</strong> against{' '}
-				<code>gen_ai.request.model</code>.
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default PatternEditor;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/index.ts

@@ -1 +0,0 @@
-export { default } from './PatternEditor';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.module.scss

@@ -1,31 +0,0 @@
-.drawerSection {
-	composes: drawerSection from '../../shared.module.scss';
-}
-
-.drawerSurface {
-	composes: drawerSurface from '../../shared.module.scss';
-}
-
-.drawerSurfaceHead {
-	composes: drawerSurfaceHead from '../../shared.module.scss';
-}
-
-.managedLabel {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.pricingField {
-	composes: pricingField from '../../shared.module.scss';
-}
-
-.required {
-	composes: required from '../../shared.module.scss';
-}
-
-.pricingGrid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: var(--spacing-6);
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx

@@ -1,91 +0,0 @@
-import { Input } from '@signozhq/ui/input';
-import { Lock } from '@signozhq/icons';
-import cx from 'classnames';
-
-import ExtraPricingBuckets from '../ExtraPricingBuckets';
-import styles from './PricingFields.module.scss';
-import { parsePricingAmount } from '../../../../../utils';
-import type { DrawerDraft } from '../../../../../types';
-import { Typography } from '@signozhq/ui/typography';
-
-type Pricing = DrawerDraft['pricing'];
-
-interface PricingFieldsProps {
-	pricing: Pricing;
-	isReadOnly: boolean;
-	onChange: (patch: Partial<Pricing>) => void;
-}
-
-function PricingFields({
-	pricing,
-	isReadOnly,
-	onChange,
-}: PricingFieldsProps): JSX.Element {
-	return (
-		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
-			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text size="base" weight="bold">
-					Pricing (per 1M tokens, USD)
-				</Typography.Text>
-
-				{isReadOnly && (
-					<span className={styles.managedLabel} data-testid="drawer-readonly-label">
-						<Lock size={12} />
-
-						<Typography.Text color="muted">Read-only</Typography.Text>
-					</span>
-				)}
-			</div>
-			<div className={styles.pricingGrid}>
-				<div className={styles.pricingField}>
-					<label htmlFor="input-cost">
-						Input cost{' '}
-						<span className={styles.required} aria-hidden="true">
-							*
-						</span>
-					</label>
-					<Input
-						id="input-cost"
-						type="number"
-						step={0.01}
-						required
-						value={pricing.input ?? ''}
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							onChange({ input: parsePricingAmount(e.target.value) })
-						}
-						testId="drawer-input-cost"
-					/>
-				</div>
-				<div className={styles.pricingField}>
-					<label htmlFor="output-cost">
-						Output cost{' '}
-						<span className={styles.required} aria-hidden="true">
-							*
-						</span>
-					</label>
-					<Input
-						id="output-cost"
-						type="number"
-						step={0.01}
-						required
-						value={pricing.output ?? ''}
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							onChange({ output: parsePricingAmount(e.target.value) })
-						}
-						testId="drawer-output-cost"
-					/>
-				</div>
-			</div>
-
-			<ExtraPricingBuckets
-				pricing={pricing}
-				isReadOnly={isReadOnly}
-				onChange={onChange}
-			/>
-		</div>
-	);
-}
-
-export default PricingFields;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/index.ts

@@ -1 +0,0 @@
-export { default } from './PricingFields';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss

@@ -1,115 +0,0 @@
-.drawerSection {
-	composes: drawerSection from '../../shared.module.scss';
-}
-
-.drawerSurface {
-	composes: drawerSurface from '../../shared.module.scss';
-}
-
-.drawerSurfaceHead {
-	composes: drawerSurfaceHead from '../../shared.module.scss';
-}
-
-.managedLabel {
-	composes: managedLabel from '../../shared.module.scss';
-}
-
-.sourceRadioGroup {
-	--radio-group-item-border-color: var(--l2-border);
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-	.sourceRadio {
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		justify-content: flex-start;
-		gap: var(--spacing-5);
-		padding: var(--spacing-5) var(--spacing-6);
-		border-radius: var(--radius-2);
-		border: 1px solid transparent;
-		background: var(--l3-background);
-		margin: 0;
-		width: 100%;
-		// Include padding + border in the 100% width so the card fits inside
-		// the SOURCE surface instead of overflowing its right edge.
-		box-sizing: border-box;
-		cursor: pointer;
-		transition:
-			background-color 0.12s ease,
-			border-color 0.12s ease;
-
-		// The radio button itself: keep it fixed-size and aligned with the title
-		// baseline (margin-top compensates for align-items: flex-start vs the
-		// title's line-box).
-		> button[role='radio'] {
-			flex: 0 0 16px;
-			width: 16px;
-			height: 16px;
-			margin-top: 3px;
-		}
-
-		// The library wraps children in a <label>. Make it grow into the
-		// remaining width and reset the .drawerSection label typography leak
-		// (set earlier in this file) so the title/desc divs use their own styles.
-		> label {
-			flex: 1 1 auto;
-			min-width: 0;
-			display: block;
-			text-align: left;
-			cursor: pointer;
-			font-size: inherit;
-			font-weight: inherit;
-			color: inherit;
-		}
-
-		// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
-		// Use :has() to highlight the wrapper card when its inner button is checked.
-		&.sourceRadioAuto:has(button[data-state='checked']) {
-			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
-			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
-		}
-
-		&.sourceRadioOverride:has(button[data-state='checked']) {
-			background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
-			border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent);
-		}
-
-		&:hover {
-			background: var(--l3-background-hover);
-		}
-	}
-}
-
-.sourceRadioTitle {
-	font-weight: var(--font-weight-semibold);
-	font-size: var(--periscope-font-size-base);
-	color: var(--l1-foreground);
-}
-
-.sourceRadioDesc {
-	margin-top: 2px;
-	font-size: 12px;
-	color: var(--l3-foreground);
-}
-
-.resetConfirm {
-	margin-top: var(--spacing-6);
-	padding: var(--spacing-6);
-	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
-	border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
-
-	p {
-		margin: 0 0 var(--spacing-5);
-		font-size: 12px;
-	}
-}
-
-.resetConfirmActions {
-	display: flex;
-	gap: var(--spacing-4);
-	justify-content: flex-end;
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx

@@ -1,115 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { Lock } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import styles from './SourceSelector.module.scss';
-
-interface SourceSelectorProps {
-	isOverride: boolean;
-	isReadOnly: boolean;
-	disableAuto?: boolean;
-	onChange: (isOverride: boolean) => void;
-}
-
-// Auto-populated vs user-override selector, with a confirm step before
-// discarding custom values back to defaults.
-function SourceSelector({
-	isOverride,
-	isReadOnly,
-	disableAuto = false,
-	onChange,
-}: SourceSelectorProps): JSX.Element {
-	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
-
-	const handleSourceChange = (value: 'auto' | 'override'): void => {
-		if (value === 'auto' && isOverride) {
-			setShowResetConfirm(true);
-			return;
-		}
-		if (value === 'override' && !isOverride) {
-			onChange(true);
-		}
-	};
-
-	const confirmReset = (): void => {
-		onChange(false);
-		setShowResetConfirm(false);
-	};
-
-	return (
-		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
-			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text weight="bold" size="base">
-					Source
-				</Typography.Text>
-
-				{isReadOnly && (
-					<span className={styles.managedLabel} data-testid="drawer-managed-label">
-						<Lock size={12} />
-						Managed by SigNoz
-					</span>
-				)}
-			</div>
-			<RadioGroup
-				value={isOverride ? 'override' : 'auto'}
-				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
-				className={styles.sourceRadioGroup}
-			>
-				<RadioGroupItem
-					value="auto"
-					containerClassName={cx(styles.sourceRadio, styles.sourceRadioAuto)}
-					testId="drawer-source-auto"
-					disabled={disableAuto}
-				>
-					<div className={styles.sourceRadioTitle}>Auto-populated</div>
-					<div className={styles.sourceRadioDesc}>
-						{disableAuto
-							? 'Available once SigNoz has default pricing for this model.'
-							: 'Default pricing from SigNoz.'}
-					</div>
-				</RadioGroupItem>
-				<RadioGroupItem
-					value="override"
-					containerClassName={cx(styles.sourceRadio, styles.sourceRadioOverride)}
-					testId="drawer-source-override"
-				>
-					<div className={styles.sourceRadioTitle}>User override</div>
-					<div className={styles.sourceRadioDesc}>
-						Custom pricing. Takes precedence.
-					</div>
-				</RadioGroupItem>
-			</RadioGroup>
-			{showResetConfirm && (
-				<div className={styles.resetConfirm} aria-label="Reset to default pricing">
-					<p>
-						Reset to default pricing? Custom values will be discarded. It might take
-						24 hours for changes to take effect.
-					</p>
-					<div className={styles.resetConfirmActions}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={(): void => setShowResetConfirm(false)}
-							testId="drawer-reset-keep-btn"
-						>
-							Keep
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={confirmReset}
-							testId="drawer-reset-confirm-btn"
-						>
-							Reset
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default SourceSelector;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/index.ts

@@ -1 +0,0 @@
-export { default } from './SourceSelector';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -1,100 +0,0 @@
-import { useCallback, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { useQueryClient } from 'react-query';
-import {
-	getListLLMPricingRulesQueryKey,
-	useCreateOrUpdateLLMPricingRules,
-} from 'api/generated/services/llmpricingrules';
-
-import { EMPTY_DRAFT } from '../../../../constants';
-import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
-import { buildRulePayload, draftFromRule } from '../../../../utils';
-
-interface UseModelCostDrawerResult {
-	isOpen: boolean;
-	mode: DrawerMode;
-	initialDraft: DrawerDraft;
-	openForAdd: (prefillModelName?: string) => void;
-	openForEdit: (rule: PricingRule) => void;
-	close: () => void;
-	save: (draft: DrawerDraft) => Promise<void>;
-	isSaving: boolean;
-	saveError: string | null;
-	selectedRuleId: string | null;
-}
-
-export function useModelCostDrawer(): UseModelCostDrawerResult {
-	const queryClient = useQueryClient();
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [mode, setMode] = useState<DrawerMode>('add');
-	const [initialDraft, setInitialDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
-	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
-	const [saveError, setSaveError] = useState<string | null>(null);
-
-	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
-		useCreateOrUpdateLLMPricingRules();
-
-	const invalidateList = useCallback(async (): Promise<void> => {
-		await queryClient.invalidateQueries({
-			queryKey: getListLLMPricingRulesQueryKey(),
-		});
-	}, [queryClient]);
-
-	const openForAdd = useCallback((): void => {
-		setMode('add');
-		setInitialDraft({
-			...EMPTY_DRAFT,
-			modelName: '',
-			patterns: [],
-		});
-		setSelectedRuleId(null);
-		setSaveError(null);
-		setIsOpen(true);
-	}, []);
-
-	const openForEdit = useCallback((rule: PricingRule): void => {
-		setMode('edit');
-		setInitialDraft(draftFromRule(rule));
-		setSelectedRuleId(rule.id);
-		setSaveError(null);
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback((): void => {
-		setIsOpen(false);
-		setSelectedRuleId(null);
-		setSaveError(null);
-	}, []);
-
-	const save = useCallback(
-		async (draft: DrawerDraft): Promise<void> => {
-			setSaveError(null);
-			try {
-				await createOrUpdate({
-					data: { rules: [buildRulePayload(draft)] },
-				});
-				await invalidateList();
-				setIsOpen(false);
-				setSelectedRuleId(null);
-				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
-			} catch (error) {
-				const message = error instanceof Error ? error.message : 'Save failed';
-				setSaveError(message);
-			}
-		},
-		[createOrUpdate, invalidateList, mode],
-	);
-
-	return {
-		isOpen,
-		mode,
-		initialDraft,
-		openForAdd,
-		openForEdit,
-		close,
-		save,
-		isSaving,
-		saveError,
-		selectedRuleId,
-	};
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/index.ts

@@ -1,2 +0,0 @@
-export { default } from './ModelCostDrawer';
-export { useModelCostDrawer } from './hooks/useModelCostDrawer';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss

@@ -1,59 +0,0 @@
-/* Shared drawer selectors used by 2+ of the model-cost drawer components. */
-/* Components pull these in via CSS-modules `composes` from their own module so */
-/* the authored class names in the TSX stay identical. */
-/* NOTE: this file is a `composes` target, so it is parsed as plain CSS (no SCSS */
-/* preprocessing). Keep it flat — no nesting, no slash-slash comments. */
-
-.drawerSection {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.drawerSection .help,
-.help {
-	margin: 0;
-}
-
-.help code {
-	padding: 1px var(--spacing-2);
-	border-radius: 3px;
-	background: var(--l3-background);
-	font-size: 10px;
-}
-
-.drawerSurface {
-	padding: var(--spacing-7);
-	border-radius: 6px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-}
-
-.drawerSurfaceHead {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: var(--spacing-5);
-}
-
-.managedLabel {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.required {
-	color: var(--accent-cherry);
-}
-
-.pricingField {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.pricingField input {
-	width: 100%;
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -15,6 +15,6 @@
 	justify-content: center;
 	margin-top: var(--spacing-8);
 	min-height: 400px;
-	color: var(--l3-foreground);
+	color: var(--text-vanilla-400);
 	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts

@@ -1,66 +0,0 @@
-import { useCallback, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { useQueryClient } from 'react-query';
-import {
-	getListLLMPricingRulesQueryKey,
-	useDeleteLLMPricingRule,
-} from 'api/generated/services/llmpricingrules';
-
-import type { PricingRule } from '../../types';
-
-// The minimal slice of a rule the delete-confirm flow needs: the id to delete
-// and the model name to show in the confirmation copy.
-type PendingDelete = Pick<PricingRule, 'id' | 'modelName'>;
-
-interface UseModelCostDeleteResult {
-	requestDelete: (rule: PendingDelete) => void;
-	confirmDelete: () => Promise<void>;
-	cancelDelete: () => void;
-	pendingDelete: PendingDelete | null;
-	isDeleting: boolean;
-}
-
-// Owns the confirm-then-delete flow for a pricing rule, independent of the
-// add/edit drawer — delete is triggered from the table row menu, so this state
-// lives at the panel level rather than inside useModelCostDrawer.
-export function useModelCostDelete(): UseModelCostDeleteResult {
-	const queryClient = useQueryClient();
-	// The rule queued for deletion. Non-null drives the confirm dialog open.
-	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
-
-	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
-		useDeleteLLMPricingRule();
-
-	const requestDelete = useCallback((rule: PendingDelete): void => {
-		setPendingDelete({ id: rule.id, modelName: rule.modelName });
-	}, []);
-
-	const cancelDelete = useCallback((): void => {
-		setPendingDelete(null);
-	}, []);
-
-	const confirmDelete = useCallback(async (): Promise<void> => {
-		if (!pendingDelete) {
-			return;
-		}
-		try {
-			await deleteRuleApi({ pathParams: { id: pendingDelete.id } });
-			await queryClient.invalidateQueries({
-				queryKey: getListLLMPricingRulesQueryKey(),
-			});
-			setPendingDelete(null);
-			toast.success('Model cost deleted');
-		} catch (error) {
-			const message = error instanceof Error ? error.message : 'Delete failed';
-			toast.error(message);
-		}
-	}, [deleteRuleApi, pendingDelete, queryClient]);
-
-	return {
-		requestDelete,
-		confirmDelete,
-		cancelDelete,
-		pendingDelete,
-		isDeleting,
-	};
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -1,68 +1,6 @@
-import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { CacheBucketDef, DrawerDraft } from './types';
-
 export const PAGE_SIZE = 20;
 
 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
-export const SEARCH_KEY = 'search';
-export const SEARCH_DEBOUNCE_MS = 300;
-export const SOURCE_KEY = 'source';
 
-export type SourceFilter = 'all' | 'override' | 'auto';
-export const SOURCE_FILTER_OPTIONS: { value: SourceFilter; label: string }[] = [
-	{ value: 'all', label: 'All sources' },
-	{ value: 'override', label: 'User override' },
-	{ value: 'auto', label: 'Auto' },
-];
-
-export const SOURCE_FILTER_TO_IS_OVERRIDE: Record<
-	SourceFilter,
-	boolean | undefined
-> = {
-	all: undefined,
-	override: true,
-	auto: false,
-};
-
-// Match the page size so the skeleton reserves the same number of rows the
-// loaded page renders — otherwise the table height jumps on load.
 export const SKELETON_ROW_COUNT = PAGE_SIZE;
-
-export const PROVIDER_OPTIONS = [
-	{ value: 'OpenAI', label: 'OpenAI' },
-	{ value: 'Anthropic', label: 'Anthropic' },
-	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
-	{ value: 'Google', label: 'Google' },
-	{ value: 'Self-hosted', label: 'Self-hosted' },
-	{ value: 'Other', label: 'Other' },
-];
-
-export const CACHE_MODE_OPTIONS = [
-	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
-	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
-	// https://app.notion.com/p/signoz/LLM-Tokens-Cost-Calculation-330fcc6bcd19805283ccc841d596358e?source=copy_link#33efcc6bcd1980e6a187e442c6ba5996
-	{ value: CacheModeDTO.unknown, label: 'Unknown' },
-];
-
-export const CACHE_BUCKETS: CacheBucketDef[] = [
-	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
-	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
-];
-
-export const EMPTY_DRAFT: DrawerDraft = {
-	id: null,
-	sourceId: null,
-	modelName: '',
-	provider: 'OpenAI',
-	patterns: [],
-	isOverride: true,
-	pricing: {
-		input: null,
-		output: null,
-		cacheMode: CacheModeDTO.unknown,
-		cacheRead: null,
-		cacheWrite: null,
-	},
-};

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -1,39 +1,4 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	type LlmpricingruletypesLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
-
 export interface ExtraBucket {
 	key: string;
 	pricePerMillion: number;
 }
-
-export type DrawerMode = 'add' | 'edit';
-
-// Optional pricing buckets the user can add/remove. Keyed by the matching
-// DrawerDraft['pricing'] field.
-export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
-
-export interface CacheBucketDef {
-	key: CacheBucketKey;
-	label: string;
-	testId: string;
-}
-
-export interface DrawerDraft {
-	id: string | null;
-	sourceId: string | null;
-	modelName: string;
-	provider: string;
-	patterns: string[];
-	isOverride: boolean;
-	pricing: {
-		input: number | null;
-		output: number | null;
-		cacheMode: CacheModeDTO;
-		cacheRead: number | null;
-		cacheWrite: number | null;
-	};
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -1,19 +1,8 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-	type LlmpricingruletypesLLMPricingCacheCostsDTO,
-	type LlmpricingruletypesLLMRulePricingDTO,
-	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-import type {
-	DrawerDraft,
-	DrawerMode,
-	ExtraBucket,
-	PricingRule,
-} from './types';
+import type { ExtraBucket } from './types';
+import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 dayjs.extend(relativeTime);
 
@@ -24,19 +13,6 @@ const getRelativeTime = (
 	return parsed?.isValid() ? parsed.fromNow() : '—';
 };
 
-const hasCacheValue = (value: number | null | undefined): value is number =>
-	typeof value === 'number' && value > 0;
-
-// ─── Input helpers ───────────────────────────────────────────────────────────
-
-export const parsePricingAmount = (raw: string): number | null => {
-	if (raw.trim() === '') {
-		return null;
-	}
-	const value = Number(raw);
-	return Number.isFinite(value) ? value : 0;
-};
-
 // ─── Display helpers ─────────────────────────────────────────────────────────
 
 export const formatPricePerMillion = (value: number | undefined): string => {
@@ -47,117 +23,38 @@ export const formatPricePerMillion = (value: number | undefined): string => {
 	return `$${value.toFixed(2)}`;
 };
 
-export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
+export const getExtraBuckets = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): ExtraBucket[] => {
 	const cache = rule.pricing?.cache;
 	if (!cache) {
 		return [];
 	}
 	const buckets: ExtraBucket[] = [];
-	if (hasCacheValue(cache.read)) {
+	if (typeof cache.read === 'number' && cache.read > 0) {
 		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
 	}
-	if (hasCacheValue(cache.write)) {
+	if (typeof cache.write === 'number' && cache.write > 0) {
 		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
 	}
 	return buckets;
 };
 
-export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
-	rule.isOverride ? 'User override' : 'Auto';
+export const getSourceLabel = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
 
-export const getRelativeLastSeen = (rule: PricingRule): string =>
-	getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+export const getRelativeLastSeen = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
 
 // Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
 // are lower-cased so the id is consistently normalised (providers/models can
 // arrive with mixed casing).
-export const getCanonicalId = (rule: PricingRule): string => {
+export const getCanonicalId = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => {
 	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
 	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
 	return `${provider}:${model}`;
 };
-
-// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
-
-export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
-	id: rule.id,
-	sourceId: rule.sourceId ?? null,
-	modelName: rule.modelName,
-	provider: rule.provider,
-	patterns: rule.modelPattern || [],
-	isOverride: !!rule.isOverride,
-	pricing: {
-		input: rule.pricing?.input ?? 0,
-		output: rule.pricing?.output ?? 0,
-		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
-		cacheRead: rule.pricing?.cache?.read ?? null,
-		cacheWrite: rule.pricing?.cache?.write ?? null,
-	},
-});
-
-const buildCacheCosts = (
-	pricing: DrawerDraft['pricing'],
-): LlmpricingruletypesLLMPricingCacheCostsDTO | undefined => {
-	const { cacheMode, cacheRead, cacheWrite } = pricing;
-	if (!hasCacheValue(cacheRead) && !hasCacheValue(cacheWrite)) {
-		return undefined;
-	}
-	return {
-		mode: cacheMode,
-		...(hasCacheValue(cacheRead) && { read: cacheRead }),
-		...(hasCacheValue(cacheWrite) && { write: cacheWrite }),
-	};
-};
-
-export const buildPricingPayload = (
-	draft: DrawerDraft,
-): LlmpricingruletypesLLMRulePricingDTO => {
-	const cache = buildCacheCosts(draft.pricing);
-	return {
-		input: draft.pricing.input ?? 0,
-		output: draft.pricing.output ?? 0,
-		...(cache && { cache }),
-	};
-};
-
-export const buildRulePayload = (
-	draft: DrawerDraft,
-): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
-	id: draft.id || undefined,
-	sourceId: draft.sourceId || undefined,
-	modelName: draft.modelName.trim(),
-	provider: draft.provider.trim(),
-	modelPattern: draft.patterns,
-	isOverride: draft.isOverride,
-	enabled: true,
-	unit: UnitDTO.per_million_tokens,
-	pricing: buildPricingPayload(draft),
-});
-
-export const validateModelName = (
-	modelName: string,
-	mode: DrawerMode,
-): true | string =>
-	mode === 'add' && !modelName.trim() ? 'Billing model ID is required.' : true;
-
-export const validateProvider = (provider: string): true | string =>
-	provider.trim() ? true : 'Provider is required.';
-
-export const validatePricing = (
-	pricing: DrawerDraft['pricing'],
-	isOverride: boolean,
-): true | string => {
-	if (!isOverride) {
-		return true;
-	}
-	if (pricing.input === null || pricing.input <= 0) {
-		return 'Input cost must be greater than 0.';
-	}
-	if (pricing.output === null || pricing.output <= 0) {
-		return 'Output cost must be greater than 0.';
-	}
-	if ((pricing.cacheRead ?? 0) < 0 || (pricing.cacheWrite ?? 0) < 0) {
-		return 'Cache costs must be non-negative.';
-	}
-	return true;
-};

frontend/src/container/MembersSettings/MembersSettings.styles.scss

@@ -1,14 +1,9 @@
-@use '../../styles/scrollbar' as *;
-
 .members-settings-page {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
 	height: 100%;
-	overflow-y: auto;
-
-	@include custom-scrollbar;
 }
 
 .members-settings {

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -6,7 +6,7 @@ import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
-import InviteMembersModal from 'container/MembersSettings/components/InviteMembersModal/InviteMembersModal';
+import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { parseAsBoolean, useQueryState } from 'nuqs';

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -110,9 +110,7 @@ describe('MembersSettings (integration)', () => {
 
 		fireEvent.click(await screen.findByText('Alice Smith'));
 
-		await expect(
-			screen.findByText('Member Details'),
-		).resolves.toBeInTheDocument();
+		await screen.findByText('Member Details');
 	});
 
 	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
@@ -129,7 +127,7 @@ describe('MembersSettings (integration)', () => {
 		fireEvent.click(screen.getByRole('button', { name: /invite member/i }));
 
 		await expect(
-			screen.findAllByPlaceholderText('e.g. john@signoz.io'),
+			screen.findAllByPlaceholderText('john@signoz.io'),
 		).resolves.toHaveLength(3);
 	});
 
@@ -139,7 +137,7 @@ describe('MembersSettings (integration)', () => {
 		});
 
 		await expect(
-			screen.findAllByPlaceholderText('e.g. john@signoz.io'),
+			screen.findAllByPlaceholderText('john@signoz.io'),
 		).resolves.toHaveLength(3);
 	});
 });

frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -1,38 +0,0 @@
-.invite-members-modal {
-	max-width: 700px;
-	background: var(--popover);
-	border: 1px solid var(--secondary);
-	border-radius: 4px;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
-
-	[data-slot='dialog-header'] {
-		padding: var(--padding-4);
-		border-bottom: 1px solid var(--secondary);
-		flex-shrink: 0;
-		background: transparent;
-		margin: 0;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: var(--label-base-400-font-size);
-		font-weight: var(--label-base-400-font-weight);
-		line-height: var(--label-base-400-line-height);
-		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
-		margin: 0;
-	}
-
-	[data-slot='dialog-description'] {
-		padding: var(--padding-4);
-	}
-}
-
-.invite-members-modal__footer {
-	padding-top: var(--padding-4);
-	border-top: 1px solid var(--l1-border);
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-6);
-}

frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,71 +0,0 @@
-import { useCallback } from 'react';
-import { X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/sonner';
-import InviteMembers from 'components/InviteMembers/InviteMembers';
-
-import './InviteMembersModal.styles.scss';
-
-export interface InviteMembersModalProps {
-	open: boolean;
-	onClose: () => void;
-	onComplete?: () => void;
-}
-
-function InviteMembersModal({
-	open,
-	onClose,
-	onComplete,
-}: InviteMembersModalProps): JSX.Element {
-	const handleSuccess = useCallback((): void => {
-		toast.success('Invites sent successfully', { position: 'top-right' });
-		onClose();
-		onComplete?.();
-	}, [onClose, onComplete]);
-
-	const handlePartialSuccess = useCallback((): void => {
-		toast.warning('Some invites failed', { position: 'top-right' });
-		onComplete?.();
-	}, [onComplete]);
-
-	return (
-		<DialogWrapper
-			title="Invite Team Members"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			showCloseButton
-			width="wide"
-			className="invite-members-modal"
-		>
-			<InviteMembers
-				onSuccess={handleSuccess}
-				onPartialSuccess={handlePartialSuccess}
-				renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => (
-					<div className="invite-members-modal__footer">
-						<Button type="button" variant="solid" color="secondary" onClick={onClose}>
-							<X size={12} />
-							Cancel
-						</Button>
-
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={submit}
-							disabled={!canSubmit}
-							loading={isSubmitting}
-						>
-							{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
-						</Button>
-					</div>
-				)}
-			/>
-		</DialogWrapper>
-	);
-}
-
-export default InviteMembersModal;

frontend/src/container/MembersSettings/components/InviteMembersModal/__tests__/InviteMembersModal.test.tsx

@@ -1,210 +0,0 @@
-import { toast } from '@signozhq/ui/sonner';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import InviteMembersModal from '../InviteMembersModal';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: jest.fn(),
-		warning: jest.fn(),
-	},
-}));
-
-interface MockInviteMembersProps {
-	onSuccess: () => void;
-	onPartialSuccess: () => void;
-	onAllFailed?: () => void;
-	renderFooter: (props: {
-		submit: () => void;
-		canSubmit: boolean;
-		isSubmitting: boolean;
-	}) => JSX.Element;
-}
-
-let mockInviteMembersProps: MockInviteMembersProps | null = null;
-
-jest.mock('components/InviteMembers/InviteMembers', () => {
-	return function MockInviteMembers(props: MockInviteMembersProps): JSX.Element {
-		mockInviteMembersProps = props;
-		return (
-			<div data-testid="mock-invite-members">
-				{props.renderFooter({
-					submit: jest.fn(),
-					canSubmit: true,
-					isSubmitting: false,
-				})}
-			</div>
-		);
-	};
-});
-
-const defaultProps = {
-	open: true,
-	onClose: jest.fn(),
-	onComplete: jest.fn(),
-};
-
-function renderComponent(
-	props: Partial<typeof defaultProps> = {},
-): ReturnType<typeof render> {
-	return render(<InviteMembersModal {...defaultProps} {...props} />);
-}
-
-describe('InviteMembersModal', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockInviteMembersProps = null;
-	});
-
-	describe('rendering', () => {
-		it('renders modal with title and InviteMembers component', () => {
-			renderComponent();
-
-			expect(screen.getByRole('dialog')).toBeInTheDocument();
-			expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
-				'Invite Team Members',
-			);
-			expect(screen.getByTestId('mock-invite-members')).toBeInTheDocument();
-		});
-
-		it('does not render when open=false', () => {
-			renderComponent({ open: false });
-
-			expect(screen.queryByText('Invite Team Members')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('footer buttons', () => {
-		it('renders Cancel and Invite buttons', () => {
-			renderComponent();
-
-			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-			expect(
-				screen.getByRole('button', { name: /invite team members/i }),
-			).toBeInTheDocument();
-		});
-
-		it('disables Invite button when canSubmit=false', () => {
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: jest.fn(),
-					canSubmit: false,
-					isSubmitting: false,
-				}) as JSX.Element,
-			);
-
-			expect(getByRole('button', { name: /invite team members/i })).toBeDisabled();
-		});
-
-		it('shows loading state when isSubmitting=true', () => {
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: jest.fn(),
-					canSubmit: true,
-					isSubmitting: true,
-				}) as JSX.Element,
-			);
-
-			expect(getByRole('button', { name: /inviting/i })).toBeInTheDocument();
-		});
-
-		it('calls onClose when Cancel is clicked', async () => {
-			const user = userEvent.setup();
-			const onClose = jest.fn();
-			renderComponent({ onClose });
-
-			await user.click(screen.getByRole('button', { name: /cancel/i }));
-
-			expect(onClose).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls submit when Invite button is clicked', async () => {
-			const user = userEvent.setup();
-			const mockSubmit = jest.fn();
-
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: mockSubmit,
-					canSubmit: true,
-					isSubmitting: false,
-				}) as JSX.Element,
-			);
-
-			await user.click(getByRole('button', { name: /invite team members/i }));
-
-			expect(mockSubmit).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('handleSuccess callback', () => {
-		it('shows success toast, calls onClose and onComplete', () => {
-			const onClose = jest.fn();
-			const onComplete = jest.fn();
-			renderComponent({ onClose, onComplete });
-
-			mockInviteMembersProps?.onSuccess();
-
-			expect(toast.success).toHaveBeenCalledWith('Invites sent successfully', {
-				position: 'top-right',
-			});
-			expect(onClose).toHaveBeenCalledTimes(1);
-			expect(onComplete).toHaveBeenCalledTimes(1);
-		});
-
-		it('works without onComplete prop', () => {
-			const onClose = jest.fn();
-			renderComponent({ onClose, onComplete: undefined });
-
-			mockInviteMembersProps?.onSuccess();
-
-			expect(toast.success).toHaveBeenCalled();
-			expect(onClose).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('handlePartialSuccess callback', () => {
-		it('shows warning toast and calls onComplete', () => {
-			const onComplete = jest.fn();
-			renderComponent({ onComplete });
-
-			mockInviteMembersProps?.onPartialSuccess();
-
-			expect(toast.warning).toHaveBeenCalledWith('Some invites failed', {
-				position: 'top-right',
-			});
-			expect(onComplete).toHaveBeenCalledTimes(1);
-		});
-
-		it('does not call onClose on partial success', () => {
-			const onClose = jest.fn();
-			renderComponent({ onClose });
-
-			mockInviteMembersProps?.onPartialSuccess();
-
-			expect(onClose).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('dialog close behavior', () => {
-		it('calls onClose when dialog is closed via close button', async () => {
-			const user = userEvent.setup();
-			const onClose = jest.fn();
-			renderComponent({ onClose });
-
-			const closeButton = screen.getByRole('button', { name: /close/i });
-			await user.click(closeButton);
-
-			expect(onClose).toHaveBeenCalled();
-		});
-	});
-});

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

@@ -1,12 +1,26 @@
-import { useMemo } from 'react';
-import { ArrowRight, LoaderCircle } from '@signozhq/icons';
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation } from 'react-query';
 import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import InviteMembers from 'components/InviteMembers/InviteMembers';
-import { InviteMemberRow, InviteResult } from 'components/InviteMembers/types';
-import { useRoles } from 'components/RolesSelect/RolesSelect';
+import inviteUsers from 'api/v1/invite/bulk/create';
+import AuthError from 'components/AuthError/AuthError';
 import { useNotifications } from 'hooks/useNotifications';
+import { cloneDeep, debounce } from 'lodash-es';
+import {
+	ArrowRight,
+	ChevronDown,
+	CircleAlert,
+	LoaderCircle,
+	Plus,
+	Trash2,
+} from '@signozhq/icons';
+import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
+import { v4 as uuid } from 'uuid';
 
 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
 
@@ -22,41 +36,101 @@ interface TeamMember {
 
 interface InviteTeamMembersProps {
 	isLoading: boolean;
+	teamMembers: TeamMember[] | null;
+	setTeamMembers: (teamMembers: TeamMember[]) => void;
 	onNext: () => void;
 }
 
 function InviteTeamMembers({
 	isLoading,
+	teamMembers,
+	setTeamMembers,
 	onNext,
 }: InviteTeamMembersProps): JSX.Element {
+	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
+		TeamMember[] | null
+	>(teamMembers);
+	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
+		{},
+	);
+	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
+	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
+	const [inviteError, setInviteError] = useState<APIError | null>(null);
 	const { notifications } = useNotifications();
-	const { roles } = useRoles();
 
-	const roleIdToName = useMemo(() => {
-		const map: Record<string, string> = {};
-		roles.forEach((role) => {
-			if (role.id && role.name) {
-				map[role.id] = role.name;
+	const defaultTeamMember: TeamMember = {
+		email: '',
+		role: '',
+		name: '',
+		frontendBaseUrl: getBaseUrl(),
+		id: '',
+	};
+
+	useEffect(() => {
+		if (teamMembers === null) {
+			const initialTeamMembers = Array.from({ length: 3 }, () => ({
+				...defaultTeamMember,
+				id: uuid(),
+			}));
+
+			setTeamMembersToInvite(initialTeamMembers);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [teamMembers]);
+
+	const handleAddTeamMember = (): void => {
+		const newTeamMember = {
+			...defaultTeamMember,
+			id: uuid(),
+		};
+		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
+	};
+
+	const handleRemoveTeamMember = (id: string): void => {
+		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
+	};
+
+	const isMemberTouched = (member: TeamMember): boolean =>
+		member.email.trim() !== '' ||
+		Boolean(member.role && member.role.trim() !== '');
+
+	const validateAllUsers = (): boolean => {
+		let isValid = true;
+		let hasEmailErrors = false;
+		let hasRoleErrors = false;
+
+		const updatedEmailValidity: Record<string, boolean> = {};
+
+		const touchedMembers = teamMembersToInvite?.filter(isMemberTouched) ?? [];
+
+		touchedMembers?.forEach((member) => {
+			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
+			const roleValid = Boolean(member.role && member.role.trim() !== '');
+
+			if (!emailValid || !member.email) {
+				isValid = false;
+				hasEmailErrors = true;
+			}
+			if (!roleValid) {
+				isValid = false;
+				hasRoleErrors = true;
+			}
+
+			if (member.id) {
+				updatedEmailValidity[member.id] = emailValid;
 			}
 		});
-		return map;
-	}, [roles]);
 
-	const toTeamMembers = (rows: InviteMemberRow[]): TeamMember[] =>
-		rows.map((row) => ({
-			email: row.email,
-			role: roleIdToName[row.roleId] ?? row.roleId,
-			name: '',
-			frontendBaseUrl: getBaseUrl(),
-			id: row.id,
-		}));
+		setEmailValidity(updatedEmailValidity);
+		setHasInvalidEmails(hasEmailErrors);
+		setHasInvalidRoles(hasRoleErrors);
 
-	const handleSuccess = (
-		_results: InviteResult[],
-		rows: InviteMemberRow[],
-	): void => {
+		return isValid;
+	};
+
+	const handleInviteUsersSuccess = (): void => {
 		logEvent('Org Onboarding: Invite Team Members Success', {
-			teamMembers: toTeamMembers(rows),
+			teamMembers: teamMembersToInvite,
 		});
 		notifications.success({
 			message: 'Invites sent successfully!',
@@ -66,34 +140,125 @@ function InviteTeamMembers({
 		}, 1000);
 	};
 
-	const handlePartialSuccess = (
-		_results: InviteResult[],
-		rows: InviteMemberRow[],
-	): void => {
-		logEvent('Org Onboarding: Invite Team Members Partial Success', {
-			teamMembers: toTeamMembers(rows),
-		});
-		notifications.warning({
-			message: 'Some invites failed. Check the errors above.',
-		});
+	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
+		inviteUsers,
+		{
+			onSuccess: (): void => {
+				handleInviteUsersSuccess();
+			},
+			onError: (error: APIError): void => {
+				logEvent('Org Onboarding: Invite Team Members Failed', {
+					teamMembers: teamMembersToInvite,
+				});
+				setInviteError(error);
+			},
+		},
+	);
+
+	const handleNext = (): void => {
+		if (validateAllUsers()) {
+			setTeamMembers(teamMembersToInvite?.filter(isMemberTouched) ?? []);
+			setHasInvalidEmails(false);
+			setHasInvalidRoles(false);
+			setInviteError(null);
+			sendInvites({
+				invites: teamMembersToInvite?.filter(isMemberTouched) ?? [],
+			});
+		}
 	};
 
-	const handleAllFailed = (
-		_results: InviteResult[],
-		rows: InviteMemberRow[],
-	): void => {
-		logEvent('Org Onboarding: Invite Team Members Failed', {
-			teamMembers: toTeamMembers(rows),
-		});
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedValidateEmail = useCallback(
+		debounce((email: string, memberId: string, updatedMembers: TeamMember[]) => {
+			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
+
+			// Clear hasInvalidEmails only when ALL emails are valid
+			if (hasInvalidEmails) {
+				const allEmailsValid = updatedMembers.every(
+					(m) => m.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(m.email),
+				);
+				if (allEmailsValid) {
+					setHasInvalidEmails(false);
+				}
+			}
+		}, 500),
+		[hasInvalidEmails],
+	);
+
+	const handleEmailChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>, member: TeamMember): void => {
+			const { value } = e.target;
+			const updatedMembers = cloneDeep(teamMembersToInvite || []);
+
+			const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+			if (memberToUpdate && member.id) {
+				memberToUpdate.email = value;
+				setTeamMembersToInvite(updatedMembers);
+				debouncedValidateEmail(value, member.id, updatedMembers);
+				// Clear API error when user starts typing
+				if (inviteError) {
+					setInviteError(null);
+				}
+			}
+		},
+		[debouncedValidateEmail, inviteError, teamMembersToInvite],
+	);
+
+	const createEmailChangeHandler = useCallback(
+		(member: TeamMember) =>
+			(e: React.ChangeEvent<HTMLInputElement>): void => {
+				handleEmailChange(e, member);
+			},
+		[handleEmailChange],
+	);
+
+	const handleRoleChange = (role: string, member: TeamMember): void => {
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate && member.id) {
+			memberToUpdate.role = role;
+			setTeamMembersToInvite(updatedMembers);
+
+			// Clear errors when user selects a role
+			if (hasInvalidRoles) {
+				// Check if all roles are now valid
+				const allRolesValid = updatedMembers.every(
+					(m) => m.role && m.role.trim() !== '',
+				);
+				if (allRolesValid) {
+					setHasInvalidRoles(false);
+				}
+			}
+			if (inviteError) {
+				setInviteError(null);
+			}
+		}
+	};
+
+	const getValidationErrorMessage = (): string => {
+		if (hasInvalidEmails && hasInvalidRoles) {
+			return 'Please enter valid emails and select roles for team members';
+		}
+		if (hasInvalidEmails) {
+			return 'Please enter valid emails for team members';
+		}
+		return 'Please select roles for team members';
 	};
 
 	const handleDoLater = (): void => {
 		logEvent('Org Onboarding: Clicked Do Later', {
 			currentPageID: 4,
 		});
+
 		onNext();
 	};
 
+	const hasInvites =
+		(teamMembersToInvite?.filter(isMemberTouched) ?? []).length > 0;
+	const isButtonDisabled = isSendingInvites || isLoading;
+	const isInviteButtonDisabled = isButtonDisabled || !hasInvites;
+
 	return (
 		<div className="questions-container">
 			<OnboardingQuestionHeader
@@ -108,52 +273,126 @@ function InviteTeamMembers({
 							Invite your team to the SigNoz workspace
 						</div>
 
-						<InviteMembers
-							onSuccess={handleSuccess}
-							onPartialSuccess={handlePartialSuccess}
-							onAllFailed={handleAllFailed}
-							showHeader
-							renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => {
-								const isButtonDisabled = isSubmitting || isLoading;
-								const isInviteButtonDisabled = isButtonDisabled || !canSubmit;
+						<div className="invite-team-members-table">
+							<div className="invite-team-members-table-header">
+								<div className="table-header-cell email-header">Email address</div>
+								<div className="table-header-cell role-header">Roles</div>
+								<div className="table-header-cell action-header" />
+							</div>
 
-								return (
-									<div className="onboarding-buttons-container">
-										<Button
-											variant="solid"
-											color="primary"
-											className={`onboarding-next-button ${
-												isInviteButtonDisabled ? 'disabled' : ''
-											}`}
-											onClick={submit}
-											disabled={isInviteButtonDisabled}
-											data-testid="send-invites-button"
-											suffix={
-												isButtonDisabled ? (
-													<LoaderCircle className="animate-spin" size={12} />
-												) : (
-													<ArrowRight size={12} />
-												)
-											}
-										>
-											Send Invites
-										</Button>
-										<Button
-											variant="ghost"
-											color="secondary"
-											className="onboarding-do-later-button"
-											onClick={handleDoLater}
-											disabled={isButtonDisabled}
-											data-testid="do-later-button"
-										>
-											I&apos;ll do this later
-										</Button>
+							<div className="invite-team-members-container">
+								{teamMembersToInvite?.map((member) => (
+									<div className="team-member-row" key={member.id}>
+										<div className="team-member-cell email-cell">
+											<Input
+												placeholder="e.g. john@signoz.io"
+												value={member.email}
+												type="email"
+												id={`email-input-${member.id}`}
+												name={`email-input-${member.id}`}
+												required
+												autoComplete="off"
+												className="team-member-email-input"
+												onChange={createEmailChangeHandler(member)}
+											/>
+											{member.id &&
+												emailValidity[member.id] === false &&
+												member.email.trim() !== '' && (
+													<Typography.Text className="email-error-message">
+														Invalid email address
+													</Typography.Text>
+												)}
+										</div>
+										<div className="team-member-cell role-cell">
+											<Select
+												value={member.role || undefined}
+												onChange={(value): void => handleRoleChange(value, member)}
+												className="team-member-role-select"
+												placeholder="Select roles"
+												suffixIcon={<ChevronDown size={14} />}
+											>
+												<Select.Option value="VIEWER">Viewer</Select.Option>
+												<Select.Option value="EDITOR">Editor</Select.Option>
+												<Select.Option value="ADMIN">Admin</Select.Option>
+											</Select>
+										</div>
+										<div className="team-member-cell action-cell">
+											{teamMembersToInvite && teamMembersToInvite.length > 1 && (
+												<Button
+													variant="ghost"
+													color="secondary"
+													className="remove-team-member-button"
+													onClick={(): void => handleRemoveTeamMember(member.id)}
+													aria-label="Remove team member"
+												>
+													<Trash2 size={12} />
+												</Button>
+											)}
+										</div>
 									</div>
-								);
-							}}
-						/>
+								))}
+							</div>
+
+							<div className="invite-team-members-add-another-member-container">
+								<Button
+									variant="dashed"
+									color="secondary"
+									className="add-another-member-button"
+									prefix={<Plus size={12} />}
+									onClick={handleAddTeamMember}
+								>
+									Add another
+								</Button>
+							</div>
+						</div>
 					</div>
 				</div>
+
+				{(hasInvalidEmails || hasInvalidRoles) && (
+					<Callout
+						type="error"
+						size="small"
+						showIcon
+						icon={<CircleAlert size={12} />}
+						className="invite-team-members-error-callout"
+					>
+						{getValidationErrorMessage()}
+					</Callout>
+				)}
+
+				{inviteError && !hasInvalidEmails && !hasInvalidRoles && (
+					<AuthError error={inviteError} />
+				)}
+
+				<div className="onboarding-buttons-container">
+					<Button
+						variant="solid"
+						color="primary"
+						className={`onboarding-next-button ${
+							isInviteButtonDisabled ? 'disabled' : ''
+						}`}
+						onClick={handleNext}
+						disabled={isInviteButtonDisabled}
+						suffix={
+							isButtonDisabled ? (
+								<LoaderCircle className="animate-spin" size={12} />
+							) : (
+								<ArrowRight size={12} />
+							)
+						}
+					>
+						Send Invites
+					</Button>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className="onboarding-do-later-button"
+						onClick={handleDoLater}
+						disabled={isButtonDisabled}
+					>
+						I&apos;ll do this later
+					</Button>
+				</div>
 			</div>
 		</div>
 	);

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

@@ -1,86 +1,97 @@
+import { rest, server } from 'mocks-server/server';
 import {
-	InviteMemberRow,
-	InviteMembersProps,
-	InviteResult,
-} from 'components/InviteMembers/types';
-import logEvent from 'api/common/logEvent';
-import { render, screen, userEvent } from 'tests/test-utils';
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 
 import InviteTeamMembers from '../InviteTeamMembers';
 
-const mockNotificationSuccess = jest.fn();
-const mockNotificationWarning = jest.fn();
+const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
+	(args: { message: string }) => void
+>;
+const mockNotificationError = jest.fn() as jest.MockedFunction<
+	(args: { message: string }) => void
+>;
 
 jest.mock('hooks/useNotifications', () => ({
 	useNotifications: (): any => ({
 		notifications: {
 			success: mockNotificationSuccess,
-			warning: mockNotificationWarning,
+			error: mockNotificationError,
 		},
 	}),
 }));
 
-jest.mock('api/common/logEvent', () => jest.fn());
+const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk';
 
-jest.mock('components/RolesSelect/RolesSelect', () => ({
-	useRoles: (): any => ({
-		roles: [
-			{ id: 'role-viewer-id', name: 'VIEWER' },
-			{ id: 'role-editor-id', name: 'EDITOR' },
-			{ id: 'role-admin-id', name: 'ADMIN' },
-		],
-		isLoading: false,
-		isError: false,
-		error: undefined,
-		refetch: jest.fn(),
-	}),
-}));
+interface TeamMember {
+	email: string;
+	role: string;
+	name: string;
+	frontendBaseUrl: string;
+	id: string;
+}
 
-jest.mock('utils/basePath', () => ({
-	...jest.requireActual('utils/basePath'),
-	getBaseUrl: (): string => 'http://localhost:3301',
-}));
+interface InviteRequestBody {
+	invites: { email: string; role: string }[];
+}
 
-let mockInviteMembersProps: InviteMembersProps | null = null;
+interface RenderProps {
+	isLoading?: boolean;
+	teamMembers?: TeamMember[] | null;
+}
 
-jest.mock('components/InviteMembers/InviteMembers', () => {
-	return function MockInviteMembers(props: InviteMembersProps): JSX.Element {
-		mockInviteMembersProps = props;
-		return (
-			<div data-testid="mock-invite-members">
-				{props.renderFooter?.({
-					submit: jest.fn().mockResolvedValue([]),
-					reset: jest.fn(),
-					canSubmit: true,
-					isSubmitting: false,
-					touchedCount: 0,
-				})}
-			</div>
-		);
-	};
-});
-
-const mockOnNext = jest.fn();
+const mockOnNext = jest.fn() as jest.MockedFunction<() => void>;
+const mockSetTeamMembers = jest.fn() as jest.MockedFunction<
+	(members: TeamMember[]) => void
+>;
 
 function renderComponent({
 	isLoading = false,
-}: { isLoading?: boolean } = {}): ReturnType<typeof render> {
-	return render(<InviteTeamMembers isLoading={isLoading} onNext={mockOnNext} />);
+	teamMembers = null,
+}: RenderProps = {}): ReturnType<typeof render> {
+	return render(
+		<InviteTeamMembers
+			isLoading={isLoading}
+			teamMembers={teamMembers}
+			setTeamMembers={mockSetTeamMembers}
+			onNext={mockOnNext}
+		/>,
+	);
+}
+
+async function selectRole(
+	user: ReturnType<typeof userEvent.setup>,
+	selectIndex: number,
+	optionLabel: string,
+): Promise<void> {
+	const placeholders = screen.getAllByText(/select roles/i);
+	await user.click(placeholders[selectIndex]);
+	const optionContent = await screen.findByText(optionLabel);
+	fireEvent.click(optionContent);
 }
 
 describe('InviteTeamMembers', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		jest.useFakeTimers();
-		mockInviteMembersProps = null;
+
+		server.use(
+			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success' })),
+			),
+		);
 	});
 
 	afterEach(() => {
 		jest.useRealTimers();
+		server.resetHandlers();
 	});
 
-	describe('rendering', () => {
-		it('renders header and InviteMembers component', () => {
+	describe('Initial rendering', () => {
+		it('renders the page header, column labels, default rows, and action buttons', () => {
 			renderComponent();
 
 			expect(
@@ -89,20 +100,11 @@ describe('InviteTeamMembers', () => {
 			expect(
 				screen.getByText(/signoz is a lot more useful with collaborators/i),
 			).toBeInTheDocument();
-			expect(screen.getByTestId('mock-invite-members')).toBeInTheDocument();
-		});
-
-		it('passes showHeader=true to InviteMembers', () => {
-			renderComponent();
-
-			expect(mockInviteMembersProps?.showHeader).toBe(true);
-		});
-	});
-
-	describe('footer buttons', () => {
-		it('renders Send Invites and Do Later buttons', () => {
-			renderComponent();
-
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(3);
+			expect(screen.getByText('Email address')).toBeInTheDocument();
+			expect(screen.getByText('Roles')).toBeInTheDocument();
 			expect(
 				screen.getByRole('button', { name: /send invites/i }),
 			).toBeInTheDocument();
@@ -111,7 +113,7 @@ describe('InviteTeamMembers', () => {
 			).toBeInTheDocument();
 		});
 
-		it('disables buttons when isLoading=true', () => {
+		it('disables both action buttons while isLoading is true', () => {
 			renderComponent({ isLoading: true });
 
 			expect(screen.getByRole('button', { name: /send invites/i })).toBeDisabled();
@@ -119,181 +121,355 @@ describe('InviteTeamMembers', () => {
 				screen.getByRole('button', { name: /i'll do this later/i }),
 			).toBeDisabled();
 		});
-
-		it('disables Send Invites when canSubmit=false from InviteMembers', () => {
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByTestId } = render(
-				mockInviteMembersProps?.renderFooter?.({
-					submit: jest.fn().mockResolvedValue([]),
-					reset: jest.fn(),
-					canSubmit: false,
-					isSubmitting: false,
-					touchedCount: 0,
-				}) as JSX.Element,
-			);
-
-			expect(getByTestId('send-invites-button')).toBeDisabled();
-			expect(getByTestId('do-later-button')).not.toBeDisabled();
-		});
-
-		it('disables buttons when isSubmitting=true from InviteMembers', () => {
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByTestId } = render(
-				mockInviteMembersProps?.renderFooter?.({
-					submit: jest.fn().mockResolvedValue([]),
-					reset: jest.fn(),
-					canSubmit: true,
-					isSubmitting: true,
-					touchedCount: 0,
-				}) as JSX.Element,
-			);
-
-			expect(getByTestId('send-invites-button')).toBeDisabled();
-			expect(getByTestId('do-later-button')).toBeDisabled();
-		});
 	});
 
-	describe('handleSuccess callback', () => {
-		it('logs event with teamMembers in correct shape, shows success notification, and calls onNext after delay', () => {
+	describe('Row management', () => {
+		it('adds a new empty row when "Add another" is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderComponent();
 
-			const mockResults: InviteResult[] = [
-				{ email: 'user1@test.com', success: true },
-				{ email: 'user2@test.com', success: true },
-			];
-			const mockRows: InviteMemberRow[] = [
-				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-viewer-id' },
-				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-editor-id' },
-			];
-			mockInviteMembersProps?.onSuccess?.(mockResults, mockRows);
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(3);
 
-			expect(logEvent).toHaveBeenCalledWith(
-				'Org Onboarding: Invite Team Members Success',
-				{
-					teamMembers: [
-						{
-							email: 'user1@test.com',
-							role: 'VIEWER',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-1',
-						},
-						{
-							email: 'user2@test.com',
-							role: 'EDITOR',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-2',
-						},
-					],
-				},
-			);
-			expect(mockNotificationSuccess).toHaveBeenCalledWith({
-				message: 'Invites sent successfully!',
-			});
+			await user.click(screen.getByRole('button', { name: /add another/i }));
 
-			expect(mockOnNext).not.toHaveBeenCalled();
-			jest.advanceTimersByTime(1000);
-			expect(mockOnNext).toHaveBeenCalledTimes(1);
+			expect(
+				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+			).toHaveLength(4);
 		});
-	});
 
-	describe('handlePartialSuccess callback', () => {
-		it('logs event with teamMembers in correct shape and shows warning notification', () => {
+		it('removes the correct row when its trash icon is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderComponent();
 
-			const mockResults: InviteResult[] = [
-				{ email: 'user1@test.com', success: true },
-				{ email: 'user2@test.com', success: false, error: 'Already exists' },
-			];
-			const mockRows: InviteMemberRow[] = [
-				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-viewer-id' },
-				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-admin-id' },
-			];
-			mockInviteMembersProps?.onPartialSuccess?.(mockResults, mockRows);
-
-			expect(logEvent).toHaveBeenCalledWith(
-				'Org Onboarding: Invite Team Members Partial Success',
-				{
-					teamMembers: [
-						{
-							email: 'user1@test.com',
-							role: 'VIEWER',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-1',
-						},
-						{
-							email: 'user2@test.com',
-							role: 'ADMIN',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-2',
-						},
-					],
-				},
+			const emailInputs = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
 			);
-			expect(mockNotificationWarning).toHaveBeenCalledWith({
-				message: 'Some invites failed. Check the errors above.',
-			});
-		});
-	});
-
-	describe('handleAllFailed callback', () => {
-		it('logs event with teamMembers in correct shape', () => {
-			renderComponent();
-
-			const mockResults: InviteResult[] = [
-				{ email: 'user1@test.com', success: false, error: 'Error 1' },
-				{ email: 'user2@test.com', success: false, error: 'Error 2' },
-			];
-			const mockRows: InviteMemberRow[] = [
-				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-editor-id' },
-				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-viewer-id' },
-			];
-			mockInviteMembersProps?.onAllFailed?.(mockResults, mockRows);
-
-			expect(logEvent).toHaveBeenCalledWith(
-				'Org Onboarding: Invite Team Members Failed',
-				{
-					teamMembers: [
-						{
-							email: 'user1@test.com',
-							role: 'EDITOR',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-1',
-						},
-						{
-							email: 'user2@test.com',
-							role: 'VIEWER',
-							name: '',
-							frontendBaseUrl: 'http://localhost:3301',
-							id: 'row-2',
-						},
-					],
-				},
-			);
-		});
-	});
-
-	describe('handleDoLater', () => {
-		it('logs event and calls onNext immediately', async () => {
-			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-			renderComponent();
+			await user.type(emailInputs[0], 'first@example.com');
+			await screen.findByDisplayValue('first@example.com');
 
 			await user.click(
-				screen.getByRole('button', { name: /i'll do this later/i }),
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
 			);
 
-			expect(logEvent).toHaveBeenCalledWith('Org Onboarding: Clicked Do Later', {
-				currentPageID: 4,
+			await waitFor(() => {
+				expect(
+					screen.queryByDisplayValue('first@example.com'),
+				).not.toBeInTheDocument();
+				expect(
+					screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
+				).toHaveLength(2);
+			});
+		});
+
+		it('hides remove buttons when only one row remains', async () => {
+			renderComponent();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			let removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			while (removeButtons.length > 0) {
+				await user.click(removeButtons[0]);
+				removeButtons = screen.queryAllByRole('button', {
+					name: /remove team member/i,
+				});
+			}
+
+			expect(
+				screen.queryByRole('button', { name: /remove team member/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Inline email validation', () => {
+		it('shows an inline error after typing an invalid email and clears it when a valid email is entered', async () => {
+			jest.useFakeTimers();
+			const user = userEvent.setup({
+				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
+			});
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, 'not-an-email');
+			jest.advanceTimersByTime(600);
+			await waitFor(() => {
+				expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'good@example.com');
+			jest.advanceTimersByTime(600);
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/invalid email address/i),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('does not show an inline error when the field is cleared back to empty', async () => {
+			jest.useFakeTimers();
+			const user = userEvent.setup({
+				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
+			});
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'a');
+			await user.clear(firstInput);
+			jest.advanceTimersByTime(600);
+
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/invalid email address/i),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Validation callout on Complete', () => {
+		it('shows the correct callout message for each combination of email/role validity', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+			renderComponent();
+
+			const removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			await user.click(removeButtons[0]);
+			await user.click(
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			);
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, 'bad-email');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(
+						/please enter valid emails and select roles for team members/i,
+					),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await selectRole(user, 0, 'Viewer');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(/please enter valid emails for team members/i),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'valid@example.com');
+			await user.click(screen.getByRole('button', { name: /add another/i }));
+			const allInputs = screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i);
+			await user.type(allInputs[1], 'norole@example.com');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(/please select roles for team members/i),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+			});
+		}, 15000);
+
+		it('treats whitespace as untouched, clears the callout on fix-and-resubmit, and clears role error on role select', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+			renderComponent();
+
+			const removeButtons = screen.getAllByRole('button', {
+				name: /remove team member/i,
+			});
+			await user.click(removeButtons[0]);
+			await user.click(
+				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			);
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+
+			await user.type(firstInput, '   ');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/please enter valid emails/i),
+				).not.toBeInTheDocument();
+				expect(screen.queryByText(/please select roles/i)).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'bad-email');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.getByText(
+						/please enter valid emails and select roles for team members/i,
+					),
+				).toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await user.clear(firstInput);
+			await user.type(firstInput, 'good@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+			await waitFor(() => {
+				expect(
+					screen.queryByText(/please enter valid emails and select roles/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please enter valid emails for team members/i),
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByText(/please select roles for team members/i),
+				).not.toBeInTheDocument();
+			});
+
+			await waitFor(() => expect(mockOnNext).toHaveBeenCalledTimes(1), {
+				timeout: 1200,
+			});
+		}, 15000);
+
+		it('disables the Send Invites button when all rows are untouched (empty)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const sendInvitesBtn = screen.getByRole('button', { name: /send invites/i });
+			expect(sendInvitesBtn).toBeDisabled();
+
+			// Type something to make a row touched
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'a');
+
+			expect(sendInvitesBtn).not.toBeDisabled();
+		});
+	});
+
+	describe('API integration', () => {
+		it('only sends touched (non-empty) rows — empty rows are excluded from the invite payload', async () => {
+			let capturedBody: InviteRequestBody | null = null;
+
+			server.use(
+				rest.post(INVITE_USERS_ENDPOINT, async (req, res, ctx) => {
+					capturedBody = await req.json<InviteRequestBody>();
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'only@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(capturedBody).not.toBeNull();
+				expect(capturedBody?.invites).toHaveLength(1);
+				expect(capturedBody?.invites[0]).toMatchObject({
+					email: 'only@example.com',
+					role: 'ADMIN',
+				});
+			});
+			await waitFor(() => expect(mockOnNext).toHaveBeenCalled(), {
+				timeout: 1200,
+			});
+		});
+
+		it('calls the invite API, shows a success notification, and calls onNext after the 1 s delay', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'alice@example.com');
+			await selectRole(user, 0, 'Admin');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(mockNotificationSuccess).toHaveBeenCalledWith(
+					expect.objectContaining({ message: 'Invites sent successfully!' }),
+				);
+			});
+
+			await waitFor(
+				() => {
+					expect(mockOnNext).toHaveBeenCalledTimes(1);
+				},
+				{ timeout: 1200 },
+			);
+		});
+
+		it('renders an API error container when the invite request fails', async () => {
+			server.use(
+				rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
+					res(
+						ctx.status(500),
+						ctx.json({
+							errors: [{ code: 'INTERNAL_ERROR', msg: 'Something went wrong' }],
+						}),
+					),
+				),
+			);
+
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderComponent();
+
+			const [firstInput] = screen.getAllByPlaceholderText(
+				/e\.g\. john@signoz\.io/i,
+			);
+			await user.type(firstInput, 'fail@example.com');
+			await selectRole(user, 0, 'Viewer');
+			await user.click(screen.getByRole('button', { name: /send invites/i }));
+
+			await waitFor(() => {
+				expect(document.querySelector('.auth-error-container')).toBeInTheDocument();
+			});
+
+			await user.type(firstInput, 'x');
+			await waitFor(() => {
+				expect(
+					document.querySelector('.auth-error-container'),
+				).not.toBeInTheDocument();
 			});
-			expect(mockOnNext).toHaveBeenCalledTimes(1);
 		});
 	});
 });

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -143,8 +143,6 @@
 			}
 
 			&.invite-team-members-form {
-				--invite-members-field-background: var(--l3-background);
-
 				padding-right: 12px;
 
 				.form-group {

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

@@ -22,8 +22,7 @@ const ORG_PREFERENCES_ENDPOINT = '*/api/v1/org/preferences/list';
 const UPDATE_ORG_PREFERENCE_ENDPOINT = '*/api/v1/org/preferences/name/update';
 const UPDATE_PROFILE_ENDPOINT = '*/api/v2/zeus/profiles';
 const EDIT_ORG_ENDPOINT = '*/api/v2/orgs/me';
-const CREATE_USER_ENDPOINT = '*/api/v2/users';
-const LIST_ROLES_ENDPOINT = '*/api/v1/roles';
+const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk/create';
 
 const mockOrgPreferences = {
 	data: {
@@ -32,12 +31,6 @@ const mockOrgPreferences = {
 	status: 'success',
 };
 
-const MOCK_ROLES = [
-	{ id: 'role-admin', name: 'Admin', description: 'Admin role' },
-	{ id: 'role-editor', name: 'Editor', description: 'Editor role' },
-	{ id: 'role-viewer', name: 'Viewer', description: 'Viewer role' },
-];
-
 describe('OnboardingQuestionaire Component', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -55,11 +48,8 @@ describe('OnboardingQuestionaire Component', () => {
 			rest.post(UPDATE_ORG_PREFERENCE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success' })),
 			),
-			rest.get(LIST_ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: MOCK_ROLES })),
-			),
-			rest.post(CREATE_USER_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(201), ctx.json({ data: { id: 'user-123' } })),
+			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success' })),
 			),
 		);
 	});

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -11,6 +11,7 @@ import { AxiosError } from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
+import { InviteTeamMembersProps } from 'container/OrganizationSettings/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
@@ -70,6 +71,9 @@ function OnboardingQuestionaire(): JSX.Element {
 
 	const [optimiseSignozDetails, setOptimiseSignozDetails] =
 		useState<OptimiseSignozDetails>(INITIAL_OPTIMISE_SIGNOZ_DETAILS);
+	const [teamMembers, setTeamMembers] = useState<
+		InviteTeamMembersProps[] | null
+	>(null);
 
 	const [updatingOrgOnboardingStatus, setUpdatingOrgOnboardingStatus] =
 		useState<boolean>(false);
@@ -228,6 +232,8 @@ function OnboardingQuestionaire(): JSX.Element {
 				{currentStep === 4 && (
 					<InviteTeamMembers
 						isLoading={updatingOrgOnboardingStatus}
+						teamMembers={teamMembers}
+						setTeamMembers={setTeamMembers}
 						onNext={handleOnboardingComplete}
 					/>
 				)}

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ArrowRight, Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
+import { Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
 import {
 	Button,
 	Flex,
@@ -10,8 +10,6 @@ import {
 	Space,
 	Steps,
 } from 'antd';
-import { Button as SignozButton } from '@signozhq/ui/button';
-import { toast } from '@signozhq/ui/sonner';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
@@ -29,7 +27,7 @@ import { isModifierKeyPressed } from 'utils/app';
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
-import InviteMembers from 'components/InviteMembers/InviteMembers';
+import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
 import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links';
 
 import '../OnboardingV2.styles.scss';
@@ -121,10 +119,6 @@ const ONBOARDING_V3_ANALYTICS_EVENTS_MAP = {
 	GET_HELP_BUTTON_CLICKED: 'Get help clicked',
 	GET_EXPERT_ASSISTANCE_BUTTON_CLICKED: 'Get expert assistance clicked',
 	INVITE_TEAM_MEMBER_BUTTON_CLICKED: 'Invite team member clicked',
-	INVITE_TEAM_MEMBER_SEND_CLICKED: 'Send invites clicked',
-	INVITE_TEAM_MEMBER_SUCCESS: 'Invite team members success',
-	INVITE_TEAM_MEMBER_PARTIAL_SUCCESS: 'Invite team members partial success',
-	INVITE_TEAM_MEMBER_FAILED: 'Invite team members failed',
 	CLOSE_ONBOARDING_CLICKED: 'Close onboarding clicked',
 	DATA_SOURCE_REQUESTED: 'Datasource requested',
 	DATA_SOURCE_SEARCHED: 'Searched',
@@ -1153,54 +1147,12 @@ function OnboardingAddDataSource(): JSX.Element {
 					destroyOnClose
 				>
 					<div className="invite-team-member-modal-content">
-						<InviteMembers
-							onSuccess={(): void => {
-								void logEvent(
-									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SUCCESS}`,
-									{},
-								);
-								setShowInviteTeamMembersModal(false);
-
-								toast.success('Invites sent successfully', { position: 'top-center' });
-							}}
-							onPartialSuccess={(): void => {
-								void logEvent(
-									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_PARTIAL_SUCCESS}`,
-									{},
-								);
-							}}
-							onAllFailed={(): void => {
-								void logEvent(
-									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_FAILED}`,
-									{},
-								);
-							}}
-							renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => (
-								<div className="invite-team-member-modal-footer">
-									<SignozButton
-										variant="solid"
-										color="secondary"
-										onClick={(): void => setShowInviteTeamMembersModal(false)}
-									>
-										Cancel
-									</SignozButton>
-									<SignozButton
-										variant="solid"
-										onClick={(): void => {
-											void logEvent(
-												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SEND_CLICKED}`,
-												{},
-											);
-											void submit();
-										}}
-										disabled={!canSubmit}
-										loading={isSubmitting}
-										suffix={<ArrowRight size={14} />}
-									>
-										Send Invites
-									</SignozButton>
-								</div>
-							)}
+						<InviteTeamMembers
+							isLoading={false}
+							teamMembers={null}
+							setTeamMembers={(): void => {}}
+							onNext={(): void => setShowInviteTeamMembersModal(false)}
+							onClose={(): void => setShowInviteTeamMembersModal(false)}
 						/>
 					</div>
 				</Modal>

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.styles.scss

@@ -0,0 +1,116 @@
+.team-member-container {
+	display: flex;
+	align-items: center;
+
+	.invite-team-members-form {
+		padding: 16px 0px;
+	}
+
+	.team-member-email-input {
+		width: 80%;
+		background-color: var(--l1-background);
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+
+		.ant-input,
+		.ant-input-group-addon {
+			background-color: var(--l1-background) !important;
+			border-right: 0px;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
+	}
+
+	.team-member-role-select {
+		width: 20%;
+
+		.ant-select-selector {
+			border: 1px solid var(--l1-border);
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
+	}
+
+	.remove-team-member-button {
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
+	}
+}
+
+.invite-team-members-container {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	.invite-team-members-add-another-member-container {
+		margin: 16px 0px;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.next-prev-container {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+
+		margin-top: 16px;
+	}
+
+	.error-message-container,
+	.success-message-container,
+	.partially-sent-invites-container {
+		border-radius: 4px;
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		.error-message,
+		.success-message {
+			font-size: 12px;
+			font-weight: 400;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.invite-users-error-message-container,
+	.invite-users-success-message-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+
+		.success-message {
+			color: var(--bg-success-500, #00b37e);
+		}
+	}
+
+	.partially-sent-invites-container {
+		margin-top: 16px;
+		padding: 8px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		box-sizing: border-box;
+
+		.partially-sent-invites-message {
+			color: var(--bg-warning-500, #fbbd23);
+
+			font-size: 12px;
+			font-weight: 400;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+}

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx

@@ -0,0 +1,298 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation } from 'react-query';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import inviteUsers from 'api/v1/invite/bulk/create';
+import { useNotifications } from 'hooks/useNotifications';
+import { cloneDeep, debounce, isEmpty } from 'lodash-es';
+import {
+	ArrowRight,
+	CircleCheck,
+	Plus,
+	TriangleAlert,
+	X,
+} from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+import { v4 as uuid } from 'uuid';
+
+import './InviteTeamMembers.styles.scss';
+
+interface TeamMember {
+	email: string;
+	role: string;
+	name: string;
+	frontendBaseUrl: string;
+	id: string;
+}
+
+interface InviteTeamMembersProps {
+	isLoading: boolean;
+	teamMembers: TeamMember[] | null;
+	setTeamMembers: (teamMembers: TeamMember[]) => void;
+	onNext: () => void;
+	onClose: () => void;
+}
+
+const ONBOARDING_V3_ANALYTICS_EVENTS_MAP = {
+	BASE: 'Onboarding V3',
+	INVITE_TEAM_MEMBER_BUTTON_CLICKED: 'Send invites clicked',
+	INVITE_TEAM_MEMBER_SUCCESS: 'Invite team members success',
+	INVITE_TEAM_MEMBER_PARTIAL_SUCCESS: 'Invite team members partial success',
+	INVITE_TEAM_MEMBER_FAILED: 'Invite team members failed',
+};
+
+function InviteTeamMembers({
+	isLoading,
+	teamMembers,
+	setTeamMembers,
+	onNext,
+	onClose,
+}: InviteTeamMembersProps): JSX.Element {
+	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
+		TeamMember[] | null
+	>(teamMembers);
+	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
+		{},
+	);
+	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
+	const { notifications } = useNotifications();
+
+	const defaultTeamMember: TeamMember = {
+		email: '',
+		role: 'EDITOR',
+		name: '',
+		frontendBaseUrl: getBaseUrl(),
+		id: '',
+	};
+
+	useEffect(() => {
+		if (isEmpty(teamMembers)) {
+			const teamMember = {
+				...defaultTeamMember,
+				id: uuid(),
+			};
+
+			setTeamMembersToInvite([teamMember]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [teamMembers]);
+
+	const handleAddTeamMember = (): void => {
+		const newTeamMember = {
+			...defaultTeamMember,
+			id: uuid(),
+		};
+		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
+	};
+
+	const handleRemoveTeamMember = (id: string): void => {
+		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
+	};
+
+	// Validation function to check all users
+	const validateAllUsers = (): boolean => {
+		let isValid = true;
+
+		const updatedValidity: Record<string, boolean> = {};
+
+		teamMembersToInvite?.forEach((member) => {
+			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
+			if (!emailValid || !member.email) {
+				isValid = false;
+				setHasInvalidEmails(true);
+			}
+			updatedValidity[member.id!] = emailValid;
+		});
+
+		setEmailValidity(updatedValidity);
+
+		return isValid;
+	};
+
+	const handleInviteUsersSuccess = (): void => {
+		logEvent(
+			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SUCCESS}`,
+			{
+				teamMembers: teamMembersToInvite,
+			},
+		);
+		setTimeout(() => {
+			onNext();
+		}, 1000);
+	};
+
+	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
+		inviteUsers,
+		{
+			onSuccess: (): void => {
+				handleInviteUsersSuccess();
+				notifications.success({
+					message: 'Invites sent successfully!',
+				});
+			},
+			onError: (error: APIError): void => {
+				logEvent(
+					`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_FAILED}`,
+					{
+						teamMembers: teamMembersToInvite,
+						error,
+					},
+				);
+				notifications.error({
+					message: error.getErrorCode(),
+					description: error.getErrorMessage(),
+				});
+			},
+		},
+	);
+
+	const handleNext = (): void => {
+		if (validateAllUsers()) {
+			setTeamMembers(teamMembersToInvite || []);
+
+			logEvent(
+				`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
+				{
+					teamMembers: teamMembersToInvite,
+				},
+			);
+
+			setHasInvalidEmails(false);
+			sendInvites({
+				invites: teamMembersToInvite || [],
+			});
+		}
+	};
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedValidateEmail = useCallback(
+		debounce((email: string, memberId: string) => {
+			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
+		}, 500),
+		[],
+	);
+
+	const handleEmailChange = (
+		e: React.ChangeEvent<HTMLInputElement>,
+		member: TeamMember,
+	): void => {
+		const { value } = e.target;
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);
+
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate) {
+			memberToUpdate.email = value;
+			setTeamMembersToInvite(updatedMembers);
+			debouncedValidateEmail(value, member.id!);
+		}
+	};
+
+	const handleRoleChange = (role: string, member: TeamMember): void => {
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate) {
+			memberToUpdate.role = role;
+			setTeamMembersToInvite(updatedMembers);
+		}
+	};
+
+	return (
+		<div className="invite-team-members-container">
+			<div className="invite-team-members-form">
+				<div className="form-group">
+					<div className="invite-team-members-container">
+						{teamMembersToInvite?.map((member) => (
+							<div className="team-member-container" key={member.id}>
+								<Input
+									placeholder="your-teammate@org.com"
+									value={member.email}
+									type="email"
+									required
+									autoFocus
+									autoComplete="off"
+									className="team-member-email-input"
+									onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
+										handleEmailChange(e, member)
+									}
+									addonAfter={
+										emailValidity[member.id!] === undefined ? null : emailValidity[
+												member.id!
+										  ] ? (
+											<CircleCheck size={14} color={Color.BG_FOREST_500} />
+										) : (
+											<TriangleAlert size={14} color={Color.BG_SIENNA_500} />
+										)
+									}
+								/>
+								<Select
+									defaultValue={member.role}
+									onChange={(value): void => handleRoleChange(value, member)}
+									className="team-member-role-select"
+								>
+									<Select.Option value="VIEWER">Viewer</Select.Option>
+									<Select.Option value="EDITOR">Editor</Select.Option>
+									<Select.Option value="ADMIN">Admin</Select.Option>
+								</Select>
+
+								{teamMembersToInvite?.length > 1 && (
+									<Button
+										type="default"
+										className="remove-team-member-button periscope-btn"
+										icon={<X size={14} />}
+										onClick={(): void => handleRemoveTeamMember(member.id)}
+									/>
+								)}
+							</div>
+						))}
+					</div>
+
+					<div className="invite-team-members-add-another-member-container">
+						<Button
+							type="primary"
+							className="add-another-member-button periscope-btn"
+							icon={<Plus size={14} />}
+							onClick={handleAddTeamMember}
+						>
+							Member
+						</Button>
+					</div>
+				</div>
+
+				{hasInvalidEmails && (
+					<div className="error-message-container">
+						<Typography.Text className="error-message" color="danger">
+							<TriangleAlert size={14} /> Please enter valid emails for all team
+							members
+						</Typography.Text>
+					</div>
+				)}
+			</div>
+			<div className="next-prev-container">
+				<Button
+					type="default"
+					className="next-button periscope-btn"
+					onClick={onClose}
+				>
+					<X size={14} />
+					Cancel
+				</Button>
+
+				<Button
+					type="primary"
+					className="next-button periscope-btn primary"
+					onClick={handleNext}
+					loading={isSendingInvites || isLoading}
+				>
+					Send Invites
+					<ArrowRight size={14} />
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default InviteTeamMembers;

frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss

@@ -1220,14 +1220,6 @@
 	.request-data-source-modal-input {
 		margin-top: 8px;
 	}
-
-	.invite-team-member-modal-footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-8);
-		border-top: 1px solid var(--l1-border);
-		padding-top: var(--spacing-6);
-	}
 }
 
 .request-data-source-modal {

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss

@@ -79,7 +79,7 @@
 		margin-bottom: 12px;
 	}
 
-	input:not(.ant-select-selection-search-input),
+	input,
 	textarea {
 		height: 32px;
 		background: var(--l2-background) !important;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss

@@ -111,9 +111,31 @@
 	&__select {
 		width: 100%;
 
-		.ant-select-selection-search {
-			inset-inline-start: var(--padding-2) !important;
-			inset-inline-end: var(--padding-2) !important;
+		&.ant-select {
+			.ant-select-selector {
+				height: 32px;
+				background: var(--l2-background) !important;
+				border: 1px solid var(--l2-border) !important;
+				border-radius: 2px;
+				color: var(--l2-foreground) !important;
+
+				.ant-select-selection-item {
+					color: var(--l2-foreground) !important;
+				}
+			}
+
+			&:hover .ant-select-selector {
+				border-color: var(--l2-border) !important;
+			}
+
+			&.ant-select-focused .ant-select-selector {
+				border-color: var(--primary) !important;
+				box-shadow: none !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--l2-foreground);
+			}
 		}
 	}
 
@@ -163,7 +185,7 @@
 
 		&--role {
 			flex: 1;
-			min-width: 180px;
+			min-width: 120px;
 		}
 	}
 
@@ -250,7 +272,7 @@
 	}
 
 	// todo: https://github.com/SigNoz/components/issues/116
-	input:not(.ant-select-selection-search-input) {
+	input {
 		height: 32px;
 		background: var(--l2-background) !important;
 		border: 1px solid var(--l2-border) !important;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -11,20 +11,23 @@ import {
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
-import { Collapse, Form, Tooltip } from 'antd';
-import RolesSelect, { useRoles } from 'components/RolesSelect';
+import { Collapse, Form, Select, Tooltip } from 'antd';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
 
 import './RoleMappingSection.styles.scss';
 
+const ROLE_OPTIONS = [
+	{ value: 'VIEWER', label: 'VIEWER' },
+	{ value: 'EDITOR', label: 'EDITOR' },
+	{ value: 'ADMIN', label: 'ADMIN' },
+];
+
 interface RoleMappingSectionProps {
 	fieldNamePrefix: string[];
 	isExpanded?: boolean;
 	onExpandChange?: (expanded: boolean) => void;
 }
 
-const SIGNOZ_VIEWER_ROLE = 'signoz-viewer';
-
 function RoleMappingSection({
 	fieldNamePrefix,
 	isExpanded,
@@ -35,7 +38,6 @@ function RoleMappingSection({
 		[...fieldNamePrefix, 'useRoleAttribute'],
 		form,
 	);
-	const { roles, isLoading, isError, error, refetch } = useRoles();
 
 	// Support both controlled and uncontrolled modes
 	const [internalExpanded, setInternalExpanded] = useState(false);
@@ -106,26 +108,19 @@ function RoleMappingSection({
 						<div className="role-mapping-section__field-group">
 							<label className="role-mapping-section__label" htmlFor="default-role">
 								Default Role
-								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "signoz-viewer"'>
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
 									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 								</Tooltip>
 							</label>
 							<Form.Item
 								name={[...fieldNamePrefix, 'defaultRole']}
 								className="role-mapping-section__form-item"
-								initialValue={SIGNOZ_VIEWER_ROLE}
+								initialValue="VIEWER"
 							>
-								<RolesSelect
+								<Select
 									id="default-role"
-									valueField="name"
-									roles={roles}
-									loading={isLoading}
-									isError={isError}
-									error={error}
-									onRefetch={refetch}
+									options={ROLE_OPTIONS}
 									className="role-mapping-section__select"
-									allowClear={false}
-									getPopupContainer={(): HTMLElement => document.body}
 								/>
 							</Form.Item>
 						</div>
@@ -145,7 +140,7 @@ function RoleMappingSection({
 									Use Role Attribute Directly
 								</Checkbox>
 							</Form.Item>
-							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role name (e.g. signoz-viewer, signoz-editor, signoz-admin, or a custom role).">
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
 								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 							</Tooltip>
 						</div>
@@ -179,17 +174,11 @@ function RoleMappingSection({
 														name={[field.name, 'role']}
 														className="role-mapping-section__field role-mapping-section__field--role"
 														rules={[{ required: true, message: 'Role is required' }]}
-														initialValue={SIGNOZ_VIEWER_ROLE}
+														initialValue="VIEWER"
 													>
-														<RolesSelect
-															valueField="name"
-															roles={roles}
-															loading={isLoading}
-															isError={isError}
-															error={error}
-															onRefetch={refetch}
-															allowClear={false}
-															getPopupContainer={(): HTMLElement => document.body}
+														<Select
+															options={ROLE_OPTIONS}
+															className="role-mapping-section__select"
 														/>
 													</Form.Item>
 
@@ -208,9 +197,7 @@ function RoleMappingSection({
 											<Button
 												variant="outlined"
 												color="secondary"
-												onClick={(): void =>
-													add({ groupName: '', role: SIGNOZ_VIEWER_ROLE })
-												}
+												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
 												prefix={<Plus size={14} />}
 											>
 												Add Group Mapping

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.payload.test.tsx

@@ -9,7 +9,6 @@ import {
 	mockUpdateSuccessResponse,
 } from './mocks';
 
-// TODO: https://github.com/SigNoz/platform-pod/issues/2602
 // The real @signozhq/ui/button has internal effects that prevent form.validateFields()
 // from resolving inside act(). Mirror the pattern from SSOEnforcementToggle.test.tsx
 // which mocks @signozhq/ui/switch for the same reason.

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.roleMapping.test.tsx

@@ -1,316 +0,0 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { rest, server } from 'mocks-server/server';
-import {
-	allRoles,
-	listRolesSuccessResponse,
-	managedRoles,
-} from 'mocks-server/__mockdata__/roles';
-
-import CreateEdit from '../CreateEdit/CreateEdit';
-import {
-	AUTH_DOMAINS_UPDATE_ENDPOINT,
-	mockDomainWithDirectRoleAttribute,
-	mockDomainWithRoleMapping,
-	mockSamlAuthDomain,
-	mockUpdateSuccessResponse,
-} from './mocks';
-
-// TODO: https://github.com/SigNoz/platform-pod/issues/2602
-// The @signozhq/ui Button uses Radix Slot and has CSS infinite animations that
-// prevent form.validateFields() from resolving inside act(). Replacing with a
-// simple native button avoids the issue.
-jest.mock('@signozhq/ui/button', () => ({
-	...jest.requireActual('@signozhq/ui/button'),
-	Button: ({
-		children,
-		onClick,
-		loading,
-		disabled,
-		'aria-label': ariaLabel,
-		prefix,
-		suffix,
-	}: {
-		children?: React.ReactNode;
-		onClick?: React.MouseEventHandler<HTMLButtonElement>;
-		loading?: boolean;
-		disabled?: boolean;
-		'aria-label'?: string;
-		prefix?: React.ReactNode;
-		suffix?: React.ReactNode;
-	}) => (
-		<button
-			type="button"
-			onClick={onClick}
-			disabled={disabled || loading}
-			aria-label={ariaLabel}
-		>
-			{prefix}
-			{children}
-			{suffix}
-		</button>
-	),
-}));
-
-// These are heavy real-timer integration tests (antd Select dropdown render +
-// form.validateFields() + a react-query mutation, all driven through userEvent).
-// Under a CPU-saturated parallel `jest` run the wall-clock roughly triples, which
-// pushes the longest tests past the 5000ms default and makes them flaky. Give the
-// whole file a wider budget (matches LogsPanelComponent.test.tsx).
-jest.setTimeout(20000);
-
-const ROLES_ENDPOINT = '*/api/v1/roles';
-
-type User = ReturnType<typeof userEvent.setup>;
-
-// antd renders pointer-events:none on parts of its Select, so disable the
-// userEvent pointer-events guard (mirrors CreateEdit.test.tsx).
-const setupUser = (): User => userEvent.setup({ pointerEventsCheck: 0 });
-
-function getRole(name: string): (typeof managedRoles)[number] {
-	const role = managedRoles.find((r) => r.name === name);
-	if (!role) {
-		throw new Error(`missing mock role: ${name}`);
-	}
-	return role;
-}
-
-const viewerRole = getRole('signoz-viewer');
-const editorRole = getRole('signoz-editor');
-
-function mockRoles(
-	response: Record<string, unknown> = listRolesSuccessResponse,
-	status = 200,
-): { count: () => number } {
-	let requested = 0;
-	server.use(
-		rest.get(ROLES_ENDPOINT, (_req, res, ctx) => {
-			requested += 1;
-			return res(ctx.status(status), ctx.json(response));
-		}),
-	);
-	return { count: (): number => requested };
-}
-
-function captureUpdatePayload(): { get: () => any } {
-	let payload: unknown = null;
-	server.use(
-		rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-			payload = await req.json();
-			return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-		}),
-	);
-	return { get: (): any => payload };
-}
-
-const expandRoleMapping = (user: User): Promise<void> =>
-	user.click(screen.getByText(/role mapping \(advanced\)/i));
-
-const openDefaultRoleSelect = (user: User): Promise<void> =>
-	user.click(screen.getByLabelText(/default role/i));
-
-const saveChanges = (user: User): Promise<void> =>
-	user.click(screen.getByRole('button', { name: /save changes/i }));
-
-describe('CreateEdit — role mapping uses API roles', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('fetches the roles list from the API when the form mounts', async () => {
-		const roles = mockRoles();
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockDomainWithDirectRoleAttribute}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await waitFor(() => expect(roles.count()).toBeGreaterThan(0));
-	});
-
-	it('renders the default-role options from the API (managed + custom), not the old hardcoded VIEWER/EDITOR/ADMIN', async () => {
-		const user = setupUser();
-		mockRoles();
-
-		// mockSamlAuthDomain has no stored defaultRole, so nothing stale (e.g.
-		// "VIEWER") is rendered as a selected tag to pollute the title lookups.
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockSamlAuthDomain}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await expandRoleMapping(user);
-
-		// Open the Select and wait for the async roles fetch to populate it.
-		await openDefaultRoleSelect(user);
-		await screen.findByTitle(allRoles[0].name);
-
-		// Every role returned by the API is offered as an option, including the
-		// custom (non-managed) roles — the whole point of the refactor. Use
-		// getAllByTitle: the preselected default role also renders its name on
-		// the selection item, so a role may legitimately appear more than once.
-		allRoles.forEach((role) => {
-			expect(screen.getAllByTitle(role.name).length).toBeGreaterThan(0);
-		});
-
-		// The old hardcoded uppercase role values must NOT appear as options.
-		expect(screen.queryByTitle('VIEWER')).not.toBeInTheDocument();
-		expect(screen.queryByTitle('EDITOR')).not.toBeInTheDocument();
-		expect(screen.queryByTitle('ADMIN')).not.toBeInTheDocument();
-	});
-
-	it('submits the selected role name (not the role id) as defaultRole', async () => {
-		const user = setupUser();
-		mockRoles();
-		const payload = captureUpdatePayload();
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockDomainWithDirectRoleAttribute}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await expandRoleMapping(user);
-
-		await openDefaultRoleSelect(user);
-		await user.click(await screen.findByTitle(editorRole.name));
-
-		await saveChanges(user);
-
-		await waitFor(() => expect(payload.get()).not.toBeNull());
-
-		// SSO role mapping matches roles by name, so the payload carries the
-		// role *name*, not the opaque id.
-		expect(payload.get().config.roleMapping.defaultRole).toBe(editorRole.name);
-		expect(payload.get().config.roleMapping.defaultRole).not.toBe(editorRole.id);
-	});
-
-	it('defaults a fresh role mapping to the signoz-viewer role name', async () => {
-		const user = setupUser();
-		const roles = mockRoles();
-		const payload = captureUpdatePayload();
-
-		// mockSamlAuthDomain has no roleMapping, so the defaultRole field falls
-		// back to the Form.Item initialValue (viewerRole.name). That initialValue
-		// is only applied when the field mounts, so the roles fetch MUST resolve
-		// before the panel is expanded — otherwise viewerRole is still undefined.
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockSamlAuthDomain}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await waitFor(() => expect(roles.count()).toBeGreaterThan(0));
-		// Flush the react-query commit so `useRoles` exposes the loaded roles
-		// before the collapse panel (and thus the default-role field) mounts.
-		await screen.findByText(/edit saml authentication/i);
-
-		await expandRoleMapping(user);
-		await screen.findByText(/default role/i);
-
-		await saveChanges(user);
-
-		await waitFor(() => expect(payload.get()).not.toBeNull());
-
-		expect(payload.get().config.roleMapping.defaultRole).toBe(viewerRole.name);
-		expect(payload.get().config.roleMapping.defaultRole).not.toBe(viewerRole.id);
-	});
-
-	it('still defaults to signoz-viewer when the roles fetch returns empty', async () => {
-		const user = setupUser();
-		// signoz-viewer is a managed role that always exists server-side, so even
-		// a degenerate/empty roles response must not strip the hardcoded default.
-		mockRoles({ status: 'success', data: [] });
-		const payload = captureUpdatePayload();
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockSamlAuthDomain}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		// Section still renders without crashing even though the fetch was empty.
-		await expandRoleMapping(user);
-		await expect(screen.findByText(/default role/i)).resolves.toBeInTheDocument();
-
-		await saveChanges(user);
-
-		await waitFor(() => expect(payload.get()).not.toBeNull());
-
-		// The Form.Item initialValue (signoz-viewer) survives an empty roles list.
-		expect(payload.get().config.roleMapping.defaultRole).toBe(viewerRole.name);
-	});
-
-	it('loads a stored role mapping by role name and round-trips it on save', async () => {
-		const user = setupUser();
-		mockRoles();
-		const payload = captureUpdatePayload();
-
-		// mockDomainWithRoleMapping stores defaultRole "signoz-editor" plus three
-		// group mappings, all keyed by role *name*. Editing must surface each
-		// stored value as the matching option and submit it unchanged — the
-		// backward-compatible read path for already-saved SSO domains.
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockDomainWithRoleMapping}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await expandRoleMapping(user);
-
-		// The stored default role renders as a real selection, not a raw token.
-		await waitFor(() =>
-			expect(screen.getAllByTitle(editorRole.name).length).toBeGreaterThan(0),
-		);
-
-		await saveChanges(user);
-
-		await waitFor(() => expect(payload.get()).not.toBeNull());
-
-		expect(payload.get().config.roleMapping.defaultRole).toBe(editorRole.name);
-		expect(payload.get().config.roleMapping.groupMappings).toStrictEqual({
-			'admin-group': 'signoz-admin',
-			'dev-team': 'signoz-editor',
-			viewers: 'signoz-viewer',
-		});
-	});
-
-	it('shows an error state in the default-role select when the roles request fails', async () => {
-		const user = setupUser();
-		mockRoles(
-			{ error: { code: 'internal_error', message: 'boom', url: '' } },
-			500,
-		);
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockSamlAuthDomain}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		await expandRoleMapping(user);
-
-		// Open the select and confirm the error UI (with retry) is surfaced
-		// instead of crashing the form. The error message comes straight from
-		// the failed request; the Retry affordance is always present.
-		await openDefaultRoleSelect(user);
-
-		await expect(screen.findByTitle('Retry')).resolves.toBeInTheDocument();
-		expect(screen.getByText('boom')).toBeInTheDocument();
-	});
-});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.sanitization.test.tsx

@@ -186,9 +186,9 @@ describe('CreateEdit — payload sanitization', () => {
 
 			expect(payload.config.roleMapping?.useRoleAttribute).toBe(false);
 			expect(payload.config.roleMapping?.groupMappings).toStrictEqual({
-				'admin-group': 'signoz-admin',
-				'dev-team': 'signoz-editor',
-				viewers: 'signoz-viewer',
+				'admin-group': 'ADMIN',
+				'dev-team': 'EDITOR',
+				viewers: 'VIEWER',
 			});
 		});
 	});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/mocks.ts

@@ -75,12 +75,12 @@ export const mockDomainWithRoleMapping: AuthtypesGettableAuthDomainDTO = {
 			samlCert: 'MOCK_CERTIFICATE',
 		},
 		roleMapping: {
-			defaultRole: 'signoz-editor',
+			defaultRole: 'EDITOR',
 			useRoleAttribute: false,
 			groupMappings: {
-				'admin-group': 'signoz-admin',
-				'dev-team': 'signoz-editor',
-				viewers: 'signoz-viewer',
+				'admin-group': 'ADMIN',
+				'dev-team': 'EDITOR',
+				viewers: 'VIEWER',
 			},
 		},
 	},
@@ -103,7 +103,7 @@ export const mockDomainWithDirectRoleAttribute: AuthtypesGettableAuthDomainDTO =
 				clientSecret: 'direct-role-client-secret',
 			},
 			roleMapping: {
-				defaultRole: 'signoz-viewer',
+				defaultRole: 'VIEWER',
 				useRoleAttribute: true,
 			},
 		},

frontend/src/container/PanelWrapper/PiePanelWrapper.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
@@ -8,10 +8,12 @@ import { themeColors } from 'constants/theme';
 import { getPieChartClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
 import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import getLabelName from 'lib/getLabelName';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { isNaN } from 'lodash-es';
 import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
 
 import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
-import { preparePieChartData } from './preparePieChartData';
 import { lightenColor, tooltipStyles } from './utils';
 
 import './PiePanelWrapper.styles.scss';
@@ -42,15 +44,37 @@ function PiePanelWrapper({
 		detectBounds: true,
 	});
 
+	const panelData = queryResponse.data?.payload?.data?.result || [];
+
 	const isDarkMode = useIsDarkMode();
 
-	const pieChartData = useMemo(
-		() =>
-			preparePieChartData(queryResponse.data?.payload, {
-				customLegendColors: widget?.customLegendColors,
-				colorMap: isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-			}),
-		[queryResponse.data?.payload, widget?.customLegendColors, isDarkMode],
+	let pieChartData: {
+		label: string;
+		value: string;
+		color: string;
+		record: any;
+	}[] = [].concat(
+		...(panelData
+			.map((d) => {
+				const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
+				return {
+					label,
+					value: d?.values?.[0]?.[1],
+					record: d,
+					color:
+						widget?.customLegendColors?.[label] ||
+						generateColor(
+							label,
+							isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+						),
+				};
+			})
+			.filter((d) => d !== undefined) as never[]),
+	);
+
+	pieChartData = pieChartData.filter(
+		(arc) =>
+			arc.value && !isNaN(parseFloat(arc.value)) && parseFloat(arc.value) > 0,
 	);
 
 	let size = 0;

frontend/src/container/PanelWrapper/__tests__/preparePieChartData.test.ts

@@ -1,185 +0,0 @@
-import { themeColors } from 'constants/theme';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
-
-import { preparePieChartData } from '../preparePieChartData';
-
-const options = { colorMap: themeColors.chartcolors };
-
-/**
- * Mirrors a query-range payload: the (possibly collapsed) time-series `result`
- * plus the scalar table nested under `newResult` (as getQueryResults produces it).
- */
-function makePayload(
-	result: QueryData[],
-	tables: QueryDataV3[],
-): MetricRangePayloadProps {
-	return {
-		data: {
-			result,
-			resultType: 'scalar',
-			newResult: { data: { result: tables, resultType: 'scalar' } },
-		},
-	} as MetricRangePayloadProps;
-}
-
-function tableEntry(
-	columns: NonNullable<QueryDataV3['table']>['columns'],
-	rows: NonNullable<QueryDataV3['table']>['rows'],
-	overrides: Partial<QueryDataV3> = {},
-): QueryDataV3 {
-	return {
-		queryName: 'A',
-		legend: '',
-		series: null,
-		list: null,
-		table: { columns, rows },
-		...overrides,
-	} as QueryDataV3;
-}
-
-describe('preparePieChartData', () => {
-	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
-		// SELECT count() AS col1, sum(value) AS col2 — the backend collapses the
-		// time-series result onto col1; the full data lives in the scalar table.
-		const payload = makePayload(
-			[
-				{
-					metric: {},
-					queryName: 'A',
-					legend: '',
-					values: [[0, '23399927']],
-				} as QueryData,
-			],
-			[
-				tableEntry(
-					[
-						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-					],
-					[{ data: { col1: 23399927, col2: 588691297 } }],
-				),
-			],
-		);
-
-		const slices = preparePieChartData(payload, options);
-
-		expect(slices).toHaveLength(2);
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['col1', '23399927'],
-			['col2', '588691297'],
-		]);
-	});
-
-	it('prefixes the group when multiple value columns are grouped', () => {
-		const payload = makePayload(
-			[],
-			[
-				tableEntry(
-					[
-						{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
-						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-					],
-					[{ data: { env: 'prod', col1: 10, col2: 20 } }],
-				),
-			],
-		);
-
-		const slices = preparePieChartData(payload, options);
-
-		expect(slices.map((s) => s.label)).toStrictEqual([
-			'prod · col1',
-			'prod · col2',
-		]);
-		expect(slices[0].record.metric).toStrictEqual({ env: 'prod' });
-	});
-
-	it('drops non-positive and non-numeric values', () => {
-		const payload = makePayload(
-			[],
-			[
-				tableEntry(
-					[
-						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-						{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
-					],
-					[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
-				),
-			],
-		);
-
-		const slices = preparePieChartData(payload, options);
-
-		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
-	});
-
-	it('keeps the series path for a single value column (grouped panel)', () => {
-		// One value column → the time-series result is authoritative (one slice per
-		// group), so existing behaviour is preserved.
-		const payload = makePayload(
-			[
-				{
-					metric: { 'service.name': 'adservice' },
-					queryName: 'A',
-					legend: 'adservice',
-					values: [[0, '100']],
-				} as QueryData,
-				{
-					metric: { 'service.name': 'cartservice' },
-					queryName: 'A',
-					legend: 'cartservice',
-					values: [[0, '200']],
-				} as QueryData,
-			],
-			[
-				tableEntry(
-					[
-						{
-							name: 'service.name',
-							queryName: 'A',
-							isValueColumn: false,
-							id: 'service.name',
-						},
-						{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
-					],
-					[
-						{ data: { 'service.name': 'adservice', A: 100 } },
-						{ data: { 'service.name': 'cartservice', A: 200 } },
-					],
-				),
-			],
-		);
-
-		const slices = preparePieChartData(payload, options);
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['adservice', '100'],
-			['cartservice', '200'],
-		]);
-	});
-
-	it('uses the legacy series result when there is no scalar table', () => {
-		const payload = makePayload(
-			[
-				{
-					metric: { 'service.name': 'adservice' },
-					queryName: 'A',
-					legend: '{{service.name}}',
-					values: [[1000, '42']],
-				} as QueryData,
-			],
-			[],
-		);
-
-		const slices = preparePieChartData(payload, options);
-
-		expect(slices).toHaveLength(1);
-		expect(slices[0].value).toBe('42');
-	});
-
-	it('returns no slices for an empty payload', () => {
-		expect(preparePieChartData(undefined, options)).toStrictEqual([]);
-	});
-});

frontend/src/container/PanelWrapper/preparePieChartData.ts

@@ -1,144 +0,0 @@
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { isNaN } from 'lodash-es';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
-
-export interface PieChartSlice {
-	label: string;
-	value: string;
-	color: string;
-	record: {
-		queryName: string;
-		legend?: string;
-		/** Group-by labels, used for drilldown; absent when the slice has no group. */
-		metric?: QueryData['metric'];
-	};
-}
-
-interface PreparePieChartDataOptions {
-	customLegendColors?: Record<string, string>;
-	colorMap: Record<string, string>;
-}
-
-const colorFor = (
-	label: string,
-	{ customLegendColors, colorMap }: PreparePieChartDataOptions,
-): string => customLegendColors?.[label] || generateColor(label, colorMap);
-
-const isPositive = (value: string): boolean =>
-	!!value && !isNaN(parseFloat(value)) && parseFloat(value) > 0;
-
-/**
- * Time-series result: one slice per series, value = first datapoint. This is the
- * original pie behaviour — kept verbatim (same label/value/colour/record) so
- * single-value and grouped panels are unaffected.
- */
-function slicesFromSeries(
-	result: QueryData[],
-	options: PreparePieChartDataOptions,
-): PieChartSlice[] {
-	return result
-		.filter((d) => d?.values?.[0]?.[1] !== undefined)
-		.map((d) => {
-			const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
-			return {
-				label,
-				value: d.values[0][1],
-				color: colorFor(label, options),
-				record: d,
-			};
-		});
-}
-
-/**
- * V5 scalar table: one slice per (row × value column). With more than one value
- * column the column name keeps the slices distinct, so a ClickHouse query like
- * `count() AS col1, sum() AS col2` renders a slice per column instead of
- * collapsing onto the first; group-by columns become the slice label.
- */
-function slicesFromTables(
-	tables: QueryDataV3[],
-	options: PreparePieChartDataOptions,
-): PieChartSlice[] {
-	const slices: PieChartSlice[] = [];
-
-	tables.forEach((entry) => {
-		const { table } = entry;
-		if (!table?.columns?.length || !table?.rows?.length) {
-			return;
-		}
-
-		const valueColumns = table.columns.filter((column) => column.isValueColumn);
-		if (valueColumns.length === 0) {
-			return;
-		}
-		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
-		const hasMultipleValueColumns = valueColumns.length > 1;
-
-		table.rows.forEach((row) => {
-			const groupLabel = labelColumns
-				.map((column) => row.data[column.id || column.name])
-				.filter((part) => part != null)
-				.map(String)
-				.join(', ');
-			// Drilldown filters by group-by labels; leave it undefined when there
-			// are none (e.g. a ClickHouse query) so no filterless menu is offered.
-			const metric = labelColumns.length
-				? labelColumns.reduce<Record<string, string>>((acc, column) => {
-						acc[column.name] = String(row.data[column.id || column.name]);
-						return acc;
-					}, {})
-				: undefined;
-
-			valueColumns.forEach((column) => {
-				let label: string;
-				if (hasMultipleValueColumns) {
-					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
-				} else {
-					label = groupLabel || entry.legend || entry.queryName || '';
-				}
-
-				slices.push({
-					label,
-					value: String(row.data[column.id || column.name]),
-					color: colorFor(label, options),
-					record: { queryName: entry.queryName, legend: entry.legend, metric },
-				});
-			});
-		});
-	});
-
-	return slices;
-}
-
-/**
- * Builds pie slices from a query-range payload, dropping non-positive/non-numeric
- * values.
- *
- * A scalar response with several value columns (e.g. a ClickHouse
- * `count() AS col1, sum() AS col2`) collapses to a single series in
- * `data.result` — only the first value column survives. The full data is kept in
- * the scalar table under `newResult`, so in that case slices are built from the
- * table (one per value column). Otherwise the legacy time-series result is used,
- * preserving existing behaviour for single-value and grouped panels.
- */
-export function preparePieChartData(
-	payload: MetricRangePayloadProps | undefined,
-	options: PreparePieChartDataOptions,
-): PieChartSlice[] {
-	const tables = (payload?.data?.newResult?.data?.result || []).filter(
-		(entry) => entry?.table?.rows?.length,
-	);
-	const hasMultipleValueColumns = tables.some(
-		(entry) =>
-			(entry.table?.columns || []).filter((column) => column.isValueColumn)
-				.length > 1,
-	);
-
-	const slices = hasMultipleValueColumns
-		? slicesFromTables(tables, options)
-		: slicesFromSeries(payload?.data?.result || [], options);
-
-	return slices.filter((slice) => isPositive(slice.value));
-}

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.module.scss

@@ -1,6 +1,7 @@
 .rolesListingTable {
 	margin-top: 12px;
 	border-radius: 4px;
+	overflow: hidden;
 }
 
 .scrollContainer {

frontend/src/container/RolesSettings/RolesSettings.module.scss

@@ -40,7 +40,6 @@
 
 .rolesSettingsContent {
 	padding: 0 16px;
-	padding-bottom: 16px;
 }
 
 .rolesSettingsToolbar {

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.module.scss

@@ -68,3 +68,13 @@
 	border-radius: 2px;
 	border: 1px solid var(--l2-border);
 }
+
+// the V1 tags input ships borderless; give the field a visible box to match
+.tagsField {
+	display: flex;
+	align-items: center;
+	padding: 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+	// background: var(--l3-background);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.tsx

@@ -9,7 +9,7 @@ import {
 import { Typography } from '@signozhq/ui/typography';
 // eslint-disable-next-line signoz/no-antd-components -- multiline TextArea has no @signozhq/ui equivalent yet
 import { Input as AntdInput } from 'antd';
-import TagKeyValueInput from 'components/TagKeyValueInput/TagKeyValueInput';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
 
 import { Base64Icons } from '../utils';
 import settingsStyles from '../../DashboardSettings.module.scss';
@@ -89,7 +89,9 @@ function DashboardInfoForm({
 
 				<div className={styles.infoItemContainer}>
 					<Typography className={styles.infoTitle}>Tags</Typography>
-					<TagKeyValueInput tags={tags} onTagsChange={onTagsChange} />
+					<div className={styles.tagsField}>
+						<AddTags tags={tags} setTags={onTagsChange} />
+					</div>
 				</div>
 			</div>
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/utils.ts

@@ -1,7 +1,6 @@
 import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
 
 export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-export { parseKeyValueTag } from 'components/TagKeyValueInput/utils';
 
 // tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
 // collapsed back to just `x` for display.

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { AnnouncementBanner } from '@signozhq/ui/announcement-banner';
 import { LayoutGrid } from '@signozhq/icons';
 
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
@@ -7,8 +9,19 @@ import styles from './DashboardsListPageV2.module.scss';
 import { BreadcrumbLink } from '@signozhq/ui/breadcrumb';
 
 function DashboardsListPageV2(): JSX.Element {
+	const [showBanner, setShowBanner] = useState(true);
+
 	return (
 		<div className={styles.page}>
+			{showBanner && (
+				<AnnouncementBanner
+					type="warning"
+					onClose={(): void => setShowBanner(false)}
+				>
+					You&apos;re on the V2 dashboards page. If you landed here unintentionally,
+					please reach out to Ashwin.
+				</AnnouncementBanner>
+			)}
 			<div className={styles.header}>
 				<div className={styles.headerLeft}>
 					<BreadcrumbLink icon={<LayoutGrid size={14} />}>Dashboard</BreadcrumbLink>

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -78,11 +78,6 @@ function DeleteActionItem({
 					runDelete(undefined, { onSettled: () => destroy() });
 				},
 			},
-			cancelButtonProps: {
-				onClick: (e): void => {
-					e.stopPropagation();
-				},
-			},
 			centered: true,
 		});
 	}, [modal, dashboardName, runDelete]);

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.module.scss

@@ -62,7 +62,7 @@
 	justify-content: flex-end;
 }
 
-.pinBtn {
+.favBtn {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -79,16 +79,16 @@
 		color 0.12s;
 }
 
-.row:hover .pinBtn {
+.row:hover .favBtn {
 	color: var(--l3-foreground);
 }
 
-.pinBtn:hover {
+.favBtn:hover {
 	background: var(--l1-background);
 	color: var(--bg-amber-500);
 }
 
-.pinBtnOn {
+.favBtnOn {
 	color: var(--bg-amber-500);
 
 	svg {

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { Badge } from '@signozhq/ui/badge';
-import { CalendarClock, Pin, PinOff } from '@signozhq/icons';
+import { CalendarClock, Star } from '@signozhq/icons';
 import cx from 'classnames';
 import logEvent from 'api/common/logEvent';
 import { generatePath } from 'react-router-dom';
@@ -12,10 +12,9 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useTimezone } from 'providers/Timezone';
 import { isModifierKeyPressed } from 'utils/app';
 
-import { usePinDashboard } from '../../hooks/usePinDashboard';
 import { useDashboardViewsStore } from '../../store/useDashboardViewsStore';
-import type { DashboardListItem } from '../../utils/helpers';
-import { lastUpdatedLabel, tagsToStrings } from '../../utils/helpers';
+import type { DashboardListItem } from '../../utils';
+import { lastUpdatedLabel, tagsToStrings } from '../../utils';
 import ActionsPopover from '../ActionsPopover/ActionsPopover';
 
 import styles from './DashboardRow.module.scss';
@@ -38,10 +37,12 @@ function DashboardRow({
 	const { safeNavigate } = useSafeNavigate();
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
+	const isFavorite = useDashboardViewsStore((s) =>
+		s.favorites.includes(dashboard.id),
+	);
+	const toggleFavorite = useDashboardViewsStore((s) => s.toggleFavorite);
 	const markViewed = useDashboardViewsStore((s) => s.markViewed);
-	const { togglePin, isUpdating } = usePinDashboard();
 
-	const isPinned = !!dashboard.pinned;
 	const id = dashboard.id;
 	const name = dashboard.spec?.display?.name ?? '';
 	const image = dashboard.image || Base64Icons[0];
@@ -68,9 +69,9 @@ function DashboardRow({
 		});
 	};
 
-	const onTogglePin = (event: React.MouseEvent<HTMLElement>): void => {
+	const onToggleFavorite = (event: React.MouseEvent<HTMLElement>): void => {
 		event.stopPropagation();
-		togglePin(id, isPinned);
+		toggleFavorite(id);
 	};
 
 	return (
@@ -104,7 +105,7 @@ function DashboardRow({
 							))}
 							{tags.length > 3 && (
 								<Badge className={styles.tag} key={tags[3]}>
-									+ <Typography.Text> {tags.length - 3} </Typography.Text>
+									+ <span> {tags.length - 3} </span>
 								</Badge>
 							)}
 						</div>
@@ -113,14 +114,13 @@ function DashboardRow({
 
 				<button
 					type="button"
-					className={cx(styles.pinBtn, { [styles.pinBtnOn]: isPinned })}
-					aria-label={isPinned ? 'Unpin dashboard' : 'Pin dashboard'}
-					title={isPinned ? 'Unpin dashboard' : 'Pin dashboard'}
-					data-testid={`dashboard-pin-${index}`}
-					disabled={isUpdating}
-					onClick={onTogglePin}
+					className={cx(styles.favBtn, { [styles.favBtnOn]: isFavorite })}
+					aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+					title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+					data-testid={`dashboard-favorite-${index}`}
+					onClick={onToggleFavorite}
 				>
-					{isPinned ? <PinOff size={14} /> : <Pin size={14} />}
+					<Star size={14} />
 				</button>
 
 				{canAct && (

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import logEvent from 'api/common/logEvent';
-import { useListDashboardsForUserV2 } from 'api/generated/services/dashboard';
+import { useListDashboardsV2 } from 'api/generated/services/dashboard';
 import {
 	DashboardtypesListOrderDTO,
 	DashboardtypesListSortDTO,
@@ -10,8 +10,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useAppContext } from 'providers/App/App';
 import { toAPIError } from 'utils/errorUtils';
 
-import { combineQueries } from '../../utils/filterQuery';
-import { useAccumulatedTags } from '../../hooks/useAccumulatedTags';
+import { combineQueries } from '../../filterQuery';
 import { useActiveView } from '../../hooks/useActiveView';
 import { useDashboardFilters } from '../../hooks/useDashboardFilters';
 import {
@@ -21,10 +20,9 @@ import {
 } from '../../hooks/useDashboardsListQueryParams';
 import { useDashboardViewsStore } from '../../store/useDashboardViewsStore';
 import { useDashboardsListVisibleColumnsStore } from '../../store/useVisibleColumnsStore';
-import { BuiltinViewId } from '../../types';
-import type { SelectedTag, UpdatedWindow } from '../../types';
-import type { DashboardListItem } from '../../utils/helpers';
-import { applyClientView } from '../../utils/views';
+import type { UpdatedWindow } from '../../types';
+import type { DashboardListItem } from '../../utils';
+import { applyClientView } from '../../views';
 import type { CreatorOption } from '../FilterZone/FilterChips';
 import FilterZone from '../FilterZone/FilterZone';
 import NewDashboardModal from '../NewDashboardModal/NewDashboardModal';
@@ -57,7 +55,6 @@ function DashboardsList(): JSX.Element {
 		setSearch,
 		setCreatedBy,
 		setUpdated,
-		setTags,
 		applyFilters,
 		clearAll,
 	} = useDashboardFilters();
@@ -69,7 +66,6 @@ function DashboardsList(): JSX.Element {
 		activeViewId,
 		builtinViews,
 		customViews,
-		customViewsLoading,
 		isCustomActive,
 		isModified,
 		viewQuery,
@@ -79,18 +75,11 @@ function DashboardsList(): JSX.Element {
 		saveActiveView,
 		resetView,
 		removeView,
-	} = useActiveView({
-		filters,
-		applyFilters,
-		userEmail: user.email,
-		sortColumn,
-		sortOrder,
-		setSortColumn,
-		setSortOrder,
-	});
+	} = useActiveView({ filters, applyFilters, userEmail: user.email });
 
 	const railCollapsed = useDashboardViewsStore((s) => s.railCollapsed);
 	const setRailCollapsed = useDashboardViewsStore((s) => s.setRailCollapsed);
+	const favorites = useDashboardViewsStore((s) => s.favorites);
 	const recent = useDashboardViewsStore((s) => s.recent);
 
 	// Any filter change resets to the first page so the user isn't stranded on a
@@ -116,13 +105,6 @@ function DashboardsList(): JSX.Element {
 		},
 		[setUpdated, setPage],
 	);
-	const handleTagsChange = useCallback(
-		(tags: SelectedTag[]): void => {
-			setTags(tags);
-			void setPage(1);
-		},
-		[setTags, setPage],
-	);
 	const handleClearAll = useCallback((): void => {
 		clearAll();
 		void setPage(1);
@@ -168,9 +150,7 @@ function DashboardsList(): JSX.Element {
 		isFetching,
 		error,
 		refetch,
-	} = useListDashboardsForUserV2(listParams, {
-		query: { keepPreviousData: true },
-	});
+	} = useListDashboardsV2(listParams, { query: { keepPreviousData: true } });
 
 	const apiError = useMemo(
 		() => (error ? toAPIError(error) : undefined),
@@ -189,9 +169,9 @@ function DashboardsList(): JSX.Element {
 	const dashboards = useMemo<DashboardListItem[]>(
 		() =>
 			clientView
-				? applyClientView(rawDashboards, activeViewId, recent)
+				? applyClientView(rawDashboards, activeViewId, favorites, recent)
 				: rawDashboards,
-		[clientView, rawDashboards, activeViewId, recent],
+		[clientView, rawDashboards, activeViewId, favorites, recent],
 	);
 	const total = clientView ? dashboards.length : (response?.data?.total ?? 0);
 
@@ -214,16 +194,6 @@ function DashboardsList(): JSX.Element {
 		}));
 	}, [rawDashboards, user.email]);
 
-	// All key:value tags the API reports for the org's dashboards, powering the
-	// Tags filter chip and DSL key suggestions. Accumulated across refetches so
-	// previously-seen tags stay selectable even when a filtered page omits them.
-	const responseTags = useMemo<SelectedTag[]>(
-		() =>
-			(response?.data?.tags ?? []).map((t) => ({ key: t.key, value: t.value })),
-		[response],
-	);
-	const availableTags = useAccumulatedTags(responseTags);
-
 	const [isCreateOpen, setIsCreateOpen] = useState(false);
 	const visibleColumns = useDashboardsListVisibleColumnsStore(
 		(s) => s.visibleColumns,
@@ -269,7 +239,7 @@ function DashboardsList(): JSX.Element {
 	const showWorkspaceEmpty =
 		!error &&
 		dashboards.length === 0 &&
-		activeViewId === BuiltinViewId.All &&
+		activeViewId === 'all' &&
 		filtersEmpty &&
 		page === 1;
 
@@ -281,7 +251,6 @@ function DashboardsList(): JSX.Element {
 				activeViewId={activeViewId}
 				builtinViews={builtinViews}
 				customViews={customViews}
-				customViewsLoading={customViewsLoading}
 				isCustomActive={isCustomActive}
 				isModified={isModified}
 				collapsed={railCollapsed}
@@ -312,14 +281,11 @@ function DashboardsList(): JSX.Element {
 									search={filters.search}
 									createdBy={filters.createdBy}
 									updated={filters.updated}
-									tags={filters.tags}
-									availableTags={availableTags}
 									creatorOptions={creatorOptions}
 									isEmpty={filtersEmpty}
 									onSearchChange={handleSearchChange}
 									onCreatedByChange={handleCreatedByChange}
 									onUpdatedChange={handleUpdatedChange}
-									onTagsChange={handleTagsChange}
 									onClearAll={handleClearAll}
 								/>
 							</div>

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsListContent.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { Table } from 'antd';
 import type { TableProps } from 'antd/lib';
 
-import type { DashboardListItem } from '../../utils/helpers';
+import type { DashboardListItem } from '../../utils';
 import DashboardRow from '../DashboardRow/DashboardRow';
 
 interface Props {

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsResults.tsx

@@ -3,8 +3,8 @@ import {
 	DashboardtypesListSortDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import type { DashboardListItem } from '../../utils/helpers';
-import { noResultsCopy } from '../../utils/views';
+import type { DashboardListItem } from '../../utils';
+import { noResultsCopy } from '../../views';
 import ListHeader from '../ListHeader/ListHeader';
 import ErrorState from '../states/ErrorState/ErrorState';
 import LoadingState from '../states/LoadingState/LoadingState';

frontend/src/pages/DashboardsListPageV2/components/FilterZone/FilterZone.tsx

@@ -1,19 +1,10 @@
-import {
-	type ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
+import { type ReactNode, useCallback, useEffect, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 import { X } from '@signozhq/icons';
 
-import { buildSuggestionKeys } from '../../utils/dslSuggestions';
-import type { SelectedTag, UpdatedWindow } from '../../types';
+import type { UpdatedWindow } from '../../types';
 import SearchBar from '../SearchBar/SearchBar';
 import FilterChips, { type CreatorOption } from './FilterChips';
-import TagsFilterChip from './TagsFilterChip';
 
 import styles from './FilterZone.module.scss';
 
@@ -21,14 +12,11 @@ interface Props {
 	search: string;
 	createdBy: string[];
 	updated: UpdatedWindow;
-	tags: SelectedTag[];
-	availableTags: SelectedTag[];
 	creatorOptions: CreatorOption[];
 	isEmpty: boolean;
 	onSearchChange: (value: string) => void;
 	onCreatedByChange: (emails: string[]) => void;
 	onUpdatedChange: (window: UpdatedWindow) => void;
-	onTagsChange: (tags: SelectedTag[]) => void;
 	onClearAll: () => void;
 	// Rendered at the end of the search row (e.g. the New Dashboard action).
 	rightSlot?: ReactNode;
@@ -41,24 +29,16 @@ function FilterZone({
 	search,
 	createdBy,
 	updated,
-	tags,
-	availableTags,
 	creatorOptions,
 	isEmpty,
 	onSearchChange,
 	onCreatedByChange,
 	onUpdatedChange,
-	onTagsChange,
 	onClearAll,
 	rightSlot,
 }: Props): JSX.Element {
 	const [searchInput, setSearchInput] = useState(search);
 
-	const suggestionKeys = useMemo(
-		() => buildSuggestionKeys(availableTags),
-		[availableTags],
-	);
-
 	// Keep the local input in sync with external search changes (applying a view,
 	// clear-all, back/forward). User typing only mutates the local copy.
 	useEffect(() => {
@@ -78,8 +58,7 @@ function FilterZone({
 				<div className={styles.searchInput}>
 					<SearchBar
 						value={searchInput}
-						placeholder={`Search with DSL — e.g. name contains "prod" AND env = "staging"`}
-						suggestionKeys={suggestionKeys}
+						placeholder="Search dashboards by name"
 						onChange={setSearchInput}
 						onSubmit={handleSubmit}
 					/>
@@ -87,7 +66,7 @@ function FilterZone({
 				{rightSlot}
 			</div>
 			<div className={styles.filtersRow}>
-				<Typography.Text className={styles.filtersLabel}>Filters</Typography.Text>
+				<span className={styles.filtersLabel}>Filters</span>
 				<FilterChips
 					createdBy={createdBy}
 					updated={updated}
@@ -95,11 +74,6 @@ function FilterZone({
 					onCreatedByChange={onCreatedByChange}
 					onUpdatedChange={onUpdatedChange}
 				/>
-				<TagsFilterChip
-					availableTags={availableTags}
-					tags={tags}
-					onTagsChange={onTagsChange}
-				/>
 				{!isEmpty && (
 					<Button
 						variant="ghost"

frontend/src/pages/DashboardsListPageV2/components/FilterZone/TagsFilterChip.tsx

@@ -1,80 +0,0 @@
-import { useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { ChevronDown, Tag } from '@signozhq/icons';
-import cx from 'classnames';
-
-import type { SelectedTag } from '../../types';
-
-import styles from './FilterZone.module.scss';
-
-interface Props {
-	// All key:value tags the list API reports across the org's dashboards.
-	availableTags: SelectedTag[];
-	tags: SelectedTag[];
-	onTagsChange: (tags: SelectedTag[]) => void;
-}
-
-const tagId = (tag: SelectedTag): string => `${tag.key}:${tag.value}`;
-
-function TagsFilterChip({
-	availableTags,
-	tags,
-	onTagsChange,
-}: Props): JSX.Element {
-	const selectedIds = useMemo(() => new Set(tags.map(tagId)), [tags]);
-
-	const label = useMemo((): string => {
-		if (tags.length === 0) {
-			return 'Any';
-		}
-		if (tags.length === 1) {
-			return tagId(tags[0]);
-		}
-		return `${tags.length} tags`;
-	}, [tags]);
-
-	const items = useMemo<MenuItem[]>(() => {
-		const options: MenuItem[] = availableTags.map((tag) => {
-			const id = tagId(tag);
-			return {
-				type: 'checkbox',
-				key: id,
-				label: id,
-				checked: selectedIds.has(id),
-				onCheckedChange: (checked: boolean): void =>
-					onTagsChange(
-						checked ? [...tags, tag] : tags.filter((t) => tagId(t) !== id),
-					),
-			};
-		});
-		if (tags.length > 0) {
-			options.push({ type: 'divider', key: 'sep' });
-			options.push({
-				key: 'clear',
-				label: 'Clear selection',
-				onClick: (): void => onTagsChange([]),
-			});
-		}
-		return options;
-	}, [availableTags, selectedIds, tags, onTagsChange]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }} align="start">
-			<Button
-				variant="outlined"
-				color="secondary"
-				size="sm"
-				prefix={<Tag size={12} />}
-				suffix={<ChevronDown size={12} />}
-				className={cx(styles.chip, { [styles.chipActive]: tags.length > 0 })}
-				disabled={availableTags.length === 0}
-				testId="dashboards-filter-tags"
-			>
-				Tags: {label}
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default TagsFilterChip;

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.tsx

@@ -54,7 +54,7 @@ function ListHeader({
 
 	const metadataContent = (
 		<div className={styles.metaPanel}>
-			<Typography.Text className={styles.sortHeading}>Columns</Typography.Text>
+			<Typography.Text className={styles.sortHeading}>Metadata</Typography.Text>
 			{METADATA_COLUMNS.map((col) => (
 				<div key={col.key} className={styles.metaRow}>
 					<Typography.Text className={styles.metaLabel}>{col.label}</Typography.Text>
@@ -171,7 +171,7 @@ function ListHeader({
 							)
 						}
 					>
-						<Typography.Text className={styles.sortPrefix}>Sort:</Typography.Text>{' '}
+						<span className={styles.sortPrefix}>Sort:</span>{' '}
 						{SORT_LABELS[sortColumn]}{' '}
 					</Button>
 				</Popover>
@@ -183,13 +183,13 @@ function ListHeader({
 					placement="bottomRight"
 					arrow={false}
 				>
-					<Tooltip title="Columns">
+					<Tooltip title="Metadata">
 						<Button
 							variant="ghost"
 							color="secondary"
 							size="icon"
-							aria-label="Columns"
-							testId="configure-columns-trigger"
+							aria-label="Metadata"
+							testId="configure-metadata-trigger"
 						>
 							<HdmiPort size={14} />
 						</Button>

frontend/src/pages/DashboardsListPageV2/components/NewDashboardModal/BlankDashboardPanel.tsx

@@ -13,9 +13,8 @@ import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
-import TagKeyValueInput from 'components/TagKeyValueInput/TagKeyValueInput';
 
-import { keyValueStringsToTags } from '../../utils/helpers';
+import { toPostableTags } from '../../utils';
 
 import styles from './NewDashboardModal.module.scss';
 
@@ -31,7 +30,7 @@ function BlankDashboardPanel({ onClose }: Props): JSX.Element {
 
 	const [name, setName] = useState(DEFAULT_NAME);
 	const [description, setDescription] = useState('');
-	const [tags, setTags] = useState<string[]>([]);
+	const [tags, setTags] = useState('');
 	const [submitting, setSubmitting] = useState(false);
 
 	const canSubmit = name.trim().length > 0 && !submitting;
@@ -43,7 +42,7 @@ function BlankDashboardPanel({ onClose }: Props): JSX.Element {
 		try {
 			setSubmitting(true);
 			logEvent('Dashboard List: Create dashboard clicked', {});
-			const postableTags = keyValueStringsToTags(tags);
+			const postableTags = toPostableTags(tags);
 			const created = await createDashboardV2({
 				schemaVersion: 'v6',
 				generateName: true,
@@ -73,7 +72,7 @@ function BlankDashboardPanel({ onClose }: Props): JSX.Element {
 			<div className={styles.form}>
 				<div className={styles.field}>
 					<Typography.Text className={styles.label}>
-						Title <Typography.Text className={styles.required}>*</Typography.Text>
+						Title <span className={styles.required}>*</span>
 					</Typography.Text>
 					<Input
 						value={name}
@@ -105,14 +104,16 @@ function BlankDashboardPanel({ onClose }: Props): JSX.Element {
 
 				<div className={styles.field}>
 					<Typography.Text className={styles.label}>Tags</Typography.Text>
-					<TagKeyValueInput
-						tags={tags}
-						onTagsChange={setTags}
-						placeholder="team:jarvis (press Enter)"
+					<Input
+						value={tags}
+						placeholder="team:jarvis, prod"
 						testId="create-dashboard-tags"
+						onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+							setTags(e.target.value)
+						}
 					/>
 					<Typography.Text className={styles.hint}>
-						Use key:value (e.g. team:jarvis) and press Enter to add.
+						Comma-separated. Use key:value (e.g. team:jarvis) or a single label.
 					</Typography.Text>
 				</div>
 			</div>

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.module.scss

@@ -1,58 +1,24 @@
-.wrapper {
-	position: relative;
-	width: 100%;
-}
-
-.input::placeholder {
-	color: var(--l3-foreground);
-}
-
-// Flatten the input's bottom corners while the dropdown is attached below it.
-.inputOpen {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
-.suggestions {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: 0;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	max-height: 260px;
-	overflow-y: auto;
-	padding: 4px;
-	border: 1px solid var(--l2-border);
-	border-top: none;
-	border-radius: 0 0 6px 6px;
-	background: var(--l1-background);
-	/* stylelint-disable-next-line local/prefer-css-variables -- matches the V2 dashboard dropdown shadow */
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-}
-
-.suggestion {
-	display: flex;
-	align-items: center;
-	padding: 8px 10px;
-	border: none;
-	border-radius: 4px;
-	background: transparent;
-	color: var(--l2-foreground);
-	font-family: 'Space Mono', monospace;
-	font-size: var(--font-size-sm);
-	text-align: left;
-	cursor: pointer;
-	transition: background 0.1s;
-}
-
-.suggestionActive {
-	background: var(--l2-background);
-	color: var(--l1-foreground);
-}
-
 .submit {
-	color: var(--bg-vanilla-400);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
 }

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.tsx

@@ -1,21 +1,7 @@
-import {
-	ChangeEvent,
-	KeyboardEvent,
-	MouseEvent,
-	useMemo,
-	useState,
-} from 'react';
-import { Button } from '@signozhq/ui/button';
+import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Color } from '@signozhq/design-tokens';
 import { CornerDownLeft, Search } from '@signozhq/icons';
-import cx from 'classnames';
-
-import {
-	applyKeySuggestion,
-	getActiveKeyToken,
-	matchKeys,
-} from '../../utils/dslSuggestions';
 
 import styles from './SearchBar.module.scss';
 
@@ -24,8 +10,6 @@ interface Props {
 	onChange: (value: string) => void;
 	onSubmit: () => void;
 	placeholder?: string;
-	// Keys offered as you type (reserved DSL columns + tag keys from the API).
-	suggestionKeys?: string[];
 }
 
 function SearchBar({
@@ -33,116 +17,38 @@ function SearchBar({
 	onChange,
 	onSubmit,
 	placeholder = "Search with DSL (e.g. name CONTAINS 'foo')",
-	suggestionKeys = [],
 }: Props): JSX.Element {
-	const [focused, setFocused] = useState(false);
-	// -1 means nothing is highlighted, so Enter submits the typed query rather
-	// than picking a suggestion (arrow keys engage selection).
-	const [highlighted, setHighlighted] = useState(-1);
-
-	const active = useMemo(() => getActiveKeyToken(value), [value]);
-	const suggestions = useMemo(
-		() => (active ? matchKeys(suggestionKeys, active.token) : []),
-		[active, suggestionKeys],
-	);
-	const showSuggestions = focused && suggestions.length > 0;
-
-	const pickSuggestion = (key: string): void => {
-		if (active) {
-			onChange(applyKeySuggestion(value, active, key));
-		}
-		setHighlighted(-1);
-	};
-
-	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
-		if (showSuggestions && e.key === 'ArrowDown') {
-			e.preventDefault();
-			setHighlighted((h) => Math.min(h + 1, suggestions.length - 1));
-			return;
-		}
-		if (showSuggestions && e.key === 'ArrowUp') {
-			e.preventDefault();
-			setHighlighted((h) => Math.max(h - 1, 0));
-			return;
-		}
-		if (e.key === 'Enter') {
-			if (showSuggestions && highlighted >= 0) {
-				e.preventDefault();
-				pickSuggestion(suggestions[highlighted]);
-			} else {
-				onSubmit();
-			}
-			return;
-		}
-		if (e.key === 'Escape') {
-			setFocused(false);
-			setHighlighted(-1);
-		}
-	};
-
 	return (
-		<div className={styles.wrapper}>
-			<Input
-				className={cx(styles.input, { [styles.inputOpen]: showSuggestions })}
-				placeholder={placeholder}
-				prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
-				suffix={
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						className={styles.submit}
-						aria-label="Run search"
-						testId="dashboards-list-search-submit"
-						onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
-							// Prevent the input's blur from firing first and double-submitting.
-							e.preventDefault();
-						}}
-						onClick={onSubmit}
-					>
-						<CornerDownLeft size={12} color={Color.BG_VANILLA_400} />
-					</Button>
-				}
-				value={value}
-				testId="dashboards-list-search"
-				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-					onChange(e.target.value);
-					setHighlighted(-1);
-				}}
-				onFocus={(): void => setFocused(true)}
-				onBlur={(): void => {
-					setFocused(false);
-					setHighlighted(-1);
-					onSubmit();
-				}}
-				onKeyDown={handleKeyDown}
-			/>
-			{showSuggestions && (
-				<div
-					className={styles.suggestions}
-					data-testid="dashboards-list-search-suggestions"
+		<Input
+			placeholder={placeholder}
+			prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+			suffix={
+				<button
+					type="button"
+					className={styles.submit}
+					aria-label="Run search"
+					data-testid="dashboards-list-search-submit"
+					onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
+						// Prevent the input's blur from firing first and double-submitting.
+						e.preventDefault();
+					}}
+					onClick={onSubmit}
 				>
-					{suggestions.map((key, index) => (
-						<button
-							key={key}
-							type="button"
-							className={cx(styles.suggestion, {
-								[styles.suggestionActive]: index === highlighted,
-							})}
-							data-testid={`dashboards-list-search-suggestion-${key}`}
-							onMouseEnter={(): void => setHighlighted(index)}
-							onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
-								// Keep focus on the input so blur doesn't submit before we update.
-								e.preventDefault();
-							}}
-							onClick={(): void => pickSuggestion(key)}
-						>
-							{key}
-						</button>
-					))}
-				</div>
-			)}
-		</div>
+					<CornerDownLeft size={12} color={Color.BG_VANILLA_400} />
+				</button>
+			}
+			value={value}
+			testId="dashboards-list-search"
+			onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+				onChange(e.target.value)
+			}
+			onBlur={onSubmit}
+			onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {
+				if (e.key === 'Enter') {
+					onSubmit();
+				}
+			}}
+		/>
 	);
 }
 

frontend/src/pages/DashboardsListPageV2/components/ViewsRail/SaveViewPopover.tsx

@@ -2,17 +2,21 @@ import { type ChangeEvent, type ReactNode, useEffect, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { PopoverSimple } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { VIEW_ICON_OPTIONS } from '../../views';
 
 import styles from './ViewsRail.module.scss';
 
 interface Props {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	onSave: (name: string) => void;
+	onSave: (name: string, icon: string) => void;
 	trigger: ReactNode;
 }
 
+const DEFAULT_ICON = VIEW_ICON_OPTIONS[0].name;
+
 function SaveViewPopover({
 	open,
 	onOpenChange,
@@ -20,10 +24,12 @@ function SaveViewPopover({
 	trigger,
 }: Props): JSX.Element {
 	const [name, setName] = useState('');
+	const [icon, setIcon] = useState(DEFAULT_ICON);
 
 	useEffect(() => {
 		if (open) {
 			setName('');
+			setIcon(DEFAULT_ICON);
 		}
 	}, [open]);
 
@@ -31,7 +37,7 @@ function SaveViewPopover({
 
 	const handleSave = (): void => {
 		if (canSave) {
-			onSave(name);
+			onSave(name, icon);
 			onOpenChange(false);
 		}
 	};
@@ -45,7 +51,7 @@ function SaveViewPopover({
 		>
 			<div className={styles.savePopover}>
 				<div className={styles.saveTitle}>Save as view</div>
-				<Typography.Text className={styles.saveLabel}>Name</Typography.Text>
+				<span className={styles.saveLabel}>Name</span>
 				<Input
 					value={name}
 					autoFocus
@@ -60,6 +66,22 @@ function SaveViewPopover({
 						}
 					}}
 				/>
+				<span className={styles.saveLabel}>Icon</span>
+				<div className={styles.iconGrid}>
+					{VIEW_ICON_OPTIONS.map(({ name: iconName, Icon }) => (
+						<button
+							key={iconName}
+							type="button"
+							aria-label={iconName}
+							className={cx(styles.iconCell, {
+								[styles.iconCellOn]: icon === iconName,
+							})}
+							onClick={(): void => setIcon(iconName)}
+						>
+							<Icon size={14} />
+						</button>
+					))}
+				</div>
 				<div className={styles.saveActions}>
 					<Button
 						variant="ghost"

frontend/src/pages/DashboardsListPageV2/components/ViewsRail/ViewsRail.module.scss

@@ -28,7 +28,6 @@
 	font-weight: var(--font-weight-semibold);
 	letter-spacing: -0.01em;
 	color: var(--l1-foreground);
-	text-align: left;
 }
 
 .search {
@@ -77,13 +76,7 @@
 	padding: 1px 6px;
 }
 
-.deleteName {
-	color: var(--danger-background);
-	font-weight: var(--font-weight-medium);
-}
-
 .row {
-	position: relative;
 	display: flex;
 	align-items: center;
 	margin: 3px 0;
@@ -99,27 +92,27 @@
 	background: var(--l2-background);
 }
 
-// A left accent bar reads the active row more clearly than background alone.
-.rowActive::before {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 3px;
-	height: 18px;
-	border-radius: 0 3px 3px 0;
-	background: var(--primary-background);
-}
-
 .item {
+	// Neutralise the signoz Button defaults so it reads as a full-width,
+	// left-aligned list row; the row coordinates hover/active colours below.
 	--button-display: flex;
 	--button-justify-content: flex-start;
+	--button-height: auto;
 	--button-padding: 9px 10px;
+	--button-gap: 10px;
+	--button-variant-ghost-background-color: transparent;
+	--button-variant-ghost-hover-background-color: transparent;
+	--button-variant-ghost-color: var(--l2-foreground);
+	--button-variant-ghost-hover-color: var(--l1-foreground);
 	flex: 1;
 	min-width: 0;
 	width: 100%;
-	font-size: var(--font-size-base);
+	font-size: var(--font-size-sm);
+}
+
+.row:hover .item,
+.rowActive .item {
+	--button-variant-ghost-color: var(--l1-foreground);
 }
 
 .itemIcon {
@@ -132,6 +125,7 @@
 }
 
 .itemLabel {
+	flex: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -146,31 +140,24 @@
 }
 
 .itemAction {
-	// Blended ghost icon overlaid on the row's right edge — absolutely positioned
-	// so it never reserves layout space or affects the row height. Transparent so
-	// the row's hover background shows through; turns red only on its own hover.
-	position: absolute;
-	right: 6px;
-	top: 50%;
-	transform: translateY(-50%);
-	--button-height: 20px;
+	// Square icon button that surfaces on row hover and turns red on its own
+	// hover; colours flow through the signoz Button tokens.
+	--button-height: auto;
 	--button-padding: 0;
 	--button-border-radius: 4px;
+	--button-variant-ghost-background-color: transparent;
 	--button-variant-ghost-color: var(--l3-foreground);
 	--button-variant-ghost-hover-background-color: var(--danger-background);
 	--button-variant-ghost-hover-color: var(--danger-color, #fff);
 	width: 20px;
 	height: 20px;
+	margin-right: 8px;
 	opacity: 0;
-	// Hidden until row hover, and inert while hidden so it can't intercept clicks
-	// meant for the row.
-	pointer-events: none;
 	transition: opacity 0.1s;
 }
 
 .row:hover .itemAction {
 	opacity: 1;
-	pointer-events: auto;
 }
 
 .empty {
@@ -230,6 +217,37 @@
 	margin-top: 2px;
 }
 
+.iconGrid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 6px;
+}
+
+.iconCell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 34px;
+	border: 1px solid var(--l2-border);
+	border-radius: 6px;
+	background: var(--l2-background);
+	color: var(--l2-foreground);
+	cursor: pointer;
+	transition:
+		border-color 0.12s,
+		color 0.12s;
+}
+
+.iconCell:hover {
+	color: var(--l1-foreground);
+	border-color: var(--l3-foreground);
+}
+
+.iconCellOn {
+	border-color: var(--primary-background);
+	color: var(--primary-background);
+}
+
 .saveActions {
 	display: flex;
 	justify-content: flex-end;

frontend/src/pages/DashboardsListPageV2/components/ViewsRail/ViewsRail.tsx

@@ -3,11 +3,11 @@ import { Modal } from 'antd';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
-import { Bookmark, CircleAlert, Plus, Search, Trash2 } from '@signozhq/icons';
+import { CircleAlert, Plus, Search, Trash2 } from '@signozhq/icons';
 import cx from 'classnames';
 
 import type { SavedView } from '../../types';
-import { type BuiltinView } from '../../utils/views';
+import { type BuiltinView, iconByName } from '../../views';
 import SaveViewPopover from './SaveViewPopover';
 
 import styles from './ViewsRail.module.scss';
@@ -16,12 +16,11 @@ interface Props {
 	activeViewId: string;
 	builtinViews: BuiltinView[];
 	customViews: SavedView[];
-	customViewsLoading: boolean;
 	isCustomActive: boolean;
 	isModified: boolean;
 	collapsed?: boolean;
 	onSelect: (id: string) => void;
-	onSave: (name: string) => void;
+	onSave: (name: string, icon: string) => void;
 	onSaveChanges: () => void;
 	onReset: () => void;
 	onClearFilters: () => void;
@@ -41,7 +40,6 @@ function ViewsRail({
 	activeViewId,
 	builtinViews,
 	customViews,
-	customViewsLoading,
 	isCustomActive,
 	isModified,
 	collapsed = false,
@@ -75,8 +73,11 @@ function ViewsRail({
 			const { destroy } = modal.confirm({
 				title: (
 					<Typography.Title level={5}>
-						Delete the{' '}
-						<Typography.Text className={styles.deleteName}>{label}</Typography.Text>{' '}
+						Delete the
+						<span style={{ color: 'var(--danger-background)', fontWeight: 500 }}>
+							{' '}
+							{label}{' '}
+						</span>
 						view?
 					</Typography.Title>
 				),
@@ -115,10 +116,12 @@ function ViewsRail({
 					onClick={(): void => onSelect(row.id)}
 					testId={`dashboards-view-${row.id}`}
 				>
-					<Icon size={16} className={styles.itemIcon} />
-					<Typography.Text className={styles.itemLabel}>{row.label}</Typography.Text>
+					<span className={styles.itemIcon}>
+						<Icon size={14} />
+					</span>
+					<span className={styles.itemLabel}>{row.label}</span>
 					{active && isModified && (
-						<div className={styles.dirtyDot} title="Unsaved changes" />
+						<span className={styles.dirtyDot} title="Unsaved changes" />
 					)}
 				</Button>
 				{row.deletable && (
@@ -129,10 +132,7 @@ function ViewsRail({
 						className={styles.itemAction}
 						aria-label="Delete view"
 						title="Delete view"
-						onClick={(e): void => {
-							e.stopPropagation();
-							confirmDelete(row.id, row.label);
-						}}
+						onClick={(): void => confirmDelete(row.id, row.label)}
 					>
 						<Trash2 size={12} />
 					</Button>
@@ -166,7 +166,7 @@ function ViewsRail({
 			<div className={styles.search}>
 				<Input
 					value={query}
-					placeholder="Filter views by name"
+					placeholder="Search views"
 					prefix={<Search size={12} />}
 					testId="dashboards-view-search"
 					onChange={(e: ChangeEvent<HTMLInputElement>): void =>
@@ -196,13 +196,9 @@ function ViewsRail({
 					<>
 						<div className={cx(styles.groupLabel, styles.groupLabelSpaced)}>
 							My views
-							<Typography.Text className={styles.groupCount}>
-								{customViews.length}
-							</Typography.Text>
+							<span className={styles.groupCount}>{customViews.length}</span>
 						</div>
-						{customViewsLoading ? (
-							<div className={styles.empty}>Loading views…</div>
-						) : customViews.length === 0 ? (
+						{customViews.length === 0 ? (
 							<div className={styles.empty}>
 								No saved views yet. Filter the list, then save it as a view.
 							</div>
@@ -211,7 +207,7 @@ function ViewsRail({
 								renderItem({
 									id: v.id,
 									label: v.name,
-									icon: Bookmark,
+									icon: iconByName(v.icon),
 									deletable: true,
 								}),
 							)

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.tsx

@@ -5,7 +5,7 @@ import { handleContactSupport } from 'container/Integrations/utils';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
-import { formatQueryErrorMessage } from '../../../utils/helpers';
+import { formatQueryErrorMessage } from '../../../utils';
 import styles from './ErrorState.module.scss';
 
 interface Props {

frontend/src/pages/DashboardsListPageV2/hooks/useAccumulatedTags.ts

@@ -1,32 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { SelectedTag } from '../types';
-
-const tagId = (tag: SelectedTag): string => `${tag.key}:${tag.value}`;
-
-// The list response only reports the tags present in the current (filtered) page,
-// so tags vanish from the filter options as results narrow. Accumulate every tag
-// we've ever seen so previously-surfaced tags stay selectable across refetches.
-export function useAccumulatedTags(responseTags: SelectedTag[]): SelectedTag[] {
-	const [tags, setTags] = useState<SelectedTag[]>([]);
-
-	useEffect(() => {
-		if (responseTags.length === 0) {
-			return;
-		}
-		setTags((prev) => {
-			const merged = new Map(prev.map((t) => [tagId(t), t]));
-			let changed = false;
-			responseTags.forEach((t) => {
-				const id = tagId(t);
-				if (!merged.has(id)) {
-					merged.set(id, t);
-					changed = true;
-				}
-			});
-			return changed ? Array.from(merged.values()) : prev;
-		});
-	}, [responseTags]);
-
-	return tags;
-}

frontend/src/pages/DashboardsListPageV2/hooks/useActiveView.ts

@@ -1,17 +1,8 @@
 import { useCallback, useMemo } from 'react';
 import { parseAsString, useQueryState, type Options } from 'nuqs';
-import type {
-	DashboardtypesListOrderDTO,
-	DashboardtypesListSortDTO,
-} from 'api/generated/services/sigNoz.schemas';
 
-import {
-	areFilterStatesEqual,
-	combineQueries,
-	DEFAULT_FILTER_STATE,
-	filterStateToQuery,
-} from '../utils/filterQuery';
-import { BuiltinViewId } from '../types';
+import { DEFAULT_FILTER_STATE, areFilterStatesEqual } from '../filterQuery';
+import { useDashboardViewsStore } from '../store/useDashboardViewsStore';
 import type { DashboardFilterState, SavedView } from '../types';
 import {
 	BUILTIN_VIEWS,
@@ -19,8 +10,7 @@ import {
 	builtinViewSnapshot,
 	type BuiltinView,
 	isClientView,
-} from '../utils/views';
-import { useSavedViews } from './useSavedViews';
+} from '../views';
 
 const opts: Options = { history: 'push' };
 
@@ -28,62 +18,43 @@ interface UseActiveViewArgs {
 	filters: DashboardFilterState;
 	applyFilters: (next: DashboardFilterState) => void;
 	userEmail: string;
-	sortColumn: DashboardtypesListSortDTO;
-	sortOrder: DashboardtypesListOrderDTO;
-	setSortColumn: (column: DashboardtypesListSortDTO) => void;
-	setSortOrder: (order: DashboardtypesListOrderDTO) => void;
 }
 
 export interface UseActiveViewResult {
 	activeViewId: string;
 	builtinViews: BuiltinView[];
 	customViews: SavedView[];
-	customViewsLoading: boolean;
 	isCustomActive: boolean;
 	// Current filters diverge from the active view's canonical snapshot.
 	isModified: boolean;
 	// Extra server-query fragment the active view contributes, and whether it
-	// constrains the list client-side (pinned/recent).
+	// constrains the list client-side (favorites/recent).
 	viewQuery: string;
 	clientView: boolean;
 	selectView: (id: string) => void;
-	saveView: (name: string) => void;
+	saveView: (name: string, icon: string) => void;
 	saveActiveView: () => void;
 	resetView: () => void;
 	removeView: (id: string) => void;
 }
 
-// The canonical filter snapshot a saved view "is": the backend stores a flat
-// query, so a view folds entirely into the search box with empty chips.
-const customSnapshot = (view: SavedView): DashboardFilterState => ({
-	...DEFAULT_FILTER_STATE,
-	search: view.query,
-});
-
 // Orchestrates the active view: which view is selected (URL `view` param),
-// merging built-in + org-shared saved views, applying a view's snapshot on
-// select, dirty detection, and save/reset/delete via the Views API.
+// merging built-in + persisted custom views, applying a view's snapshot on
+// select, dirty detection, and save/reset/delete.
 export function useActiveView({
 	filters,
 	applyFilters,
 	userEmail,
-	sortColumn,
-	sortOrder,
-	setSortColumn,
-	setSortOrder,
 }: UseActiveViewArgs): UseActiveViewResult {
 	const [activeViewId, setActiveViewId] = useQueryState(
 		'view',
-		parseAsString.withDefault(BuiltinViewId.All).withOptions(opts),
+		parseAsString.withDefault('all').withOptions(opts),
 	);
 
-	const {
-		views: customViews,
-		isLoading: customViewsLoading,
-		createView,
-		updateView,
-		deleteView,
-	} = useSavedViews();
+	const customViews = useDashboardViewsStore((s) => s.customViews);
+	const addView = useDashboardViewsStore((s) => s.addView);
+	const updateView = useDashboardViewsStore((s) => s.updateView);
+	const deleteView = useDashboardViewsStore((s) => s.deleteView);
 
 	const activeCustom = useMemo(
 		() => customViews.find((v) => v.id === activeViewId),
@@ -94,7 +65,7 @@ export function useActiveView({
 	const canonicalSnapshot = useMemo<DashboardFilterState | null>(
 		() =>
 			activeCustom
-				? customSnapshot(activeCustom)
+				? activeCustom.filters
 				: builtinViewSnapshot(activeViewId, userEmail),
 		[activeCustom, activeViewId, userEmail],
 	);
@@ -107,93 +78,47 @@ export function useActiveView({
 		(id: string): void => {
 			void setActiveViewId(id);
 			const custom = customViews.find((v) => v.id === id);
-			if (custom) {
-				applyFilters(customSnapshot(custom));
-				setSortColumn(custom.sort);
-				setSortOrder(custom.order);
-				return;
-			}
-			applyFilters(builtinViewSnapshot(id, userEmail) ?? DEFAULT_FILTER_STATE);
+			applyFilters(
+				custom?.filters ??
+					builtinViewSnapshot(id, userEmail) ??
+					DEFAULT_FILTER_STATE,
+			);
 		},
-		[
-			setActiveViewId,
-			customViews,
-			applyFilters,
-			userEmail,
-			setSortColumn,
-			setSortOrder,
-		],
+		[setActiveViewId, customViews, applyFilters, userEmail],
 	);
 
 	const saveView = useCallback(
-		(name: string): void => {
-			// Fold the current built-in clause + chips into a single query string.
-			const query = combineQueries(
-				builtinViewQuery(activeViewId),
-				filterStateToQuery(filters),
-			);
-			void (async (): Promise<void> => {
-				const created = await createView({
-					name,
-					query,
-					sort: sortColumn,
-					order: sortOrder,
-				});
-				if (created) {
-					void setActiveViewId(created.id);
-					// Re-apply the folded representation so the new view isn't
-					// immediately flagged as modified.
-					applyFilters(customSnapshot(created));
-				}
-			})();
+		(name: string, icon: string): void => {
+			const id = `cv_${Date.now()}`;
+			addView({
+				id,
+				name: name.trim(),
+				icon,
+				filters: { ...filters },
+				createdAt: Date.now(),
+			});
+			void setActiveViewId(id);
 		},
-		[
-			activeViewId,
-			filters,
-			createView,
-			sortColumn,
-			sortOrder,
-			setActiveViewId,
-			applyFilters,
-		],
+		[addView, filters, setActiveViewId],
 	);
 
 	const saveActiveView = useCallback((): void => {
-		if (!activeCustom) {
-			return;
+		if (activeCustom) {
+			updateView(activeCustom.id, { filters: { ...filters } });
 		}
-		const query = filterStateToQuery(filters);
-		updateView(activeCustom.id, {
-			name: activeCustom.name,
-			query,
-			sort: sortColumn,
-			order: sortOrder,
-		});
-		applyFilters({ ...DEFAULT_FILTER_STATE, search: query });
-	}, [activeCustom, filters, updateView, sortColumn, sortOrder, applyFilters]);
+	}, [activeCustom, updateView, filters]);
 
 	const resetView = useCallback((): void => {
-		if (!canonicalSnapshot) {
-			return;
+		if (canonicalSnapshot) {
+			applyFilters(canonicalSnapshot);
 		}
-		applyFilters(canonicalSnapshot);
-		if (activeCustom) {
-			setSortColumn(activeCustom.sort);
-			setSortOrder(activeCustom.order);
-		}
-	}, [
-		canonicalSnapshot,
-		applyFilters,
-		activeCustom,
-		setSortColumn,
-		setSortOrder,
-	]);
+	}, [canonicalSnapshot, applyFilters]);
 
 	const removeView = useCallback(
 		(id: string): void => {
 			deleteView(id);
 			if (activeViewId === id) {
-				void setActiveViewId(BuiltinViewId.All);
+				void setActiveViewId('all');
 				applyFilters(DEFAULT_FILTER_STATE);
 			}
 		},
@@ -204,7 +129,6 @@ export function useActiveView({
 		activeViewId,
 		builtinViews: BUILTIN_VIEWS,
 		customViews,
-		customViewsLoading,
 		isCustomActive: !!activeCustom,
 		isModified,
 		viewQuery: builtinViewQuery(activeViewId),

frontend/src/pages/DashboardsListPageV2/hooks/useDashboardFilters.ts

@@ -11,28 +11,13 @@ import {
 	DEFAULT_FILTER_STATE,
 	filterStateToQuery,
 	isFilterStateEmpty,
-} from '../utils/filterQuery';
-import type {
-	DashboardFilterState,
-	SelectedTag,
-	UpdatedWindow,
-} from '../types';
+} from '../filterQuery';
+import type { DashboardFilterState, UpdatedWindow } from '../types';
 
 const UPDATED_WINDOWS: UpdatedWindow[] = ['any', 'today', '7d', '30d'];
 
 const opts: Options = { history: 'push' };
 
-// Tags are carried in the URL as `key:value` strings; split on the first colon.
-const parseTag = (raw: string): SelectedTag | null => {
-	const idx = raw.indexOf(':');
-	if (idx <= 0) {
-		return null;
-	}
-	return { key: raw.slice(0, idx), value: raw.slice(idx + 1) };
-};
-
-const serializeTag = (tag: SelectedTag): string => `${tag.key}:${tag.value}`;
-
 export interface UseDashboardFiltersResult {
 	filters: DashboardFilterState;
 	// The backend list-filter `query` string derived from the current filters.
@@ -41,7 +26,6 @@ export interface UseDashboardFiltersResult {
 	setSearch: (value: string) => void;
 	setCreatedBy: (emails: string[]) => void;
 	setUpdated: (window: UpdatedWindow) => void;
-	setTags: (tags: SelectedTag[]) => void;
 	// Replace the whole filter state at once — used when applying a saved view.
 	applyFilters: (next: DashboardFilterState) => void;
 	clearAll: () => void;
@@ -63,19 +47,10 @@ export function useDashboardFilters(): UseDashboardFiltersResult {
 		'updated',
 		parseAsStringLiteral(UPDATED_WINDOWS).withDefault('any').withOptions(opts),
 	);
-	const [tagStrings, setTagStringsState] = useQueryState(
-		'tags',
-		parseAsArrayOf(parseAsString).withDefault([]).withOptions(opts),
-	);
-
-	const tags = useMemo<SelectedTag[]>(
-		() => tagStrings.map(parseTag).filter((t): t is SelectedTag => t !== null),
-		[tagStrings],
-	);
 
 	const filters = useMemo<DashboardFilterState>(
-		() => ({ search, createdBy, updated, tags }),
-		[search, createdBy, updated, tags],
+		() => ({ search, createdBy, updated }),
+		[search, createdBy, updated],
 	);
 
 	const query = useMemo(() => filterStateToQuery(filters), [filters]);
@@ -101,23 +76,13 @@ export function useDashboardFilters(): UseDashboardFiltersResult {
 		[setUpdatedState],
 	);
 
-	const setTags = useCallback(
-		(next: SelectedTag[]): void => {
-			void setTagStringsState(next.length ? next.map(serializeTag) : null);
-		},
-		[setTagStringsState],
-	);
-
 	const applyFilters = useCallback(
 		(next: DashboardFilterState): void => {
 			void setSearchState(next.search || null);
 			void setCreatedByState(next.createdBy.length ? next.createdBy : null);
 			void setUpdatedState(next.updated);
-			void setTagStringsState(
-				next.tags.length ? next.tags.map(serializeTag) : null,
-			);
 		},
-		[setSearchState, setCreatedByState, setUpdatedState, setTagStringsState],
+		[setSearchState, setCreatedByState, setUpdatedState],
 	);
 
 	const clearAll = useCallback((): void => {
@@ -131,7 +96,6 @@ export function useDashboardFilters(): UseDashboardFiltersResult {
 		setSearch,
 		setCreatedBy,
 		setUpdated,
-		setTags,
 		applyFilters,
 		clearAll,
 	};

frontend/src/pages/DashboardsListPageV2/hooks/usePinDashboard.ts

@@ -1,63 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	invalidateListDashboardsForUserV2,
-	usePinDashboardV2,
-	useUnpinDashboardV2,
-} from 'api/generated/services/dashboard';
-import { getHttpStatusCode } from 'utils/errorUtils';
-
-const PIN_LIMIT_MESSAGE =
-	'You can pin up to 10 dashboards. Unpin one to add another.';
-
-export interface UsePinDashboardResult {
-	// Toggle the pin for a dashboard given its current pinned state.
-	togglePin: (id: string, pinned: boolean) => void;
-	isUpdating: boolean;
-}
-
-// Wraps the per-user pin/unpin mutations: refreshes the personalized list on
-// success and surfaces the 10-pin limit (HTTP 409) as a toast.
-export function usePinDashboard(): UsePinDashboardResult {
-	const queryClient = useQueryClient();
-
-	const invalidate = useCallback((): void => {
-		void invalidateListDashboardsForUserV2(queryClient);
-	}, [queryClient]);
-
-	const pin = usePinDashboardV2({
-		mutation: {
-			onSuccess: invalidate,
-			onError: (error): void => {
-				toast.error(
-					getHttpStatusCode(error) === 409
-						? PIN_LIMIT_MESSAGE
-						: 'Failed to pin dashboard.',
-				);
-			},
-		},
-	});
-
-	const unpin = useUnpinDashboardV2({
-		mutation: {
-			onSuccess: invalidate,
-			onError: (): void => {
-				toast.error('Failed to unpin dashboard.');
-			},
-		},
-	});
-
-	const togglePin = useCallback(
-		(id: string, pinned: boolean): void => {
-			if (pinned) {
-				unpin.mutate({ pathParams: { id } });
-			} else {
-				pin.mutate({ pathParams: { id } });
-			}
-		},
-		[pin, unpin],
-	);
-
-	return { togglePin, isUpdating: pin.isLoading || unpin.isLoading };
-}