feat(authz): rework the components

docs/api/openapi.yml

@@ -515,13 +515,6 @@ components:
         url:
           type: string
       type: object
-    AuthtypesDeprecatedPostableUserRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
     AuthtypesGettableAuthDomain:
       properties:
         authNProviderInfo:
@@ -667,20 +660,17 @@ components:
           type: string
         userRoles:
           items:
-            $ref: '#/components/schemas/AuthtypesDeprecatedPostableUserRole'
+            $ref: '#/components/schemas/AuthtypesPostableUserRole'
           type: array
       required:
       - email
       type: object
     AuthtypesPostableUserRole:
       properties:
-        roleId:
-          type: string
-        userId:
+        id:
           type: string
       required:
-      - userId
-      - roleId
+      - id
       type: object
     AuthtypesRelation:
       enum:
@@ -2927,13 +2917,6 @@ components:
         publicDashboard:
           $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
       type: object
-    DashboardtypesGettablePublicDashboardDataV2:
-      properties:
-        dashboard:
-          $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-        publicDashboard:
-          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
-      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -5241,16 +5224,6 @@ components:
       - offset
       - limit
       type: object
-    LlmpricingruletypesGettableUnmappedModels:
-      properties:
-        items:
-          items:
-            $ref: '#/components/schemas/LlmpricingruletypesUnmappedModel'
-          nullable: true
-          type: array
-      required:
-      - items
-      type: object
     LlmpricingruletypesLLMPricingCacheCosts:
       properties:
         mode:
@@ -5340,19 +5313,6 @@ components:
         type: string
       nullable: true
       type: array
-    LlmpricingruletypesUnmappedModel:
-      properties:
-        modelName:
-          type: string
-        provider:
-          type: string
-        spanCount:
-          minimum: 0
-          type: integer
-      required:
-      - modelName
-      - spanCount
-      type: object
     LlmpricingruletypesUpdatableLLMPricingRule:
       properties:
         enabled:
@@ -7440,13 +7400,6 @@ components:
       enum:
       - basic
       type: string
-    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -7503,13 +7456,10 @@ components:
       type: object
     ServiceaccounttypesPostableServiceAccountRole:
       properties:
-        roleId:
-          type: string
-        serviceAccountId:
+        id:
           type: string
       required:
-      - serviceAccountId
-      - roleId
+      - id
       type: object
     ServiceaccounttypesServiceAccount:
       properties:
@@ -11240,60 +11190,6 @@ paths:
       summary: Get a pricing rule
       tags:
       - llmpricingrules
-  /api/v1/llm_pricing_rules/unmapped_models:
-    get:
-      deprecated: false
-      description: Returns models seen in the last hour of trace data (gen_ai.request.model)
-        that no pricing rule pattern matches, so the user can add them to an existing
-        rule or create a new one.
-      operationId: ListUnmappedLLMModels
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/LlmpricingruletypesGettableUnmappedModels'
-                  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: List unmapped models
-      tags:
-      - llmpricingrules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -12272,188 +12168,6 @@ paths:
       summary: Update route policy
       tags:
       - routepolicies
-  /api/v1/service_account_roles:
-    post:
-      deprecated: false
-      description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRole
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccountRole'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:attach
-        - role:attach
-      - tokenizer:
-        - serviceaccount:attach
-        - role:attach
-      summary: Create service account role
-      tags:
-      - serviceaccount
-  /api/v1/service_account_roles/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint revokes a role from a service account
-      operationId: DeleteServiceAccountRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:detach
-        - role:detach
-      - tokenizer:
-        - serviceaccount:detach
-        - role:detach
-      summary: Delete service account role
-      tags:
-      - serviceaccount
-    get:
-      deprecated: false
-      description: This endpoint gets an existing service account role
-      operationId: GetServiceAccountRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/ServiceaccounttypesServiceAccountRole'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:read
-      - tokenizer:
-        - serviceaccount:read
-      summary: Get service account role
-      tags:
-      - serviceaccount
   /api/v1/service_accounts:
     get:
       deprecated: false
@@ -13023,9 +12737,9 @@ paths:
       tags:
       - serviceaccount
     post:
-      deprecated: true
+      deprecated: false
       description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRoleDeprecated
+      operationId: CreateServiceAccountRole
       parameters:
       - in: path
         name: id
@@ -13036,7 +12750,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
+              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccountRole'
       responses:
         "201":
           content:
@@ -13088,9 +12802,9 @@ paths:
       - serviceaccount
   /api/v1/service_accounts/{id}/roles/{rid}:
     delete:
-      deprecated: true
+      deprecated: false
       description: This endpoint revokes a role from service account
-      operationId: DeleteServiceAccountRoleDeprecated
+      operationId: DeleteServiceAccountRole
       parameters:
       - in: path
         name: id
@@ -17727,138 +17441,6 @@ paths:
       summary: Update my organization
       tags:
       - orgs
-  /api/v2/public/dashboards/{id}:
-    get:
-      deprecated: false
-      description: This endpoint returns the sanitized v2-shape dashboard data for
-        public access. Each panel query is reduced to a safe field subset, so filters
-        and raw query strings are not exposed.
-      operationId: GetPublicDashboardDataV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardDataV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - anonymous:
-        - public-dashboard:read
-      summary: Get public dashboard data (v2)
-      tags:
-      - dashboard
-  /api/v2/public/dashboards/{id}/panels/{key}/query_range:
-    get:
-      deprecated: false
-      description: This endpoint returns query range results for a panel of a v2-shape
-        public dashboard. The panel is addressed by its key in spec.panels.
-      operationId: GetPublicDashboardPanelQueryRangeV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: key
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - anonymous:
-        - public-dashboard:read
-      summary: Get query range result (v2)
-      tags:
-      - dashboard
   /api/v2/readyz:
     get:
       operationId: Readyz
@@ -22192,184 +21774,6 @@ paths:
       summary: Rotate session
       tags:
       - sessions
-  /api/v2/user_roles:
-    post:
-      deprecated: false
-      description: This endpoint assigns a role to a user
-      operationId: CreateUserRole
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AuthtypesPostableUserRole'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create user role
-      tags:
-      - users
-  /api/v2/user_roles/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint revokes a role from a user
-      operationId: DeleteUserRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete user role
-      tags:
-      - users
-    get:
-      deprecated: false
-      description: This endpoint gets an existing user role
-      operationId: GetUserRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AuthtypesUserRole'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get user role
-      tags:
-      - users
   /api/v2/users:
     get:
       deprecated: false
@@ -22823,7 +22227,7 @@ paths:
       tags:
       - users
     post:
-      deprecated: true
+      deprecated: false
       description: This endpoint assigns the role to the user roles by user id
       operationId: SetRoleByUserID
       parameters:
@@ -22874,7 +22278,7 @@ paths:
       - users
   /api/v2/users/{id}/roles/{roleId}:
     delete:
-      deprecated: true
+      deprecated: false
       description: This endpoint removes a role from the user by user id and role
         id
       operationId: RemoveUserRoleByUserIDAndRoleID

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -519,7 +519,7 @@ func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID,
 	if err != nil {
 		return "", err
 	}
-	_, err = module.serviceAccount.SetRoleByName(ctx, orgID, serviceAccount.ID, authtypes.SigNozViewerRoleName)
+	err = module.serviceAccount.SetRoleByName(ctx, orgID, serviceAccount.ID, authtypes.SigNozViewerRoleName)
 	if err != nil {
 		return "", err
 	}

ee/modules/dashboard/impldashboard/module.go

@@ -29,7 +29,6 @@ type module struct {
 	settings           factory.ScopedProviderSettings
 	querier            querier.Querier
 	licensing          licensing.Licensing
-	tagModule          tag.Module
 }
 
 func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
@@ -42,7 +41,6 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		settings:           scopedProviderSettings,
 		querier:            querier,
 		licensing:          licensing,
-		tagModule:          tagModule,
 	}
 }
 
@@ -134,55 +132,6 @@ func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.U
 	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
 }
 
-func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
-	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
-	if err != nil {
-		return nil, err
-	}
-
-	tags, err := module.tagModule.ListForResource(ctx, storableDashboard.OrgID, coretypes.KindDashboard, storableDashboard.ID)
-	if err != nil {
-		return nil, err
-	}
-
-	return storableDashboard.ToDashboardV2(tags)
-}
-
-func (module *module) GetPublicWidgetQueryRangeV2(ctx context.Context, id valuer.UUID, panelKey, startTimeRaw, endTimeRaw string) (*querybuildertypesv5.QueryRangeResponse, error) {
-	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
-		instrumentationtypes.CodeNamespace:    "dashboard",
-		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRangeV2",
-	})
-
-	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
-	if err != nil {
-		return nil, err
-	}
-
-	// tags are not needed for query range.
-	dashboard, err := storableDashboard.ToDashboardV2(nil)
-	if err != nil {
-		return nil, err
-	}
-
-	publicDashboard, err := module.GetPublic(ctx, dashboard.OrgID, dashboard.ID)
-	if err != nil {
-		return nil, err
-	}
-
-	startTime, endTime, err := publicDashboard.ResolveTimeRange(startTimeRaw, endTimeRaw)
-	if err != nil {
-		return nil, err
-	}
-
-	query, err := dashboard.GetPanelQuery(startTime, endTime, panelKey)
-	if err != nil {
-		return nil, err
-	}
-
-	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
-}
-
 func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publicDashboard *dashboardtypes.PublicDashboard) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {

ee/query-service/app/api/cloudIntegrations.go

@@ -141,7 +141,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationServiceAccount(ctx context.Cont
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration service account: %w", err))
 	}
-	_, err = ah.Signoz.Modules.ServiceAccount.SetRoleByName(ctx, orgId, cloudIntegrationServiceAccount.ID, authtypes.SigNozViewerRoleName)
+	err = ah.Signoz.Modules.ServiceAccount.SetRoleByName(ctx, orgId, cloudIntegrationServiceAccount.ID, authtypes.SigNozViewerRoleName)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration service account: %w", err))
 	}

frontend/.oxlintrc.json

@@ -293,8 +293,6 @@
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
-    "signoz/no-dashboard-fetch-outside-root": "error",
-    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -560,18 +558,6 @@
       "rules": {
         "signoz/no-zustand-getstate-in-hooks": "off"
       }
-    },
-    {
-      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
-      // Everywhere else must use useDashboardFetchRequired().
-      "files": [
-        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
-        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
-      ],
-      "rules": {
-        "signoz/no-dashboard-fetch-outside-root": "off"
-      }
     }
   ]
 }

frontend/__mocks__/lib/env.ts

@@ -0,0 +1,3 @@
+export const IS_DEV = false;
+export const IS_PROD = true;
+export const MODE = 'test';

frontend/jest.config.ts

@@ -29,6 +29,7 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
+		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/plugins/rules/no-dashboard-fetch-outside-root.mjs

@@ -1,48 +0,0 @@
-/**
- * Rule: no-dashboard-fetch-outside-root
- *
- * `useDashboardFetch` owns the V2 dashboard fetch and exposes its loading/error/refetch
- * lifecycle. That lifecycle is a root-page concern: DashboardPageV2 and PanelEditorPage
- * gate their subtree on a resolved dashboard before mounting anything below them.
- *
- * Every other component therefore renders inside an already-loaded subtree and must use
- * `useDashboardFetchRequired`, which reuses the same react-query cache entry but guarantees
- * a non-undefined dashboard (throwing otherwise) — so consumers don't re-handle states the
- * root page already owns.
- *
- * This rule flags `useDashboardFetch` imports. It is disabled via an override in
- * .oxlintrc.json for the two root pages and for useDashboardFetchRequired.ts (which wraps it).
- */
-
-const FETCH_HOOK = 'useDashboardFetch';
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow useDashboardFetch outside the root dashboard pages; use useDashboardFetchRequired instead',
-			category: 'Dashboard V2',
-		},
-		schema: [],
-		messages: {
-			useRequired:
-				'Use useDashboardFetchRequired() instead of useDashboardFetch — the latter is reserved for the root pages (DashboardPageV2, PanelEditorPage) that own the fetch lifecycle. Components below them render inside a loaded subtree and should assume a guaranteed dashboard.',
-		},
-	},
-
-	create(context) {
-		return {
-			ImportDeclaration(node) {
-				node.specifiers.forEach((specifier) => {
-					if (
-						specifier.type === 'ImportSpecifier' &&
-						specifier.imported.name === FETCH_HOOK
-					) {
-						context.report({ node: specifier, messageId: 'useRequired' });
-					}
-				});
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -12,7 +12,6 @@ import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
-import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 
 export default {
 	meta: {
@@ -26,6 +25,5 @@ export default {
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
-		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 	},
 };

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

@@ -38,10 +38,6 @@ import type {
 	GetPublicDashboard200,
 	GetPublicDashboardData200,
 	GetPublicDashboardDataPathParameters,
-	GetPublicDashboardDataV2200,
-	GetPublicDashboardDataV2PathParameters,
-	GetPublicDashboardPanelQueryRangeV2200,
-	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
@@ -1803,217 +1799,6 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
-/**
- * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
- * @summary Get public dashboard data (v2)
- */
-export const getPublicDashboardDataV2 = (
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetPublicDashboardDataV2200>({
-		url: `/api/v2/public/dashboards/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetPublicDashboardDataV2QueryKey = ({
-	id,
-}: GetPublicDashboardDataV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}`] as const;
-};
-
-export const getGetPublicDashboardDataV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetPublicDashboardDataV2QueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getPublicDashboardDataV2>>
-	> = ({ signal }) => getPublicDashboardDataV2({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetPublicDashboardDataV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof getPublicDashboardDataV2>>
->;
-export type GetPublicDashboardDataV2QueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get public dashboard data (v2)
- */
-
-export function useGetPublicDashboardDataV2<
-	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetPublicDashboardDataV2QueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get public dashboard data (v2)
- */
-export const invalidateGetPublicDashboardDataV2 = async (
-	queryClient: QueryClient,
-	{ id }: GetPublicDashboardDataV2PathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardDataV2QueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns query range results for a panel of a v2-shape public dashboard. The panel is addressed by its key in spec.panels.
- * @summary Get query range result (v2)
- */
-export const getPublicDashboardPanelQueryRangeV2 = (
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
-		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
-	id,
-	key,
-}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
-};
-
-export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
-	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(id && key),
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetPublicDashboardPanelQueryRangeV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
->;
-export type GetPublicDashboardPanelQueryRangeV2QueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get query range result (v2)
- */
-
-export function useGetPublicDashboardPanelQueryRangeV2<
-	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
-		{ id, key },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get query range result (v2)
- */
-export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
-	queryClient: QueryClient,
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * Same as ListDashboardsV2 but personalized for the calling user: each dashboard carries the caller's `pinned` state, and pinned dashboards float to the top of the requested ordering. Supports the same filter DSL, sort, order, and pagination.
  * @summary List dashboards for the current user (v2)

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

@@ -23,7 +23,6 @@ import type {
 	GetLLMPricingRulePathParameters,
 	ListLLMPricingRules200,
 	ListLLMPricingRulesParams,
-	ListUnmappedLLMModels200,
 	LlmpricingruletypesUpdatableLLMPricingRulesDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -394,87 +393,3 @@ export const invalidateGetLLMPricingRule = async (
 
 	return queryClient;
 };
-
-/**
- * Returns models seen in the last hour of trace data (gen_ai.request.model) that no pricing rule pattern matches, so the user can add them to an existing rule or create a new one.
- * @summary List unmapped models
- */
-export const listUnmappedLLMModels = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListUnmappedLLMModels200>({
-		url: `/api/v1/llm_pricing_rules/unmapped_models`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListUnmappedLLMModelsQueryKey = () => {
-	return [`/api/v1/llm_pricing_rules/unmapped_models`] as const;
-};
-
-export const getListUnmappedLLMModelsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListUnmappedLLMModelsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>
-	> = ({ signal }) => listUnmappedLLMModels(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListUnmappedLLMModelsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listUnmappedLLMModels>>
->;
-export type ListUnmappedLLMModelsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List unmapped models
- */
-
-export function useListUnmappedLLMModels<
-	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListUnmappedLLMModelsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List unmapped models
- */
-export const invalidateListUnmappedLLMModels = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListUnmappedLLMModelsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -22,16 +22,12 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
-	CreateServiceAccountRoleDeprecated201,
-	CreateServiceAccountRoleDeprecatedPathParameters,
+	CreateServiceAccountRolePathParameters,
 	DeleteServiceAccountPathParameters,
-	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
 	GetServiceAccountPathParameters,
-	GetServiceAccountRole200,
-	GetServiceAccountRolePathParameters,
 	GetServiceAccountRoles200,
 	GetServiceAccountRolesPathParameters,
 	ListServiceAccountKeys200,
@@ -39,7 +35,6 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
-	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -51,272 +46,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-/**
- * This endpoint assigns a role to a service account
- * @summary Create service account role
- */
-export const createServiceAccountRole = (
-	serviceaccounttypesPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccountRole201>({
-		url: `/api/v1/service_account_roles`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesPostableServiceAccountRoleDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRole>>,
-		TError,
-		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRole>>,
-	TError,
-	{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
-	TContext
-> => {
-	const mutationKey = ['createServiceAccountRole'];
-	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 createServiceAccountRole>>,
-		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createServiceAccountRole(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRole>>
->;
-export type CreateServiceAccountRoleMutationBody =
-	| BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>
-	| undefined;
-export type CreateServiceAccountRoleMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create service account role
- */
-export const useCreateServiceAccountRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRole>>,
-		TError,
-		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRole>>,
-	TError,
-	{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
-	TContext
-> => {
-	return useMutation(getCreateServiceAccountRoleMutationOptions(options));
-};
-/**
- * This endpoint revokes a role from a service account
- * @summary Delete service account role
- */
-export const deleteServiceAccountRole = (
-	{ id }: DeleteServiceAccountRolePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/service_account_roles/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteServiceAccountRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRolePathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRolePathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteServiceAccountRole'];
-	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 deleteServiceAccountRole>>,
-		{ pathParams: DeleteServiceAccountRolePathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteServiceAccountRole(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteServiceAccountRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>
->;
-
-export type DeleteServiceAccountRoleMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete service account role
- */
-export const useDeleteServiceAccountRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRolePathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRolePathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteServiceAccountRoleMutationOptions(options));
-};
-/**
- * This endpoint gets an existing service account role
- * @summary Get service account role
- */
-export const getServiceAccountRole = (
-	{ id }: GetServiceAccountRolePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetServiceAccountRole200>({
-		url: `/api/v1/service_account_roles/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetServiceAccountRoleQueryKey = ({
-	id,
-}: GetServiceAccountRolePathParameters) => {
-	return [`/api/v1/service_account_roles/${id}`] as const;
-};
-
-export const getGetServiceAccountRoleQueryOptions = <
-	TData = Awaited<ReturnType<typeof getServiceAccountRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetServiceAccountRolePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getServiceAccountRole>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetServiceAccountRoleQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getServiceAccountRole>>
-	> = ({ signal }) => getServiceAccountRole({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getServiceAccountRole>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetServiceAccountRoleQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getServiceAccountRole>>
->;
-export type GetServiceAccountRoleQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get service account role
- */
-
-export function useGetServiceAccountRole<
-	TData = Awaited<ReturnType<typeof getServiceAccountRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetServiceAccountRolePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getServiceAccountRole>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetServiceAccountRoleQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get service account role
- */
-export const invalidateGetServiceAccountRole = async (
-	queryClient: QueryClient,
-	{ id }: GetServiceAccountRolePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceAccountRoleQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint lists the service accounts for an organisation
  * @summary List service accounts
@@ -1255,46 +984,45 @@ export const invalidateGetServiceAccountRoles = async (
 
 /**
  * This endpoint assigns a role to a service account
- * @deprecated
  * @summary Create service account role
  */
-export const createServiceAccountRoleDeprecated = (
-	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
-	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
+export const createServiceAccountRole = (
+	{ id }: CreateServiceAccountRolePathParameters,
+	serviceaccounttypesPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
+	return GeneratedAPIInstance<CreateServiceAccountRole201>({
 		url: `/api/v1/service_accounts/${id}/roles`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
+		data: serviceaccounttypesPostableServiceAccountRoleDTO,
 		signal,
 	});
 };
 
-export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
+export const getCreateServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		Awaited<ReturnType<typeof createServiceAccountRole>>,
 		TError,
 		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRolePathParameters;
+			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
 		},
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+	Awaited<ReturnType<typeof createServiceAccountRole>>,
 	TError,
 	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+		pathParams: CreateServiceAccountRolePathParameters;
+		data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
 	},
 	TContext
 > => {
-	const mutationKey = ['createServiceAccountRoleDeprecated'];
+	const mutationKey = ['createServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -1304,66 +1032,62 @@ export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		Awaited<ReturnType<typeof createServiceAccountRole>>,
 		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRolePathParameters;
+			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
 
-		return createServiceAccountRoleDeprecated(pathParams, data);
+		return createServiceAccountRole(pathParams, data);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
+export type CreateServiceAccountRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createServiceAccountRole>>
 >;
-export type CreateServiceAccountRoleDeprecatedMutationBody =
-	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
+export type CreateServiceAccountRoleMutationBody =
+	| BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>
 	| undefined;
-export type CreateServiceAccountRoleDeprecatedMutationError =
+export type CreateServiceAccountRoleMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Create service account role
  */
-export const useCreateServiceAccountRoleDeprecated = <
+export const useCreateServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+		Awaited<ReturnType<typeof createServiceAccountRole>>,
 		TError,
 		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRolePathParameters;
+			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
 		},
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
+	Awaited<ReturnType<typeof createServiceAccountRole>>,
 	TError,
 	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
+		pathParams: CreateServiceAccountRolePathParameters;
+		data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
 	},
 	TContext
 > => {
-	return useMutation(
-		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
-	);
+	return useMutation(getCreateServiceAccountRoleMutationOptions(options));
 };
 /**
  * This endpoint revokes a role from service account
- * @deprecated
  * @summary Delete service account role
  */
-export const deleteServiceAccountRoleDeprecated = (
-	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
+export const deleteServiceAccountRole = (
+	{ id, rid }: DeleteServiceAccountRolePathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
@@ -1373,23 +1097,23 @@ export const deleteServiceAccountRoleDeprecated = (
 	});
 };
 
-export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
+export const getDeleteServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
 		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+		{ pathParams: DeleteServiceAccountRolePathParameters },
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
 	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+	{ pathParams: DeleteServiceAccountRolePathParameters },
 	TContext
 > => {
-	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
+	const mutationKey = ['deleteServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -1399,47 +1123,44 @@ export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
+		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+		{ pathParams: DeleteServiceAccountRolePathParameters }
 	> = (props) => {
 		const { pathParams } = props ?? {};
 
-		return deleteServiceAccountRoleDeprecated(pathParams);
+		return deleteServiceAccountRole(pathParams);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
+export type DeleteServiceAccountRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>
 >;
 
-export type DeleteServiceAccountRoleDeprecatedMutationError =
+export type DeleteServiceAccountRoleMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Delete service account role
  */
-export const useDeleteServiceAccountRoleDeprecated = <
+export const useDeleteServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
 		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+		{ pathParams: DeleteServiceAccountRolePathParameters },
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
 	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
+	{ pathParams: DeleteServiceAccountRolePathParameters },
 	TContext
 > => {
-	return useMutation(
-		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
-	);
+	return useMutation(getDeleteServiceAccountRoleMutationOptions(options));
 };
 /**
  * This endpoint gets my service account

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

@@ -2048,13 +2048,6 @@ export interface AuthtypesAuthNSupportDTO {
 	password?: AuthtypesPasswordAuthNSupportDTO[] | null;
 }
 
-export interface AuthtypesDeprecatedPostableUserRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface AuthtypesGettableAuthDomainDTO {
 	authNProviderInfo?: AuthtypesAuthNProviderInfoDTO;
 	config?: AuthtypesAuthDomainConfigDTO;
@@ -2294,6 +2287,13 @@ export interface AuthtypesPostableRotateTokenDTO {
 	refreshToken?: string;
 }
 
+export interface AuthtypesPostableUserRoleDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface AuthtypesPostableUserDTO {
 	/**
 	 * @type string
@@ -2310,18 +2310,7 @@ export interface AuthtypesPostableUserDTO {
 	/**
 	 * @type array
 	 */
-	userRoles?: AuthtypesDeprecatedPostableUserRoleDTO[];
-}
-
-export interface AuthtypesPostableUserRoleDTO {
-	/**
-	 * @type string
-	 */
-	roleId: string;
-	/**
-	 * @type string
-	 */
-	userId: string;
+	userRoles?: AuthtypesPostableUserRoleDTO[];
 }
 
 export interface AuthtypesRoleDTO {
@@ -4952,11 +4941,6 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
-export interface DashboardtypesGettablePublicDashboardDataV2DTO {
-	dashboard?: DashboardtypesGettableDashboardV2DTO;
-	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
-}
-
 export enum DashboardtypesPatchOpDTO {
 	add = 'add',
 	remove = 'remove',
@@ -6834,29 +6818,6 @@ export interface LlmpricingruletypesGettablePricingRulesDTO {
 	total: number;
 }
 
-export interface LlmpricingruletypesUnmappedModelDTO {
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type string
-	 */
-	provider?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	spanCount: number;
-}
-
-export interface LlmpricingruletypesGettableUnmappedModelsDTO {
-	/**
-	 * @type array,null
-	 */
-	items: LlmpricingruletypesUnmappedModelDTO[] | null;
-}
-
 export interface LlmpricingruletypesUpdatableLLMPricingRuleDTO {
 	/**
 	 * @type boolean
@@ -8519,13 +8480,6 @@ export interface RuletypesRuleDTO {
 export enum RuletypesThresholdKindDTO {
 	basic = 'basic',
 }
-export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -8595,11 +8549,7 @@ export interface ServiceaccounttypesPostableServiceAccountRoleDTO {
 	/**
 	 * @type string
 	 */
-	roleId: string;
-	/**
-	 * @type string
-	 */
-	serviceAccountId: string;
+	id: string;
 }
 
 export interface ServiceaccounttypesServiceAccountDTO {
@@ -10218,14 +10168,6 @@ export type GetLLMPricingRule200 = {
 	status: string;
 };
 
-export type ListUnmappedLLMModels200 = {
-	data: LlmpricingruletypesGettableUnmappedModelsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array,null
@@ -10365,28 +10307,6 @@ export type UpdateRoutePolicy200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRole201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteServiceAccountRolePathParameters = {
-	id: string;
-};
-export type GetServiceAccountRolePathParameters = {
-	id: string;
-};
-export type GetServiceAccountRole200 = {
-	data: ServiceaccounttypesServiceAccountRoleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListServiceAccounts200 = {
 	/**
 	 * @type array
@@ -10470,10 +10390,10 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRoleDeprecatedPathParameters = {
+export type CreateServiceAccountRolePathParameters = {
 	id: string;
 };
-export type CreateServiceAccountRoleDeprecated201 = {
+export type CreateServiceAccountRole201 = {
 	data: TypesIdentifiableDTO;
 	/**
 	 * @type string
@@ -10481,7 +10401,7 @@ export type CreateServiceAccountRoleDeprecated201 = {
 	status: string;
 };
 
-export type DeleteServiceAccountRoleDeprecatedPathParameters = {
+export type DeleteServiceAccountRolePathParameters = {
 	id: string;
 	rid: string;
 };
@@ -11241,29 +11161,6 @@ export type GetMyOrganization200 = {
 	status: string;
 };
 
-export type GetPublicDashboardDataV2PathParameters = {
-	id: string;
-};
-export type GetPublicDashboardDataV2200 = {
-	data: DashboardtypesGettablePublicDashboardDataV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
-	id: string;
-	key: string;
-};
-export type GetPublicDashboardPanelQueryRangeV2200 = {
-	data: Querybuildertypesv5QueryRangeResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Readyz200 = {
 	data: FactoryResponseDTO;
 	/**
@@ -11641,28 +11538,6 @@ export type RotateSession200 = {
 	status: string;
 };
 
-export type CreateUserRole201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteUserRolePathParameters = {
-	id: string;
-};
-export type GetUserRolePathParameters = {
-	id: string;
-};
-export type GetUserRole200 = {
-	data: AuthtypesUserRoleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUsers200 = {
 	/**
 	 * @type array

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

@@ -19,15 +19,12 @@ import type {
 
 import type {
 	AuthtypesPostableUserDTO,
-	AuthtypesPostableUserRoleDTO,
 	CreateInvite201,
 	CreateResetPasswordToken201,
 	CreateResetPasswordTokenPathParameters,
 	CreateUser201,
-	CreateUserRole201,
 	DeleteUserDeprecatedPathParameters,
 	DeleteUserPathParameters,
-	DeleteUserRolePathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
@@ -40,8 +37,6 @@ import type {
 	GetUserDeprecated200,
 	GetUserDeprecatedPathParameters,
 	GetUserPathParameters,
-	GetUserRole200,
-	GetUserRolePathParameters,
 	GetUsersByRoleID200,
 	GetUsersByRoleIDPathParameters,
 	ListUsers200,
@@ -1159,267 +1154,6 @@ export const invalidateGetUsersByRoleID = async (
 	return queryClient;
 };
 
-/**
- * This endpoint assigns a role to a user
- * @summary Create user role
- */
-export const createUserRole = (
-	authtypesPostableUserRoleDTO?: BodyType<AuthtypesPostableUserRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateUserRole201>({
-		url: `/api/v2/user_roles`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPostableUserRoleDTO,
-		signal,
-	});
-};
-
-export const getCreateUserRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createUserRole>>,
-		TError,
-		{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createUserRole>>,
-	TError,
-	{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
-	TContext
-> => {
-	const mutationKey = ['createUserRole'];
-	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 createUserRole>>,
-		{ data?: BodyType<AuthtypesPostableUserRoleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createUserRole(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateUserRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createUserRole>>
->;
-export type CreateUserRoleMutationBody =
-	| BodyType<AuthtypesPostableUserRoleDTO>
-	| undefined;
-export type CreateUserRoleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create user role
- */
-export const useCreateUserRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createUserRole>>,
-		TError,
-		{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createUserRole>>,
-	TError,
-	{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
-	TContext
-> => {
-	return useMutation(getCreateUserRoleMutationOptions(options));
-};
-/**
- * This endpoint revokes a role from a user
- * @summary Delete user role
- */
-export const deleteUserRole = (
-	{ id }: DeleteUserRolePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/user_roles/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteUserRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUserRole>>,
-		TError,
-		{ pathParams: DeleteUserRolePathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteUserRole>>,
-	TError,
-	{ pathParams: DeleteUserRolePathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteUserRole'];
-	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 deleteUserRole>>,
-		{ pathParams: DeleteUserRolePathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteUserRole(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteUserRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteUserRole>>
->;
-
-export type DeleteUserRoleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete user role
- */
-export const useDeleteUserRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUserRole>>,
-		TError,
-		{ pathParams: DeleteUserRolePathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteUserRole>>,
-	TError,
-	{ pathParams: DeleteUserRolePathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteUserRoleMutationOptions(options));
-};
-/**
- * This endpoint gets an existing user role
- * @summary Get user role
- */
-export const getUserRole = (
-	{ id }: GetUserRolePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetUserRole200>({
-		url: `/api/v2/user_roles/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetUserRoleQueryKey = ({ id }: GetUserRolePathParameters) => {
-	return [`/api/v2/user_roles/${id}`] as const;
-};
-
-export const getGetUserRoleQueryOptions = <
-	TData = Awaited<ReturnType<typeof getUserRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetUserRolePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getUserRole>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetUserRoleQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getUserRole>>> = ({
-		signal,
-	}) => getUserRole({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getUserRole>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetUserRoleQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getUserRole>>
->;
-export type GetUserRoleQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get user role
- */
-
-export function useGetUserRole<
-	TData = Awaited<ReturnType<typeof getUserRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetUserRolePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getUserRole>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetUserRoleQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get user role
- */
-export const invalidateGetUserRole = async (
-	queryClient: QueryClient,
-	{ id }: GetUserRolePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetUserRoleQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint lists all users for the organization
  * @summary List users v2
@@ -2131,7 +1865,6 @@ export const invalidateGetRolesByUserID = async (
 
 /**
  * This endpoint assigns the role to the user roles by user id
- * @deprecated
  * @summary Set user roles
  */
 export const setRoleByUserID = (
@@ -2203,7 +1936,6 @@ export type SetRoleByUserIDMutationBody =
 export type SetRoleByUserIDMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Set user roles
  */
 export const useSetRoleByUserID = <
@@ -2232,7 +1964,6 @@ export const useSetRoleByUserID = <
 };
 /**
  * This endpoint removes a role from the user by user id and role id
- * @deprecated
  * @summary Remove a role from user
  */
 export const removeUserRoleByUserIDAndRoleID = (
@@ -2291,7 +2022,6 @@ export type RemoveUserRoleByUserIDAndRoleIDMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Remove a role from user
  */
 export const useRemoveUserRoleByUserIDAndRoleID = <

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,7 +2,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -134,18 +134,17 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>
 
-				<AuthZTooltip checks={[SACreatePermission]}>
-					<Button
-						type="submit"
-						form="create-sa-form"
-						variant="solid"
-						color="primary"
-						loading={isSubmitting}
-						disabled={!isValid}
-					>
-						Create Service Account
-					</Button>
-				</AuthZTooltip>
+				<AuthZButton
+					checks={[SACreatePermission]}
+					type="submit"
+					form="create-sa-form"
+					variant="solid"
+					color="primary"
+					loading={isSubmitting}
+					disabled={!isValid}
+				>
+					Create Service Account
+				</AuthZButton>
 			</DialogFooter>
 		</DialogWrapper>
 	);

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/Graph/utils.ts

@@ -1,14 +1,5 @@
 import { MutableRefObject } from 'react';
-import {
-	ActiveElement,
-	Chart,
-	ChartConfiguration,
-	ChartData,
-	ChartEvent,
-	ChartType,
-	Color,
-	TooltipItem,
-} from 'chart.js';
+import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -69,189 +60,184 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions =>
-	({
-		animation: {
-			duration: animate ? 200 : 0,
-		},
-		responsive: true,
-		maintainAspectRatio: false,
-		interaction: {
-			mode: 'index',
-			intersect: true,
-		},
-		plugins: {
-			...(staticLine
-				? {
-						annotation: {
-							annotations: [
-								{
-									type: 'line',
-									yMin: staticLine.yMin,
-									yMax: staticLine.yMax,
-									borderColor: staticLine.borderColor,
-									borderWidth: staticLine.borderWidth,
-									label: {
-										content: staticLine.lineText,
-										enabled: true,
-										font: {
-											size: 10,
-										},
-										borderWidth: 0,
-										position: 'start',
-										backgroundColor: 'transparent',
-										color: staticLine.textColor,
+): CustomChartOptions => ({
+	animation: {
+		duration: animate ? 200 : 0,
+	},
+	responsive: true,
+	maintainAspectRatio: false,
+	interaction: {
+		mode: 'index',
+		intersect: true,
+	},
+	plugins: {
+		...(staticLine
+			? {
+					annotation: {
+						annotations: [
+							{
+								type: 'line',
+								yMin: staticLine.yMin,
+								yMax: staticLine.yMax,
+								borderColor: staticLine.borderColor,
+								borderWidth: staticLine.borderWidth,
+								label: {
+									content: staticLine.lineText,
+									enabled: true,
+									font: {
+										size: 10,
 									},
+									borderWidth: 0,
+									position: 'start',
+									backgroundColor: 'transparent',
+									color: staticLine.textColor,
 								},
-							],
-						},
-					}
-				: {}),
-			title: {
-				display: title !== undefined,
-				text: title,
-			},
-			legend: {
-				display: false,
-			},
-			tooltip: {
-				callbacks: {
-					title(context: TooltipItem<'line'>[]): string | string[] {
-						const date = dayjs(context[0].parsed.x);
-						return date
-							.tz(timezone.value)
-							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+							},
+						],
 					},
-					label(context: TooltipItem<'line'>): string | string[] {
-						let label = context.dataset.label || '';
-
-						if (label) {
-							label += ': ';
-						}
-						if (context.parsed.y !== null) {
-							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-						}
-
-						return label;
-					},
-					labelTextColor(labelData: TooltipItem<'line'>): Color {
-						if (labelData.datasetIndex === nearestDatasetIndex.current) {
-							return 'rgba(255, 255, 255, 1)';
-						}
-
-						return 'rgba(255, 255, 255, 0.75)';
-					},
-				},
-				position: 'custom',
-				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
-					return item2.parsed.y - item1.parsed.y;
-				},
-			},
-			[dragSelectPluginId]: createDragSelectPluginOptions(
-				!!onDragSelect,
-				onDragSelect,
-				dragSelectColor,
-			),
-			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-				!!onDragSelect,
-				currentTheme === 'dark' ? 'white' : 'black',
-			),
-		},
-		layout: {
-			padding: 0,
-		},
-		scales: {
-			x: {
-				stacked: isStacked,
-				offset: false,
-				grid: {
-					display: true,
-					color: getGridColor(),
-					drawTicks: true,
-				},
-				adapters: {
-					date: chartjsAdapter,
-				},
-				time: {
-					unit: xAxisTimeUnit?.unitName || 'minute',
-					stepSize: xAxisTimeUnit?.stepSize || 1,
-					displayFormats: {
-						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-						second: DATE_TIME_FORMATS.TIME_SECONDS,
-						minute: DATE_TIME_FORMATS.TIME,
-						hour: DATE_TIME_FORMATS.SLASH_SHORT,
-						day: DATE_TIME_FORMATS.DATE_SHORT,
-						week: DATE_TIME_FORMATS.DATE_SHORT,
-						month: DATE_TIME_FORMATS.YEAR_MONTH,
-						year: DATE_TIME_FORMATS.YEAR_SHORT,
-					},
-				},
-				type: 'time',
-				ticks: { color: getAxisLabelColor(currentTheme) },
-				...(minTime && {
-					min: dayjs(minTime).tz(timezone.value).format(),
-				}),
-				...(maxTime && {
-					max: dayjs(maxTime).tz(timezone.value).format(),
-				}),
-			},
-			y: {
-				stacked: isStacked,
-				display: true,
-				grid: {
-					display: true,
-					color: getGridColor(),
-				},
-				ticks: {
-					color: getAxisLabelColor(currentTheme),
-					// Include a dollar sign in the ticks
-					callback(value: number | string): string {
-						return getYAxisFormattedValue(value.toString(), yAxisUnit);
-					},
-				},
-			},
-		},
-		elements: {
-			line: {
-				tension: 0,
-				cubicInterpolationMode: 'monotone',
-			},
-			point: {
-				hoverBackgroundColor: (ctx: any): string => {
-					if (ctx?.element?.options?.borderColor) {
-						return ctx.element.options.borderColor;
-					}
-					return 'rgba(0,0,0,0.1)';
-				},
-				hoverRadius: 5,
-			},
-		},
-		onClick: (
-			event: ChartEvent,
-			element: ActiveElement[],
-			chart: Chart,
-		): void => {
-			if (onClickHandler) {
-				onClickHandler(event, element, chart, data);
-			}
-		},
-		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
-			if (event.native) {
-				const interactions = chart.getElementsAtEventForMode(
-					event.native,
-					'nearest',
-					{
-						intersect: false,
-					},
-					true,
-				);
-
-				if (interactions[0]) {
-					nearestDatasetIndex.current = interactions[0].datasetIndex;
 				}
-			}
+			: {}),
+		title: {
+			display: title !== undefined,
+			text: title,
 		},
-	}) as CustomChartOptions;
+		legend: {
+			display: false,
+		},
+		tooltip: {
+			callbacks: {
+				title(context): string | string[] {
+					const date = dayjs(context[0].parsed.x);
+					return date
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+				},
+				label(context): string | string[] {
+					let label = context.dataset.label || '';
+
+					if (label) {
+						label += ': ';
+					}
+					if (context.parsed.y !== null) {
+						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+					}
+
+					return label;
+				},
+				labelTextColor(labelData): Color {
+					if (labelData.datasetIndex === nearestDatasetIndex.current) {
+						return 'rgba(255, 255, 255, 1)';
+					}
+
+					return 'rgba(255, 255, 255, 0.75)';
+				},
+			},
+			position: 'custom',
+			itemSort(item1, item2): number {
+				return item2.parsed.y - item1.parsed.y;
+			},
+		},
+		[dragSelectPluginId]: createDragSelectPluginOptions(
+			!!onDragSelect,
+			onDragSelect,
+			dragSelectColor,
+		),
+		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+			!!onDragSelect,
+			currentTheme === 'dark' ? 'white' : 'black',
+		),
+	},
+	layout: {
+		padding: 0,
+	},
+	scales: {
+		x: {
+			stacked: isStacked,
+			offset: false,
+			grid: {
+				display: true,
+				color: getGridColor(),
+				drawTicks: true,
+			},
+			adapters: {
+				date: chartjsAdapter,
+			},
+			time: {
+				unit: xAxisTimeUnit?.unitName || 'minute',
+				stepSize: xAxisTimeUnit?.stepSize || 1,
+				displayFormats: {
+					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+					second: DATE_TIME_FORMATS.TIME_SECONDS,
+					minute: DATE_TIME_FORMATS.TIME,
+					hour: DATE_TIME_FORMATS.SLASH_SHORT,
+					day: DATE_TIME_FORMATS.DATE_SHORT,
+					week: DATE_TIME_FORMATS.DATE_SHORT,
+					month: DATE_TIME_FORMATS.YEAR_MONTH,
+					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				},
+			},
+			type: 'time',
+			ticks: { color: getAxisLabelColor(currentTheme) },
+			...(minTime && {
+				min: dayjs(minTime).tz(timezone.value).format(),
+			}),
+			...(maxTime && {
+				max: dayjs(maxTime).tz(timezone.value).format(),
+			}),
+		},
+		y: {
+			stacked: isStacked,
+			display: true,
+			grid: {
+				display: true,
+				color: getGridColor(),
+			},
+			ticks: {
+				color: getAxisLabelColor(currentTheme),
+				// Include a dollar sign in the ticks
+				callback(value): string {
+					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				},
+			},
+		},
+	},
+	elements: {
+		line: {
+			tension: 0,
+			cubicInterpolationMode: 'monotone',
+		},
+		point: {
+			hoverBackgroundColor: (ctx: any): string => {
+				if (ctx?.element?.options?.borderColor) {
+					return ctx.element.options.borderColor;
+				}
+				return 'rgba(0,0,0,0.1)';
+			},
+			hoverRadius: 5,
+		},
+	},
+	onClick: (event, element, chart): void => {
+		if (onClickHandler) {
+			onClickHandler(event, element, chart, data);
+		}
+	},
+	onHover: (event, _, chart): void => {
+		if (event.native) {
+			const interactions = chart.getElementsAtEventForMode(
+				event.native,
+				'nearest',
+				{
+					intersect: false,
+				},
+				true,
+			);
+
+			if (interactions[0]) {
+				nearestDatasetIndex.current = interactions[0].datasetIndex;
+			}
+		}
+	},
+});
 
 declare module 'chart.js' {
 	interface TooltipPositionerMap {

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,54 +35,21 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		--input-border-radius: 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 25px;
-
-		position: relative;
-
-		&:hover,
-		&:focus {
-			z-index: 1;
-		}
-
-		.ant-select-selector {
-			position: relative;
-			border-radius: inherit;
-		}
-
-		.ant-select:hover .ant-select-selector,
-		.ant-select-focused .ant-select-selector {
-			z-index: 1;
-		}
-
-		&.input__has-label-after {
-			margin-left: -1px;
-
-			.ant-select-selector {
-				margin-left: -1px;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-
-		&.input__has-close-button {
-			.ant-select-selector {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			~ .close-btn {
-				margin-left: -1px;
-			}
-		}
+		line-height: 27px;
 
 		&::placeholder {
-			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -96,35 +63,25 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		height: 100%;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		height: 38px;
 		width: 38px;
-		position: relative;
-
-		&:hover,
-		&:focus {
-			z-index: 2;
-		}
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 2px;
-			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-			background: var(--input-with-label-background-color, var(--l2-background));
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
-
-			.ant-select-selector {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
 		}
 
 		.label {
 			border-left: none;
-			border-radius: 0px 2px 2px 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -45,10 +45,7 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className={cx('input', {
-					'input__has-label-after': !labelAfter,
-					'input__has-close-button': !!onClose,
-				})}
+				className="input"
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

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

@@ -80,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--query-builder-v2-border-color, var(--l2-border)),
-					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+					var(--l1-border),
+					var(--l1-border) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,8 +101,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted
-						var(--query-builder-v2-border-color, var(--l2-border));
+					border-left: 6px dotted var(--l1-border);
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -115,8 +114,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -242,8 +241,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted
-							var(--query-builder-v2-border-color, var(--l2-border));
+						border-left: 6px dotted var(--l1-border);
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -256,8 +254,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--query-builder-v2-border-color, var(--l2-border)),
-							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+							var(--l1-border),
+							var(--l1-border) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -275,16 +273,6 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
-
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					);
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-					&:placeholder {
-						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-					}
 				}
 
 				.formula-legend {
@@ -294,42 +282,15 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						color: var(--query-builder-v2-color, var(--l2-foreground));
+						background: var(--l2-background);
+						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;
-
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-						position: relative;
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-
-						height: 36px;
-
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-						position: relative;
-						margin-left: -1px;
-
-						&:hover,
-						&:focus {
-							z-index: 1;
-							border-color: var(--internal-ant-border-color-hover);
-						}
-
-						&:placeholder {
-							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-						}
 					}
 				}
 			}
@@ -362,8 +323,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -434,8 +395,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -451,7 +412,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -496,16 +457,13 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-			background: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-			height: 36px !important;
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+			height: 34px !important;
 			box-sizing: border-box !important;
 
 			.ant-select-selection-item {
-				color: var(--query-builder-v2-color, var(--l1-foreground));
+				color: var(--l1-foreground);
 			}
 		}
 

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -92,11 +92,6 @@
 
 				.ant-select {
 					width: 100%;
-
-					.ant-select-selector {
-						min-height: 36px;
-					}
-
 					.ant-select-selection-search-input {
 						min-width: max-content !important;
 						max-width: 100% !important;
@@ -105,12 +100,9 @@
 
 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground));
+					border: 1.005px solid var(--l1-border);
+					background: var(--l1-background);
+					color: var(--l1-foreground);
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
@@ -131,7 +123,6 @@
 					.input {
 						flex: initial;
 						width: 100px !important;
-						min-height: 36px;
 					}
 				}
 			}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}

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

@@ -8,9 +8,9 @@
 
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 25px;
+		line-height: 27px;
 		&::placeholder {
-			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,12 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-		background-color: var(
-			--query-builder-v2-background-color,
-			var(--l2-background)
-		) !important;
-		color: var(--query-builder-v2-color, var(--l2-foreground));
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -36,49 +33,36 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
-}
 
-.qb-select-popover.ant-select-dropdown {
-	border-radius: 4px;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
+	.ant-select-dropdown {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
 
-	.ant-select-item {
-		color: var(--query-builder-v2-color, var(--l2-foreground));
-		font-family: 'Geist Mono';
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		.ant-select-item {
+			color: var(--l1-foreground);
+			font-family: 'Geist Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
 
-		&:not(:last-of-type) {
-			margin-bottom: 4px;
-		}
+			&:hover,
+			&.ant-select-item-option-active {
+				background: var(--l3-background) !important;
+			}
 
-		&:hover,
-		&.ant-select-item-option-active {
-			background: var(
-				--query-builder-v2-selected-background-color,
-				var(--l3-background)
-			) !important;
-		}
-
-		&.ant-select-item-option-selected {
-			background: var(
-				--query-builder-v2-selected-background-color,
-				var(--l3-background)
-			) !important;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			font-weight: 600;
+			&.ant-select-item-option-selected {
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l1-border);
+				font-weight: 600;
+			}
 		}
 	}
 }

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

@@ -142,7 +142,6 @@ export const MetricsSelect = memo(function MetricsSelect({
 			{signalSourceChangeEnabled && (
 				<Select
 					className="source-selector"
-					popupClassName="qb-select-popover"
 					placeholder="Source"
 					options={SOURCE_OPTIONS}
 					value={source}

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

@@ -1,23 +1,8 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-add-ons {
 	width: 100%;
 
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
 	.add-on-tab-title {
 		display: flex;
 		align-items: center;
@@ -44,33 +29,32 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l2-foreground);
 		}
 
 		> button {
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid
-					var(--query-builder-v2-border-color, var(--l2-border));
+				border-left: 1px solid var(--l1-border);
 			}
 
 			&::before {
-				background: var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--l1-border);
 			}
 
 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 
 				display: none;
 
 				&::before {
-					background: var(--query-builder-v2-border-color, var(--l2-border));
+					background: var(--l1-border);
 				}
 			}
 		}
@@ -81,7 +65,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--l1-border);
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -94,13 +78,10 @@
 	align-items: center;
 
 	.having-filter-select-container {
-		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		padding-right: 38px;
+		align-items: center;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -125,17 +106,15 @@
 				}
 
 				.cm-content {
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-					border-left-width: 0px;
-					border-right-width: 0px;
+					border-radius: 2px;
+					border: 1px solid var(--l1-border);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
-						border-color: var(--query-builder-v2-border-color, var(--l2-border));
+						border-color: var(--l1-border);
 					}
 				}
 
@@ -239,32 +218,17 @@
 				}
 
 				.cm-line {
-					min-height: 34px;
-					line-height: 32px !important;
+					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -273,11 +237,8 @@
 					}
 
 					.chip-decorator {
-						background: var(
-							--query-builder-v2-chip-decorator-background-color,
-							var(--l3-background)
-						) !important;
-						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+						background: var(--l3-background) !important;
+						color: var(--l1-foreground) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -285,38 +246,34 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(
-						--query-builder-v2-selection-background-color,
-						var(--l3-background)
-					) !important;
+					background: var(--l3-background) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
-
-				.cm-placeholder {
-					color: var(
-						--query-builder-v2-placeholder-color,
-						var(--l3-foreground)
-					) !important;
-				}
 			}
 		}
 
 		.close-btn {
-			position: absolute;
-			top: 0;
-			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			background: var(--query-builder-v2-background-color, var(--l2-background));
-			height: 100%;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			height: 38px;
 			width: 38px;
 
+			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -343,8 +300,20 @@
 			font-size: 12px !important;
 		}
 
-		input {
-			min-height: 36px;
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
 		}
 	}
 }

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

@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
+		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
+			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
 	},
 ];
 
@@ -99,7 +99,7 @@ const REDUCE_TO = {
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
+		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Group By"
 											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Having"
 											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Order By"
 											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<TooltipContent
 												label="Reduce to"
 												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
 											/>
 										}
 										placement="top"

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

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+				color: var(--l2-foreground) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,15 +51,14 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--query-builder-v2-border-color, var(--l2-border));
+							border-color: var(--l1-border);
 						}
 					}
 
@@ -75,7 +74,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -119,7 +118,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -128,10 +127,7 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(
-										--query-builder-v2-selection-background-color,
-										var(--l3-background)
-									) !important;
+									background: var(--l3-background) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -146,24 +142,15 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -172,11 +159,8 @@
 						}
 
 						.chip-decorator {
-							background: var(
-								--query-builder-v2-chip-decorator-background-color,
-								var(--l3-background)
-							) !important;
-							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -184,10 +168,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -220,11 +201,12 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-				background: var(--query-builder-v2-background-color, var(--l2-background));
-				height: 100%;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				height: 38px;
 				width: 38px;
 
+				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -235,13 +217,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
+				color: var(--l1-foreground);
 				opacity: 0.5;
 			}
 		}
@@ -256,10 +238,9 @@
 			.query-aggregation-interval-input-container {
 				.query-aggregation-interval-input {
 					input {
-						min-height: 36px;
 						max-width: 120px;
 						&::placeholder {
-							color: var(--query-builder-v2-color, var(--l2-foreground));
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -270,8 +251,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--query-builder-v2-border-color, var(--l2-border));
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		background-color: var(--l1-border);
+		border: 1px solid var(--l1-border);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

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

@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}

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

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

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

@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>

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

@@ -40,14 +40,11 @@ $max-recents-shown: 5;
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
+			background-color: var(--l1-background) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -86,16 +83,16 @@ $max-recents-shown: 5;
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--query-builder-v2-border-color, var(--l2-border));
+				border-color: var(--l1-border);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			outline: 1px solid var(--l1-border);
 		}
 
 		.cm-tooltip-autocomplete {
@@ -186,17 +183,11 @@ $max-recents-shown: 5;
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+					background-color: var(--l1-background) !important;
+					color: var(--l2-foreground) !important;
 
 					&:hover {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 					}
 
 					.cm-completionIcon {
@@ -214,10 +205,7 @@ $max-recents-shown: 5;
 					}
 
 					&[aria-selected='true'] {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -286,49 +274,25 @@ $max-recents-shown: 5;
 		}
 
 		.cm-line {
-			line-height: 36px !important;
+			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(
-				--query-builder-v2-selection-background-color,
-				var(--l3-background)
-			) !important;
+			background: var(--l3-background) !important;
 			opacity: 0.5 !important;
 		}
-
-		.cm-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
-		}
 	}
 
 	.cursor-position {

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

@@ -65,14 +65,6 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
-
-		// Meant to fix the query builder colors
-		--input-background: var(--l2-background);
-		--input-hover-background: var(--l2-background);
-		--input-focus-background: var(--l2-background);
-		--input-border-color: var(--l2-border);
-		--input-hover-border-color: var(--internal-ant-border-color-hover);
-		--input-focus-border-color: var(--internal-ant-border-color-hover);
 	}
 
 	&-aggregation-container {

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -109,24 +109,21 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<AuthZTooltip
+					<AuthZButton
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(accountId ?? ''),
 						]}
-						enabled={!!accountId}
+						authZEnabled={!!accountId}
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						loading={isSubmitting}
+						disabled={!isValid}
 					>
-						<Button
-							type="submit"
-							form={FORM_ID}
-							variant="solid"
-							color="primary"
-							loading={isSubmitting}
-							disabled={!isValid}
-						>
-							Create Key
-						</Button>
-					</AuthZTooltip>
+						Create Key
+					</AuthZButton>
 				</div>
 			</div>
 		</>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -84,20 +84,17 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
+			<AuthZButton
 				checks={[buildSADeletePermission(accountId ?? '')]}
-				enabled={!!accountId}
+				authZEnabled={!!accountId}
+				variant="solid"
+				color="destructive"
+				loading={isDeleting}
+				onClick={handleConfirm}
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isDeleting}
-					onClick={handleConfirm}
-				>
-					<Trash2 size={12} />
-					Delete
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Delete
+			</AuthZButton>
 		</div>
 	);
 

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -7,6 +7,7 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
@@ -158,38 +159,36 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<AuthZTooltip
+				<AuthZButton
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
-					enabled={!!accountId && !!keyItem?.id}
+					authZEnabled={!!accountId && !!keyItem?.id}
+					variant="link"
+					color="destructive"
+					onClick={onRevokeClick}
 				>
-					<Button variant="link" color="destructive" onClick={onRevokeClick}>
-						<Trash2 size={12} />
-						Revoke Key
-					</Button>
-				</AuthZTooltip>
+					<Trash2 size={12} />
+					Revoke Key
+				</AuthZButton>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
-					<AuthZTooltip
+					<AuthZButton
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
-						enabled={!!accountId && !!keyItem?.id}
+						authZEnabled={!!accountId && !!keyItem?.id}
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						loading={isSaving}
+						disabled={!isDirty}
 					>
-						<Button
-							type="submit"
-							form={FORM_ID}
-							variant="solid"
-							color="primary"
-							loading={isSaving}
-							disabled={!isDirty}
-						>
-							Save Changes
-						</Button>
-					</AuthZTooltip>
+						Save Changes
+					</AuthZButton>
 				</div>
 			</div>
 		</>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table, Tooltip } from 'antd';
+import { Pagination, Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import {
 	APIKeyCreatePermission,
+	APIKeyListPermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
@@ -24,10 +25,10 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
-	canUpdate?: boolean;
 	accountId?: string;
 	currentPage: number;
 	pageSize: number;
+	onPageChange: (page: number) => void;
 }
 
 interface BuildColumnsParams {
@@ -113,29 +114,26 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<AuthZTooltip
-						checks={[
-							buildAPIKeyDeletePermission(record.id),
-							buildSADetachPermission(accountId),
-						]}
-						enabled={!isDisabled && !!accountId}
-					>
-						<Tooltip title={tooltipTitle}>
-							<Button
-								variant="ghost"
-								size="sm"
-								color="destructive"
-								disabled={isDisabled}
-								onClick={(e): void => {
-									e.stopPropagation();
-									onRevokeClick(record.id);
-								}}
-								className="keys-tab__revoke-btn"
-							>
-								<X size={12} />
-							</Button>
-						</Tooltip>
-					</AuthZTooltip>
+					<Tooltip title={tooltipTitle}>
+						<AuthZButton
+							checks={[
+								buildAPIKeyDeletePermission(record.id),
+								buildSADetachPermission(accountId),
+							]}
+							authZEnabled={!isDisabled && !!accountId}
+							variant="ghost"
+							size="sm"
+							color="destructive"
+							disabled={isDisabled}
+							onClick={(e): void => {
+								e.stopPropagation();
+								onRevokeClick(record.id);
+							}}
+							className="keys-tab__revoke-btn"
+						>
+							<X size={12} />
+						</AuthZButton>
+					</Tooltip>
 				);
 			},
 		},
@@ -149,6 +147,7 @@ function KeysTab({
 	accountId = '',
 	currentPage,
 	pageSize,
+	onPageChange,
 }: KeysTabProps): JSX.Element {
 	const [, setIsAddKeyOpen] = useQueryState(
 		'add-key',
@@ -212,21 +211,18 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<AuthZTooltip
+				<AuthZButton
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
-					enabled={!isDisabled && !!accountId}
+					authZEnabled={!isDisabled && !!accountId}
+					variant="link"
+					color="primary"
+					onClick={async (): Promise<void> => {
+						await setIsAddKeyOpen(true);
+					}}
+					disabled={isDisabled}
 				>
-					<Button
-						variant="link"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsAddKeyOpen(true);
-						}}
-						disabled={isDisabled}
-					>
-						+ Add your first key
-					</Button>
-				</AuthZTooltip>
+					+ Add your first key
+				</AuthZButton>
 			</div>
 		);
 	}
@@ -278,6 +274,24 @@ function KeysTab({
 				})}
 			/>
 
+			<Pagination
+				current={currentPage}
+				pageSize={pageSize}
+				total={keys.length}
+				showTotal={(total: number, range: number[]): JSX.Element => (
+					<>
+						<span className="sa-drawer__pagination-range">
+							{range[0]} &#8212; {range[1]}
+						</span>
+						<span className="sa-drawer__pagination-total"> of {total}</span>
+					</>
+				)}
+				showSizeChanger={false}
+				hideOnSinglePage
+				onChange={onPageChange}
+				className="sa-drawer__keys-pagination"
+			/>
+
 			<EditKeyModal keyItem={editKey} />
 
 			<RevokeKeyModal />
@@ -285,4 +299,7 @@ function KeysTab({
 	);
 }
 
-export default KeysTab;
+export default withAuthZContent(KeysTab, {
+	checks: [APIKeyListPermission],
+	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
+});

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -6,15 +6,20 @@ import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import {
+	buildSAReadPermission,
+	buildSAUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 
 import SaveErrorItem from './SaveErrorItem';
 import type { SaveError } from './utils';
+import { Skeleton } from 'antd';
 
 interface OverviewTabProps {
 	account: ServiceAccountRow;
@@ -23,7 +28,6 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
-	canUpdate?: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
@@ -39,7 +43,6 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
-	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -86,23 +89,22 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled || !canUpdate ? (
-					<AuthZTooltip
-						checks={[buildSAUpdatePermission(account.id)]}
-						enabled={!isDisabled && !canUpdate}
-					>
+				{isDisabled ? (
+					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
 						<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 							<span className="sa-drawer__input-text">{localName || '—'}</span>
 							<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 						</div>
 					</AuthZTooltip>
 				) : (
-					<Input
-						id="sa-name"
-						value={localName}
-						onChange={(e): void => onNameChange(e.target.value)}
-						placeholder="Enter name"
-					/>
+					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+						<Input
+							id="sa-name"
+							value={localName}
+							onChange={(e): void => onNameChange(e.target.value)}
+							placeholder="Enter name"
+						/>
+					</AuthZTooltip>
 				)}
 			</div>
 
@@ -220,4 +222,9 @@ function OverviewTab({
 	);
 }
 
-export default OverviewTab;
+export default withAuthZContent(OverviewTab, {
+	checks: (props): ReturnType<typeof buildSAReadPermission>[] => [
+		buildSAReadPermission(props.account.id),
+	],
+	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
+});

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -45,23 +45,20 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
+			<AuthZButton
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
-				enabled={!!accountId && !!keyId}
+				authZEnabled={!!accountId && !!keyId}
+				variant="solid"
+				color="destructive"
+				loading={isRevoking}
+				onClick={onConfirm}
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isRevoking}
-					onClick={onConfirm}
-				>
-					<Trash2 size={12} />
-					Revoke Key
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Revoke Key
+			</AuthZButton>
 		</>
 	);
 }
@@ -111,7 +108,7 @@ function RevokeKeyModal(): JSX.Element {
 	}
 
 	function handleCancel(): void {
-		setRevokeKeyId(null);
+		void setRevokeKeyId(null);
 	}
 
 	return (

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,11 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Pagination, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountsQueryKey,
@@ -16,7 +22,6 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -28,15 +33,13 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
-	APIKeyListPermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
-	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -47,7 +50,6 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -70,14 +72,12 @@ function toSaveApiError(err: unknown): APIError {
 	);
 }
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
 }: ServiceAccountDrawerProps): JSX.Element {
 	const [selectedAccountId, setSelectedAccountId] = useQueryState(
 		SA_QUERY_PARAMS.ACCOUNT,
 	);
-	const open = !!selectedAccountId;
 	const [activeTab, setActiveTab] = useQueryState(
 		SA_QUERY_PARAMS.TAB,
 		parseAsStringEnum<ServiceAccountDrawerTab>(
@@ -100,28 +100,14 @@ function ServiceAccountDrawer({
 		SA_QUERY_PARAMS.DELETE_SA,
 		parseAsBoolean.withDefault(false),
 	);
+
 	const [localName, setLocalName] = useState('');
 	const [localRoles, setLocalRoles] = useState<string[]>([]);
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
 	const queryClient = useQueryClient();
-
-	const { permissions: drawerPermissions, isLoading: isAuthZLoading } = useAuthZ(
-		selectedAccountId
-			? [
-					buildSAReadPermission(selectedAccountId),
-					buildSAUpdatePermission(selectedAccountId),
-					buildSADeletePermission(selectedAccountId),
-					APIKeyListPermission,
-				]
-			: [],
-		{ enabled: !!selectedAccountId },
-	);
-
-	const canRead =
-		drawerPermissions?.[buildSAReadPermission(selectedAccountId ?? '')]
-			?.isGranted ?? false;
+	const open = !!selectedAccountId;
 
 	const {
 		data: accountData,
@@ -131,7 +117,7 @@ function ServiceAccountDrawer({
 		refetch: refetchAccount,
 	} = useGetServiceAccount(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: canRead && !!selectedAccountId } },
+		{ query: { enabled: !!selectedAccountId } },
 	);
 
 	const account = useMemo(
@@ -145,7 +131,7 @@ function ServiceAccountDrawer({
 		isLoading: isRolesLoading,
 		applyDiff,
 	} = useServiceAccountRoleManager(selectedAccountId ?? '', {
-		enabled: canRead && !!selectedAccountId,
+		enabled: !!selectedAccountId,
 	});
 
 	const roleSessionRef = useRef<string | null>(null);
@@ -194,16 +180,9 @@ function ServiceAccountDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
-	const canListKeys =
-		drawerPermissions?.[APIKeyListPermission]?.isGranted ?? false;
-
-	const canUpdate =
-		drawerPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
-			?.isGranted ?? true;
-
 	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId && canListKeys } },
+		{ query: { enabled: !!selectedAccountId } },
 	);
 	const keys = keysData?.data ?? [];
 
@@ -217,7 +196,6 @@ function ServiceAccountDrawer({
 		}
 	}, [keysLoading, keys.length, keysPage, setKeysPage]);
 
-	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -375,23 +353,70 @@ function ServiceAccountDrawer({
 	]);
 
 	const handleClose = useCallback((): void => {
-		void setIsDeleteOpen(null);
-		void setIsAddKeyOpen(null);
-		void setSelectedAccountId(null);
 		void setActiveTab(null);
 		void setKeysPage(null);
 		void setEditKeyId(null);
-		setSaveErrors([]);
+		void setIsAddKeyOpen(null);
+		void setIsDeleteOpen(null);
+		void setSelectedAccountId(null);
 	}, [
-		setSelectedAccountId,
 		setActiveTab,
 		setKeysPage,
 		setEditKeyId,
 		setIsAddKeyOpen,
 		setIsDeleteOpen,
+		setSelectedAccountId,
 	]);
 
-	const drawerContent = (
+	const footer = useMemo(
+		() =>
+			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
+				<div className="sa-drawer__footer">
+					<AuthZButton
+						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
+						authZEnabled={!!selectedAccountId}
+						variant="link"
+						color="destructive"
+						onClick={(): void => {
+							void setIsDeleteOpen(true);
+						}}
+					>
+						<Trash2 size={12} />
+						Delete Service Account
+					</AuthZButton>
+					<div className="sa-drawer__footer-right">
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
+							<X size={14} />
+							Cancel
+						</Button>
+						<AuthZButton
+							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
+							authZEnabled={!!selectedAccountId}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+							onClick={handleSave}
+						>
+							Save Changes
+						</AuthZButton>
+					</div>
+				</div>
+			) : null,
+		[
+			activeTab,
+			isDeleted,
+			open,
+			selectedAccountId,
+			isSaving,
+			isDirty,
+			handleClose,
+			handleSave,
+			setIsDeleteOpen,
+		],
+	);
+
+	const body = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
 				<ToggleGroupSimple
@@ -433,26 +458,23 @@ function ServiceAccountDrawer({
 					]}
 				/>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<AuthZTooltip
+					<AuthZButton
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
-						enabled={!isDeleted && !!selectedAccountId}
+						authZEnabled={!isDeleted && !!selectedAccountId}
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDeleted}
+						onClick={(): void => {
+							void setIsAddKeyOpen(true);
+						}}
 					>
-						<Button
-							variant="outlined"
-							size="sm"
-							color="secondary"
-							disabled={isDeleted}
-							onClick={(): void => {
-								void setIsAddKeyOpen(true);
-							}}
-						>
-							<Plus size={12} />
-							Add Key
-						</Button>
-					</AuthZTooltip>
+						<Plus size={12} />
+						Add Key
+					</AuthZButton>
 				)}
 			</div>
 
@@ -461,9 +483,7 @@ function ServiceAccountDrawer({
 					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
 				}`}
 			>
-				{(isAuthZLoading || isAccountLoading) && (
-					<Skeleton active paragraph={{ rows: 6 }} />
-				)}
+				{isAccountLoading && <Skeleton active paragraph={{ rows: 6 }} />}
 				{isAccountError && (
 					<ErrorInPlace
 						error={toAPIError(
@@ -472,141 +492,73 @@ function ServiceAccountDrawer({
 						)}
 					/>
 				)}
-				{!isAuthZLoading &&
-					!isAccountLoading &&
-					!isAccountError &&
-					selectedAccountId && (
-						<>
-							{activeTab === ServiceAccountDrawerTab.Overview &&
-								(canRead && account ? (
-									<OverviewTab
-										account={account}
-										localName={localName}
-										onNameChange={handleNameChange}
-										localRoles={localRoles}
-										onRolesChange={(roles): void => {
-											setLocalRoles(roles);
-											clearRoleErrors();
-										}}
-										isDisabled={isDeleted}
-										canUpdate={canUpdate}
-										availableRoles={availableRoles}
-										rolesLoading={rolesLoading}
-										rolesError={rolesError}
-										rolesErrorObj={rolesErrorObj}
-										onRefetchRoles={refetchRoles}
-										saveErrors={saveErrors}
-									/>
-								) : (
-									<PermissionDeniedCallout permissionName="serviceaccount:read" />
-								))}
-							{activeTab === ServiceAccountDrawerTab.Keys &&
-								(canListKeys ? (
-									<KeysTab
-										keys={keys}
-										isLoading={keysLoading}
-										isDisabled={isDeleted}
-										canUpdate={canUpdate}
-										accountId={selectedAccountId}
-										currentPage={keysPage}
-										pageSize={PAGE_SIZE}
-									/>
-								) : (
-									<PermissionDeniedCallout permissionName="factor-api-key:list" />
-								))}
-						</>
-					)}
+				{!isAccountLoading && !isAccountError && (
+					<>
+						{activeTab === ServiceAccountDrawerTab.Overview &&
+							(account ? (
+								<OverviewTab
+									account={account}
+									localName={localName}
+									onNameChange={handleNameChange}
+									localRoles={localRoles}
+									onRolesChange={(roles): void => {
+										setLocalRoles(roles);
+										clearRoleErrors();
+									}}
+									isDisabled={isDeleted}
+									availableRoles={availableRoles}
+									rolesLoading={rolesLoading}
+									rolesError={rolesError}
+									rolesErrorObj={rolesErrorObj}
+									onRefetchRoles={refetchRoles}
+									saveErrors={saveErrors}
+								/>
+							) : (
+								<Skeleton active />
+							))}
+						{activeTab === ServiceAccountDrawerTab.Keys && (
+							<KeysTab
+								keys={keys}
+								isLoading={keysLoading}
+								isDisabled={isDeleted}
+								accountId={selectedAccountId ?? ''}
+								currentPage={keysPage}
+								pageSize={PAGE_SIZE}
+								onPageChange={(page): void => {
+									void setKeysPage(page);
+								}}
+							/>
+						)}
+					</>
+				)}
 			</div>
 		</div>
 	);
 
-	const footer = (
-		<div className="sa-drawer__footer">
-			{activeTab === ServiceAccountDrawerTab.Keys ? (
-				<Pagination
-					current={keysPage}
-					pageSize={PAGE_SIZE}
-					total={keys.length}
-					showTotal={(total: number, range: number[]): JSX.Element => (
-						<>
-							<span className="sa-drawer__pagination-range">
-								{range[0]} &#8212; {range[1]}
-							</span>
-							<span className="sa-drawer__pagination-total"> of {total}</span>
-						</>
-					)}
-					showSizeChanger={false}
-					hideOnSinglePage
-					onChange={(page): void => {
-						void setKeysPage(page);
-					}}
-					className="sa-drawer__keys-pagination"
-				/>
-			) : (
+	return (
+		<DrawerWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			direction="right"
+			showCloseButton
+			showOverlay={false}
+			title="Service Account Details"
+			className="sa-drawer"
+			width="wide"
+			footer={footer}
+		>
+			{open && (
 				<>
-					{!isDeleted && (
-						<AuthZTooltip
-							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
-							enabled={!!selectedAccountId}
-						>
-							<Button
-								variant="link"
-								color="destructive"
-								onClick={(): void => {
-									void setIsDeleteOpen(true);
-								}}
-							>
-								<Trash2 size={12} />
-								Delete Service Account
-							</Button>
-						</AuthZTooltip>
-					)}
-					{!isDeleted && (
-						<div className="sa-drawer__footer-right">
-							<Button variant="outlined" color="secondary" onClick={handleClose}>
-								<X size={14} />
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								loading={isSaving}
-								disabled={!isDirty}
-								onClick={handleSave}
-							>
-								Save Changes
-							</Button>
-						</div>
-					)}
+					{body}
+					<DeleteAccountModal />
+					<AddKeyModal />
 				</>
 			)}
-		</div>
-	);
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				showCloseButton
-				showOverlay={false}
-				title="Service Account Details"
-				className="sa-drawer"
-				width="wide"
-				footer={footer}
-			>
-				{drawerContent}
-			</DrawerWrapper>
-
-			<DeleteAccountModal />
-
-			<AddKeyModal />
-		</>
+		</DrawerWrapper>
 	);
 }
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,4 +1,5 @@
 import { toast } from '@signozhq/ui/sonner';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import {
@@ -59,6 +60,7 @@ describe('AddKeyModal', () => {
 			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json(createdKeyResponse)),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -61,6 +62,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -35,7 +36,7 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 	{
 		id: 'key-2',
 		name: 'Staging Key',
-		expiresAt: 1924905600, // 2030-12-31
+		expiresAt: 1924948800, // 2030-12-31 12:00 UTC (noon to avoid timezone issues)
 		lastObservedAt: '2026-03-10T10:00:00Z',
 		serviceAccountId: 'sa-1',
 	},
@@ -47,6 +48,7 @@ const defaultProps = {
 	isDisabled: false,
 	currentPage: 1,
 	pageSize: 10,
+	onPageChange: jest.fn(),
 };
 
 function renderKeysTab(
@@ -67,6 +69,7 @@ describe('KeysTab', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 
@@ -74,9 +77,12 @@ describe('KeysTab', () => {
 		server.resetHandlers();
 	});
 
-	it('renders loading state', () => {
+	it('renders loading state', async () => {
 		renderKeysTab({ isLoading: true });
-		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		// Wait for authz to complete, then check for skeleton
+		await waitFor(() => {
+			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		});
 	});
 
 	it('renders empty state when no keys and clicking add sets add-key param', async () => {
@@ -91,9 +97,9 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		expect(
-			screen.getByText(/No keys. Start by creating one./i),
-		).toBeInTheDocument();
+		await expect(
+			screen.findByText(/No keys. Start by creating one./i),
+		).resolves.toBeInTheDocument();
 		const addBtn = screen.getByRole('button', { name: /\+ Add your first key/i });
 		await user.click(addBtn);
 		expect(onUrlUpdate).toHaveBeenCalledWith(
@@ -103,10 +109,12 @@ describe('KeysTab', () => {
 		);
 	});
 
-	it('renders table with keys', () => {
+	it('renders table with keys', async () => {
 		renderKeysTab();
 
-		expect(screen.getByText('Production Key')).toBeInTheDocument();
+		await expect(
+			screen.findByText('Production Key'),
+		).resolves.toBeInTheDocument();
 		expect(screen.getByText('Staging Key')).toBeInTheDocument();
 		expect(screen.getByText('Never')).toBeInTheDocument();
 		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument();
@@ -122,7 +130,7 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		const row = screen.getByText('Production Key').closest('tr');
+		const row = (await screen.findByText('Production Key')).closest('tr');
 		if (!row) {
 			throw new Error('Row not found');
 		}
@@ -146,6 +154,8 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -163,7 +173,8 @@ describe('KeysTab', () => {
 
 		renderKeysTab();
 
-		// Seed the keys cache so RevokeKeyModal can read the key name
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -177,9 +188,11 @@ describe('KeysTab', () => {
 		});
 	});
 
-	it('disables actions when isDisabled is true', () => {
+	it('disables actions when isDisabled is true', async () => {
 		renderKeysTab({ isDisabled: true });
 
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -32,30 +31,6 @@ const activeAccountResponse = {
 	updatedAt: '2026-01-02T00:00:00Z',
 };
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
 function renderDrawer(
 	searchParams: Record<string, string> = { account: 'sa-1' },
 ): ReturnType<typeof render> {
@@ -118,7 +93,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		renderDrawer();
 
 		await waitFor(() => {
-			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
+			expect(screen.getByText(/read:serviceaccount/)).toBeInTheDocument();
 		});
 	});
 
@@ -140,7 +115,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
 
 		await waitFor(() => {
-			expect(screen.getByText(/factor-api-key:list/)).toBeInTheDocument();
+			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();
 		});
 	});
 

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

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -7,30 +6,6 @@ import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
 const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';

frontend/src/components/TagBadge/TagBadge.tsx

@@ -1,34 +0,0 @@
-import { type MouseEvent, type ReactNode } from 'react';
-import { Badge } from '@signozhq/ui/badge';
-
-interface TagBadgeProps {
-	children: ReactNode;
-	// Show a remove button (editable contexts: create modal, settings drawer).
-	closable?: boolean;
-	onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
-	className?: string;
-}
-
-// The single sienna tag chip used everywhere dashboards render tags — list rows,
-// the details header, and the tag editors. Kept as one component so the tag
-// styling stays identical across all of them.
-function TagBadge({
-	children,
-	closable,
-	onClose,
-	className,
-}: TagBadgeProps): JSX.Element {
-	return (
-		<Badge
-			color="sienna"
-			variant="outline"
-			className={className}
-			closable={closable}
-			onClose={onClose}
-		>
-			{children}
-		</Badge>
-	);
-}
-
-export default TagBadge;

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

@@ -15,28 +15,59 @@
 	border: 1px solid var(--l2-border);
 }
 
-// Sienna chip via the @signozhq Badge; this only constrains its width.
+// 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;
 }
 
-// The tag label is a bare, chrome-less button inside the Badge (double-click to
-// edit); strip its Button styling and let it ellipsize.
 .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: currentColor;
-	--button-variant-ghost-hover-color: currentColor;
+	--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;

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -2,9 +2,9 @@ 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 TagBadge from '../TagBadge/TagBadge';
 import { parseKeyValueTag } from './utils';
 
 import styles from './TagKeyValueInput.module.scss';
@@ -120,23 +120,27 @@ function TagKeyValueInput({
 							onBlur={commitEdit}
 						/>
 					) : (
-						<TagBadge
-							key={tag}
-							className={styles.tag}
-							closable
-							onClose={(): void => removeTag(tag)}
-						>
+						<div key={tag} className={styles.tag} data-testid={`${testId}-chip`}>
 							<Button
 								variant="ghost"
 								color="secondary"
 								className={styles.tagLabel}
 								title="Double-click to edit"
-								testId={`${testId}-chip`}
 								onDoubleClick={(): void => startEdit(index)}
 							>
 								{tag}
 							</Button>
-						</TagBadge>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								className={styles.remove}
+								aria-label={`Remove ${tag}`}
+								onClick={(): void => removeTag(tag)}
+							>
+								<X size={12} />
+							</Button>
+						</div>
 					),
 				)}
 				<Input

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,6 +22,7 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -30,6 +31,33 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
+const AuthZDevModal = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
+				default: m.AuthZDevModal,
+			})),
+		)
+	: null;
+
+const AuthZDevFloatingIndicator = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
+				(m) => ({
+					default: m.AuthZDevFloatingIndicator,
+				}),
+			),
+		)
+	: null;
+
+const openAuthZDevModal = IS_DEV
+	? (): void => {
+			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
+				m.openAuthZDevModal();
+				return m;
+			});
+		}
+	: undefined;
+
 type CmdAction = {
 	id: string;
 	name: string;
@@ -110,6 +138,7 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
+		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -146,37 +175,57 @@ export function CmdKPalette({
 	};
 
 	return (
-		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
-			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-			<CommandList className="cmdk-list-scroll">
-				<CommandEmpty>No results</CommandEmpty>
-				{grouped.map(([section, items]) => (
-					<CommandGroup
-						key={section}
-						heading={section}
-						className="cmdk-section-heading"
-					>
-						{items.map((it) => (
-							<CommandItem
-								key={it.id}
-								onSelect={(): void => handleInvoke(it)}
-								value={it.name}
-								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
-							>
-								<span
-									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
+		<>
+			<CommandDialog
+				open={open}
+				onOpenChange={setOpen}
+				position="top"
+				offset={110}
+			>
+				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+				<CommandList className="cmdk-list-scroll">
+					<CommandEmpty>No results</CommandEmpty>
+					{grouped.map(([section, items]) => (
+						<CommandGroup
+							key={section}
+							heading={section}
+							className="cmdk-section-heading"
+						>
+							{items.map((it) => (
+								<CommandItem
+									key={it.id}
+									onSelect={(): void => handleInvoke(it)}
+									value={it.name}
+									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
 								>
-									{it.icon}
-								</span>
-								{it.name}
-								{it.shortcut && it.shortcut.length > 0 && (
-									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-								)}
-							</CommandItem>
-						))}
-					</CommandGroup>
-				))}
-			</CommandList>
-		</CommandDialog>
+									<span
+										className={cx(
+											'cmd-item-icon',
+											it.id === 'ai-assistant' && 'noz-icon',
+										)}
+									>
+										{it.icon}
+									</span>
+									{it.name}
+									{it.shortcut && it.shortcut.length > 0 && (
+										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					))}
+				</CommandList>
+			</CommandDialog>
+			{IS_DEV && AuthZDevModal && (
+				<React.Suspense fallback={null}>
+					<AuthZDevModal />
+				</React.Suspense>
+			)}
+			{IS_DEV && AuthZDevFloatingIndicator && (
+				<React.Suspense fallback={null}>
+					<AuthZDevFloatingIndicator />
+				</React.Suspense>
+			)}
+		</>
 	);
 }

frontend/src/constants/apDex.ts

@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';

frontend/src/constants/shortcutActions.tsx

@@ -43,10 +43,17 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
+	/**
+	 * Provided only in development mode. Opens the AuthZ DevTools modal
+	 * for testing permission overrides.
+	 */
+	authzDevTools?: {
+		open: () => void;
+	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant } = deps;
+	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -302,5 +309,17 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
+	if (authzDevTools) {
+		actions.push({
+			id: 'authz-devtools',
+			name: 'AuthZ DevTools',
+			keywords: 'authz permissions rbac debug devtools override testing',
+			section: 'Dev',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: authzDevTools.open,
+		});
+	}
+
 	return actions;
 }

frontend/src/container/AllAlertChannels/index.tsx

@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/setup-alerts-notification/"
+						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					<Tooltip

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -29,7 +29,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
+				url =
+					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =

frontend/src/container/CreateAlertRule/constants.ts

@@ -31,7 +31,8 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
+		selection:
+			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -1,4 +1,3 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { PrecisionOption } from 'components/Graph/types';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
@@ -28,7 +27,7 @@ interface PieArcProps {
 	fill: string;
 	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
 	onLeave: () => void;
-	onClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
+	onClick?: (slice: PieSlice) => void;
 }
 
 /**
@@ -73,7 +72,7 @@ export default function PieArc({
 		<g
 			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
 			onMouseLeave={onLeave}
-			onClick={(event): void => onClick?.(slice, event)}
+			onClick={(): void => onClick?.(slice)}
 		>
 			<path d={arcPath} fill={fill} />
 			{shouldShowLabel && (

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -80,7 +80,6 @@ describe('PieArc', () => {
 		expect(onLeave).toHaveBeenCalledTimes(1);
 
 		fireEvent.click(g);
-		// onClick now also receives the DOM event (for drill-down popover positioning).
-		expect(onClick).toHaveBeenCalledWith(SLICE, expect.anything());
+		expect(onClick).toHaveBeenCalledWith(SLICE);
 	});
 });

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,4 +1,3 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import {
@@ -80,10 +79,6 @@ export interface PieSlice {
 	label: string;
 	value: number;
 	color: string;
-	/** Source query of the slice's value column — the drill-down target (present for V2 panels). */
-	queryName?: string;
-	/** Group-by key→value of the slice's source row, used to build drill-down filters. */
-	labels?: Record<string, string>;
 }
 
 /**
@@ -104,7 +99,7 @@ export interface PieChartProps {
 	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
 	 */
 	id?: string;
-	/** Fired when a slice's arc is clicked; carries the DOM event for popover positioning. */
-	onSliceClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
+	/** Fired when a slice (or its legend entry) is clicked. */
+	onSliceClick?: (slice: PieSlice) => void;
 	'data-testid'?: string;
 }

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

@@ -3,6 +3,7 @@ import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
+import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -10,7 +11,6 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
-import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,6 +44,7 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
+	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -135,9 +136,11 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		toast.success('The updated graphs & legends are saved');
+		notifications.success({
+			message: 'The updated graphs & legends are saved',
+		});
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">

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

@@ -5,7 +5,7 @@ import { render, screen } from 'tests/test-utils';
 import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockToastSuccess = jest.fn();
+const mockNotificationsSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,11 +46,12 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
-	},
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): { notifications: { success: jest.Mock } } => ({
+		notifications: {
+			success: mockNotificationsSuccess,
+		},
+	}),
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -159,7 +160,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -171,9 +172,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockToastSuccess).toHaveBeenCalledWith(
-			'The updated graphs & legends are saved',
-		);
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'The updated graphs & legends are saved',
+		});
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -2,17 +2,9 @@
 	position: relative;
 	display: flex;
 	width: 100%;
-	height: auto;
+	height: 100%;
 	flex-direction: column;
 
-	// Stacked children (the FullView / standalone graph-manager) sit below the chart
-	// in the same container; size the chart region to its content so they aren't
-	// pushed out. Only this case opts out of filling the height — the dashboard grid,
-	// alert preview, and other charts keep 100% so they fill their container.
-	&--with-layout-children {
-		height: auto;
-	}
-
 	&--legend-right {
 		flex-direction: row;
 	}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -63,7 +63,6 @@ export default function ChartLayout({
 				className={cx('chart-layout', {
 					'chart-layout--legend-right':
 						legendConfig.position === LegendPosition.RIGHT,
-					'chart-layout--with-layout-children': !!layoutChildren,
 				})}
 			>
 				<div className="chart-layout__content">

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -717,13 +717,13 @@ function ExplorerOptions({
 
 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const getQueryName = (query: Query): string => {

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -53,26 +53,6 @@
 }
 
 .alert-query-section-container {
-	--query-builder-v2-color: var(--l2-foreground);
-	--query-builder-v2-background-color: var(--l3-background);
-	--query-builder-v2-border-color: var(--l3-border);
-	--query-builder-v2-selection-background-color: var(--l2-background);
-	--query-builder-v2-chip-decorator-background-color: var(--l2-background);
-	--query-builder-v2-placeholder-color: var(--l3-foreground);
-	--query-builder-v2-selected-background-color: var(--l3-foreground);
-	--query-search-background-color: var(--l3-background);
-	--query-search-background-color-selection: var(--l3-background);
-	--input-with-label-border-color: var(--l3-border);
-	--input-with-label-background-color: var(--l3-background);
-	--input-with-label-color: var(--l2-foreground);
-	--query-builder-v2-toggle-group-background-color: var(--l3-background);
-	--query-builder-v2-toggle-group-border-color: var(--l3-border);
-	--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
-	--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
-	--input-height: 36px;
-	--input-hover-background: var(--l3-background);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-
 	.ant-card-body {
 		padding: 0px;
 

frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss

@@ -3,30 +3,6 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 
-	--query-builder-v2-color: var(--l2-foreground);
-	--query-builder-v2-background-color: var(--l3-background);
-	--query-builder-v2-border-color: var(--l3-border);
-	--query-builder-v2-selection-background-color: var(--l2-background);
-	--query-builder-v2-chip-decorator-background-color: var(--l2-background);
-	--query-builder-v2-placeholder-color: var(--l3-foreground);
-	--query-builder-v2-selected-background-color: var(--l3-foreground);
-	--query-search-background-color: var(--l3-background);
-	--query-search-background-color-selection: var(--l3-background);
-	--input-with-label-border-color: var(--l3-border);
-	--input-with-label-background-color: var(--l3-background);
-	--input-with-label-color: var(--l2-foreground);
-	--query-builder-v2-toggle-group-background-color: var(--l3-background);
-	--query-builder-v2-toggle-group-border-color: var(--l3-border);
-	--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
-	--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
-	--input-height: 36px;
-	--input-hover-background: var(--l3-background);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-	--input-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-
 	.full-view-header-container {
 		display: flex;
 		flex-direction: column;

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -201,7 +201,7 @@ export default function SavedViews({
 								});
 
 								window.open(
-									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+									'https://signoz.io/docs/product-features/saved-view/',
 									'_blank',
 									'noopener noreferrer',
 								);

frontend/src/container/Home/constants.ts

@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {
 
 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
+	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };
 

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
+								href="https://signoz.io/docs/userguide/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
+					'https://signoz.io/docs/userguide/hostmetrics/',
 				);
 			});
 		});

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss

@@ -66,6 +66,20 @@
 		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
 	}
 
+	:global(.ant-collapse-header) {
+		border-bottom: 1px solid var(--l1-border);
+		padding: 12px 8px;
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0 !important;
+		padding-block: 0 !important;
+
+		:global(.quick-filters .checkbox-filter) {
+			padding-left: 18px;
+		}
+	}
+
 	:global(.quick-filters) {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -97,6 +111,22 @@
 	justify-content: space-between;
 }
 
+.quickFiltersCategoryLabel {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.quickFiltersCategoryLabelIcon {
+	margin-right: 8px;
+}
+
+.quickFiltersCategoryLabelContainer {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
 .listContainer {
 	flex: 1;
 	min-width: 0;
@@ -130,106 +160,3 @@
 .listContainerFiltersVisible {
 	max-width: calc(100% - 280px);
 }
-
-.categorySelectorSection {
-	padding: var(--spacing-4);
-}
-
-.sectionHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	margin-bottom: var(--spacing-4);
-
-	&[data-type='filter'] {
-		padding: 0 var(--spacing-4);
-	}
-}
-
-.sectionLabel {
-	font-size: var(--periscope-font-size-small);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--l3-foreground);
-	white-space: nowrap;
-}
-
-.sectionLine {
-	flex: 1;
-	height: 1px;
-	background: var(--l1-border);
-}
-
-.categoryCard {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: var(--spacing-3);
-	padding: var(--spacing-2);
-}
-
-.categoryList {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-}
-
-.categoryItem {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-	padding: var(--spacing-3) var(--spacing-4);
-	border: none;
-	border-radius: var(--spacing-2);
-	background: transparent;
-	cursor: pointer;
-	width: 100%;
-	text-align: left;
-	transition:
-		background-color 0.2s ease,
-		color 0.2s ease;
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-base);
-	--typography-color: var(--l1-foreground);
-
-	&:hover:not(.categoryItemSelected) {
-		background: var(--l2-background-hover);
-	}
-
-	svg {
-		color: var(--l3-foreground);
-		flex-shrink: 0;
-		transition: color 0.2s ease;
-	}
-
-	&.categoryItemSelected {
-		background: var(--accent-primary);
-		color: var(--l1-background);
-		font-weight: 600;
-
-		&:hover {
-			background: var(--accent-primary-hover, var(--accent-primary));
-		}
-
-		svg {
-			color: var(--l1-foreground);
-		}
-	}
-}
-
-.quickFiltersSection {
-	flex: 1;
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, Tooltip } from 'antd';
+import { Button, CollapseProps } from 'antd';
+import { Collapse, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
@@ -112,74 +113,192 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		});
 	};
 
-	const categories = useMemo(
-		() => [
-			{
-				key: K8sCategories.PODS,
-				label: 'Pods',
-				icon: <Container size={14} />,
-				config: GetPodsQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.NODES,
-				label: 'Nodes',
-				icon: <Workflow size={14} />,
-				config: GetNodesQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.NAMESPACES,
-				label: 'Namespaces',
-				icon: <FilePenLine size={14} />,
-				config: GetNamespaceQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.CLUSTERS,
-				label: 'Clusters',
-				icon: <Boxes size={14} />,
-				config: GetClustersQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.DEPLOYMENTS,
-				label: 'Deployments',
-				icon: <Computer size={14} />,
-				config: GetDeploymentsQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.JOBS,
-				label: 'Jobs',
-				icon: <Bolt size={14} />,
-				config: GetJobsQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.DAEMONSETS,
-				label: 'DaemonSets',
-				icon: <Group size={14} />,
-				config: GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.STATEFULSETS,
-				label: 'StatefulSets',
-				icon: <ArrowUpDown size={14} />,
-				config: GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled),
-			},
-			{
-				key: K8sCategories.VOLUMES,
-				label: 'Volumes',
-				icon: <HardDrive size={14} />,
-				config: GetVolumesQuickFiltersConfig(dotMetricsEnabled),
-			},
-		],
-		[dotMetricsEnabled],
+	const renderCategoryLabel = (
+		icon: JSX.Element,
+		label: string,
+	): JSX.Element => (
+		<div className={styles.quickFiltersCategoryLabel}>
+			<div className={styles.quickFiltersCategoryLabelContainer}>
+				{icon}
+				<Typography.Text>{label}</Typography.Text>
+			</div>
+		</div>
 	);
 
-	const selectedCategoryConfig = useMemo(
-		() => categories.find((cat) => cat.key === selectedCategory)?.config,
-		[categories, selectedCategory],
-	);
+	const items: CollapseProps['items'] = [
+		{
+			label: renderCategoryLabel(
+				<Container size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Pods',
+			),
+			key: K8sCategories.PODS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<Workflow size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Nodes',
+			),
+			key: K8sCategories.NODES,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<FilePenLine size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Namespaces',
+			),
+			key: K8sCategories.NAMESPACES,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<Boxes size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Clusters',
+			),
+			key: K8sCategories.CLUSTERS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<Computer size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Deployments',
+			),
+			key: K8sCategories.DEPLOYMENTS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<Bolt size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Jobs',
+			),
+			key: K8sCategories.JOBS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<Group size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'DaemonSets',
+			),
+			key: K8sCategories.DAEMONSETS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<ArrowUpDown size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'StatefulSets',
+			),
+			key: K8sCategories.STATEFULSETS,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		{
+			label: renderCategoryLabel(
+				<HardDrive size={14} className={styles.quickFiltersCategoryLabelIcon} />,
+				'Volumes',
+			),
+			key: K8sCategories.VOLUMES,
+			showArrow: false,
+			children: (
+				<QuickFilters
+					source={QuickFiltersSource.INFRA_MONITORING}
+					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
+					handleFilterVisibilityChange={handleFilterVisibilityChange}
+					onFilterChange={handleFilterChange}
+				/>
+			),
+		},
+		// TODO: Enable once we have implemented containers.
+		// {
+		// 	label: (
+		// 		<div className="k8s-quick-filters-category-label">
+		// 			<div className="k8s-quick-filters-category-label-container">
+		// 				<PackageOpen
+		// 					size={14}
+		// 					className="k8s-quick-filters-category-label-icon"
+		// 				/>
+		// 				<Typography.Text>Containers</Typography.Text>
+		// 			</div>
+		// 		</div>
+		// 	),
+		// 	key: K8sCategories.CONTAINERS,
+		// 	showArrow: false,
+		// 	children: (
+		// 		<QuickFilters
+		// 			source={QuickFiltersSource.INFRA_MONITORING}
+		// 			config={ContainersQuickFiltersConfig}
+		// 			handleFilterVisibilityChange={handleFilterVisibilityChange}
+		// 			onFilterChange={handleFilterChange}
+		// 		/>
+		// 	),
+		// },
+	];
 
-	const handleCategorySelect = (key: string): void => {
-		if (key !== selectedCategory) {
-			setSelectedCategory(key);
+	const handleCategoryChange = (key: string | string[]): void => {
+		if (Array.isArray(key) && key.length > 0) {
+			setSelectedCategory(key[0] as string);
 			// Reset filters
 			setUrlFilters(null);
 			setOrderBy(null);
@@ -213,58 +332,26 @@ export default function InfraMonitoringK8s(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.categorySelectorSection}>
-								<div className={styles.sectionHeader} data-type="resource">
-									<Typography.Text className={styles.sectionLabel}>
-										Viewing · Resource
-									</Typography.Text>
-									<div className={styles.sectionLine} />
-									<Tooltip title="Collapse Filters">
-										<ArrowUpToLine
-											style={{ transform: 'rotate(270deg)' }}
-											onClick={handleFilterVisibilityChange}
-											size="md"
-										/>
-									</Tooltip>
-								</div>
-								<div className={styles.categoryCard}>
-									<div className={styles.categoryList}>
-										{categories.map((category) => (
-											<button
-												key={category.key}
-												type="button"
-												className={`${styles.categoryItem} ${
-													selectedCategory === category.key
-														? styles.categoryItemSelected
-														: ''
-												}`}
-												onClick={(): void => handleCategorySelect(category.key)}
-												data-testid={`category-${category.key}`}
-											>
-												{category.icon}
-												<Typography.Text>{category.label}</Typography.Text>
-											</button>
-										))}
-									</div>
-								</div>
-							</div>
+							<div className={styles.quickFiltersContainerHeader}>
+								<Typography.Text>Filters</Typography.Text>
 
-							<div className={styles.quickFiltersSection}>
-								<div className={styles.sectionHeader} data-type="filter">
-									<Typography.Text className={styles.sectionLabel}>
-										Filter by
-									</Typography.Text>
-									<div className={styles.sectionLine} />
-								</div>
-								{selectedCategoryConfig && (
-									<QuickFilters
-										source={QuickFiltersSource.INFRA_MONITORING}
-										config={selectedCategoryConfig}
-										handleFilterVisibilityChange={handleFilterVisibilityChange}
-										onFilterChange={handleFilterChange}
+								<Tooltip title="Collapse Filters">
+									<ArrowUpToLine
+										style={{ transform: 'rotate(270deg)' }}
+										onClick={handleFilterVisibilityChange}
+										size="md"
 									/>
-								)}
+								</Tooltip>
 							</div>
+							<Collapse
+								onChange={handleCategoryChange}
+								items={items}
+								defaultActiveKey={[selectedCategory]}
+								activeKey={[selectedCategory]}
+								accordion
+								bordered={false}
+								ghost
+							/>
 						</div>
 					)}
 

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

@@ -1,228 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
-import DockerIcon from 'assets/CustomIcons/DockerIcon';
-import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
-import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
-import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
-import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
-import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
-import NginxIcon from 'assets/CustomIcons/NginxIcon';
-import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
-import RedisIcon from 'assets/CustomIcons/RedisIcon';
-import cx from 'classnames';
-import {
-	ConciergeBell,
-	DraftingCompass,
-	Drill,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { DashboardTemplate } from 'types/api/dashboard/getAll';
-
-import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
-import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
-
-import { filterTemplates } from '../utils';
-
-import './DashboardTemplatesModal.styles.scss';
-
-const templatesList: DashboardTemplate[] = [
-	{
-		name: 'Blank dashboard',
-		icon: <Drill />,
-		id: 'blank',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Alert Manager',
-		icon: <ConciergeBell />,
-		id: 'alertManager',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Apache',
-		icon: <ApacheIcon />,
-		id: 'apache',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Docker',
-		icon: <DockerIcon />,
-		id: 'docker',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Elasticsearch',
-		icon: <ElasticSearchIcon />,
-		id: 'elasticSearch',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MongoDB',
-		icon: <MongoDBIcon />,
-		id: 'mongoDB',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Heroku',
-		icon: <HerokuIcon />,
-		id: 'heroku',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Nginx',
-		icon: <NginxIcon />,
-		id: 'nginx',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Kubernetes',
-		icon: <KubernetesIcon />,
-		id: 'kubernetes',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MySQL',
-		icon: <MySQLIcon />,
-		id: 'mySQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'PostgreSQL',
-		icon: <PostgreSQLIcon />,
-		id: 'postgreSQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Redis',
-		icon: <RedisIcon />,
-		id: 'redis',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: redisTemplatePreviewUrl,
-	},
-	{
-		name: 'AWS',
-		icon: <DraftingCompass size={14} />,
-		id: 'aws',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-];
-
-interface DashboardTemplatesContentProps {
-	onCreateNewDashboard: () => void;
-	/** When provided, renders the modal-style header with a close affordance. Omitted for inline use. */
-	onCancel?: () => void;
-}
-
-// The template gallery (search + list + preview + create), extracted from the
-// modal so it can be embedded inline (e.g. the V2 new-dashboard modal's template
-// tab) as well as inside DashboardTemplatesModal. Styles live under the global
-// `.new-dashboard-templates-modal` scope, so inline callers wrap it in that class.
-export default function DashboardTemplatesContent({
-	onCreateNewDashboard,
-	onCancel,
-}: DashboardTemplatesContentProps): JSX.Element {
-	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
-		templatesList[0],
-	);
-
-	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
-
-	const handleDashboardTemplateSearch = (
-		event: ChangeEvent<HTMLInputElement>,
-	) => {
-		const searchText = event.target.value;
-		const filteredTemplates = filterTemplates(searchText, templatesList);
-		setDashboardTemplates(filteredTemplates);
-	};
-
-	return (
-		<div className="new-dashboard-templates-content-container">
-			{onCancel && (
-				<div className="new-dashboard-templates-content-header">
-					<Typography.Text>New Dashboard</Typography.Text>
-
-					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
-				</div>
-			)}
-
-			<div className="new-dashboard-templates-content">
-				<div className="new-dashboard-templates-list">
-					<Input
-						className="new-dashboard-templates-search"
-						placeholder="🔍 Search..."
-						onChange={handleDashboardTemplateSearch}
-					/>
-
-					<div className="templates-list">
-						{dashboardTemplates.map((template) => (
-							<div
-								className={cx(
-									'template-list-item',
-									selectedDashboardTemplate.id === template.id ? 'active' : '',
-								)}
-								key={template.name}
-								onClick={() => setSelectedDashboardTemplate(template)}
-							>
-								<div className="template-icon">{template.icon}</div>
-								<div className="template-name">{template.name}</div>
-							</div>
-						))}
-					</div>
-				</div>
-
-				<div className="new-dashboard-template-preview">
-					<div className="template-preview-header">
-						<div className="template-preview-title">
-							<div className="template-preview-icon">
-								{selectedDashboardTemplate.icon}
-							</div>
-
-							<div className="template-info">
-								<div className="template-name">{selectedDashboardTemplate.name}</div>
-
-								<div className="template-description">
-									{selectedDashboardTemplate.description}
-								</div>
-							</div>
-						</div>
-
-						<div className="create-dashboard-btn">
-							<Button
-								type="primary"
-								className="periscope-btn primary"
-								icon={<Plus size={14} />}
-								onClick={onCreateNewDashboard}
-							>
-								New dashboard
-							</Button>
-						</div>
-					</div>
-
-					<div className="template-preview-image">
-						<img
-							src={selectedDashboardTemplate.previewImage}
-							alt={`${selectedDashboardTemplate.name}-preview`}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

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

@@ -1,9 +1,129 @@
-import { Modal } from 'antd';
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { ChangeEvent, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
+import DockerIcon from 'assets/CustomIcons/DockerIcon';
+import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
+import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
+import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
+import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
+import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
+import NginxIcon from 'assets/CustomIcons/NginxIcon';
+import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
+import RedisIcon from 'assets/CustomIcons/RedisIcon';
+import cx from 'classnames';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
-import DashboardTemplatesContent from './DashboardTemplatesContent';
+import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
+import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
+
+import { filterTemplates } from '../utils';
 
 import './DashboardTemplatesModal.styles.scss';
 
+const templatesList: DashboardTemplate[] = [
+	{
+		name: 'Blank dashboard',
+		icon: <Drill />,
+		id: 'blank',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Alert Manager',
+		icon: <ConciergeBell />,
+		id: 'alertManager',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Apache',
+		icon: <ApacheIcon />,
+		id: 'apache',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Docker',
+		icon: <DockerIcon />,
+		id: 'docker',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Elasticsearch',
+		icon: <ElasticSearchIcon />,
+		id: 'elasticSearch',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MongoDB',
+		icon: <MongoDBIcon />,
+		id: 'mongoDB',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Heroku',
+		icon: <HerokuIcon />,
+		id: 'heroku',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Nginx',
+		icon: <NginxIcon />,
+		id: 'nginx',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Kubernetes',
+		icon: <KubernetesIcon />,
+		id: 'kubernetes',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MySQL',
+		icon: <MySQLIcon />,
+		id: 'mySQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'PostgreSQL',
+		icon: <PostgreSQLIcon />,
+		id: 'postgreSQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Redis',
+		icon: <RedisIcon />,
+		id: 'redis',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: redisTemplatePreviewUrl,
+	},
+	{
+		name: 'AWS',
+		icon: <DraftingCompass size={14} />,
+		id: 'aws',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+];
+
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
 	onCreateNewDashboard: () => void;
@@ -15,6 +135,20 @@ export default function DashboardTemplatesModal({
 	onCreateNewDashboard,
 	onCancel,
 }: DashboardTemplatesModalProps): JSX.Element {
+	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
+		templatesList[0],
+	);
+
+	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
+
+	const handleDashboardTemplateSearch = (
+		event: ChangeEvent<HTMLInputElement>,
+	) => {
+		const searchText = event.target.value;
+		const filteredTemplates = filterTemplates(searchText, templatesList);
+		setDashboardTemplates(filteredTemplates);
+	};
+
 	return (
 		<Modal
 			wrapClassName="new-dashboard-templates-modal"
@@ -25,10 +159,75 @@ export default function DashboardTemplatesModal({
 			destroyOnClose
 			width="60vw"
 		>
-			<DashboardTemplatesContent
-				onCreateNewDashboard={onCreateNewDashboard}
-				onCancel={onCancel}
-			/>
+			<div className="new-dashboard-templates-content-container">
+				<div className="new-dashboard-templates-content-header">
+					<Typography.Text>New Dashboard</Typography.Text>
+
+					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
+				</div>
+
+				<div className="new-dashboard-templates-content">
+					<div className="new-dashboard-templates-list">
+						<Input
+							className="new-dashboard-templates-search"
+							placeholder="🔍 Search..."
+							onChange={handleDashboardTemplateSearch}
+						/>
+
+						<div className="templates-list">
+							{dashboardTemplates.map((template) => (
+								<div
+									className={cx(
+										'template-list-item',
+										selectedDashboardTemplate.id === template.id ? 'active' : '',
+									)}
+									key={template.name}
+									onClick={() => setSelectedDashboardTemplate(template)}
+								>
+									<div className="template-icon">{template.icon}</div>
+									<div className="template-name">{template.name}</div>
+								</div>
+							))}
+						</div>
+					</div>
+
+					<div className="new-dashboard-template-preview">
+						<div className="template-preview-header">
+							<div className="template-preview-title">
+								<div className="template-preview-icon">
+									{selectedDashboardTemplate.icon}
+								</div>
+
+								<div className="template-info">
+									<div className="template-name">{selectedDashboardTemplate.name}</div>
+
+									<div className="template-description">
+										{selectedDashboardTemplate.description}
+									</div>
+								</div>
+							</div>
+
+							<div className="create-dashboard-btn">
+								<Button
+									type="primary"
+									className="periscope-btn primary"
+									icon={<Plus size={14} />}
+									onClick={onCreateNewDashboard}
+								>
+									New dashboard
+								</Button>
+							</div>
+						</div>
+
+						<div className="template-preview-image">
+							<img
+								src={selectedDashboardTemplate.previewImage}
+								alt={`${selectedDashboardTemplate.name}-preview`}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
 		</Modal>
 	);
 }

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

@@ -16,6 +16,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-2);
+		padding-bottom: var(--spacing-8);
 	}
 
 	&__title {

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -164,7 +164,7 @@ function BreakDown(): JSX.Element {
 								Meter metrics data is aggregated over 1 hour period. Please select time
 								range accordingly. 
 								<a
-									href="https://signoz.io/docs/cost-meter/overview/#get-started"
+									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
 									rel="noopener noreferrer"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -14,14 +14,6 @@
 	.meter-explorer-content-section {
 		width: 100%;
 
-		// Meant to fix the query builder colors
-		--input-background: var(--l2-background);
-		--input-hover-background: var(--l2-background);
-		--input-focus-background: var(--l2-background);
-		--input-border-color: var(--l2-border);
-		--input-hover-border-color: var(--internal-ant-border-color-hover);
-		--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 		.explore-header {
 			display: flex;
 			align-items: center;

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -197,7 +197,7 @@ function TopOperationsTable({
 
 	const entryPointSpanInfo = {
 		text: 'Shows the spans where requests enter new services for the first time',
-		url: 'https://signoz.io/docs/apm-and-distributed-tracing/application-details/',
+		url: 'https://signoz.io/docs/traces-management/guides/entry-point-spans-service-overview/',
 		urlText: 'Learn more about Entrypoint Spans.',
 	};
 

frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -1,14 +1,6 @@
 .metrics-explorer-explore-container {
 	padding-bottom: 80px;
 
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 	.explore-header {
 		display: flex;
 		align-items: center;

frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss

@@ -1,12 +1,4 @@
 .dashboard-navigation {
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
 	.run-query-dashboard-btn {
 		min-width: 180px;
 	}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -64,7 +64,7 @@ function ConfigureGoogleAuthAuthnProvider({
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -38,7 +38,7 @@ function ConfigureOIDCAuthnProvider({
 					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
 					the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -37,7 +37,7 @@ function ConfigureSAMLAuthnProvider({
 				<p className="authn-provider__description">
 					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss

@@ -31,14 +31,8 @@
 			min-width: 32px;
 
 			border-radius: 2px;
-			--periscope-btn-border-color: var(
-				--query-builder-v2-border-color,
-				var(--l2-border)
-			);
-			--periscope-btn-background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			);
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss

@@ -27,11 +27,8 @@
 		border-top-left-radius: 0px !important;
 		border-bottom-left-radius: 0px !important;
 
-		background-color: var(
-			--query-builder-v2-background-color,
-			var(--l2-background)
-		) !important;
-		margin-left: -1px;
+		background-color: var(--l1-border) !important;
+		opacity: 0.8;
 
 		&:disabled {
 			opacity: 0.4;
@@ -89,8 +86,8 @@
 			border-bottom-left-radius: 3px;
 
 			.ant-select-selector {
-				border: 1px solid var(--query-builder-v2-border-color, none);
-				background: var(--query-builder-v2-background-color, var(--l3-background));
+				border: none;
+				background: var(--l3-background);
 			}
 
 			&.showInput {
@@ -104,20 +101,12 @@
 		.query-function-value {
 			width: 70px;
 			border-left: 0;
-			background: var(--query-builder-v2-background-color, var(--l2-background));
+			background: var(--l2-background);
 			border-radius: 0;
 			border: 1px solid transparent;
-			border-top: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			border-bottom: 1px solid
-				var(--query-builder-v2-border-color, var(--l2-border));
-			height: 32px;
 
 			&:focus {
-				border-color: var(--internal-ant-border-color-focus);
-			}
-
-			&:hover {
-				border-color: var(--internal-ant-border-color-hover);
+				border-color: transparent !important;
 			}
 		}
 
@@ -125,7 +114,7 @@
 			border-top-right-radius: 3px;
 			border-bottom-right-radius: 3px;
 
-			border-left: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border-left: 1px solid var(--l2-border);
 
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -216,7 +216,7 @@ export default function QueryFunctions({
 							Add new function
 							<Typography.Link
 								style={{ textDecoration: 'underline' }}
-								href="https://signoz.io/docs/querying/functions-extended-analysis/?utm_source=product&utm_medium=query-builder"
+								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
 								target="_blank"
 							>
 								{' '}

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -7,19 +7,48 @@ import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { useNavigationBlocker } from 'hooks/useNavigationBlocker';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
+import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
+import {
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+	RoleCreatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import APIError from 'types/api/error';
 
 import PermissionEditor from './components/PermissionEditor';
 import { useCreateEditRolePageActions } from './useCreateEditRolePageActions';
-import { useNavigationBlocker } from 'hooks/useNavigationBlocker';
 
 import styles from './CreateEditRolePage.module.scss';
+import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
 
-function CreateEditRolePage(): JSX.Element {
+function authzCheckFn(
+	_props: object,
+	router: RouterContext,
+): BrandedPermission[] {
+	const match = router.matchPath<{ roleId: string }>(ROUTES.ROLE_DETAILS);
+	const roleId = match?.roleId ?? 'new';
+	const roleName = router.searchParams.get('name') ?? '';
+	const isCreateMode = roleId === 'new';
+
+	if (isCreateMode) {
+		return [RoleCreatePermission];
+	}
+	if (roleName) {
+		return [
+			buildRoleReadPermission(roleName),
+			buildRoleUpdatePermission(roleName),
+		];
+	}
+	return [];
+}
+
+function CreateEditRolePageContent(): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
 	const urlQuery = useUrlQuery();
@@ -47,9 +76,6 @@ function CreateEditRolePage(): JSX.Element {
 		saveError,
 		validationErrors,
 		isCreateMode,
-		hasRequiredPermission,
-		isAuthZLoading,
-		deniedPermission,
 		loadError,
 	} = useCreateEditRolePageActions(roleId, roleName);
 
@@ -81,10 +107,6 @@ function CreateEditRolePage(): JSX.Element {
 		roleName,
 	]);
 
-	if (!hasRequiredPermission && !isAuthZLoading) {
-		return <PermissionDeniedFullPage permissionName={deniedPermission} />;
-	}
-
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div
@@ -127,7 +149,7 @@ function CreateEditRolePage(): JSX.Element {
 		);
 	}
 
-	if (isAuthZLoading || (isLoading && !isCreateMode) || isFeatureGateLoading) {
+	if ((isLoading && !isCreateMode) || isFeatureGateLoading) {
 		return (
 			<div className={styles.createEditRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -195,7 +217,12 @@ function CreateEditRolePage(): JSX.Element {
 							</Typography>
 						</div>
 					)}
-					<Button
+					<AuthZButton
+						checks={
+							isCreateMode
+								? [RoleCreatePermission]
+								: [buildRoleUpdatePermission(roleName)]
+						}
 						variant="solid"
 						color="primary"
 						onClick={handleSaveAndNavigate}
@@ -204,7 +231,7 @@ function CreateEditRolePage(): JSX.Element {
 						data-testid="save-button"
 					>
 						{isCreateMode ? 'Create role' : 'Save changes'}
-					</Button>
+					</AuthZButton>
 				</div>
 			</div>
 
@@ -290,4 +317,11 @@ function CreateEditRolePage(): JSX.Element {
 	);
 }
 
-export default CreateEditRolePage;
+export default withAuthZPage(CreateEditRolePageContent, {
+	checks: authzCheckFn,
+	fallbackOnLoading: (
+		<div className={styles.createEditRolePage}>
+			<Skeleton active paragraph={{ rows: 8 }} />
+		</div>
+	),
+});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateEditRolePage.featureGate.test.tsx

@@ -1,24 +1,21 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { server } from 'mocks-server/server';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
-	mockUseAuthZGrantAll,
+	setupAuthzAdmin,
 } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+	server.use(setupAuthzAdmin());
 });
 
 afterEach(() => {
-	jest.clearAllMocks();
+	server.resetHandlers();
 });
 
 function renderCreatePage(
@@ -71,7 +68,9 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});
 
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByTestId('feature-gate-error-banner'),
+			).resolves.toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -80,7 +79,9 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByTestId('feature-gate-error-banner'),
+			).resolves.toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -92,16 +93,19 @@ describe('CreateEditRolePage - Feature Gate', () => {
 			await expect(screen.findByText('Create Role')).resolves.toBeInTheDocument();
 		});
 
-		it('shows back button when feature disabled', () => {
+		it('shows back button when feature disabled', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+			await expect(
+				screen.findByTestId('cancel-button'),
+			).resolves.toBeInTheDocument();
 		});
 
-		it('back button is enabled when feature disabled', () => {
+		it('back button is enabled when feature disabled', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
+			const cancelButton = await screen.findByTestId('cancel-button');
+			expect(cancelButton).not.toBeDisabled();
 		});
 	});
 
@@ -118,7 +122,9 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});
 
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByTestId('feature-gate-error-banner'),
+			).resolves.toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -127,7 +133,9 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
 
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
+			await expect(
+				screen.findByTestId('feature-gate-error-banner'),
+			).resolves.toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -1,16 +1,17 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { render, screen } from 'tests/test-utils';
-import { mockUseAuthZDenyAll } from 'lib/authz/utils/authz-test-utils';
+import {
+	setupAuthzAdmin,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 afterEach(() => {
-	jest.clearAllMocks();
+	server.resetHandlers();
 });
 
 function renderCreatePage(): ReturnType<typeof render> {
@@ -31,7 +32,7 @@ function renderCreatePage(): ReturnType<typeof render> {
 describe('CreateRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when create permission denied', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+			server.use(setupAuthzDenyAll());
 
 			renderCreatePage();
 
@@ -43,17 +44,31 @@ describe('CreateRolePage - AuthZ', () => {
 
 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			mockUseAuthZ.mockReturnValue({
-				isLoading: true,
-				isFetching: true,
-				error: null,
-				permissions: null,
-				refetchPermissions: jest.fn(),
-			});
+			server.use(
+				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
+					res(
+						ctx.delay(200),
+						ctx.status(200),
+						ctx.json({ data: [], status: 'success' }),
+					),
+				),
+			);
 
 			renderCreatePage();
 
 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
+
+	describe('permission granted', () => {
+		it('renders create page when create permission granted', async () => {
+			server.use(setupAuthzAdmin());
+
+			renderCreatePage();
+
+			await expect(
+				screen.findByTestId('role-name-input'),
+			).resolves.toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.test.tsx

@@ -3,27 +3,22 @@ import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 const rolesApiBase = '*/api/v1/roles';
 
 beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+	server.use(setupAuthzAdmin());
 });
 
 afterEach(() => {
-	jest.clearAllMocks();
 	server.resetHandlers();
 });
 
-function renderCreatePage(): ReturnType<typeof render> {
-	return render(
+async function renderCreatePage(): Promise<ReturnType<typeof render>> {
+	const result = render(
 		<Switch>
 			<Route path={ROUTES.ROLES_SETTINGS} exact>
 				<div data-testid="roles-list-redirect" />
@@ -35,61 +30,63 @@ function renderCreatePage(): ReturnType<typeof render> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
+	await screen.findByTestId('create-edit-role-page');
+	return result;
 }
 
 describe('CreateRolePage', () => {
 	describe('initial render', () => {
-		it('renders create role page with testId', () => {
-			renderCreatePage();
+		it('renders create role page with testId', async () => {
+			await renderCreatePage();
 
 			expect(screen.getByTestId('create-edit-role-page')).toBeInTheDocument();
 		});
 
-		it('shows breadcrumb with "Create role" as current page', () => {
-			renderCreatePage();
+		it('shows breadcrumb with "Create role" as current page', async () => {
+			await renderCreatePage();
 
 			const page = screen.getByTestId('create-edit-role-page');
 			const breadcrumbs = within(page).getAllByText('Create role');
 			expect(breadcrumbs.length).toBeGreaterThanOrEqual(1);
 		});
 
-		it('renders empty name input', () => {
-			renderCreatePage();
+		it('renders empty name input', async () => {
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).toHaveValue('');
 		});
 
-		it('renders empty description input', () => {
-			renderCreatePage();
+		it('renders empty description input', async () => {
+			await renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			expect(descInput).toHaveValue('');
 		});
 
-		it('name input is enabled in create mode', () => {
-			renderCreatePage();
+		it('name input is enabled in create mode', async () => {
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).not.toBeDisabled();
 		});
 
-		it('save button shows "Create role" text', () => {
-			renderCreatePage();
+		it('save button shows "Create role" text', async () => {
+			await renderCreatePage();
 
 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toHaveTextContent('Create role');
 		});
 
-		it('save button is disabled when no changes', () => {
-			renderCreatePage();
+		it('save button is disabled when no changes', async () => {
+			await renderCreatePage();
 
 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toBeDisabled();
 		});
 
-		it('does not show unsaved indicator initially', () => {
-			renderCreatePage();
+		it('does not show unsaved indicator initially', async () => {
+			await renderCreatePage();
 
 			expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument();
 		});
@@ -98,7 +95,7 @@ describe('CreateRolePage', () => {
 	describe('form interactions', () => {
 		it('enables save button when name is entered', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'test-role');
@@ -109,7 +106,7 @@ describe('CreateRolePage', () => {
 
 		it('shows unsaved indicator when form modified', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-role');
@@ -121,7 +118,7 @@ describe('CreateRolePage', () => {
 
 		it('enables save button when description is entered', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Some description');
@@ -134,7 +131,7 @@ describe('CreateRolePage', () => {
 	describe('cancel action', () => {
 		it('navigates to roles list on cancel', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const cancelBtn = screen.getByTestId('cancel-button');
 			await user.click(cancelBtn);
@@ -163,7 +160,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-custom-role');
@@ -200,7 +197,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -218,7 +215,7 @@ describe('CreateRolePage', () => {
 
 		it('shows error banner with "Role name is required" when saving with empty name', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -237,7 +234,7 @@ describe('CreateRolePage', () => {
 
 		it('clears error banner when user starts typing in name field', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -270,7 +267,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'duplicate-role');
@@ -291,7 +288,7 @@ describe('CreateRolePage', () => {
 	describe('validation errors', () => {
 		it('shows validation error when Only Selected has no items', async () => {
 			const user = userEvent.setup();
-			renderCreatePage();
+			await renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -1,22 +1,43 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { render, screen } from 'tests/test-utils';
 import {
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantByPrefix,
+	setupAuthzAdmin,
+	setupAuthzDenyAll,
+	setupAuthzDeny,
 } from 'lib/authz/utils/authz-test-utils';
+import { buildRoleUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 const EDIT_ROLE_ID = 'test-role-123';
 const EDIT_ROLE_NAME = 'test-role';
+const rolesApiBase = '*/api/v1/roles';
+
+beforeEach(() => {
+	server.use(
+		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						id: EDIT_ROLE_ID,
+						name: EDIT_ROLE_NAME,
+						description: 'Test role description',
+						type: 'custom',
+						transactionGroups: [],
+					},
+				}),
+			),
+		),
+	);
+});
 
 afterEach(() => {
-	jest.clearAllMocks();
+	server.resetHandlers();
 });
 
 function renderEditPage(): ReturnType<typeof render> {
@@ -37,7 +58,7 @@ function renderEditPage(): ReturnType<typeof render> {
 describe('EditRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when read permission denied', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+			server.use(setupAuthzDenyAll());
 
 			renderEditPage();
 
@@ -47,7 +68,7 @@ describe('EditRolePage - AuthZ', () => {
 		});
 
 		it('shows PermissionDeniedFullPage when update permission denied but read granted', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZGrantByPrefix('read'));
+			server.use(setupAuthzDeny(buildRoleUpdatePermission(EDIT_ROLE_NAME)));
 
 			renderEditPage();
 
@@ -55,34 +76,35 @@ describe('EditRolePage - AuthZ', () => {
 				screen.findByText(/You are not authorized/i),
 			).resolves.toBeInTheDocument();
 		});
-
-		it('checks both read and update permissions for edit mode', () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
-
-			renderEditPage();
-
-			expect(mockUseAuthZ).toHaveBeenCalledWith(
-				expect.arrayContaining([
-					expect.stringContaining('read'),
-					expect.stringContaining('update'),
-				]),
-			);
-		});
 	});
 
 	describe('loading state', () => {
-		it('shows skeleton while checking permissions', () => {
-			mockUseAuthZ.mockReturnValue({
-				isLoading: true,
-				isFetching: true,
-				error: null,
-				permissions: null,
-				refetchPermissions: jest.fn(),
-			});
+		it('shows skeleton while checking permissions', async () => {
+			server.use(
+				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
+					res(
+						ctx.delay(200),
+						ctx.status(200),
+						ctx.json({ data: [], status: 'success' }),
+					),
+				),
+			);
 
 			renderEditPage();
 
 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
+
+	describe('permission granted', () => {
+		it('renders edit page when both read and update permissions granted', async () => {
+			server.use(setupAuthzAdmin());
+
+			renderEditPage();
+
+			await expect(
+				screen.findByText(`Role - ${EDIT_ROLE_NAME}`),
+			).resolves.toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.test.tsx

@@ -4,14 +4,10 @@ import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 const rolesApiBase = '*/api/v1/roles';
 
@@ -32,8 +28,8 @@ const roleWithTransactionGroups = {
 };
 
 beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	server.use(
+		setupAuthzAdmin(),
 		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(roleWithTransactionGroups)),
 		),
@@ -41,7 +37,6 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-	jest.clearAllMocks();
 	server.resetHandlers();
 });
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/JsonEditor.test.tsx

@@ -1,21 +1,18 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import { server } from 'mocks-server/server';
 import { render, screen, userEvent, within } from 'tests/test-utils';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+	server.use(setupAuthzAdmin());
 });
 
 afterEach(() => {
-	jest.clearAllMocks();
+	server.resetHandlers();
 });
 
 function renderPage(): ReturnType<typeof render> {
@@ -37,13 +34,13 @@ function renderPage(): ReturnType<typeof render> {
 
 async function switchToJsonMode(): Promise<void> {
 	const user = userEvent.setup();
-	const jsonRadio = screen.getByTestId('permission-editor-mode-json');
+	const jsonRadio = await screen.findByTestId('permission-editor-mode-json');
 	await user.click(jsonRadio);
 }
 
 async function switchToInteractiveMode(): Promise<void> {
 	const user = userEvent.setup();
-	const interactiveRadio = screen.getByTestId(
+	const interactiveRadio = await screen.findByTestId(
 		'permission-editor-mode-interactive',
 	);
 	await user.click(interactiveRadio);

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.test.tsx

@@ -1,31 +1,28 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import { server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
 async function expandAllCards(): Promise<void> {
 	const user = userEvent.setup();
-	const expandButton = screen.getByTestId('expand-all-button');
+	const expandButton = await screen.findByTestId('expand-all-button');
 	await user.click(expandButton);
 }
 
 beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+	server.use(setupAuthzAdmin());
 });
 
 afterEach(() => {
-	jest.clearAllMocks();
+	server.resetHandlers();
 });
 
-function renderPage(): ReturnType<typeof render> {
-	return render(
+async function renderPage(): Promise<ReturnType<typeof render>> {
+	const result = render(
 		<TooltipProvider>
 			<Switch>
 				<Route path={ROUTES.ROLES_SETTINGS} exact>
@@ -39,18 +36,20 @@ function renderPage(): ReturnType<typeof render> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
+	await screen.findByTestId('permission-editor');
+	return result;
 }
 
 describe('PermissionEditor', () => {
 	describe('mode toggle', () => {
-		it('renders permission editor with testId', () => {
-			renderPage();
+		it('renders permission editor with testId', async () => {
+			await renderPage();
 
 			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
 		});
 
-		it('defaults to interactive mode', () => {
-			renderPage();
+		it('defaults to interactive mode', async () => {
+			await renderPage();
 
 			const interactiveRadio = screen.getByTestId(
 				'permission-editor-mode-interactive',
@@ -60,7 +59,7 @@ describe('PermissionEditor', () => {
 
 		it('switches to JSON mode when clicked', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -71,7 +70,7 @@ describe('PermissionEditor', () => {
 
 		it('switches back to interactive mode', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -87,8 +86,8 @@ describe('PermissionEditor', () => {
 	});
 
 	describe('resource cards', () => {
-		it('renders all resource cards', () => {
-			renderPage();
+		it('renders all resource cards', async () => {
+			await renderPage();
 
 			expect(
 				screen.getByTestId('resource-card-factor-api-key'),
@@ -99,8 +98,8 @@ describe('PermissionEditor', () => {
 			).toBeInTheDocument();
 		});
 
-		it('resource cards are collapsed by default', () => {
-			renderPage();
+		it('resource cards are collapsed by default', async () => {
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -112,7 +111,7 @@ describe('PermissionEditor', () => {
 
 		it('expands resource card when header clicked', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -126,7 +125,7 @@ describe('PermissionEditor', () => {
 
 		it('collapses expanded resource card when header clicked again', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -140,7 +139,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('shows granted count in resource card header', async () => {
-			renderPage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			await expect(
@@ -151,7 +150,7 @@ describe('PermissionEditor', () => {
 
 	describe('action toggles', () => {
 		it('renders action toggles for each available action', async () => {
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -170,7 +169,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('defaults all actions to None scope', async () => {
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -188,7 +187,7 @@ describe('PermissionEditor', () => {
 
 		it('changes scope to All when clicked', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -209,7 +208,7 @@ describe('PermissionEditor', () => {
 
 		it('updates granted count when scope changed', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -228,7 +227,7 @@ describe('PermissionEditor', () => {
 	describe('Only Selected scope', () => {
 		it('shows item input selector when Only Selected is chosen', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -245,7 +244,7 @@ describe('PermissionEditor', () => {
 
 		it('adds item when typed and Enter pressed', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -263,7 +262,7 @@ describe('PermissionEditor', () => {
 
 		it('adds item when Add button clicked', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -284,7 +283,7 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by comma', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -304,7 +303,7 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by space', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -324,7 +323,7 @@ describe('PermissionEditor', () => {
 
 		it('does not add duplicate items', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -344,7 +343,7 @@ describe('PermissionEditor', () => {
 
 		it('removes item when X clicked', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -367,7 +366,7 @@ describe('PermissionEditor', () => {
 
 		it('shows Add button disabled when input is empty', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -385,7 +384,7 @@ describe('PermissionEditor', () => {
 	describe('scope change confirmation dialog', () => {
 		it('shows confirm dialog when leaving Only Selected with items', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -407,7 +406,7 @@ describe('PermissionEditor', () => {
 
 		it('clears items when confirmed', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -434,7 +433,7 @@ describe('PermissionEditor', () => {
 
 		it('keeps items when cancelled', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -461,7 +460,7 @@ describe('PermissionEditor', () => {
 
 		it('does not show dialog when leaving Only Selected with no items', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -480,7 +479,7 @@ describe('PermissionEditor', () => {
 
 	describe('verbs without Only Selected option', () => {
 		it('does not show Only Selected for list verb', async () => {
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -501,8 +500,8 @@ describe('PermissionEditor', () => {
 	});
 
 	describe('collapse/expand all resources', () => {
-		it('shows expand/collapse toggle group', () => {
-			renderPage();
+		it('shows expand/collapse toggle group', async () => {
+			await renderPage();
 
 			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
 			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
@@ -510,7 +509,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('expands all cards when expand button clicked', async () => {
-			renderPage();
+			await renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -524,7 +523,7 @@ describe('PermissionEditor', () => {
 	describe('resource card error states', () => {
 		it('shows error border on collapsed card with validation error', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -554,7 +553,7 @@ describe('PermissionEditor', () => {
 
 		it('hides error border when card is expanded', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -591,7 +590,7 @@ describe('PermissionEditor', () => {
 
 		it('clears validation error when permission is changed', async () => {
 			const user = userEvent.setup();
-			renderPage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');

frontend/src/container/RolesSettings/CreateEditRolePage/useCreateEditRolePageActions.ts

@@ -16,7 +16,6 @@ import {
 	useRolePermissions,
 	useUpdateRolePermissions,
 } from '../hooks/useRolePermissions';
-import { useRoleAuthZ } from '../hooks/useRoleAuthZ';
 import {
 	useRoleUnsavedChanges,
 	type RoleFormData,
@@ -43,9 +42,6 @@ interface UseCreateEditRolePageCallbacksResult {
 	saveError: APIError | null;
 	clearSaveError: () => void;
 	validationErrors: Set<string>;
-	hasRequiredPermission: boolean;
-	isAuthZLoading: boolean;
-	deniedPermission: string;
 }
 
 export function useCreateEditRolePageActions(
@@ -55,23 +51,6 @@ export function useCreateEditRolePageActions(
 	const history = useHistory();
 	const isCreateMode = roleId === 'new';
 
-	const {
-		hasCreatePermission,
-		hasReadPermission,
-		hasUpdatePermission,
-		isAuthZLoading,
-	} = useRoleAuthZ(roleName);
-
-	const deniedPermission = useMemo(() => {
-		if (isCreateMode) {
-			return 'role:create';
-		}
-		if (roleName) {
-			return `role:${roleName}:update`;
-		}
-		return `role:<missing-rule-name>:update`;
-	}, [isCreateMode, roleName]);
-
 	const [formData, setFormData] = useState<RoleFormData>({
 		name: '',
 		description: '',
@@ -261,10 +240,5 @@ export function useCreateEditRolePageActions(
 		saveError,
 		clearSaveError,
 		validationErrors,
-		hasRequiredPermission: isCreateMode
-			? hasCreatePermission
-			: hasReadPermission && hasUpdatePermission,
-		isAuthZLoading,
-		deniedPermission,
 	};
 }

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -5,12 +5,11 @@ import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useTimezone } from 'providers/Timezone';
 import { RoleType } from 'types/roles';
@@ -24,23 +23,14 @@ type DisplayItem =
 	| { type: 'section'; label: string; count?: number }
 	| { type: 'role'; role: AuthtypesRoleDTO };
 
-interface RolesListingTableProps {
+interface RolesListContentProps {
 	searchQuery: string;
 }
 
-function RolesListingTable({
-	searchQuery,
-}: RolesListingTableProps): JSX.Element {
+function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
 	const { isRolesEnabled } = useRolesFeatureGate();
 
-	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
-		RoleListPermission,
-	]);
-	const hasListPermission = listPerms?.[RoleListPermission]?.isGranted ?? false;
-
-	const { data, isLoading, isError, error } = useListRoles({
-		query: { enabled: hasListPermission },
-	});
+	const { data, isLoading, isError, error } = useListRoles();
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
@@ -155,11 +145,7 @@ function RolesListingTable({
 		</>
 	);
 
-	if (!hasListPermission && listPerms !== null) {
-		return <PermissionDeniedFullPage permissionName="role:list" />;
-	}
-
-	if (isAuthZLoading || isLoading) {
+	if (isLoading) {
 		return (
 			<div className={styles.rolesListingTable}>
 				<Skeleton active paragraph={{ rows: 5 }} />
@@ -281,4 +267,11 @@ function RolesListingTable({
 	);
 }
 
-export default RolesListingTable;
+export default withAuthZPage<RolesListContentProps>(RolesListContent, {
+	checks: [RoleListPermission],
+	fallbackOnLoading: (
+		<div className={styles.rolesListingTable}>
+			<Skeleton active paragraph={{ rows: 5 }} />
+		</div>
+	),
+});

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import {
+	RoleCreatePermission,
+	RoleListPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -37,24 +40,25 @@ function RolesSettings(): JSX.Element {
 			</div>
 			<div className={styles.rolesSettingsContent}>
 				<div className={styles.rolesSettingsToolbar}>
-					<Input
-						type="search"
-						placeholder="Search for roles..."
-						value={searchQuery}
-						onChange={(e): void => setSearchQuery(e.target.value)}
-					/>
+					<AuthZTooltip checks={[RoleListPermission]}>
+						<Input
+							type="search"
+							placeholder="Search for roles..."
+							value={searchQuery}
+							onChange={(e): void => setSearchQuery(e.target.value)}
+						/>
+					</AuthZTooltip>
 					{isRolesEnabled && (
-						<AuthZTooltip checks={[RoleCreatePermission]}>
-							<Button
-								variant="solid"
-								color="primary"
-								className={styles.roleSettingsToolbarButton}
-								onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
-							>
-								<Plus size={14} />
-								Custom role
-							</Button>
-						</AuthZTooltip>
+						<AuthZButton
+							checks={[RoleCreatePermission]}
+							variant="solid"
+							color="primary"
+							className={styles.roleSettingsToolbarButton}
+							onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
+						>
+							<Plus size={14} />
+							Custom role
+						</AuthZButton>
 					)}
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />

frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx

@@ -10,11 +10,17 @@ import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import { useGetRole } from 'api/generated/services/role';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
-import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
+import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
+import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
+import {
+	buildRoleDeletePermission,
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 import { RoleType } from 'types/roles';
@@ -27,7 +33,7 @@ import { useViewRolePageActions } from './useViewRolePageActions';
 
 import styles from './ViewRolePage.module.scss';
 
-function ViewRolePage(): JSX.Element {
+function ViewRolePageContent(): JSX.Element {
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
 		useRolesFeatureGate();
@@ -45,26 +51,15 @@ function ViewRolePage(): JSX.Element {
 		handleTabChange,
 	} = useViewRolePageActions();
 
-	const {
-		hasReadPermission,
-		readRolePermission,
-		hasUpdatePermission,
-		updateRolePermission,
-		hasDeletePermission,
-		isAuthZLoading,
-	} = useRoleAuthZ(roleName);
-
 	const { data, isLoading, error } = useGetRole(
 		{ id: roleId ?? '' },
-		{ query: { enabled: !!roleId && hasReadPermission } },
+		{ query: { enabled: !!roleId } },
 	);
 	const role = data?.data;
 	const isManaged = role?.type === RoleType.MANAGED;
 
 	const {
 		isDeleteModalOpen,
-		isDeleteDisabled,
-		deleteDisabledReason,
 		deleteError,
 		handleOpenDeleteModal,
 		handleCloseDeleteModal,
@@ -72,7 +67,7 @@ function ViewRolePage(): JSX.Element {
 	} = useDeleteRoleModal({
 		roleId,
 		isManaged: isManaged ?? false,
-		hasDeletePermission,
+		hasDeletePermission: true,
 		onDeleteSuccess: handleCancel,
 	});
 
@@ -144,12 +139,6 @@ function ViewRolePage(): JSX.Element {
 		],
 	);
 
-	if (!hasReadPermission && !isAuthZLoading) {
-		return (
-			<PermissionDeniedFullPage permissionName={readRolePermission.object} />
-		);
-	}
-
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage} data-testid="view-role-page">
@@ -187,7 +176,7 @@ function ViewRolePage(): JSX.Element {
 		);
 	}
 
-	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
+	if (isLoading || isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -244,47 +233,55 @@ function ViewRolePage(): JSX.Element {
 				</div>
 
 				<div className={styles.viewRolePageActions}>
-					<TooltipSimple
-						title={isDeleteDisabled ? deleteDisabledReason : 'Open delete modal'}
-					>
-						<Button
+					{isManaged ? (
+						<TooltipSimple title="Managed roles cannot be deleted">
+							<Button
+								variant="link"
+								color="destructive"
+								disabled
+								data-testid="delete-button"
+								className={styles.deleteButton}
+							>
+								Delete
+							</Button>
+						</TooltipSimple>
+					) : (
+						<AuthZButton
+							checks={[buildRoleDeletePermission(roleName)]}
 							variant="link"
 							color="destructive"
 							onClick={handleOpenDeleteModal}
-							disabled={isDeleteDisabled}
 							data-testid="delete-button"
 							className={styles.deleteButton}
 						>
 							Delete
-						</Button>
-					</TooltipSimple>
+						</AuthZButton>
+					)}
 
 					<Divider type="vertical" />
 
-					<TooltipSimple
-						title={
-							isManaged
-								? 'Managed roles cannot be updated'
-								: hasUpdatePermission
-									? 'Open update page'
-									: `You are not authorized to perform ${updateRolePermission.object}`
-						}
-					>
-						<Button
+					{isManaged ? (
+						<TooltipSimple title="Managed roles cannot be updated">
+							<Button
+								variant="solid"
+								color="primary"
+								disabled
+								data-testid="save-button"
+							>
+								Update
+							</Button>
+						</TooltipSimple>
+					) : (
+						<AuthZButton
+							checks={[buildRoleUpdatePermission(roleName)]}
 							variant="solid"
 							color="primary"
 							data-testid="save-button"
-							disabled={isManaged || !hasUpdatePermission}
 							onClick={handleRedirectToUpdate}
-							style={
-								isManaged || !hasUpdatePermission
-									? { pointerEvents: 'auto' }
-									: undefined
-							}
 						>
 							Update
-						</Button>
-					</TooltipSimple>
+						</AuthZButton>
+					)}
 				</div>
 			</div>
 
@@ -336,4 +333,14 @@ function ViewRolePage(): JSX.Element {
 	);
 }
 
-export default ViewRolePage;
+export default withAuthZPage(ViewRolePageContent, {
+	checks: (_props: object, router: RouterContext) => {
+		const roleName = router.searchParams.get('name') ?? '';
+		return roleName ? [buildRoleReadPermission(roleName)] : [];
+	},
+	fallbackOnLoading: (
+		<div className={styles.viewRolePage}>
+			<Skeleton active paragraph={{ rows: 8 }} />
+		</div>
+	),
+});

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.actions.test.tsx

@@ -37,7 +37,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const cancelBtn = screen.getByTestId('cancel-button');
+		const cancelBtn = await screen.findByTestId('cancel-button');
 		await user.click(cancelBtn);
 
 		await expect(
@@ -61,7 +61,10 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const updateBtn = screen.getByTestId('save-button');
+		const updateBtn = await screen.findByTestId('save-button');
+		await waitFor(() => {
+			expect(updateBtn).not.toBeDisabled();
+		});
 		await user.click(updateBtn);
 
 		await expect(
@@ -76,7 +79,10 @@ describe('ViewRolePage - Actions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		const deleteBtn = screen.getByTestId('delete-button');
+		const deleteBtn = await screen.findByTestId('delete-button');
+		await waitFor(() => {
+			expect(deleteBtn).not.toBeDisabled();
+		});
 		await user.click(deleteBtn);
 
 		await expect(
@@ -105,7 +111,11 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		await user.click(screen.getByTestId('delete-button'));
+		const deleteBtn = await screen.findByTestId('delete-button');
+		await waitFor(() => {
+			expect(deleteBtn).not.toBeDisabled();
+		});
+		await user.click(deleteBtn);
 
 		await expect(
 			screen.findByText(/Are you sure you want to delete the role/),

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.authz.test.tsx

@@ -1,15 +1,17 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import {
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantAll,
-	mockUseAuthZGrantByPrefix,
+	AUTHZ_CHECK_URL,
+	setupAuthzAdmin,
+	setupAuthzDenyAll,
+	setupAuthzGrantByPrefix,
 } from 'lib/authz/utils/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';
 
@@ -25,25 +27,15 @@ import {
 	mockPermissionsData,
 } from './testUtils';
 
-const mockUseAuthZGrantReadDeleteDenied = mockUseAuthZGrantByPrefix(
-	'read',
-	'update',
-);
-const mockUseAuthZGrantReadUpdateDenied = mockUseAuthZGrantByPrefix(
-	'read',
-	'delete',
-);
-
 describe('ViewRolePage - AuthZ', () => {
 	afterEach(() => {
 		jest.restoreAllMocks();
+		server.resetHandlers();
 	});
 
 	describe('permission denied', () => {
 		it('shows permission denied page when read permission denied', async () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZDenyAll);
+			server.use(setupAuthzDenyAll());
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,
@@ -63,10 +55,8 @@ describe('ViewRolePage - AuthZ', () => {
 	});
 
 	describe('update button visibility', () => {
-		it('enables Update button when update permission granted', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
+		it('enables Update button when update permission granted', async () => {
+			server.use(setupAuthzAdmin());
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -92,13 +82,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			expect(screen.getByTestId('save-button')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByTestId('save-button')).toBeInTheDocument();
+			});
 		});
 
-		it('disables Update button when update permission denied', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
+		it('disables Update button when update permission denied', async () => {
+			server.use(setupAuthzGrantByPrefix('read', 'delete'));
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -124,13 +114,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			expect(screen.getByTestId('save-button')).toBeDisabled();
+			await waitFor(() => {
+				expect(screen.getByTestId('save-button')).toBeDisabled();
+			});
 		});
 
-		it('disables Update button when role is managed', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
+		it('disables Update button when role is managed', async () => {
+			server.use(setupAuthzAdmin());
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -160,15 +150,15 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			expect(screen.getByTestId('save-button')).toBeDisabled();
+			await waitFor(() => {
+				expect(screen.getByTestId('save-button')).toBeDisabled();
+			});
 		});
 
 		it('shows managed role tooltip when update button hovered on managed role', async () => {
 			const user = userEvent.setup();
 
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
+			server.use(setupAuthzAdmin());
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -198,6 +188,10 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
+			await waitFor(() => {
+				expect(screen.getByTestId('save-button')).toBeInTheDocument();
+			});
+
 			const updateButton = screen.getByTestId('save-button');
 			await user.hover(updateButton);
 
@@ -208,12 +202,8 @@ describe('ViewRolePage - AuthZ', () => {
 			});
 		});
 
-		it('shows authorization tooltip when update permission denied', async () => {
-			const user = userEvent.setup();
-
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
+		it('disables and shows denial attribute when update permission denied', async () => {
+			server.use(setupAuthzGrantByPrefix('read', 'delete'));
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -239,22 +229,17 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			const updateButton = screen.getByTestId('save-button');
-			await user.hover(updateButton);
-
 			await waitFor(() => {
-				expect(screen.getByRole('tooltip')).toHaveTextContent(
-					/You are not authorized to perform/,
-				);
+				const updateButton = screen.getByTestId('save-button');
+				expect(updateButton).toBeDisabled();
+				expect(updateButton).toHaveAttribute('data-denied-permissions');
 			});
 		});
 	});
 
 	describe('delete button visibility', () => {
-		it('disables Delete button when delete permission denied', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);
+		it('disables Delete button when delete permission denied', async () => {
+			server.use(setupAuthzGrantByPrefix('read', 'update'));
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -280,88 +265,81 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			expect(screen.getByTestId('delete-button')).toBeDisabled();
-		});
-
-		it('enables Delete button when delete permission granted', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: customRoleResponse,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-				data: mockPermissionsData,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-			render(
-				<TooltipProvider>
-					<ViewRolePage />
-				</TooltipProvider>,
-				undefined,
-				{
-					initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				},
-			);
-
-			expect(screen.getByTestId('delete-button')).not.toBeDisabled();
-		});
-
-		it('shows permission denied tooltip when delete permission denied', async () => {
-			const user = userEvent.setup();
-
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: customRoleResponse,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-				data: mockPermissionsData,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-			render(
-				<TooltipProvider>
-					<ViewRolePage />
-				</TooltipProvider>,
-				undefined,
-				{
-					initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				},
-			);
-
-			const deleteButton = screen.getByTestId('delete-button');
-			await user.hover(deleteButton);
-
 			await waitFor(() => {
-				expect(screen.getByRole('tooltip')).toHaveTextContent(
-					'You do not have permission to delete this role',
-				);
+				expect(screen.getByTestId('delete-button')).toBeDisabled();
+			});
+		});
+
+		it('enables Delete button when delete permission granted', async () => {
+			server.use(setupAuthzAdmin());
+
+			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
+				data: customRoleResponse,
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as ReturnType<typeof roleApi.useGetRole>);
+
+			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
+				data: mockPermissionsData,
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
+
+			render(
+				<TooltipProvider>
+					<ViewRolePage />
+				</TooltipProvider>,
+				undefined,
+				{
+					initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
+				},
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('delete-button')).not.toBeDisabled();
+			});
+		});
+
+		it('disables and shows denial attribute when delete permission denied', async () => {
+			server.use(setupAuthzGrantByPrefix('read', 'update'));
+
+			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
+				data: customRoleResponse,
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as ReturnType<typeof roleApi.useGetRole>);
+
+			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
+				data: mockPermissionsData,
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
+
+			render(
+				<TooltipProvider>
+					<ViewRolePage />
+				</TooltipProvider>,
+				undefined,
+				{
+					initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
+				},
+			);
+
+			await waitFor(() => {
+				const deleteButton = screen.getByTestId('delete-button');
+				expect(deleteButton).toBeDisabled();
+				expect(deleteButton).toHaveAttribute('data-denied-permissions');
 			});
 		});
 
 		it('shows managed role tooltip when role is managed', async () => {
 			const user = userEvent.setup();
 
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
+			server.use(setupAuthzAdmin());
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -391,6 +369,10 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
+			await waitFor(() => {
+				expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+			});
+
 			const deleteButton = screen.getByTestId('delete-button');
 			await user.hover(deleteButton);
 
@@ -404,13 +386,9 @@ describe('ViewRolePage - AuthZ', () => {
 
 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			jest.spyOn(useAuthZModule, 'useAuthZ').mockReturnValue({
-				isLoading: true,
-				isFetching: true,
-				error: null,
-				permissions: null,
-				refetchPermissions: jest.fn(),
-			});
+			server.use(
+				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
+			);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.customRole.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from 'tests/test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
 
 import ViewRolePage from '../ViewRolePage';
 
@@ -38,28 +38,34 @@ describe('ViewRolePage - Custom Role', () => {
 		).resolves.toBeInTheDocument();
 	});
 
-	it('shows Update button for custom roles', () => {
+	it('shows Update button for custom roles', async () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		expect(screen.getByTestId('save-button')).toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByTestId('save-button')).toBeInTheDocument();
+		});
 	});
 
-	it('shows Cancel button', () => {
+	it('shows Cancel button', async () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+		});
 	});
 
-	it('shows Delete button', () => {
+	it('shows Delete button', async () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+		});
 	});
 
 	it('renders created/updated timestamps labels', async () => {

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.edgeCases.test.tsx

@@ -1,8 +1,8 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
-import { render, screen } from 'tests/test-utils';
+import { server } from 'mocks-server/server';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -16,13 +16,12 @@ import {
 
 describe('ViewRolePage - Edge Cases', () => {
 	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
+		server.use(setupAuthzAdmin());
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
+		server.resetHandlers();
 	});
 
 	it('shows fallback for missing description', async () => {
@@ -53,7 +52,7 @@ describe('ViewRolePage - Edge Cases', () => {
 		await expect(screen.findByText('Description')).resolves.toBeInTheDocument();
 	});
 
-	it('shows fallback for invalid timestamps', () => {
+	it('shows fallback for invalid timestamps', async () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -79,11 +78,14 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
+		await waitFor(() => {
+			expect(screen.getByTestId('view-role-page')).toBeInTheDocument();
+		});
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});
 
-	it('shows fallback for undefined timestamps', () => {
+	it('shows fallback for undefined timestamps', async () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -109,6 +111,9 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
+		await waitFor(() => {
+			expect(screen.getByTestId('view-role-page')).toBeInTheDocument();
+		});
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});