refactor: move VariableDefaultValue oneOf into dashboardtypes

Define VariableDefaultValue in dashboardtypes as a subclass of the perses
variable.DefaultValue and attach the string | []string oneOf via its own
PrepareJSONSchema, instead of shaping the perses type from an openapi.go
InterceptSchema hook. This keeps the union's schema next to its type.

The named component is now DashboardtypesVariableDefaultValue; regenerate
the OpenAPI spec and frontend client accordingly.

docs/api/openapi.yml

@@ -2553,17 +2553,6 @@ components:
         url:
           type: string
       type: object
-    DashboardTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/VariableDisplay'
-        name:
-          type: string
-        value:
-          type: string
-      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2745,24 +2734,23 @@ components:
     DashboardtypesDatasourcePlugin:
       discriminator:
         mapping:
-          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
         propertyName: kind
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
       type: object
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
       type: string
-    DashboardtypesDatasourcePluginVariantStruct:
+    DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec:
       properties:
         kind:
           enum:
           - signoz/Datasource
           type: string
         spec:
-          nullable: true
-          type: object
+          $ref: '#/components/schemas/DashboardtypesSigNozDatasourceSpec'
       required:
       - kind
       - spec
@@ -2928,9 +2916,15 @@ components:
             type: string
           nullable: true
           type: object
+        mode:
+          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
+    DashboardtypesLegendMode:
+      enum:
+      - list
+      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2977,19 +2971,30 @@ components:
         customAllValue:
           type: string
         defaultValue:
-          $ref: '#/components/schemas/VariableDefaultValue'
+          $ref: '#/components/schemas/DashboardtypesVariableDefaultValue'
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
+          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
         sort:
-          nullable: true
-          type: string
+          $ref: '#/components/schemas/DashboardtypesListVariableSpecSort'
       required:
       - display
+      - name
       type: object
+    DashboardtypesListVariableSpecSort:
+      enum:
+      - none
+      - alphabetical-asc
+      - alphabetical-desc
+      - numerical-asc
+      - numerical-desc
+      - alphabetical-ci-asc
+      - alphabetical-ci-desc
+      type: string
     DashboardtypesListableDashboardForUserV2:
       properties:
         dashboards:
@@ -3287,7 +3292,6 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
           type: array
       required:
       - display
@@ -3490,6 +3494,8 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesSigNozDatasourceSpec:
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -3499,8 +3505,13 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
+          description: The maximum gap size to connect when fillOnlyBelow is true.
+            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
+          description: Controls whether lines connect across null values. When false
+            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
+            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3548,6 +3559,22 @@ components:
       - color
       - columnName
       type: object
+    DashboardtypesTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/DashboardtypesDisplay'
+        name:
+          minLength: 1
+          type: string
+        value:
+          type: string
+      required:
+      - display
+      - value
+      - name
+      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3567,7 +3594,6 @@ components:
       required:
       - value
       - color
-      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3652,24 +3678,18 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
       type: object
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
+    DashboardtypesVariableDefaultValue:
+      oneOf:
+      - type: string
+      - items:
           type: string
-        spec:
-          $ref: '#/components/schemas/DashboardTextVariableSpec'
-      required:
-      - kind
-      - spec
-      type: object
+        type: array
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
         kind:
@@ -3682,6 +3702,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -3755,16 +3787,10 @@ components:
         type:
           type: string
         url:
-          nullable: true
           type: string
       required:
-      - type
       - code
       - message
-      - url
-      - errors
-      - retry
-      - suggestions
       type: object
     ErrorsResponseerroradditional:
       properties:
@@ -3774,17 +3800,11 @@ components:
           items:
             type: string
           type: array
-      required:
-      - message
-      - suggestions
       type: object
     ErrorsResponseretryjson:
-      nullable: true
       properties:
         delay:
           $ref: '#/components/schemas/TimeDuration'
-      required:
-      - delay
       type: object
     FactoryResponse:
       properties:
@@ -5713,18 +5733,6 @@ components:
           format: double
           type: number
       type: object
-    Querybuildertypesv5BuilderQuerySpec:
-      discriminator:
-        mapping:
-          logs: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregation'
-          metrics: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregation'
-          traces: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
-        propertyName: signal
-      oneOf:
-      - $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
-      - $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregation'
-      - $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregation'
-      type: object
     Querybuildertypesv5ClickHouseQuery:
       properties:
         disabled:
@@ -5824,10 +5832,7 @@ components:
       properties:
         name:
           type: string
-        value:
-          oneOf:
-          - type: number
-          - type: string
+        value: {}
       type: object
     Querybuildertypesv5FunctionName:
       enum:
@@ -5876,11 +5881,7 @@ components:
       properties:
         key:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-        value:
-          oneOf:
-          - type: string
-          - type: number
-          - type: boolean
+        value: {}
       type: object
     Querybuildertypesv5LimitBy:
       properties:
@@ -6203,29 +6204,39 @@ components:
           type: array
       type: object
     Querybuildertypesv5QueryEnvelope:
-      discriminator:
-        mapping:
-          builder_formula: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
-          builder_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
-          builder_trace_operator: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
-          clickhouse_sql: '#/components/schemas/Querybuildertypesv5QueryEnvelopeClickHouseSQL'
-          promql: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
-        propertyName: type
       oneOf:
-      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderTrace'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderLog'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderMetric'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeClickHouseSQL'
-      type: object
-    Querybuildertypesv5QueryEnvelopeBuilder:
       properties:
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5BuilderQuerySpec'
+        spec: {}
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      type: object
+    Querybuildertypesv5QueryEnvelopeBuilderLog:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregation'
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      type: object
+    Querybuildertypesv5QueryEnvelopeBuilderMetric:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregation'
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      type: object
+    Querybuildertypesv5QueryEnvelopeBuilderTrace:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
         type:
           $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
       type: object
     Querybuildertypesv5QueryEnvelopeClickHouseSQL:
       properties:
@@ -6233,8 +6244,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5ClickHouseQuery'
         type:
           $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
       type: object
     Querybuildertypesv5QueryEnvelopeFormula:
       properties:
@@ -6242,8 +6251,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderFormula'
         type:
           $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
       type: object
     Querybuildertypesv5QueryEnvelopePromQL:
       properties:
@@ -6251,8 +6258,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5PromQuery'
         type:
           $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
       type: object
     Querybuildertypesv5QueryEnvelopeTraceOperator:
       properties:
@@ -6260,8 +6265,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderTraceOperator'
         type:
           $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
       type: object
     Querybuildertypesv5QueryRangeRequest:
       description: Request body for the v5 query range endpoint. Supports builder
@@ -6465,17 +6468,7 @@ components:
       properties:
         type:
           $ref: '#/components/schemas/Querybuildertypesv5VariableType'
-        value:
-          oneOf:
-          - type: string
-          - type: number
-          - type: boolean
-          - items:
-              oneOf:
-              - type: string
-              - type: number
-              - type: boolean
-            type: array
+        value: {}
       type: object
     Querybuildertypesv5VariableType:
       enum:
@@ -7903,17 +7896,6 @@ components:
       required:
       - id
       type: object
-    VariableDefaultValue:
-      type: object
-    VariableDisplay:
-      properties:
-        description:
-          type: string
-        hidden:
-          type: boolean
-        name:
-          type: string
-      type: object
     ZeustypesGettableHost:
       properties:
         hosts:

docs/contributing/go/errors.md

@@ -36,55 +36,6 @@ var (
 
 > 💡 **Note**: Error codes must match the regex `^[a-z_]+$` otherwise the code will panic.
 
-### Message
-The primary, human-readable summary of what went wrong, set when the error is created via `errors.New` / `errors.Newf`. Note there are two distinct `message` fields in the response: this top-level one states the overall failure, while each entry under [Additional](#additional) carries its own [message](#message-1) explaining one specific facet of it.
-
-### Url
-An optional link to documentation that explains the error in more depth, set with `WithUrl`. It is left empty when the error has no associated doc.
-
-```go
-return errors.New(errors.TypeInvalidInput, CodeBadThing, "bad thing").
-    WithUrl("https://signoz.io/docs/...")
-```
-
-### Additional
-`errors` is a list of supplementary details that explain the top-level `message`. Each entry has its own `message` and `suggestions`, so a single error can surface several distinct problems individually. Attach details with `WithAdditional` (message only) or `WithSuggestiveAdditional` (message plus the suggestions that belong to it):
-
-#### Message
-A single, self-contained sentence describing one specific facet of the error (e.g. ``field `filed` not found``), distinct from the top-level [Message](#message). Prefer one detail per distinct problem over concatenating several into one message.
-
-#### Suggestions
-The suggestions tied to that specific detail — typically a ``did you mean: `x` `` correction for the value the detail is about. These are distinct from the error-wide [Suggestions](#suggestions) below: detail-scoped suggestions never leak into the top-level list.
-
-```go
-return errors.NewInvalidInputf(errors.CodeInvalidInput, "unknown field %q", field).
-    WithAdditional("field `field` not found")
-return errors.NewInvalidInputf(errors.CodeInvalidInput, "unknown field %q", field).
-    WithSuggestiveAdditional("field `filed` not found", "did you mean: `field`")
-```
-
-### Retry
-Carries the `delay` the client should wait before retrying, set with `WithRetryAfter`. It is `null` when the error is not retryable.
-
-```go
-return errors.NewTimeoutf(CodeSlow, "upstream timed out").
-    WithRetryAfter(5 * time.Second)
-```
-
-### Suggestions
-`WithSuggestions` sets the error-wide `suggestions` list — hints about the error as a whole (e.g. "narrow the time range window"), as opposed to suggestions tied to a single detail. Prefer the builders in [pkg/errors/suggestions.go](/pkg/errors/suggestions.go) over hand-writing the strings so the phrasing stays consistent:
-
-- `NewSuggestionsOnLevenshteinDistance(invalidInput, noun, validInputs)` — returns a ``did you mean: `x` `` correction (when a close typo match exists) followed by the valid-references list.
-- `NewValidReferences(noun, values...)` — formats a capped list as ``valid <noun> are `a`, `b` `` (e.g. `"valid fields are"`, `"valid keys are"`). Returns `""` for an empty set.
-- `NewSuggestionsFromFunc(produce)` — wraps a caller-computed correction string as a one-element ``did you mean: `x` `` slice (or nil when it returns `""`), for callers with their own matching strategy.
-
-`noun` names the kind of value being suggested. Use one of the exported `Noun*` constants (`errors.NounFields`, `errors.NounKeys`, `errors.NounServices`, …) so the wording stays uniform across the codebase.
-
-```go
-return errors.NewInvalidInputf(errors.CodeInvalidInput, "unknown field %q", field).
-    WithSuggestions(errors.NewSuggestionsOnLevenshteinDistance(field, errors.NounFields, validFields)...)
-```
-
 ## Show me some examples
 
 ### Using the error

ee/authz/openfgaauthz/provider.go

@@ -143,10 +143,6 @@ func (provider *provider) List(ctx context.Context, orgID valuer.UUID) ([]*autht
 	return provider.pkgAuthzService.List(ctx, orgID)
 }
 
-func (provider *provider) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
-	return provider.pkgAuthzService.Collect(ctx, orgID)
-}
-
 func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.UUID, names []string) ([]*authtypes.Role, error) {
 	return provider.pkgAuthzService.ListByOrgIDAndNames(ctx, orgID, names)
 }

frontend/public/locales/en/routes.json

@@ -15,8 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"role_edit": "Edit Role",
-	"role_create": "Create Role",
 	"members": "Members",
 	"service_accounts": "Service Accounts",
 	"mcp_server": "MCP Server"

frontend/public/locales/en/titles.json

@@ -82,8 +82,6 @@
 	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
-	"ROLE_CREATE": "SigNoz | Create Role",
-	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"

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

@@ -2178,21 +2178,16 @@ export interface ErrorsResponseerroradditionalDTO {
 	/**
 	 * @type string
 	 */
-	message: string;
+	message?: string;
 	/**
 	 * @type array
 	 */
-	suggestions: string[];
+	suggestions?: string[];
 }
 
-export type ErrorsResponseretryjsonDTOAnyOf = {
-	delay: TimeDurationDTO;
-};
-
-/**
- * @nullable
- */
-export type ErrorsResponseretryjsonDTO = ErrorsResponseretryjsonDTOAnyOf | null;
+export interface ErrorsResponseretryjsonDTO {
+	delay?: TimeDurationDTO;
+}
 
 export interface ErrorsJSONDTO {
 	/**
@@ -2202,24 +2197,24 @@ export interface ErrorsJSONDTO {
 	/**
 	 * @type array
 	 */
-	errors: ErrorsResponseerroradditionalDTO[];
+	errors?: ErrorsResponseerroradditionalDTO[];
 	/**
 	 * @type string
 	 */
 	message: string;
-	retry: ErrorsResponseretryjsonDTO | null;
+	retry?: ErrorsResponseretryjsonDTO;
 	/**
 	 * @type array
 	 */
-	suggestions: string[];
+	suggestions?: string[];
 	/**
 	 * @type string
 	 */
-	type: string;
+	type?: string;
 	/**
-	 * @type string,null
+	 * @type string
 	 */
-	url: string | null;
+	url?: string;
 }
 
 export interface AuthtypesOrgSessionContextDTO {
@@ -3271,37 +3266,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface VariableDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	hidden?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
-export interface DashboardTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display?: VariableDisplayDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3333,6 +3297,9 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3352,6 +3319,7 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3363,7 +3331,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label: string;
+	label?: string;
 	/**
 	 * @type string
 	 */
@@ -3432,14 +3400,12 @@ export interface Querybuildertypesv5FilterDTO {
 	expression?: string;
 }
 
-export type Querybuildertypesv5FunctionArgDTOValue = number | string;
-
 export interface Querybuildertypesv5FunctionArgDTO {
 	/**
 	 * @type string
 	 */
 	name?: string;
-	value?: Querybuildertypesv5FunctionArgDTOValue;
+	value?: unknown;
 }
 
 export enum Querybuildertypesv5FunctionNameDTO {
@@ -3954,33 +3920,24 @@ export interface DashboardtypesDashboardDTO {
 	updatedBy?: string;
 }
 
-export enum DashboardtypesDatasourcePluginVariantStructDTOKind {
+export enum DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
-export type DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf = {
+export interface DashboardtypesSigNozDatasourceSpecDTO {
 	[key: string]: unknown;
-};
+}
 
-/**
- * @nullable
- */
-export type DashboardtypesDatasourcePluginVariantStructDTOSpec =
-	DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf | null;
-
-export interface DashboardtypesDatasourcePluginVariantStructDTO {
+export interface DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO {
 	/**
 	 * @enum signoz/Datasource
 	 * @type string
 	 */
-	kind: DashboardtypesDatasourcePluginVariantStructDTOKind;
-	/**
-	 * @type object,null
-	 */
-	spec: DashboardtypesDatasourcePluginVariantStructDTOSpec;
+	kind: DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind;
+	spec: DashboardtypesSigNozDatasourceSpecDTO;
 }
 
 export type DashboardtypesDatasourcePluginDTO =
-	DashboardtypesDatasourcePluginVariantStructDTO;
+	DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO;
 
 export interface DashboardtypesDatasourceSpecDTO {
 	/**
@@ -4030,10 +3987,12 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4272,21 +4231,26 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDa
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTOKind {
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 }
-export type Querybuildertypesv5BuilderQuerySpecDTO =
-	| Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO
-	| Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO
-	| Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregationDTO;
-
-export enum Querybuildertypesv5QueryEnvelopeBuilderDTOType {
+export enum Querybuildertypesv5QueryTypeDTO {
 	builder_query = 'builder_query',
+	builder_formula = 'builder_formula',
+	builder_trace_operator = 'builder_trace_operator',
+	clickhouse_sql = 'clickhouse_sql',
+	promql = 'promql',
 }
-export interface Querybuildertypesv5QueryEnvelopeBuilderDTO {
-	spec?: Querybuildertypesv5BuilderQuerySpecDTO;
-	/**
-	 * @type string
-	 * @enum builder_query
-	 */
-	type: Querybuildertypesv5QueryEnvelopeBuilderDTOType;
+export interface Querybuildertypesv5QueryEnvelopeBuilderTraceDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO;
+	type?: Querybuildertypesv5QueryTypeDTO;
+}
+
+export interface Querybuildertypesv5QueryEnvelopeBuilderLogDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO;
+	type?: Querybuildertypesv5QueryTypeDTO;
+}
+
+export interface Querybuildertypesv5QueryEnvelopeBuilderMetricDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregationDTO;
+	type?: Querybuildertypesv5QueryTypeDTO;
 }
 
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
@@ -4321,16 +4285,9 @@ export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	order?: Querybuildertypesv5OrderByDTO[];
 }
 
-export enum Querybuildertypesv5QueryEnvelopeFormulaDTOType {
-	builder_formula = 'builder_formula',
-}
 export interface Querybuildertypesv5QueryEnvelopeFormulaDTO {
 	spec?: Querybuildertypesv5QueryBuilderFormulaDTO;
-	/**
-	 * @type string
-	 * @enum builder_formula
-	 */
-	type: Querybuildertypesv5QueryEnvelopeFormulaDTOType;
+	type?: Querybuildertypesv5QueryTypeDTO;
 }
 
 export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
@@ -4391,16 +4348,9 @@ export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
-export enum Querybuildertypesv5QueryEnvelopeTraceOperatorDTOType {
-	builder_trace_operator = 'builder_trace_operator',
-}
 export interface Querybuildertypesv5QueryEnvelopeTraceOperatorDTO {
 	spec?: Querybuildertypesv5QueryBuilderTraceOperatorDTO;
-	/**
-	 * @type string
-	 * @enum builder_trace_operator
-	 */
-	type: Querybuildertypesv5QueryEnvelopeTraceOperatorDTOType;
+	type?: Querybuildertypesv5QueryTypeDTO;
 }
 
 export interface Querybuildertypesv5PromQueryDTO {
@@ -4427,16 +4377,9 @@ export interface Querybuildertypesv5PromQueryDTO {
 	step?: Querybuildertypesv5StepDTO;
 }
 
-export enum Querybuildertypesv5QueryEnvelopePromQLDTOType {
-	promql = 'promql',
-}
 export interface Querybuildertypesv5QueryEnvelopePromQLDTO {
 	spec?: Querybuildertypesv5PromQueryDTO;
-	/**
-	 * @type string
-	 * @enum promql
-	 */
-	type: Querybuildertypesv5QueryEnvelopePromQLDTOType;
+	type?: Querybuildertypesv5QueryTypeDTO;
 }
 
 export interface Querybuildertypesv5ClickHouseQueryDTO {
@@ -4458,24 +4401,40 @@ export interface Querybuildertypesv5ClickHouseQueryDTO {
 	query?: string;
 }
 
-export enum Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType {
-	clickhouse_sql = 'clickhouse_sql',
-}
 export interface Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO {
 	spec?: Querybuildertypesv5ClickHouseQueryDTO;
-	/**
-	 * @type string
-	 * @enum clickhouse_sql
-	 */
-	type: Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType;
+	type?: Querybuildertypesv5QueryTypeDTO;
 }
 
 export type Querybuildertypesv5QueryEnvelopeDTO =
-	| Querybuildertypesv5QueryEnvelopeBuilderDTO
-	| Querybuildertypesv5QueryEnvelopeFormulaDTO
-	| Querybuildertypesv5QueryEnvelopeTraceOperatorDTO
-	| Querybuildertypesv5QueryEnvelopePromQLDTO
-	| Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO;
+	| (Querybuildertypesv5QueryEnvelopeBuilderTraceDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopeBuilderLogDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopeBuilderMetricDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopeFormulaDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopeTraceOperatorDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopePromQLDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  })
+	| (Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO & {
+			spec?: unknown;
+			type?: Querybuildertypesv5QueryTypeDTO;
+	  });
 
 /**
  * Composite query containing one or more query envelopes. Each query envelope specifies its type and corresponding spec.
@@ -4573,9 +4532,9 @@ export interface DashboardtypesPanelSpecDTO {
 	links?: DashboardLinkDTO[];
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	queries: DashboardtypesQueryDTO[] | null;
+	queries: DashboardtypesQueryDTO[];
 }
 
 export interface DashboardtypesPanelDTO {
@@ -4605,9 +4564,7 @@ export type DashboardtypesLayoutDTO =
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
 }
-export interface VariableDefaultValueDTO {
-	[key: string]: unknown;
-}
+export type DashboardtypesVariableDefaultValueDTO = string | string[];
 
 export enum DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind {
 	'signoz/DynamicVariable' = 'signoz/DynamicVariable',
@@ -4665,6 +4622,15 @@ export type DashboardtypesVariablePluginDTO =
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTO
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTO;
 
+export enum DashboardtypesListVariableSpecSortDTO {
+	none = 'none',
+	'alphabetical-asc' = 'alphabetical-asc',
+	'alphabetical-desc' = 'alphabetical-desc',
+	'numerical-asc' = 'numerical-asc',
+	'numerical-desc' = 'numerical-desc',
+	'alphabetical-ci-asc' = 'alphabetical-ci-asc',
+	'alphabetical-ci-desc' = 'alphabetical-ci-desc',
+}
 export interface DashboardtypesListVariableSpecDTO {
 	/**
 	 * @type boolean
@@ -4682,17 +4648,15 @@ export interface DashboardtypesListVariableSpecDTO {
 	 * @type string
 	 */
 	customAllValue?: string;
-	defaultValue?: VariableDefaultValueDTO;
+	defaultValue?: DashboardtypesVariableDefaultValueDTO;
 	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
+	 * @minLength 1
 	 */
-	name?: string;
+	name: string;
 	plugin?: DashboardtypesVariablePluginDTO;
-	/**
-	 * @type string,null
-	 */
-	sort?: string | null;
+	sort?: DashboardtypesListVariableSpecSortDTO;
 }
 
 export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO {
@@ -4704,21 +4668,38 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display: DashboardtypesDisplayDTO;
+	/**
+	 * @type string
+	 * @minLength 1
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
-	spec: DashboardTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
+	spec: DashboardtypesTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -6812,11 +6793,9 @@ export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	start: number;
 }
 
-export type Querybuildertypesv5LabelDTOValue = string | number | boolean;
-
 export interface Querybuildertypesv5LabelDTO {
 	key?: TelemetrytypesTelemetryFieldKeyDTO;
-	value?: Querybuildertypesv5LabelDTOValue;
+	value?: unknown;
 }
 
 export interface Querybuildertypesv5BucketDTO {
@@ -7426,20 +7405,9 @@ export enum Querybuildertypesv5VariableTypeDTO {
 	custom = 'custom',
 	text = 'text',
 }
-export type Querybuildertypesv5VariableItemDTOValueOneOfItem =
-	| string
-	| number
-	| boolean;
-
-export type Querybuildertypesv5VariableItemDTOValue =
-	| string
-	| number
-	| boolean
-	| Querybuildertypesv5VariableItemDTOValueOneOfItem[];
-
 export interface Querybuildertypesv5VariableItemDTO {
 	type?: Querybuildertypesv5VariableTypeDTO;
-	value?: Querybuildertypesv5VariableItemDTOValue;
+	value?: unknown;
 }
 
 export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
@@ -7487,13 +7455,6 @@ export interface Querybuildertypesv5QueryRangeResponseDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
-export enum Querybuildertypesv5QueryTypeDTO {
-	builder_query = 'builder_query',
-	builder_formula = 'builder_formula',
-	builder_trace_operator = 'builder_trace_operator',
-	clickhouse_sql = 'clickhouse_sql',
-	promql = 'promql',
-}
 export interface RenderErrorResponseDTO {
 	error: ErrorsJSONDTO;
 	/**

frontend/src/api/v1/invite/bulk/create.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UsersProps } from 'types/api/user/inviteUsers';
+
+/**
+ * @deprecated Use the generated `useCreateBulkInvite` hook (or `createBulkInvite` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const inviteUsers = async (
+	users: UsersProps,
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.post(`/invite/bulk`, users);
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default inviteUsers;

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -21,8 +21,6 @@ interface ErrorInPlaceProps {
 	width?: string | number;
 	/** Custom content instead of ErrorContent */
 	children?: ReactNode;
-	/** Test ID for testing */
-	'data-testid'?: string;
 }
 
 /**
@@ -46,7 +44,6 @@ function ErrorInPlace({
 	height = '100%',
 	width = '100%',
 	children,
-	'data-testid': dataTestId,
 }: ErrorInPlaceProps): JSX.Element {
 	const containerStyle: React.CSSProperties = {
 		display: 'flex',
@@ -62,11 +59,7 @@ function ErrorInPlace({
 	};
 
 	return (
-		<div
-			className={`error-in-place ${className}`.trim()}
-			style={containerStyle}
-			data-testid={dataTestId}
-		>
+		<div className={`error-in-place ${className}`.trim()} style={containerStyle}>
 			{children || <ErrorContent error={error} />}
 		</div>
 	);

frontend/src/components/InviteMembers/InviteMembers.module.scss

@@ -1,163 +0,0 @@
-.inviteMembers {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	width: 100%;
-}
-
-.table {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-}
-
-.header {
-	display: flex;
-	gap: var(--spacing-8);
-	align-items: center;
-	width: 100%;
-}
-
-.headerCellEmail {
-	flex: 1 1 0;
-	min-width: 0;
-}
-
-.headerCellRole {
-	flex: 0 0 160px;
-	width: 160px;
-}
-
-.headerCellAction {
-	flex: 0 0 32px;
-	width: 32px;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	width: 100%;
-}
-
-.row {
-	display: flex;
-	gap: var(--spacing-8);
-	align-items: flex-start;
-	width: 100%;
-}
-
-.cellEmail {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	flex: 1 1 0;
-	min-width: 0;
-
-	--input-background: var(
-		--invite-members-field-background,
-		var(--l2-background)
-	);
-	--input-hover-background: var(
-		--invite-members-field-background,
-		var(--l2-background)
-	);
-	--input-focus-background: var(
-		--invite-members-field-background,
-		var(--l2-background)
-	);
-	--input-disabled-background: var(
-		--invite-members-field-background,
-		var(--l2-background)
-	);
-
-	input::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.cellRole {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	flex: 0 0 160px;
-	width: 160px;
-
-	:global(.roles-single-select) {
-		width: 100%;
-
-		:global(.ant-select-selector) {
-			background-color: var(
-				--invite-members-field-background,
-				var(--l2-background)
-			) !important;
-		}
-	}
-}
-
-.cellAction {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	flex: 0 0 32px;
-	width: 32px;
-	height: 32px;
-	align-items: center;
-	justify-content: center;
-}
-
-.errorText {
-	color: var(--danger-background);
-}
-
-.addRow {
-	display: flex;
-	justify-content: flex-start;
-	margin-top: var(--spacing-2);
-}
-
-.callout {
-	animation: shake 300ms ease-out;
-
-	&[data-type='success'] {
-		animation: none;
-	}
-}
-
-.results {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.resultsList {
-	margin: var(--spacing-2) 0 0 var(--spacing-8);
-	padding: 0;
-
-	li {
-		margin-bottom: var(--spacing-1);
-	}
-}
-
-@keyframes shake {
-	0% {
-		transform: translateX(0);
-	}
-
-	25% {
-		transform: translateX(5px);
-	}
-
-	50% {
-		transform: translateX(-5px);
-	}
-
-	75% {
-		transform: translateX(5px);
-	}
-
-	100% {
-		transform: translateX(0);
-	}
-}

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -1,221 +0,0 @@
-import { CircleAlert, Plus, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import RolesSelect from 'components/RolesSelect/RolesSelect';
-
-import styles from './InviteMembers.module.scss';
-import { InviteMembersProps } from './types';
-import { useInviteMembers } from './useInviteMembers';
-
-function InviteMembers({
-	className,
-	initialRowCount = 3,
-	minRows = 1,
-	emailPlaceholder = 'e.g. john@signoz.io',
-	showHeader = true,
-	showAddButton = true,
-	onSuccess,
-	onPartialSuccess,
-	onAllFailed,
-	renderFooter,
-}: InviteMembersProps): JSX.Element {
-	const {
-		rows,
-		emailValidity,
-		hasInvalidEmails,
-		hasInvalidRoles,
-		isSubmitting,
-		inviteResults,
-		addRow,
-		removeRow,
-		updateEmail,
-		updateRole,
-		reset,
-		submit,
-		touchedRows,
-		failedResults,
-		successResults,
-	} = useInviteMembers({
-		initialRowCount,
-		onSuccess,
-		onPartialSuccess,
-		onAllFailed,
-	});
-
-	const canSubmit = !isSubmitting && touchedRows.length > 0;
-	const canRemoveRow = rows.length > minRows;
-
-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for team members';
-		}
-		return 'Please select roles for team members';
-	};
-
-	const hasValidationErrors = hasInvalidEmails || hasInvalidRoles;
-	const hasResults = inviteResults !== null;
-	const hasFailures = failedResults.length > 0;
-	const hasSuccesses = successResults.length > 0;
-
-	return (
-		<div className={cx(styles.inviteMembers, className)}>
-			<div className={styles.table}>
-				{showHeader && (
-					<div className={styles.header}>
-						<Typography.Text
-							size="base"
-							weight="semibold"
-							className={styles.headerCellEmail}
-						>
-							Email address
-						</Typography.Text>
-						<Typography.Text
-							size="base"
-							weight="semibold"
-							className={styles.headerCellRole}
-						>
-							Role
-						</Typography.Text>
-						<div className={styles.headerCellAction} />
-					</div>
-				)}
-
-				<div className={styles.rows}>
-					{rows.map((row) => (
-						<div key={row.id} className={styles.row}>
-							<div className={styles.cellEmail}>
-								<Input
-									type="email"
-									placeholder={emailPlaceholder}
-									value={row.email}
-									onChange={(e): void => updateEmail(row.id, e.target.value)}
-									name={`invite-email-${row.id}`}
-									autoComplete="email"
-									data-testid={`invite-email-${row.id}`}
-								/>
-								{emailValidity[row.id] === false && row.email.trim() !== '' && (
-									<Typography.Text size="small" className={styles.errorText}>
-										Invalid email address
-									</Typography.Text>
-								)}
-							</div>
-
-							<div className={styles.cellRole}>
-								<RolesSelect
-									mode="single"
-									value={row.roleId || undefined}
-									onChange={(roleId): void => updateRole(row.id, roleId)}
-									placeholder="Select role"
-									allowClear={false}
-									id={`invite-role-${row.id}`}
-								/>
-							</div>
-
-							<div className={styles.cellAction}>
-								{canRemoveRow && (
-									<Button
-										variant="ghost"
-										color="destructive"
-										onClick={(): void => removeRow(row.id)}
-										aria-label="Remove row"
-										data-testid={`invite-remove-${row.id}`}
-									>
-										<Trash2 size={12} />
-									</Button>
-								)}
-							</div>
-						</div>
-					))}
-				</div>
-
-				{showAddButton && (
-					<div className={styles.addRow}>
-						<Button
-							variant="dashed"
-							color="secondary"
-							prefix={<Plus size={12} />}
-							onClick={addRow}
-							data-testid="invite-add-row"
-						>
-							Add another
-						</Button>
-					</div>
-				)}
-			</div>
-
-			{hasValidationErrors && (
-				<Callout
-					type="error"
-					size="small"
-					showIcon
-					icon={<CircleAlert size={12} />}
-					className={styles.callout}
-					data-testid="invite-validation-error"
-				>
-					{getValidationErrorMessage()}
-				</Callout>
-			)}
-
-			{hasResults && hasFailures && (
-				<Callout
-					type="error"
-					size="small"
-					showIcon
-					icon={<CircleAlert size={12} />}
-					className={styles.callout}
-					data-testid="invite-api-error"
-				>
-					<div className={styles.results}>
-						{hasSuccesses && (
-							<Typography.Text size="small">
-								{successResults.length} invite(s) sent successfully.
-							</Typography.Text>
-						)}
-						<Typography.Text size="small">
-							{failedResults.length} invite(s) failed:
-						</Typography.Text>
-						<ul className={styles.resultsList}>
-							{failedResults.map((result) => (
-								<li key={result.email}>
-									<Typography.Text size="small">
-										{result.email}: {result.error}
-									</Typography.Text>
-								</li>
-							))}
-						</ul>
-					</div>
-				</Callout>
-			)}
-
-			{hasResults && !hasFailures && hasSuccesses && (
-				<Callout
-					type="success"
-					size="small"
-					showIcon
-					className={styles.callout}
-					data-testid="invite-success"
-				>
-					<Typography.Text size="small">
-						{successResults.length} invite(s) sent successfully!
-					</Typography.Text>
-				</Callout>
-			)}
-
-			{renderFooter?.({
-				submit,
-				reset,
-				canSubmit,
-				isSubmitting,
-				touchedCount: touchedRows.length,
-			})}
-		</div>
-	);
-}
-
-export default InviteMembers;

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

@@ -1,240 +0,0 @@
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import InviteMembers from '../InviteMembers';
-
-import {
-	CREATE_USER_ENDPOINT,
-	createErrorHandler,
-	createRolesHandler,
-	createSuccessHandler,
-	VALID_EMAIL,
-} from './testUtils';
-
-describe('InviteMembers - Edge Cases', () => {
-	beforeEach(() => {
-		server.use(createRolesHandler(), createSuccessHandler());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('reset behavior', () => {
-		it('clears all rows when reset is called', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					initialRowCount={2}
-					renderFooter={({ reset }): JSX.Element => (
-						<button data-testid="reset-btn" onClick={reset}>
-							Reset
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.type(emailInputs[1], 'bob@signoz.io');
-
-			await user.click(screen.getByTestId('reset-btn'));
-
-			const resetInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			expect(resetInputs).toHaveLength(2);
-			resetInputs.forEach((input) => {
-				expect(input).toHaveValue('');
-			});
-		});
-
-		it('clears results on reset', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit, reset }): JSX.Element => (
-						<>
-							<button data-testid="submit-btn" onClick={submit}>
-								Submit
-							</button>
-							<button data-testid="reset-btn" onClick={reset}>
-								Reset
-							</button>
-						</>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-			await expect(
-				screen.findByTestId('invite-success'),
-			).resolves.toBeInTheDocument();
-
-			await user.click(screen.getByTestId('reset-btn'));
-
-			expect(screen.queryByTestId('invite-success')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('results cleared on edit', () => {
-		it('clears API error when email is edited', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(createErrorHandler('already_exists', 'User already exists'));
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-			await expect(
-				screen.findByTestId('invite-api-error'),
-			).resolves.toBeInTheDocument();
-
-			await user.type(emailInputs[0], 'x');
-
-			await waitFor(() => {
-				expect(screen.queryByTestId('invite-api-error')).not.toBeInTheDocument();
-			});
-		});
-
-		it('clears API error when role is changed', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(createErrorHandler('already_exists', 'User already exists'));
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-			await expect(
-				screen.findByTestId('invite-api-error'),
-			).resolves.toBeInTheDocument();
-
-			const viewerElements = screen.getAllByText('Viewer');
-			await user.click(viewerElements[0]);
-			const editorOptions = await screen.findAllByText('Editor');
-			await user.click(editorOptions[editorOptions.length - 1]);
-
-			await waitFor(() => {
-				expect(screen.queryByTestId('invite-api-error')).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('empty submission', () => {
-		it('does not submit when no rows are touched', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const onSuccess = jest.fn();
-
-			render(
-				<InviteMembers
-					onSuccess={onSuccess}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			expect(onSuccess).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('submitting state', () => {
-		it('disables submit while submitting', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit, isSubmitting }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit} disabled={isSubmitting}>
-							{isSubmitting ? 'Submitting...' : 'Submit'}
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			const submitBtn = screen.getByTestId('submit-btn');
-			await user.click(submitBtn);
-
-			await waitFor(() => {
-				expect(screen.queryByText('Submitting...')).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('whitespace handling', () => {
-		it('trims email whitespace before submission', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const calls: { email: string }[] = [];
-
-			server.use(
-				rest.post(CREATE_USER_ENDPOINT, async (req, res, ctx) => {
-					const body = await req.json();
-					calls.push(body);
-					return res(ctx.status(201), ctx.json({ data: { id: 'user-123' } }));
-				}),
-			);
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], '  alice@signoz.io  ');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(calls).toHaveLength(1);
-				expect(calls[0].email).toBe('alice@signoz.io');
-			});
-		});
-	});
-});

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

@@ -1,95 +0,0 @@
-import { server } from 'mocks-server/server';
-import { render, screen } from 'tests/test-utils';
-
-import InviteMembers from '../InviteMembers';
-
-import { createRolesHandler, createSuccessHandler } from './testUtils';
-
-describe('InviteMembers - Rendering', () => {
-	beforeEach(() => {
-		server.use(createRolesHandler(), createSuccessHandler());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders default initial row count of 3', () => {
-		render(<InviteMembers />);
-
-		const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-		expect(emailInputs).toHaveLength(3);
-	});
-
-	it('renders custom initial row count', () => {
-		render(<InviteMembers initialRowCount={5} />);
-
-		const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-		expect(emailInputs).toHaveLength(5);
-	});
-
-	it('renders header by default', () => {
-		render(<InviteMembers />);
-
-		expect(screen.getByText('Email address')).toBeInTheDocument();
-		expect(screen.getByText('Role')).toBeInTheDocument();
-	});
-
-	it('hides header when showHeader is false', () => {
-		render(<InviteMembers showHeader={false} />);
-
-		expect(screen.queryByText('Email address')).not.toBeInTheDocument();
-		expect(screen.queryByText('Role')).not.toBeInTheDocument();
-	});
-
-	it('renders add button by default', () => {
-		render(<InviteMembers />);
-
-		expect(
-			screen.getByRole('button', { name: /add another/i }),
-		).toBeInTheDocument();
-	});
-
-	it('hides add button when showAddButton is false', () => {
-		render(<InviteMembers showAddButton={false} />);
-
-		expect(
-			screen.queryByRole('button', { name: /add another/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('renders custom email placeholder', () => {
-		render(<InviteMembers emailPlaceholder="custom@placeholder.com" />);
-
-		const emailInputs = screen.getAllByPlaceholderText('custom@placeholder.com');
-		expect(emailInputs).toHaveLength(3);
-	});
-
-	it('applies custom className', () => {
-		const { container } = render(<InviteMembers className="custom-class" />);
-
-		expect(container.querySelector('.custom-class')).toBeInTheDocument();
-	});
-
-	it('renders footer via renderFooter prop', () => {
-		render(
-			<InviteMembers
-				renderFooter={({ canSubmit }): JSX.Element => (
-					<button data-testid="custom-footer" disabled={!canSubmit}>
-						Custom Submit
-					</button>
-				)}
-			/>,
-		);
-
-		expect(screen.getByTestId('custom-footer')).toBeInTheDocument();
-		expect(screen.getByTestId('custom-footer')).toBeDisabled();
-	});
-
-	it('renders role select for each row', () => {
-		render(<InviteMembers initialRowCount={2} />);
-
-		const roleSelects = screen.getAllByText('Select role');
-		expect(roleSelects).toHaveLength(2);
-	});
-});

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

@@ -1,95 +0,0 @@
-import { server } from 'mocks-server/server';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import InviteMembers from '../InviteMembers';
-
-import { createRolesHandler, createSuccessHandler } from './testUtils';
-
-describe('InviteMembers - Row Management', () => {
-	beforeEach(() => {
-		server.use(createRolesHandler(), createSuccessHandler());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('adds a row when "Add another" is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembers initialRowCount={2} />);
-
-		expect(screen.getAllByPlaceholderText('e.g. john@signoz.io')).toHaveLength(2);
-
-		await user.click(screen.getByRole('button', { name: /add another/i }));
-
-		expect(screen.getAllByPlaceholderText('e.g. john@signoz.io')).toHaveLength(3);
-	});
-
-	it('removes a row when trash button is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembers initialRowCount={3} />);
-
-		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
-		expect(removeButtons).toHaveLength(3);
-
-		await user.click(removeButtons[0]);
-
-		expect(screen.getAllByPlaceholderText('e.g. john@signoz.io')).toHaveLength(2);
-	});
-
-	it('respects minRows constraint when removing rows', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembers initialRowCount={2} minRows={2} />);
-
-		expect(screen.queryAllByRole('button', { name: /remove row/i })).toHaveLength(
-			0,
-		);
-
-		await user.click(screen.getByRole('button', { name: /add another/i }));
-
-		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
-		expect(removeButtons).toHaveLength(3);
-
-		await user.click(removeButtons[0]);
-
-		expect(screen.getAllByPlaceholderText('e.g. john@signoz.io')).toHaveLength(2);
-		expect(screen.queryAllByRole('button', { name: /remove row/i })).toHaveLength(
-			0,
-		);
-	});
-
-	it('cannot remove rows below minRows=1 default', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembers initialRowCount={2} />);
-
-		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
-		await user.click(removeButtons[0]);
-
-		expect(screen.getAllByPlaceholderText('e.g. john@signoz.io')).toHaveLength(1);
-		expect(screen.queryAllByRole('button', { name: /remove row/i })).toHaveLength(
-			0,
-		);
-	});
-
-	it('preserves data in other rows when removing one', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembers initialRowCount={3} />);
-
-		const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-		await user.type(emailInputs[0], 'first@signoz.io');
-		await user.type(emailInputs[2], 'third@signoz.io');
-
-		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
-		await user.click(removeButtons[1]);
-
-		const remainingInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-		expect(remainingInputs).toHaveLength(2);
-		expect(remainingInputs[0]).toHaveValue('first@signoz.io');
-		expect(remainingInputs[1]).toHaveValue('third@signoz.io');
-	});
-});

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

@@ -1,362 +0,0 @@
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import InviteMembers from '../InviteMembers';
-
-import {
-	CREATE_USER_ENDPOINT,
-	createErrorHandler,
-	createRolesHandler,
-	createSuccessHandler,
-	createTrackingHandler,
-	VALID_EMAIL,
-} from './testUtils';
-
-describe('InviteMembers - Submission', () => {
-	beforeEach(() => {
-		server.use(createRolesHandler(), createSuccessHandler());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('API calls', () => {
-		it('calls createUser API for each touched row', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const { handler, calls } = createTrackingHandler();
-			server.use(handler);
-
-			render(
-				<InviteMembers
-					initialRowCount={3}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(calls).toHaveLength(1);
-				expect(calls[0]).toMatchObject({
-					email: 'alice@signoz.io',
-					userRoles: [{ id: 'role-viewer' }],
-				});
-			});
-		});
-
-		it('calls createUser API for multiple touched rows', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const { handler, calls } = createTrackingHandler();
-			server.use(handler);
-
-			render(
-				<InviteMembers
-					initialRowCount={3}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-
-			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.type(emailInputs[1], 'bob@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const editorOptions = await screen.findAllByText('Editor');
-			await user.click(editorOptions[editorOptions.length - 1]);
-
-			await user.type(emailInputs[2], 'charlie@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const adminOptions = await screen.findAllByText('Admin');
-			await user.click(adminOptions[adminOptions.length - 1]);
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(calls).toHaveLength(3);
-			});
-
-			expect(calls[0]).toMatchObject({
-				email: 'alice@signoz.io',
-				userRoles: [{ id: 'role-viewer' }],
-			});
-			expect(calls[1]).toMatchObject({
-				email: 'bob@signoz.io',
-				userRoles: [{ id: 'role-editor' }],
-			});
-			expect(calls[2]).toMatchObject({
-				email: 'charlie@signoz.io',
-				userRoles: [{ id: 'role-admin' }],
-			});
-		});
-	});
-
-	describe('callbacks', () => {
-		it('calls onSuccess when all invites succeed', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const onSuccess = jest.fn();
-
-			render(
-				<InviteMembers
-					onSuccess={onSuccess}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(onSuccess).toHaveBeenCalled();
-			});
-		});
-
-		it('calls onAllFailed when all invites fail', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const onAllFailed = jest.fn();
-
-			server.use(createErrorHandler('already_exists', 'User already exists'));
-
-			render(
-				<InviteMembers
-					onAllFailed={onAllFailed}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(onAllFailed).toHaveBeenCalledWith(
-					expect.arrayContaining([
-						expect.objectContaining({
-							email: VALID_EMAIL,
-							success: false,
-						}),
-					]),
-				);
-			});
-		});
-
-		it('calls onPartialSuccess when some invites succeed and some fail', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const onPartialSuccess = jest.fn();
-			const onSuccess = jest.fn();
-			const onAllFailed = jest.fn();
-			const apiCalls: string[] = [];
-			let callCount = 0;
-
-			server.use(
-				createRolesHandler(),
-				rest.post(CREATE_USER_ENDPOINT, async (req, res, ctx) => {
-					const body = await req.json();
-					apiCalls.push(body.email);
-					callCount++;
-					if (callCount === 1) {
-						return res(ctx.status(201), ctx.json({ data: { id: 'user-123' } }));
-					}
-					return res(
-						ctx.status(409),
-						ctx.json({
-							error: {
-								code: 'already_exists',
-								message: 'User already exists',
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<InviteMembers
-					initialRowCount={2}
-					onSuccess={onSuccess}
-					onPartialSuccess={onPartialSuccess}
-					onAllFailed={onAllFailed}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-
-			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.type(emailInputs[1], 'bob@signoz.io');
-			await user.click(screen.getAllByText('Select role')[0]);
-			const editorOptions = await screen.findAllByText('Editor');
-			await user.click(editorOptions[editorOptions.length - 1]);
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await waitFor(() => {
-				expect(apiCalls).toHaveLength(2);
-			});
-
-			expect(apiCalls).toStrictEqual(['alice@signoz.io', 'bob@signoz.io']);
-			expect(onSuccess).not.toHaveBeenCalled();
-			expect(onAllFailed).not.toHaveBeenCalled();
-			expect(onPartialSuccess).toHaveBeenCalledWith(
-				expect.arrayContaining([
-					expect.objectContaining({ email: 'alice@signoz.io', success: true }),
-					expect.objectContaining({
-						email: 'bob@signoz.io',
-						success: false,
-						error: 'User already exists',
-					}),
-				]),
-			);
-
-			await expect(
-				screen.findByTestId('invite-api-error'),
-			).resolves.toBeInTheDocument();
-			expect(
-				screen.getByText('1 invite(s) sent successfully.'),
-			).toBeInTheDocument();
-			expect(screen.getByText('1 invite(s) failed:')).toBeInTheDocument();
-			expect(
-				screen.getByText('bob@signoz.io: User already exists'),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('result display', () => {
-		it('shows success callout when all invites succeed', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByTestId('invite-success'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows error callout with failed emails when API fails', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(createErrorHandler('already_exists', 'User already exists'));
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByTestId('invite-api-error'),
-			).resolves.toBeInTheDocument();
-			expect(screen.getByText(/1 invite\(s\) failed/)).toBeInTheDocument();
-		});
-	});
-
-	describe('footer props', () => {
-		it('provides correct canSubmit state', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ canSubmit }): JSX.Element => (
-						<button data-testid="submit-btn" disabled={!canSubmit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			expect(screen.getByTestId('submit-btn')).toBeDisabled();
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-
-			expect(screen.getByTestId('submit-btn')).not.toBeDisabled();
-		});
-
-		it('provides touchedCount', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					initialRowCount={3}
-					renderFooter={({ touchedCount }): JSX.Element => (
-						<span data-testid="touched-count">{touchedCount}</span>
-					)}
-				/>,
-			);
-
-			expect(screen.getByTestId('touched-count')).toHaveTextContent('0');
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], 'a@b.com');
-
-			expect(screen.getByTestId('touched-count')).toHaveTextContent('1');
-
-			await user.type(emailInputs[1], 'c@d.com');
-
-			expect(screen.getByTestId('touched-count')).toHaveTextContent('2');
-		});
-	});
-});

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

@@ -1,217 +0,0 @@
-import { server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import InviteMembers from '../InviteMembers';
-
-import {
-	createRolesHandler,
-	createSuccessHandler,
-	INVALID_EMAIL,
-	VALID_EMAIL,
-} from './testUtils';
-
-describe('InviteMembers - Validation', () => {
-	beforeEach(() => {
-		server.use(createRolesHandler(), createSuccessHandler());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('email validation', () => {
-		it('shows email validation error when email is invalid and role is selected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText('Please enter valid emails for team members'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows inline error for invalid email field', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText('Invalid email address'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('clears validation error when email is corrected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], INVALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText('Please enter valid emails for team members'),
-			).resolves.toBeInTheDocument();
-
-			await user.clear(emailInputs[0]);
-			await user.type(emailInputs[0], VALID_EMAIL);
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText('Please enter valid emails for team members'),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('role validation', () => {
-		it('shows role validation error when role is missing', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText('Please select roles for team members'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('clears role validation error when role is selected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText('Please select roles for team members'),
-			).resolves.toBeInTheDocument();
-
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText('Please select roles for team members'),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('combined validation', () => {
-		it('shows combined error when both email and role are invalid', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], INVALID_EMAIL);
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			await expect(
-				screen.findByText(
-					'Please enter valid emails and select roles for team members',
-				),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('touched rows', () => {
-		it('only validates touched rows (rows with email or role)', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(
-				<InviteMembers
-					initialRowCount={3}
-					renderFooter={({ submit }): JSX.Element => (
-						<button data-testid="submit-btn" onClick={submit}>
-							Submit
-						</button>
-					)}
-				/>,
-			);
-
-			const emailInputs = screen.getAllByPlaceholderText('e.g. john@signoz.io');
-			await user.type(emailInputs[0], VALID_EMAIL);
-			await user.click(screen.getAllByText('Select role')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(screen.getByTestId('submit-btn'));
-
-			expect(
-				screen.queryByTestId('invite-validation-error'),
-			).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/InviteMembers/__tests__/testUtils.ts

@@ -1,54 +0,0 @@
-import { RestHandler } from 'msw';
-import { rest } from 'mocks-server/server';
-
-export const CREATE_USER_ENDPOINT = '*/api/v2/users';
-export const LIST_ROLES_ENDPOINT = '*/api/v1/roles';
-
-export const MOCK_ROLES = [
-	{ id: 'role-admin', name: 'Admin', description: 'Admin role' },
-	{ id: 'role-editor', name: 'Editor', description: 'Editor role' },
-	{ id: 'role-viewer', name: 'Viewer', description: 'Viewer role' },
-];
-
-export const VALID_EMAIL = 'alice@signoz.io';
-export const INVALID_EMAIL = 'not-an-email';
-
-export function createSuccessHandler(): RestHandler {
-	return rest.post(CREATE_USER_ENDPOINT, (_, res, ctx) =>
-		res(ctx.status(201), ctx.json({ data: { id: 'user-123' } })),
-	);
-}
-
-export function createErrorHandler(
-	code: string,
-	message: string,
-	status = 409,
-): RestHandler {
-	return rest.post(CREATE_USER_ENDPOINT, (_, res, ctx) =>
-		res(
-			ctx.status(status),
-			ctx.json({
-				errors: [{ code, msg: message }],
-			}),
-		),
-	);
-}
-
-export function createRolesHandler(): RestHandler {
-	return rest.get(LIST_ROLES_ENDPOINT, (_, res, ctx) =>
-		res(ctx.status(200), ctx.json({ data: MOCK_ROLES })),
-	);
-}
-
-export function createTrackingHandler(): {
-	handler: RestHandler;
-	calls: unknown[];
-} {
-	const calls: unknown[] = [];
-	const handler = rest.post(CREATE_USER_ENDPOINT, async (req, res, ctx) => {
-		const body = await req.json();
-		calls.push(body);
-		return res(ctx.status(201), ctx.json({ data: { id: 'user-123' } }));
-	});
-	return { handler, calls };
-}

frontend/src/components/InviteMembers/types.ts

@@ -1,64 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface InviteMemberRow {
-	id: string;
-	email: string;
-	roleId: string;
-}
-
-export interface InviteResult {
-	email: string;
-	success: boolean;
-	error?: string;
-}
-
-export interface FooterRenderProps {
-	submit: () => Promise<InviteResult[]>;
-	reset: () => void;
-	canSubmit: boolean;
-	isSubmitting: boolean;
-	touchedCount: number;
-}
-
-export interface UseInviteMembersOptions {
-	initialRowCount?: number;
-	onSuccess?: () => void;
-	onPartialSuccess?: (results: InviteResult[]) => void;
-	onAllFailed?: (results: InviteResult[]) => void;
-}
-
-export interface UseInviteMembersReturn {
-	rows: InviteMemberRow[];
-	emailValidity: Record<string, boolean>;
-	hasInvalidEmails: boolean;
-	hasInvalidRoles: boolean;
-	isSubmitting: boolean;
-	inviteResults: InviteResult[] | null;
-
-	addRow: () => void;
-	removeRow: (id: string) => void;
-	updateEmail: (id: string, email: string) => void;
-	updateRole: (id: string, roleId: string | undefined) => void;
-	reset: () => void;
-	submit: () => Promise<InviteResult[]>;
-
-	touchedRows: InviteMemberRow[];
-	failedResults: InviteResult[];
-	successResults: InviteResult[];
-	canSubmit: boolean;
-}
-
-export interface InviteMembersProps {
-	className?: string;
-	initialRowCount?: number;
-	minRows?: number;
-	emailPlaceholder?: string;
-	showHeader?: boolean;
-	showAddButton?: boolean;
-
-	onSuccess?: () => void;
-	onPartialSuccess?: (results: InviteResult[]) => void;
-	onAllFailed?: (results: InviteResult[]) => void;
-
-	renderFooter?: (props: FooterRenderProps) => ReactNode;
-}

frontend/src/components/InviteMembers/useInviteMembers.ts

@@ -1,245 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { AxiosError } from 'axios';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { createUser } from 'api/generated/services/users';
-import { cloneDeep, debounce } from 'lodash-es';
-import { EMAIL_REGEX } from 'utils/app';
-import { getBaseUrl } from 'utils/basePath';
-import { v4 as uuid } from 'uuid';
-
-import {
-	InviteMemberRow,
-	InviteResult,
-	UseInviteMembersOptions,
-	UseInviteMembersReturn,
-} from './types';
-
-const createEmptyRow = (): InviteMemberRow => ({
-	id: uuid(),
-	email: '',
-	roleId: '',
-});
-
-const isRowTouched = (row: InviteMemberRow): boolean =>
-	row.email.trim() !== '' || row.roleId !== '';
-
-export function useInviteMembers(
-	options: UseInviteMembersOptions = {},
-): UseInviteMembersReturn {
-	const {
-		initialRowCount = 3,
-		onSuccess,
-		onPartialSuccess,
-		onAllFailed,
-	} = options;
-
-	const [rows, setRows] = useState<InviteMemberRow[]>(() =>
-		Array.from({ length: initialRowCount }, () => createEmptyRow()),
-	);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState(false);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [inviteResults, setInviteResults] = useState<InviteResult[] | null>(
-		null,
-	);
-
-	const touchedRows = useMemo(() => rows.filter(isRowTouched), [rows]);
-
-	const failedResults = useMemo(
-		() => inviteResults?.filter((r) => !r.success) ?? [],
-		[inviteResults],
-	);
-
-	const successResults = useMemo(
-		() => inviteResults?.filter((r) => r.success) ?? [],
-		[inviteResults],
-	);
-
-	const debouncedValidateEmail = useMemo(
-		() =>
-			debounce((email: string, rowId: string) => {
-				const isValid = EMAIL_REGEX.test(email);
-				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
-			}, 500),
-		[],
-	);
-
-	const validateAllRows = useCallback((): boolean => {
-		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;
-		const updatedEmailValidity: Record<string, boolean> = {};
-
-		const touched = rows.filter(isRowTouched);
-
-		touched.forEach((row) => {
-			const emailValid = EMAIL_REGEX.test(row.email);
-			const roleValid = row.roleId !== '';
-
-			if (!emailValid || !row.email) {
-				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			updatedEmailValidity[row.id] = emailValid;
-		});
-
-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
-
-		return isValid;
-	}, [rows]);
-
-	const addRow = useCallback((): void => {
-		setRows((prev) => [...prev, createEmptyRow()]);
-	}, []);
-
-	const removeRow = useCallback((id: string): void => {
-		setRows((prev) => prev.filter((r) => r.id !== id));
-		setEmailValidity((prev) => {
-			const updated = { ...prev };
-			delete updated[id];
-			return updated;
-		});
-	}, []);
-
-	const updateEmail = useCallback(
-		(id: string, email: string): void => {
-			setRows((prev) => {
-				const updated = cloneDeep(prev);
-				const row = updated.find((r) => r.id === id);
-				if (row) {
-					row.email = email;
-				}
-				return updated;
-			});
-
-			if (hasInvalidEmails) {
-				setHasInvalidEmails(false);
-			}
-			if (emailValidity[id] === false) {
-				setEmailValidity((prev) => ({ ...prev, [id]: true }));
-			}
-			if (inviteResults) {
-				setInviteResults(null);
-			}
-
-			debouncedValidateEmail(email, id);
-		},
-		[hasInvalidEmails, emailValidity, inviteResults, debouncedValidateEmail],
-	);
-
-	const updateRole = useCallback(
-		(id: string, roleId: string | undefined): void => {
-			setRows((prev) => {
-				const updated = cloneDeep(prev);
-				const row = updated.find((r) => r.id === id);
-				if (row) {
-					row.roleId = roleId ?? '';
-				}
-				return updated;
-			});
-
-			if (hasInvalidRoles) {
-				setHasInvalidRoles(false);
-			}
-			if (inviteResults) {
-				setInviteResults(null);
-			}
-		},
-		[hasInvalidRoles, inviteResults],
-	);
-
-	const reset = useCallback((): void => {
-		setRows(Array.from({ length: initialRowCount }, () => createEmptyRow()));
-		setEmailValidity({});
-		setHasInvalidEmails(false);
-		setHasInvalidRoles(false);
-		setInviteResults(null);
-	}, [initialRowCount]);
-
-	const submit = useCallback(async (): Promise<InviteResult[]> => {
-		if (!validateAllRows()) {
-			return [];
-		}
-
-		const touched = rows.filter(isRowTouched);
-		if (touched.length === 0) {
-			return [];
-		}
-
-		setIsSubmitting(true);
-		setInviteResults(null);
-
-		const results: InviteResult[] = [];
-
-		for (const row of touched) {
-			try {
-				await createUser({
-					email: row.email.trim(),
-					frontendBaseUrl: getBaseUrl(),
-					userRoles: [{ id: row.roleId }],
-				});
-				results.push({ email: row.email, success: true });
-			} catch (err) {
-				const apiErr = convertToApiError(err as AxiosError<RenderErrorResponseDTO>);
-				results.push({
-					email: row.email,
-					success: false,
-					error: apiErr?.getErrorMessage() ?? 'Unknown error',
-				});
-			}
-		}
-
-		setInviteResults(results);
-		setIsSubmitting(false);
-
-		const failures = results.filter((r) => !r.success);
-		const successes = results.filter((r) => r.success);
-
-		if (failures.length === 0) {
-			onSuccess?.();
-		} else if (successes.length > 0) {
-			onPartialSuccess?.(results);
-		} else {
-			onAllFailed?.(results);
-		}
-
-		return results;
-	}, [validateAllRows, rows, onSuccess, onPartialSuccess, onAllFailed]);
-
-	const canSubmit = useMemo(
-		() => !isSubmitting && touchedRows.length > 0,
-		[isSubmitting, touchedRows.length],
-	);
-
-	return {
-		rows,
-		emailValidity,
-		hasInvalidEmails,
-		hasInvalidRoles,
-		isSubmitting,
-		inviteResults,
-
-		addRow,
-		removeRow,
-		updateEmail,
-		updateRole,
-		reset,
-		submit,
-
-		touchedRows,
-		failedResults,
-		successResults,
-		canSubmit,
-	};
-}

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

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

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

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

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

@@ -1,43 +1,39 @@
-import { toast } from '@signozhq/ui/sonner';
-import { render, screen, userEvent } from 'tests/test-utils';
+import inviteUsers from 'api/v1/invite/bulk/create';
+import sendInvite from 'api/v1/invite/create';
+import { StatusCodes } from 'http-status-codes';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import APIError from 'types/api/error';
 
 import InviteMembersModal from '../InviteMembersModal';
 
+const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
+	new APIError({
+		httpStatusCode: code,
+		error: { code: 'already_exists', message, url: '', errors: [] },
+	});
+
+jest.mock('api/v1/invite/create');
+jest.mock('api/v1/invite/bulk/create');
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
-		warning: jest.fn(),
+		error: jest.fn(),
 	},
 }));
 
-interface MockInviteMembersProps {
-	onSuccess: () => void;
-	onPartialSuccess: () => void;
-	onAllFailed?: () => void;
-	renderFooter: (props: {
-		submit: () => void;
-		canSubmit: boolean;
-		isSubmitting: boolean;
-	}) => JSX.Element;
-}
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
 
-let mockInviteMembersProps: MockInviteMembersProps | null = null;
-
-jest.mock('components/InviteMembers/InviteMembers', () => {
-	return function MockInviteMembers(props: MockInviteMembersProps): JSX.Element {
-		mockInviteMembersProps = props;
-		return (
-			<div data-testid="mock-invite-members">
-				{props.renderFooter({
-					submit: jest.fn(),
-					canSubmit: true,
-					isSubmitting: false,
-				})}
-			</div>
-		);
-	};
-});
+const mockSendInvite = jest.mocked(sendInvite);
+const mockInviteUsers = jest.mocked(inviteUsers);
 
 const defaultProps = {
 	open: true,
@@ -45,166 +41,236 @@ const defaultProps = {
 	onComplete: jest.fn(),
 };
 
-function renderComponent(
-	props: Partial<typeof defaultProps> = {},
-): ReturnType<typeof render> {
-	return render(<InviteMembersModal {...defaultProps} {...props} />);
-}
-
 describe('InviteMembersModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockInviteMembersProps = null;
+		showErrorModal.mockClear();
+		mockSendInvite.mockResolvedValue({
+			httpStatusCode: 200,
+			data: { data: 'test', status: 'success' },
+		});
+		mockInviteUsers.mockResolvedValue({ httpStatusCode: 200, data: null });
 	});
 
-	describe('rendering', () => {
-		it('renders modal with title and InviteMembers component', () => {
-			renderComponent();
+	it('renders 3 initial empty rows and disables the submit button', () => {
+		render(<InviteMembersModal {...defaultProps} />);
 
-			expect(screen.getByRole('dialog')).toBeInTheDocument();
-			expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
-				'Invite Team Members',
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+		expect(emailInputs).toHaveLength(3);
+
+		expect(
+			screen.getByRole('button', { name: /invite team members/i }),
+		).toBeDisabled();
+	});
+
+	it('adds a row when "Add another" is clicked and removes a row via trash button', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<InviteMembersModal {...defaultProps} />);
+
+		await user.click(screen.getByRole('button', { name: /add another/i }));
+		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(4);
+
+		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
+		await user.click(removeButtons[0]);
+		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(3);
+	});
+
+	describe('validation callout messages', () => {
+		it('shows combined message when email is invalid and role is missing', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'not-an-email',
 			);
-			expect(screen.getByTestId('mock-invite-members')).toBeInTheDocument();
-		});
-
-		it('does not render when open=false', () => {
-			renderComponent({ open: false });
-
-			expect(screen.queryByText('Invite Team Members')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('footer buttons', () => {
-		it('renders Cancel and Invite buttons', () => {
-			renderComponent();
-
-			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-			expect(
+			await user.click(
 				screen.getByRole('button', { name: /invite team members/i }),
-			).toBeInTheDocument();
-		});
-
-		it('disables Invite button when canSubmit=false', () => {
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: jest.fn(),
-					canSubmit: false,
-					isSubmitting: false,
-				}) as JSX.Element,
 			);
 
-			expect(getByRole('button', { name: /invite team members/i })).toBeDisabled();
+			await expect(
+				screen.findByText(
+					'Please enter valid emails and select roles for team members',
+				),
+			).resolves.toBeInTheDocument();
 		});
 
-		it('shows loading state when isSubmitting=true', () => {
-			const { unmount } = renderComponent();
-			unmount();
+		it('shows email-only message when email is invalid but role is selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: jest.fn(),
-					canSubmit: true,
-					isSubmitting: true,
-				}) as JSX.Element,
+			render(<InviteMembersModal {...defaultProps} />);
+
+			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+			await user.type(emailInputs[0], 'not-an-email');
+
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
 			);
 
-			expect(getByRole('button', { name: /inviting/i })).toBeInTheDocument();
+			await expect(
+				screen.findByText('Please enter valid emails for team members'),
+			).resolves.toBeInTheDocument();
 		});
 
-		it('calls onClose when Cancel is clicked', async () => {
-			const user = userEvent.setup();
-			const onClose = jest.fn();
-			renderComponent({ onClose });
+		it('shows role-only message when email is valid but role is missing', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-			await user.click(screen.getByRole('button', { name: /cancel/i }));
+			render(<InviteMembersModal {...defaultProps} />);
 
-			expect(onClose).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls submit when Invite button is clicked', async () => {
-			const user = userEvent.setup();
-			const mockSubmit = jest.fn();
-
-			const { unmount } = renderComponent();
-			unmount();
-
-			const { getByRole } = render(
-				mockInviteMembersProps?.renderFooter({
-					submit: mockSubmit,
-					canSubmit: true,
-					isSubmitting: false,
-				}) as JSX.Element,
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'valid@signoz.io',
+			);
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
 			);
 
-			await user.click(getByRole('button', { name: /invite team members/i }));
-
-			expect(mockSubmit).toHaveBeenCalledTimes(1);
+			await expect(
+				screen.findByText('Please select roles for team members'),
+			).resolves.toBeInTheDocument();
 		});
 	});
 
-	describe('handleSuccess callback', () => {
-		it('shows success toast, calls onClose and onComplete', () => {
-			const onClose = jest.fn();
-			const onComplete = jest.fn();
-			renderComponent({ onClose, onComplete });
+	it('uses sendInvite (single) when only one row is filled', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onComplete = jest.fn();
 
-			mockInviteMembersProps?.onSuccess();
+		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
 
-			expect(toast.success).toHaveBeenCalledWith('Invites sent successfully', {
-				position: 'top-right',
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+		await user.type(emailInputs[0], 'single@signoz.io');
+
+		const roleSelects = screen.getAllByText('Select roles');
+		await user.click(roleSelects[0]);
+		await user.click(await screen.findByText('Viewer'));
+
+		await user.click(
+			screen.getByRole('button', { name: /invite team members/i }),
+		);
+
+		await waitFor(() => {
+			expect(mockSendInvite).toHaveBeenCalledWith(
+				expect.objectContaining({ email: 'single@signoz.io', role: 'VIEWER' }),
+			);
+			expect(mockInviteUsers).not.toHaveBeenCalled();
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	describe('error handling', () => {
+		it('shows BE message on single invite 409', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'An invite already exists for this email: single@signoz.io',
+			);
+			mockSendInvite.mockRejectedValue(error);
+
+			render(<InviteMembersModal {...defaultProps} />);
+
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'single@signoz.io',
+			);
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
-			expect(onClose).toHaveBeenCalledTimes(1);
-			expect(onComplete).toHaveBeenCalledTimes(1);
 		});
 
-		it('works without onComplete prop', () => {
-			const onClose = jest.fn();
-			renderComponent({ onClose, onComplete: undefined });
+		it('shows BE message on bulk invite 409', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'An invite already exists for this email: alice@signoz.io',
+			);
+			mockInviteUsers.mockRejectedValue(error);
 
-			mockInviteMembersProps?.onSuccess();
+			render(<InviteMembersModal {...defaultProps} />);
 
-			expect(toast.success).toHaveBeenCalled();
-			expect(onClose).toHaveBeenCalledTimes(1);
-		});
-	});
+			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+			await user.type(emailInputs[0], 'alice@signoz.io');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
 
-	describe('handlePartialSuccess callback', () => {
-		it('shows warning toast and calls onComplete', () => {
-			const onComplete = jest.fn();
-			renderComponent({ onComplete });
+			await user.type(emailInputs[1], 'bob@signoz.io');
+			await user.click(screen.getAllByText('Select roles')[0]);
+			const editorOptions = await screen.findAllByText('Editor');
+			await user.click(editorOptions[editorOptions.length - 1]);
 
-			mockInviteMembersProps?.onPartialSuccess();
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
 
-			expect(toast.warning).toHaveBeenCalledWith('Some invites failed', {
-				position: 'top-right',
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
-			expect(onComplete).toHaveBeenCalledTimes(1);
 		});
 
-		it('does not call onClose on partial success', () => {
-			const onClose = jest.fn();
-			renderComponent({ onClose });
+		it('shows BE message on generic error', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const error = makeApiError(
+				'Internal server error',
+				StatusCodes.INTERNAL_SERVER_ERROR,
+			);
+			mockSendInvite.mockRejectedValue(error);
 
-			mockInviteMembersProps?.onPartialSuccess();
+			render(<InviteMembersModal {...defaultProps} />);
 
-			expect(onClose).not.toHaveBeenCalled();
+			await user.type(
+				screen.getAllByPlaceholderText('john@signoz.io')[0],
+				'single@signoz.io',
+			);
+			await user.click(screen.getAllByText('Select roles')[0]);
+			await user.click(await screen.findByText('Viewer'));
+			await user.click(
+				screen.getByRole('button', { name: /invite team members/i }),
+			);
+
+			await waitFor(() => {
+				expect(showErrorModal).toHaveBeenCalledWith(error);
+			});
 		});
 	});
 
-	describe('dialog close behavior', () => {
-		it('calls onClose when dialog is closed via close button', async () => {
-			const user = userEvent.setup();
-			const onClose = jest.fn();
-			renderComponent({ onClose });
+	it('uses inviteUsers (bulk) when multiple rows are filled', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onComplete = jest.fn();
 
-			const closeButton = screen.getByRole('button', { name: /close/i });
-			await user.click(closeButton);
+		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
 
-			expect(onClose).toHaveBeenCalled();
+		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
+
+		await user.type(emailInputs[0], 'alice@signoz.io');
+		await user.click(screen.getAllByText('Select roles')[0]);
+		await user.click(await screen.findByText('Viewer'));
+
+		await user.type(emailInputs[1], 'bob@signoz.io');
+		await user.click(screen.getAllByText('Select roles')[0]);
+		const editorOptions = await screen.findAllByText('Editor');
+		await user.click(editorOptions[editorOptions.length - 1]);
+
+		await user.click(
+			screen.getByRole('button', { name: /invite team members/i }),
+		);
+
+		await waitFor(() => {
+			expect(mockInviteUsers).toHaveBeenCalledWith({
+				invites: expect.arrayContaining([
+					expect.objectContaining({ email: 'alice@signoz.io', role: 'VIEWER' }),
+					expect.objectContaining({ email: 'bob@signoz.io', role: 'EDITOR' }),
+				]),
+			});
+			expect(mockSendInvite).not.toHaveBeenCalled();
+			expect(onComplete).toHaveBeenCalled();
 		});
 	});
 });

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -5,9 +5,13 @@ describe('PermissionDeniedFullPage', () => {
 	it('renders the title and subtitle with the permissionName interpolated', () => {
 		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
 
-		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
+		expect(
+			screen.getByText("Uh-oh! You don't have permission to view this page."),
+		).toBeInTheDocument();
 		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
-		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
+		expect(
+			screen.getByText(/Please ask your SigNoz administrator to grant access/),
+		).toBeInTheDocument();
 	});
 
 	it('renders with a different permissionName', () => {

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -2,7 +2,6 @@ import { CircleSlash2 } from '@signozhq/icons';
 
 import styles from './PermissionDeniedFullPage.module.scss';
 import { Style } from '@signozhq/design-tokens';
-import { useAppContext } from 'providers/App/App';
 
 interface PermissionDeniedFullPageProps {
 	permissionName: string;
@@ -11,18 +10,18 @@ interface PermissionDeniedFullPageProps {
 function PermissionDeniedFullPage({
 	permissionName,
 }: PermissionDeniedFullPageProps): JSX.Element {
-	const { user } = useAppContext();
-
 	return (
 		<div className={styles.container}>
 			<div className={styles.content}>
 				<span className={styles.icon}>
 					<CircleSlash2 color={Style.CALLOUT_WARNING_TITLE} size={14} />
 				</span>
-				<p className={styles.title}>Uh-oh! You are not authorized</p>
+				<p className={styles.title}>
+					Uh-oh! You don&apos;t have permission to view this page.
+				</p>
 				<p className={styles.subtitle}>
-					<code className={styles.permission}>user/{user.id}</code> is not authorized
-					to perform <code className={styles.permission}>{permissionName}</code>
+					You need <code className={styles.permission}>{permissionName}</code> to
+					view this page. Please ask your SigNoz administrator to grant access.
 				</p>
 			</div>
 		</div>

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,9 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Check, Copy, LockKeyhole } from '@signozhq/icons';
+import { useCallback } from 'react';
+import { LockKeyhole } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
@@ -48,23 +46,6 @@ function OverviewTab({
 	saveErrors = [],
 }: OverviewTabProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const [, copyToClipboard] = useCopyToClipboard();
-	const [hasCopiedId, setHasCopiedId] = useState(false);
-
-	const handleCopyId = useCallback((): void => {
-		if (account.id) {
-			copyToClipboard(account.id);
-			setHasCopiedId(true);
-		}
-	}, [account.id, copyToClipboard]);
-
-	useEffect(() => {
-		if (hasCopiedId) {
-			const timer = setTimeout(() => setHasCopiedId(false), 2000);
-			return (): void => clearTimeout(timer);
-		}
-		return undefined;
-	}, [hasCopiedId]);
 
 	const formatTimestamp = useCallback(
 		(ts: string | null | undefined): string => {
@@ -112,17 +93,6 @@ function OverviewTab({
 				</label>
 				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 					<span className="sa-drawer__input-text">{account.id || '—'}</span>
-					{account.id && (
-						<Button
-							variant="link"
-							color="secondary"
-							onClick={handleCopyId}
-							className="sa-drawer__copy-btn"
-							data-testid="copy-id-btn"
-						>
-							{hasCopiedId ? <Check size={14} /> : <Copy size={14} />}
-						</Button>
-					)}
 					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -203,19 +203,6 @@
 		opacity: 0.6;
 	}
 
-	&__copy-btn {
-		flex-shrink: 0;
-		padding: 0;
-		height: auto;
-		min-height: auto;
-		color: var(--foreground);
-		opacity: 0.6;
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-
 	&__disabled-roles {
 		display: flex;
 		flex-wrap: wrap;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -16,6 +16,7 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { GuardAuthZ } from 'components/GuardAuthZ/GuardAuthZ';
 import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
@@ -476,9 +477,15 @@ function ServiceAccountDrawer({
 					!isAccountLoading &&
 					!isAccountError &&
 					selectedAccountId && (
-						<>
-							{activeTab === ServiceAccountDrawerTab.Overview &&
-								(canRead && account ? (
+						<GuardAuthZ
+							relation="read"
+							object={`serviceaccount:${selectedAccountId}`}
+							fallbackOnNoPermissions={(): JSX.Element => (
+								<PermissionDeniedCallout permissionName="serviceaccount:read" />
+							)}
+						>
+							<>
+								{activeTab === ServiceAccountDrawerTab.Overview && account && (
 									<OverviewTab
 										account={account}
 										localName={localName}
@@ -497,24 +504,23 @@ function ServiceAccountDrawer({
 										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" />
-								))}
-						</>
+								)}
+								{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" />
+									))}
+							</>
+						</GuardAuthZ>
 					)}
 			</div>
 		</div>

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

@@ -22,7 +22,6 @@ jest.mock('providers/Timezone', () => ({
 		},
 		updateTimezone: jest.fn(),
 		formatTimezoneAdjustedTimestamp: jest.fn(() => 'mock-date'),
-		formatTimezoneAdjustedTimestampOptional: jest.fn(() => 'mock-date'),
 		isAdaptationEnabled: true,
 		setIsAdaptationEnabled: jest.fn(),
 	}),

frontend/src/constants/routes.ts

@@ -56,9 +56,7 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
 	ROLES_SETTINGS: '/settings/roles',
-	ROLE_CREATE: '/settings/roles/new',
 	ROLE_DETAILS: '/settings/roles/:roleId',
-	ROLE_EDIT: '/settings/roles/:roleId/edit',
 	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',

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

@@ -1,12 +1,10 @@
-.members-settings-page {
+.members-settings {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
 	height: 100%;
-}
 
-.members-settings {
 	&__header {
 		display: flex;
 		flex-direction: column;

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -160,7 +160,7 @@ function MembersSettings(): JSX.Element {
 	}, [refetchUsers]);
 
 	return (
-		<div className="members-settings-page">
+		<>
 			<div className="members-settings">
 				<div className="members-settings__header">
 					<h1 className="members-settings__title">Members</h1>
@@ -231,7 +231,7 @@ function MembersSettings(): JSX.Element {
 				onClose={handleDrawerClose}
 				onComplete={handleMemberEditComplete}
 			/>
-		</div>
+		</>
 	);
 }
 

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

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

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

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

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

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

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

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

frontend/src/container/OnboardingQuestionaire/index.tsx

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ArrowRight, Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
+import { Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
 import {
 	Button,
 	Flex,
@@ -25,7 +25,7 @@ import { isModifierKeyPressed } from 'utils/app';
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
-import InviteMembers from 'components/InviteMembers/InviteMembers';
+import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
 import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links';
 
 import '../OnboardingV2.styles.scss';
@@ -1094,35 +1094,12 @@ function OnboardingAddDataSource(): JSX.Element {
 					destroyOnClose
 				>
 					<div className="invite-team-member-modal-content">
-						<InviteMembers
-							onSuccess={(): void => {
-								logEvent('Onboarding V3: Invite team members success', {});
-								setShowInviteTeamMembersModal(false);
-							}}
-							onPartialSuccess={(): void => {
-								logEvent('Onboarding V3: Invite team members partial success', {});
-							}}
-							renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => (
-								<div className="invite-team-member-modal-footer">
-									<Button
-										type="default"
-										className="periscope-btn"
-										onClick={(): void => setShowInviteTeamMembersModal(false)}
-									>
-										Cancel
-									</Button>
-									<Button
-										type="primary"
-										className="periscope-btn primary"
-										onClick={submit}
-										disabled={!canSubmit}
-										loading={isSubmitting}
-									>
-										Send Invites
-										<ArrowRight size={14} />
-									</Button>
-								</div>
-							)}
+						<InviteTeamMembers
+							isLoading={false}
+							teamMembers={null}
+							setTeamMembers={(): void => {}}
+							onNext={(): void => setShowInviteTeamMembersModal(false)}
+							onClose={(): void => setShowInviteTeamMembersModal(false)}
 						/>
 					</div>
 				</Modal>

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

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

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

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

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

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

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

@@ -1,107 +0,0 @@
-.createEditRolePage {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-8);
-	width: 100%;
-	max-width: 1400px;
-	margin: 0 auto;
-	height: 100%;
-	min-height: 0;
-}
-
-.createEditRolePageHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.createEditRolePageHeaderLeft {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.backButton {
-	--button-padding: var(--spacing-3);
-}
-
-.createEditRolePageActions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.unsavedIndicator {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	margin-right: var(--spacing-4);
-}
-
-.unsavedDot {
-	display: block;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--primary);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-	flex-shrink: 0;
-}
-
-.unsavedText {
-	color: var(--primary);
-}
-
-.createEditRolePageContent {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	flex: 1;
-	min-height: 0;
-}
-
-.createEditRolePageForm {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-}
-
-.formRow {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: var(--spacing-8);
-}
-
-.formField {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-disabled-background: var(--l2-background);
-
-	input::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.formLabel {
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-20);
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	color: var(--l2-foreground);
-}
-
-.createEditRolePageDivider {
-	width: 100%;
-	height: 1px;
-	background: var(--l1-border);
-}

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

@@ -1,291 +0,0 @@
-import { useCallback, useState } from 'react';
-import { matchPath, useHistory, useLocation } from 'react-router-dom';
-import { ArrowLeft, SolidAlertTriangle } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-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 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-import ROUTES from 'constants/routes';
-import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-import useUrlQuery from 'hooks/useUrlQuery';
-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';
-
-function CreateEditRolePage(): JSX.Element {
-	const history = useHistory();
-	const { pathname } = useLocation();
-	const urlQuery = useUrlQuery();
-	const match = matchPath<{ roleId: string }>(pathname, {
-		path: ROUTES.ROLE_DETAILS,
-	});
-	const roleId = match?.params?.roleId ?? 'new';
-	const roleName = urlQuery.get('name') ?? '';
-	const [hasJsonError, setHasJsonError] = useState(false);
-	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
-		useRolesFeatureGate();
-
-	const {
-		formData,
-		editorMode,
-		setEditorMode,
-		resources,
-		setResources,
-		isLoading,
-		isSaving,
-		hasUnsavedChanges,
-		handleSave,
-		handleCancel,
-		handleFormChange,
-		saveError,
-		validationErrors,
-		isCreateMode,
-		hasRequiredPermission,
-		isAuthZLoading,
-		deniedPermission,
-		loadError,
-	} = useCreateEditRolePageActions(roleId, roleName);
-
-	const { isBlocked, confirmNavigation, cancelNavigation, allowNextNavigation } =
-		useNavigationBlocker(hasUnsavedChanges);
-
-	const handleSaveAndNavigate = useCallback(async (): Promise<void> => {
-		if (hasJsonError) {
-			return;
-		}
-
-		const success = await handleSave();
-		if (success) {
-			allowNextNavigation();
-			if (isCreateMode) {
-				history.push(ROUTES.ROLES_SETTINGS);
-			} else {
-				const viewUrl = `${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}?name=${encodeURIComponent(roleName)}`;
-				history.push(viewUrl);
-			}
-		}
-	}, [
-		handleSave,
-		allowNextNavigation,
-		history,
-		hasJsonError,
-		isCreateMode,
-		roleId,
-		roleName,
-	]);
-
-	if (!hasRequiredPermission && !isAuthZLoading) {
-		return <PermissionDeniedFullPage permissionName={deniedPermission} />;
-	}
-
-	if (!isRolesEnabled && !isFeatureGateLoading) {
-		return (
-			<div
-				className={styles.createEditRolePage}
-				data-testid="create-edit-role-page"
-			>
-				<div className={styles.createEditRolePageHeader}>
-					<div className={styles.createEditRolePageHeaderLeft}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							onClick={handleCancel}
-							data-testid="cancel-button"
-							className={styles.backButton}
-						>
-							<ArrowLeft size={16} />
-						</Button>
-						<Typography.Title level={3}>
-							{isCreateMode ? 'Create Role' : 'Edit Role'}
-						</Typography.Title>
-					</div>
-				</div>
-
-				<ErrorInPlace
-					error={
-						new APIError({
-							httpStatusCode: 403,
-							error: {
-								code: 'FEATURE_DISABLED',
-								message:
-									'Custom roles feature is not available. Please check your license or feature configuration.',
-								url: '',
-								errors: [],
-							},
-						})
-					}
-					data-testid="feature-gate-error-banner"
-				/>
-			</div>
-		);
-	}
-
-	if (isAuthZLoading || (isLoading && !isCreateMode) || isFeatureGateLoading) {
-		return (
-			<div className={styles.createEditRolePage}>
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
-	if (loadError) {
-		return (
-			<div
-				className={styles.createEditRolePage}
-				data-testid="create-edit-role-page"
-			>
-				<div className={styles.createEditRolePageHeader}>
-					<div className={styles.createEditRolePageHeaderLeft}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							onClick={handleCancel}
-							disabled={isSaving}
-							data-testid="cancel-button"
-							className={styles.backButton}
-						>
-							<ArrowLeft size={16} />
-						</Button>
-						<Typography.Title level={3}>Failed to load role</Typography.Title>
-					</div>
-				</div>
-
-				<ErrorInPlace error={loadError} data-testid="role-load-error-banner" />
-			</div>
-		);
-	}
-
-	return (
-		<div
-			className={styles.createEditRolePage}
-			data-testid="create-edit-role-page"
-		>
-			<div className={styles.createEditRolePageHeader}>
-				<div className={styles.createEditRolePageHeaderLeft}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						onClick={handleCancel}
-						disabled={isSaving}
-						data-testid="cancel-button"
-						className={styles.backButton}
-					>
-						<ArrowLeft size={16} />
-					</Button>
-					<Typography.Title level={3}>
-						{isCreateMode
-							? 'Create Role'
-							: `Role - ${formData.name || 'Loading role...'}`}
-					</Typography.Title>
-				</div>
-
-				<div className={styles.createEditRolePageActions}>
-					{hasUnsavedChanges && (
-						<div className={styles.unsavedIndicator}>
-							<span className={styles.unsavedDot} />
-							<Typography as="span" size="base" className={styles.unsavedText}>
-								Unsaved changes
-							</Typography>
-						</div>
-					)}
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={handleSaveAndNavigate}
-						loading={isSaving}
-						disabled={!hasUnsavedChanges || hasJsonError}
-						data-testid="save-button"
-					>
-						{isCreateMode ? 'Create role' : 'Save changes'}
-					</Button>
-				</div>
-			</div>
-
-			{saveError && (
-				<ErrorInPlace
-					error={saveError}
-					height="auto"
-					bordered
-					data-testid="save-error-banner"
-				/>
-			)}
-
-			<div className={styles.createEditRolePageContent}>
-				<div className={styles.createEditRolePageForm}>
-					<div className={styles.formRow}>
-						{isCreateMode ? (
-							<div className={styles.formField}>
-								<label htmlFor="role-name" className={styles.formLabel}>
-									Name
-								</label>
-								<Input
-									id="role-name"
-									value={formData.name}
-									onChange={(e): void => handleFormChange('name', e.target.value)}
-									placeholder="my-custom-role"
-									data-testid="role-name-input"
-								/>
-							</div>
-						) : null}
-						<div className={styles.formField}>
-							<label htmlFor="role-description" className={styles.formLabel}>
-								Description
-							</label>
-							<Input
-								id="role-description"
-								value={formData.description}
-								onChange={(e): void => handleFormChange('description', e.target.value)}
-								placeholder="Custom role for the support team"
-								data-testid="role-description-input"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<div className={styles.createEditRolePageDivider} />
-
-				<PermissionEditor
-					resources={resources}
-					mode={editorMode}
-					onModeChange={setEditorMode}
-					onResourceChange={setResources}
-					onJsonValidityChange={setHasJsonError}
-					isLoading={isLoading}
-					validationErrors={validationErrors}
-				/>
-			</div>
-
-			<ConfirmDialog
-				open={isBlocked}
-				onOpenChange={(next): void => {
-					if (!next) {
-						cancelNavigation();
-					}
-				}}
-				title="Discard unsaved changes?"
-				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-				confirmText="Discard"
-				confirmColor="destructive"
-				cancelText="Keep editing"
-				onConfirm={confirmNavigation}
-				onCancel={cancelNavigation}
-				data-testid="discard-changes-dialog"
-			>
-				<Typography>
-					{isCreateMode
-						? 'This new role will not be created.'
-						: 'Your unsaved changes will be lost.'}
-				</Typography>
-			</ConfirmDialog>
-		</div>
-	);
-}
-
-export default CreateEditRolePage;

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

@@ -1,139 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-});
-
-function renderCreatePage(
-	appContextOverrides?: Record<string, unknown>,
-): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_CREATE}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{ initialRoute: '/settings/roles/new', appContextOverrides },
-	);
-}
-
-function renderEditPage(
-	roleId: string,
-	roleName: string,
-	appContextOverrides?: Record<string, unknown>,
-): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_EDIT}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{
-			initialRoute: `/settings/roles/${roleId}/edit?name=${encodeURIComponent(roleName)}`,
-			appContextOverrides,
-		},
-	);
-}
-
-describe('CreateEditRolePage - Feature Gate', () => {
-	describe('create mode - feature disabled', () => {
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			renderCreatePage({
-				featureFlags: defaultFeatureFlags.map((f) =>
-					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-						? { ...f, active: false }
-						: f,
-				),
-			});
-
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows error when license is invalid', async () => {
-			renderCreatePage({ activeLicense: invalidLicense });
-
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows Create Role title when feature disabled in create mode', async () => {
-			renderCreatePage({ activeLicense: invalidLicense });
-
-			await expect(screen.findByText('Create Role')).resolves.toBeInTheDocument();
-		});
-
-		it('shows back button when feature disabled', () => {
-			renderCreatePage({ activeLicense: invalidLicense });
-
-			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-		});
-
-		it('back button is enabled when feature disabled', () => {
-			renderCreatePage({ activeLicense: invalidLicense });
-
-			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
-		});
-	});
-
-	describe('edit mode - feature disabled', () => {
-		const ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
-		const ROLE_NAME = 'test-role';
-
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			renderEditPage(ROLE_ID, ROLE_NAME, {
-				featureFlags: defaultFeatureFlags.map((f) =>
-					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-						? { ...f, active: false }
-						: f,
-				),
-			});
-
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		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.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows Edit Role title when feature disabled in edit mode', async () => {
-			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
-
-			await expect(screen.findByText('Edit Role')).resolves.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,59 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { render, screen } from 'tests/test-utils';
-import { mockUseAuthZDenyAll } from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-afterEach(() => {
-	jest.clearAllMocks();
-});
-
-function renderCreatePage(): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_CREATE}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{ initialRoute: '/settings/roles/new' },
-	);
-}
-
-describe('CreateRolePage - AuthZ', () => {
-	describe('permission denied', () => {
-		it('shows PermissionDeniedFullPage when create permission denied', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
-
-			renderCreatePage();
-
-			await expect(
-				screen.findByText(/You are not authorized/i),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('loading state', () => {
-		it('shows skeleton while checking permissions', () => {
-			mockUseAuthZ.mockReturnValue({
-				isLoading: true,
-				isFetching: true,
-				error: null,
-				permissions: null,
-				refetchPermissions: jest.fn(),
-			});
-
-			renderCreatePage();
-
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,284 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-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 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-const rolesApiBase = '*/api/v1/roles';
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-	server.resetHandlers();
-});
-
-function renderCreatePage(): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_CREATE}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{ initialRoute: '/settings/roles/new' },
-	);
-}
-
-describe('CreateRolePage', () => {
-	describe('initial render', () => {
-		it('renders create role page with testId', () => {
-			renderCreatePage();
-
-			expect(screen.getByTestId('create-edit-role-page')).toBeInTheDocument();
-		});
-
-		it('shows breadcrumb with "Create role" as current page', () => {
-			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();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			expect(nameInput).toHaveValue('');
-		});
-
-		it('renders empty description input', () => {
-			renderCreatePage();
-
-			const descInput = screen.getByTestId('role-description-input');
-			expect(descInput).toHaveValue('');
-		});
-
-		it('name input is enabled in create mode', () => {
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			expect(nameInput).not.toBeDisabled();
-		});
-
-		it('save button shows "Create role" text', () => {
-			renderCreatePage();
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).toHaveTextContent('Create role');
-		});
-
-		it('save button is disabled when no changes', () => {
-			renderCreatePage();
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).toBeDisabled();
-		});
-
-		it('does not show unsaved indicator initially', () => {
-			renderCreatePage();
-
-			expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('form interactions', () => {
-		it('enables save button when name is entered', async () => {
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			await user.type(nameInput, 'test-role');
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).not.toBeDisabled();
-		});
-
-		it('shows unsaved indicator when form modified', async () => {
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			await user.type(nameInput, 'my-role');
-
-			await expect(
-				screen.findByText('Unsaved changes'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('enables save button when description is entered', async () => {
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const descInput = screen.getByTestId('role-description-input');
-			await user.type(descInput, 'Some description');
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).not.toBeDisabled();
-		});
-	});
-
-	describe('cancel action', () => {
-		it('navigates to roles list on cancel', async () => {
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const cancelBtn = screen.getByTestId('cancel-button');
-			await user.click(cancelBtn);
-
-			await expect(
-				screen.findByTestId('roles-list-redirect'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('create success flow', () => {
-		it('calls create API with form data and redirects', async () => {
-			const createSpy = jest.fn();
-
-			server.use(
-				rest.post(rolesApiBase, async (req, res, ctx) => {
-					createSpy(await req.json());
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: { id: 'new-role-id', name: 'my-custom-role' },
-						}),
-					);
-				}),
-			);
-
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			await user.type(nameInput, 'my-custom-role');
-
-			const descInput = screen.getByTestId('role-description-input');
-			await user.type(descInput, 'Role for testing');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await waitFor(() => {
-				expect(createSpy).toHaveBeenCalledWith(
-					expect.objectContaining({
-						name: 'my-custom-role',
-						description: 'Role for testing',
-					}),
-				);
-			});
-
-			await expect(
-				screen.findByTestId('roles-list-redirect'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('create error flows', () => {
-		it('does not call API when name is empty', async () => {
-			const createSpy = jest.fn();
-			server.use(
-				rest.post(rolesApiBase, async (req, res, ctx) => {
-					createSpy();
-					return res(ctx.status(200), ctx.json({ status: 'success' }));
-				}),
-			);
-
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const descInput = screen.getByTestId('role-description-input');
-			await user.type(descInput, 'Description only');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await waitFor(
-				() => {
-					expect(createSpy).not.toHaveBeenCalled();
-				},
-				{ timeout: 500 },
-			);
-		});
-
-		it('shows error banner when API fails', async () => {
-			server.use(
-				rest.post(rolesApiBase, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: { message: 'Role name already exists' },
-						}),
-					),
-				),
-			);
-
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			await user.type(nameInput, 'duplicate-role');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('save-error-banner'),
-			).resolves.toBeInTheDocument();
-
-			await expect(
-				screen.findByText('Role name already exists'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('validation errors', () => {
-		it('shows validation error when Only Selected has no items', async () => {
-			const user = userEvent.setup();
-			renderCreatePage();
-
-			const nameInput = screen.getByTestId('role-name-input');
-			await user.type(nameInput, 'valid-role');
-
-			const apiKeysCard = screen.getByTestId('resource-card-factor-api-key');
-			const header = within(apiKeysCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const readToggle = within(apiKeysCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			const onlySelectedBtn = await within(readToggle).findByText('Only selected');
-			await user.click(onlySelectedBtn);
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('save-error-banner'),
-			).resolves.toBeInTheDocument();
-
-			await expect(
-				screen.findByText(
-					'Please add at least one selector for each "Only selected" permission.',
-				),
-			).resolves.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,88 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { render, screen } from 'tests/test-utils';
-import {
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-const EDIT_ROLE_ID = 'test-role-123';
-const EDIT_ROLE_NAME = 'test-role';
-
-afterEach(() => {
-	jest.clearAllMocks();
-});
-
-function renderEditPage(): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_DETAILS}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{ initialRoute: `/settings/roles/${EDIT_ROLE_ID}?name=${EDIT_ROLE_NAME}` },
-	);
-}
-
-describe('EditRolePage - AuthZ', () => {
-	describe('permission denied', () => {
-		it('shows PermissionDeniedFullPage when read permission denied', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
-
-			renderEditPage();
-
-			await expect(
-				screen.findByText(/You are not authorized/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows PermissionDeniedFullPage when update permission denied but read granted', async () => {
-			mockUseAuthZ.mockImplementation(mockUseAuthZGrantByPrefix('read'));
-
-			renderEditPage();
-
-			await expect(
-				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(),
-			});
-
-			renderEditPage();
-
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,398 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-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 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('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';
-
-const roleWithTransactionGroups = {
-	status: 'success',
-	data: {
-		...customRoleResponse.data,
-		transactionGroups: [
-			{
-				objectGroup: {
-					resource: { kind: 'role', type: 'role' },
-					selectors: ['*'],
-				},
-				relation: 'read',
-			},
-		],
-	},
-};
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-	server.use(
-		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(roleWithTransactionGroups)),
-		),
-	);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-	server.resetHandlers();
-});
-
-function renderEditPage(roleId = CUSTOM_ROLE_ID): ReturnType<typeof render> {
-	return render(
-		<Switch>
-			<Route path={ROUTES.ROLES_SETTINGS} exact>
-				<div data-testid="roles-list-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_DETAILS} exact>
-				<div data-testid="role-details-redirect" />
-			</Route>
-			<Route path={ROUTES.ROLE_EDIT}>
-				<CreateEditRolePage />
-			</Route>
-		</Switch>,
-		undefined,
-		{ initialRoute: `/settings/roles/${roleId}/edit?name=Custom%20Role` },
-	);
-}
-
-describe('EditRolePage', () => {
-	describe('loading state', () => {
-		it('shows skeleton while fetching role data', () => {
-			server.use(
-				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.delay(200), ctx.status(200), ctx.json(roleWithTransactionGroups)),
-				),
-			);
-
-			renderEditPage();
-
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
-	});
-
-	describe('load error state', () => {
-		it('shows error banner when role load fails', async () => {
-			server.use(
-				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
-				),
-			);
-
-			renderEditPage();
-
-			await waitFor(() => {
-				expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-			});
-		});
-
-		it('shows Failed to load role title on load error', async () => {
-			server.use(
-				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.status(404), ctx.json({ error: { message: 'Not found' } })),
-				),
-			);
-
-			renderEditPage();
-
-			await expect(
-				screen.findByText('Failed to load role'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows back button on load error', async () => {
-			server.use(
-				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
-				),
-			);
-
-			renderEditPage();
-
-			await waitFor(() => {
-				expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-			});
-		});
-
-		it('navigates to view page when cancel clicked in error state', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.status(500), ctx.json({ error: { message: 'Server error' } })),
-				),
-			);
-
-			renderEditPage();
-
-			await waitFor(async () => {
-				const cancelButton = await screen.findByTestId('cancel-button');
-				await user.click(cancelButton);
-			});
-
-			await expect(
-				screen.findByTestId('role-details-redirect'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('initial render with loaded data', () => {
-		it('shows role name in page title', async () => {
-			renderEditPage();
-
-			await expect(
-				screen.findByText('Role - billing-manager'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('name input is not shown in edit mode', async () => {
-			renderEditPage();
-
-			await waitFor(() => {
-				expect(screen.queryByTestId('role-name-input')).not.toBeInTheDocument();
-			});
-		});
-
-		it('populates description input with existing value', async () => {
-			renderEditPage();
-
-			await waitFor(async () => {
-				const descInput = await screen.findByTestId('role-description-input');
-				expect(descInput).toHaveValue(
-					'Custom role for managing billing and invoices.',
-				);
-			});
-		});
-
-		it('description input is enabled in edit mode', async () => {
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			expect(descInput).not.toBeDisabled();
-		});
-
-		it('save button shows "Save changes" text', async () => {
-			renderEditPage();
-
-			const saveBtn = await screen.findByTestId('save-button');
-			expect(saveBtn).toHaveTextContent('Save changes');
-		});
-
-		it('save button is disabled when no unsaved changes', async () => {
-			renderEditPage();
-
-			await waitFor(async () => {
-				const descInput = await screen.findByTestId('role-description-input');
-				expect(descInput).toHaveValue(
-					'Custom role for managing billing and invoices.',
-				);
-			});
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).toBeDisabled();
-		});
-	});
-
-	describe('form interactions', () => {
-		it('enables save button when description is modified', async () => {
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.clear(descInput);
-			await user.type(descInput, 'New description');
-
-			const saveBtn = screen.getByTestId('save-button');
-			expect(saveBtn).not.toBeDisabled();
-		});
-
-		it('shows unsaved indicator when description modified', async () => {
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.type(descInput, ' updated');
-
-			await expect(
-				screen.findByText('Unsaved changes'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('disables save when changes reverted to original', async () => {
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			const originalValue = 'Custom role for managing billing and invoices.';
-
-			await user.clear(descInput);
-			await user.type(descInput, 'Temporary change');
-			expect(screen.getByTestId('save-button')).not.toBeDisabled();
-
-			await user.clear(descInput);
-			await user.type(descInput, originalValue);
-
-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeDisabled();
-			});
-		});
-	});
-
-	describe('cancel action', () => {
-		it('navigates to view role page on cancel', async () => {
-			const user = userEvent.setup();
-			renderEditPage();
-
-			await screen.findByTestId('role-description-input');
-
-			const cancelBtn = screen.getByTestId('cancel-button');
-			await user.click(cancelBtn);
-
-			await expect(
-				screen.findByTestId('role-details-redirect'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('update success flow', () => {
-		it('redirects to view page after successful update', async () => {
-			server.use(
-				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.clear(descInput);
-			await user.type(descInput, 'Updated description');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('role-details-redirect'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('calls update API when save clicked', async () => {
-			const updateSpy = jest.fn();
-
-			server.use(
-				rest.put(`${rolesApiBase}/:id`, async (req, res, ctx) => {
-					updateSpy();
-					return res(ctx.status(200), ctx.json({ status: 'success' }));
-				}),
-			);
-
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.type(descInput, ' edited');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await waitFor(() => {
-				expect(updateSpy).toHaveBeenCalled();
-			});
-		});
-	});
-
-	describe('update error flow', () => {
-		it('shows error banner when update fails with 500', async () => {
-			server.use(
-				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(500))),
-			);
-
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.type(descInput, ' changed');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('save-error-banner'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows error banner when update fails with 403', async () => {
-			server.use(
-				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(403))),
-			);
-
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.type(descInput, ' test');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('save-error-banner'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows error banner when update fails with 400', async () => {
-			server.use(
-				rest.put(`${rolesApiBase}/:id`, (_req, res, ctx) => res(ctx.status(400))),
-			);
-
-			const user = userEvent.setup();
-			renderEditPage();
-
-			const descInput = await screen.findByTestId('role-description-input');
-			await user.type(descInput, ' x');
-
-			const saveBtn = screen.getByTestId('save-button');
-			await user.click(saveBtn);
-
-			await expect(
-				screen.findByTestId('save-error-banner'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('permission changes', () => {
-		it('detects permission change as unsaved', async () => {
-			const user = userEvent.setup();
-			renderEditPage();
-
-			await screen.findByTestId('permission-editor');
-
-			const apiKeysCard = await screen.findByTestId(
-				'resource-card-factor-api-key',
-			);
-			const header = within(apiKeysCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const createToggle = within(apiKeysCard).getByTestId(
-				'action-toggle-factor-api-key-create',
-			);
-			const allBtn = await within(createToggle).findByText('All');
-			await user.click(allBtn);
-
-			await expect(
-				screen.findByText('Unsaved changes'),
-			).resolves.toBeInTheDocument();
-			expect(screen.getByTestId('save-button')).not.toBeDisabled();
-		});
-	});
-});

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

@@ -1,218 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { render, screen, userEvent, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-});
-
-function renderPage(): ReturnType<typeof render> {
-	return render(
-		<TooltipProvider>
-			<Switch>
-				<Route path={ROUTES.ROLES_SETTINGS} exact>
-					<div data-testid="roles-list-redirect" />
-				</Route>
-				<Route path={ROUTES.ROLE_CREATE}>
-					<CreateEditRolePage />
-				</Route>
-			</Switch>
-		</TooltipProvider>,
-		undefined,
-		{ initialRoute: '/settings/roles/new' },
-	);
-}
-
-async function switchToJsonMode(): Promise<void> {
-	const user = userEvent.setup();
-	const jsonRadio = screen.getByTestId('permission-editor-mode-json');
-	await user.click(jsonRadio);
-}
-
-async function switchToInteractiveMode(): Promise<void> {
-	const user = userEvent.setup();
-	const interactiveRadio = screen.getByTestId(
-		'permission-editor-mode-interactive',
-	);
-	await user.click(interactiveRadio);
-}
-
-describe('JsonEditor', () => {
-	describe('initial render', () => {
-		it('renders JSON editor when JSON mode selected', async () => {
-			renderPage();
-			await switchToJsonMode();
-
-			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
-		});
-
-		it('renders JSON editor container div', async () => {
-			renderPage();
-			await switchToJsonMode();
-
-			const jsonEditor = screen.getByTestId('json-editor');
-			expect(jsonEditor.querySelector('div')).toBeInTheDocument();
-		});
-	});
-
-	describe('sync with interactive mode', () => {
-		it('syncs changes from interactive mode when switching to JSON', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			await screen.findByTestId('permission-editor');
-			await switchToInteractiveMode();
-
-			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-create',
-			);
-			await user.click(await within(createToggle).findByText('All'));
-
-			await switchToJsonMode();
-
-			const jsonEditor = screen.getByTestId('json-editor');
-			expect(jsonEditor).toBeInTheDocument();
-		});
-
-		it('preserves changes when switching back to interactive', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			await screen.findByTestId('permission-editor');
-			await switchToInteractiveMode();
-
-			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-create',
-			);
-			await user.click(await within(createToggle).findByText('All'));
-
-			await switchToJsonMode();
-
-			const interactiveRadio = screen.getByTestId(
-				'permission-editor-mode-interactive',
-			);
-			await user.click(interactiveRadio);
-
-			const scopeToggle = within(
-				screen.getByTestId('action-toggle-factor-api-key-create'),
-			).getByTestId('action-toggle-scope-factor-api-key-create');
-			expect(
-				within(scopeToggle).getByRole('radio', { name: 'All' }),
-			).toBeChecked();
-		});
-	});
-
-	describe('error handling', () => {
-		it('no error shown initially with valid JSON', async () => {
-			renderPage();
-			await switchToJsonMode();
-
-			expect(screen.queryByTestId('json-editor-error')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('JSON structure', () => {
-		it('produces valid transactionGroups format', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			await screen.findByTestId('permission-editor');
-			await switchToInteractiveMode();
-
-			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'test-key-123{enter}');
-
-			await switchToJsonMode();
-
-			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
-		});
-
-		it('handles wildcard selector for All scope', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			await screen.findByTestId('permission-editor');
-			await switchToInteractiveMode();
-
-			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-create',
-			);
-			await user.click(await within(createToggle).findByText('All'));
-
-			await switchToJsonMode();
-
-			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
-		});
-	});
-
-	describe('mode switching', () => {
-		it('reinitializes JSON buffer on switch from interactive to JSON', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			await screen.findByTestId('permission-editor');
-			await switchToJsonMode();
-
-			const interactiveRadio = screen.getByTestId(
-				'permission-editor-mode-interactive',
-			);
-			await user.click(interactiveRadio);
-
-			const apiKeyCard = await screen.findByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			await user.click(header);
-
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('All'));
-
-			await switchToJsonMode();
-
-			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,523 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-jest.mock('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');
-	await user.click(expandButton);
-}
-
-beforeEach(() => {
-	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-});
-
-afterEach(() => {
-	jest.clearAllMocks();
-});
-
-function renderPage(): ReturnType<typeof render> {
-	return render(
-		<TooltipProvider>
-			<Switch>
-				<Route path={ROUTES.ROLES_SETTINGS} exact>
-					<div data-testid="roles-list-redirect" />
-				</Route>
-				<Route path={ROUTES.ROLE_CREATE}>
-					<CreateEditRolePage />
-				</Route>
-			</Switch>
-		</TooltipProvider>,
-		undefined,
-		{ initialRoute: '/settings/roles/new' },
-	);
-}
-
-describe('PermissionEditor', () => {
-	describe('mode toggle', () => {
-		it('renders permission editor with testId', () => {
-			renderPage();
-
-			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
-		});
-
-		it('defaults to interactive mode', () => {
-			renderPage();
-
-			const interactiveRadio = screen.getByTestId(
-				'permission-editor-mode-interactive',
-			);
-			expect(interactiveRadio).toBeChecked();
-		});
-
-		it('switches to JSON mode when clicked', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
-			await user.click(jsonRadio);
-
-			expect(jsonRadio).toBeChecked();
-			expect(screen.getByTestId('json-editor')).toBeInTheDocument();
-		});
-
-		it('switches back to interactive mode', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
-			await user.click(jsonRadio);
-
-			const interactiveRadio = screen.getByTestId(
-				'permission-editor-mode-interactive',
-			);
-			await user.click(interactiveRadio);
-
-			expect(interactiveRadio).toBeChecked();
-			expect(screen.queryByTestId('json-editor')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('resource cards', () => {
-		it('renders all resource cards', () => {
-			renderPage();
-
-			expect(
-				screen.getByTestId('resource-card-factor-api-key'),
-			).toBeInTheDocument();
-			expect(screen.getByTestId('resource-card-role')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('resource-card-serviceaccount'),
-			).toBeInTheDocument();
-		});
-
-		it('resource cards are collapsed by default', () => {
-			renderPage();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-
-			expect(header).toHaveAttribute('aria-expanded', 'false');
-		});
-
-		it('expands resource card when header clicked', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-
-			await user.click(header);
-
-			expect(header).toHaveAttribute('aria-expanded', 'true');
-		});
-
-		it('collapses expanded resource card when header clicked again', async () => {
-			const user = userEvent.setup();
-			renderPage();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-
-			await user.click(header);
-			await user.click(header);
-
-			expect(header).toHaveAttribute('aria-expanded', 'false');
-		});
-
-		it('shows granted count in resource card header', async () => {
-			renderPage();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			await expect(
-				within(apiKeyCard).findByText(/0 \/ \d+ granted/),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('action toggles', () => {
-		it('renders action toggles for each available action', async () => {
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			expect(
-				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-read'),
-			).toBeInTheDocument();
-			expect(
-				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-read'),
-			).toBeInTheDocument();
-			expect(
-				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-update'),
-			).toBeInTheDocument();
-			expect(
-				within(apiKeyCard).getByTestId('action-toggle-factor-api-key-delete'),
-			).toBeInTheDocument();
-		});
-
-		it('defaults all actions to None scope', async () => {
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			const scopeToggle = within(createToggle).getByTestId(
-				'action-toggle-scope-factor-api-key-read',
-			);
-			expect(
-				within(scopeToggle).getByRole('radio', { name: 'None' }),
-			).toBeChecked();
-		});
-
-		it('changes scope to All when clicked', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			const allBtn = await within(createToggle).findByText('All');
-			await user.click(allBtn);
-
-			const scopeToggle = within(createToggle).getByTestId(
-				'action-toggle-scope-factor-api-key-read',
-			);
-			expect(
-				within(scopeToggle).getByRole('radio', { name: 'All' }),
-			).toBeChecked();
-		});
-
-		it('updates granted count when scope changed', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('All'));
-
-			await expect(
-				within(apiKeyCard).findByText(/1 \/ \d+ granted/),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('Only Selected scope', () => {
-		it('shows item input selector when Only Selected is chosen', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			const onlySelectedBtn =
-				await within(createToggle).findByText('Only selected');
-			await user.click(onlySelectedBtn);
-
-			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
-		});
-
-		it('adds item when typed and Enter pressed', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'api-key-001{enter}');
-
-			await expect(screen.findByText('api-key-001')).resolves.toBeInTheDocument();
-		});
-
-		it('adds item when Add button clicked', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'api-key-002');
-
-			const addBtn = screen.getByTestId('item-input-selector-add-btn');
-			await user.click(addBtn);
-
-			await expect(screen.findByText('api-key-002')).resolves.toBeInTheDocument();
-		});
-
-		it('adds multiple items separated by comma', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'key-a, key-b, key-c{enter}');
-
-			await expect(screen.findByText('key-a')).resolves.toBeInTheDocument();
-			await expect(screen.findByText('key-b')).resolves.toBeInTheDocument();
-			await expect(screen.findByText('key-c')).resolves.toBeInTheDocument();
-		});
-
-		it('adds multiple items separated by space', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'key-x key-y key-z{enter}');
-
-			await expect(screen.findByText('key-x')).resolves.toBeInTheDocument();
-			await expect(screen.findByText('key-y')).resolves.toBeInTheDocument();
-			await expect(screen.findByText('key-z')).resolves.toBeInTheDocument();
-		});
-
-		it('does not add duplicate items', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'same-key{enter}');
-			await user.type(input, 'same-key{enter}');
-
-			const badges = screen.getAllByText('same-key');
-			expect(badges).toHaveLength(1);
-		});
-
-		it('removes item when X clicked', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'removable-key{enter}');
-
-			const removeBtn = screen.getByRole('button', {
-				name: /remove removable-key/i,
-			});
-			await user.click(removeBtn);
-
-			expect(screen.queryByText('removable-key')).not.toBeInTheDocument();
-		});
-
-		it('shows Add button disabled when input is empty', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const addBtn = screen.getByTestId('item-input-selector-add-btn');
-			expect(addBtn).toBeDisabled();
-		});
-	});
-
-	describe('scope change confirmation dialog', () => {
-		it('shows confirm dialog when leaving Only Selected with items', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'will-be-cleared{enter}');
-
-			await user.click(await within(createToggle).findByText('All'));
-
-			await expect(
-				screen.findByText('Change permission scope?'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('clears items when confirmed', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'to-be-cleared{enter}');
-
-			await user.click(await within(createToggle).findByText('All'));
-
-			const dialog = await screen.findByRole('dialog');
-			await user.click(
-				within(dialog).getByRole('button', { name: /change scope/i }),
-			);
-
-			await waitFor(() => {
-				expect(screen.queryByText('to-be-cleared')).not.toBeInTheDocument();
-			});
-		});
-
-		it('keeps items when cancelled', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId('item-input-selector-input');
-			await user.type(input, 'preserved-key{enter}');
-
-			await user.click(await within(createToggle).findByText('None'));
-
-			const dialog = await screen.findByRole('dialog');
-			await user.click(within(dialog).getByRole('button', { name: /cancel/i }));
-
-			await expect(
-				screen.findByText('preserved-key'),
-			).resolves.toBeInTheDocument();
-
-			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
-		});
-
-		it('does not show dialog when leaving Only Selected with no items', async () => {
-			const user = userEvent.setup();
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const createToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-
-			await user.click(await within(createToggle).findByText('Only selected'));
-			await user.click(await within(createToggle).findByText('All'));
-
-			expect(
-				screen.queryByText('Change permission scope?'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('verbs without Only Selected option', () => {
-		it('does not show Only Selected for list verb', async () => {
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const listToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-list',
-			);
-
-			expect(
-				within(listToggle).queryByText('Only selected'),
-			).not.toBeInTheDocument();
-			await expect(
-				within(listToggle).findByText('None'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				within(listToggle).findByText('All'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('collapse/expand all resources', () => {
-		it('shows expand/collapse toggle group', () => {
-			renderPage();
-
-			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
-			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
-			expect(screen.getByTestId('collapse-all-button')).toBeInTheDocument();
-		});
-
-		it('expands all cards when expand button clicked', async () => {
-			renderPage();
-			await expandAllCards();
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const header = within(apiKeyCard).getByTestId(
-				'resource-card-header-factor-api-key',
-			);
-			expect(header).toHaveAttribute('aria-expanded', 'true');
-		});
-	});
-});

frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.module.scss

@@ -1,65 +0,0 @@
-.actionToggle {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	padding: var(--spacing-6) var(--spacing-8);
-
-	&::after {
-		content: '';
-		position: absolute;
-		right: var(--spacing-8);
-		bottom: 0;
-		left: var(--spacing-8);
-		height: 1px;
-		background: var(--l2-border);
-	}
-
-	&:last-child::after {
-		display: none;
-	}
-}
-
-.actionToggleHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.actionToggleScopeToggle {
-	flex-shrink: 0;
-	width: fit-content;
-
-	--toggle-group-item-size: 1.4rem;
-	--toggle-group-item-padding-right: 0.4rem;
-	--toggle-group-item-border-style: none;
-	--toggle-group-secondary-active-bg: var(--bg-robin-800);
-	--toggle-group-item-align-items: baseline;
-
-	gap: var(--spacing-2);
-	padding: var(--spacing-2);
-
-	button {
-		min-width: 46px;
-		font-weight: bold;
-
-		&[data-state='on'] {
-			color: var(--bg-robin-200);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--bg-robin-500);
-			outline-offset: 2px;
-			border-radius: var(--radius-2);
-		}
-	}
-}
-
-.actionToggleSelectorWrapper {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-
-	--divider-color: var(--l2-border);
-}

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

@@ -1,160 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { Divider } from '@signozhq/ui/divider';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Typography } from '@signozhq/ui/typography';
-
-import { PermissionScope } from '../../types';
-import { getResourcePanel } from '../../permissions.config';
-import ItemInputSelector from './ItemInputSelector';
-
-import styles from './ActionToggle.module.scss';
-import { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
-import { getActionLabel } from 'container/RolesSettings/ViewRolePage/components/permissionDisplay.utils';
-
-const SCOPE_LABELS: Record<PermissionScope, string> = {
-	[PermissionScope.NONE]: 'None',
-	[PermissionScope.ALL]: 'All',
-	[PermissionScope.ONLY_SELECTED]: 'Only selected',
-};
-
-interface ActionToggleProps {
-	action: AuthZVerb;
-	scope: string;
-	selectedIds: string[];
-	resource: AuthZResource;
-	canSelectIndividually: boolean;
-	onScopeChange: (scope: PermissionScope) => void;
-	onSelectedIdsChange: (ids: string[]) => void;
-	hasError?: boolean;
-}
-
-function ActionToggle({
-	action,
-	scope,
-	selectedIds,
-	resource,
-	canSelectIndividually,
-	onScopeChange,
-	onSelectedIdsChange,
-	hasError = false,
-}: ActionToggleProps): JSX.Element {
-	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
-	const [pendingScope, setPendingScope] = useState<PermissionScope | null>(null);
-
-	const displayLabel = getActionLabel(action);
-
-	const scopeItems: Array<{ value: PermissionScope; label: string }> =
-		useMemo(() => {
-			const items = [
-				{ value: PermissionScope.NONE, label: SCOPE_LABELS[PermissionScope.NONE] },
-				{ value: PermissionScope.ALL, label: SCOPE_LABELS[PermissionScope.ALL] },
-			];
-			if (canSelectIndividually) {
-				items.push({
-					value: PermissionScope.ONLY_SELECTED,
-					label: SCOPE_LABELS[PermissionScope.ONLY_SELECTED],
-				});
-			}
-			return items;
-		}, [canSelectIndividually]);
-
-	const handleToggleChange = useCallback(
-		(value: string): void => {
-			if (!value) {
-				return;
-			}
-
-			const isLeavingOnlySelected =
-				scope === PermissionScope.ONLY_SELECTED &&
-				value !== PermissionScope.ONLY_SELECTED;
-			const hasSelectedItems = selectedIds.length > 0;
-
-			if (isLeavingOnlySelected && hasSelectedItems) {
-				setPendingScope(value as PermissionScope);
-				setConfirmDialogOpen(true);
-				return;
-			}
-
-			onScopeChange(value as PermissionScope);
-		},
-		[scope, selectedIds.length, onScopeChange],
-	);
-
-	const handleConfirmScopeChange = useCallback((): void => {
-		if (pendingScope) {
-			onSelectedIdsChange([]);
-			onScopeChange(pendingScope);
-		}
-		setConfirmDialogOpen(false);
-		setPendingScope(null);
-	}, [pendingScope, onSelectedIdsChange, onScopeChange]);
-
-	const handleCancelScopeChange = useCallback((): void => {
-		setConfirmDialogOpen(false);
-		setPendingScope(null);
-	}, []);
-
-	return (
-		<>
-			<div
-				className={styles.actionToggle}
-				data-testid={`action-toggle-${resource}-${action}`}
-			>
-				<div className={styles.actionToggleHeader}>
-					<Typography as="span" size="base">
-						{displayLabel}
-					</Typography>
-					<ToggleGroupSimple
-						type="single"
-						size="sm"
-						value={scope}
-						onChange={handleToggleChange}
-						items={scopeItems}
-						className={styles.actionToggleScopeToggle}
-						testId={`action-toggle-scope-${resource}-${action}`}
-					/>
-				</div>
-
-				{scope === PermissionScope.ONLY_SELECTED && (
-					<div className={styles.actionToggleSelectorWrapper}>
-						<Divider />
-
-						<ItemInputSelector
-							placeholder={getResourcePanel(resource).selectorPlaceholder}
-							selectedIds={selectedIds}
-							onChange={onSelectedIdsChange}
-							docsAnchor={getResourcePanel(resource).docsAnchor}
-							hasError={hasError}
-						/>
-					</div>
-				)}
-			</div>
-
-			<ConfirmDialog
-				open={confirmDialogOpen}
-				onOpenChange={(next): void => {
-					if (!next) {
-						handleCancelScopeChange();
-					}
-				}}
-				title="Change permission scope?"
-				confirmText="Change scope"
-				cancelText="Cancel"
-				onConfirm={handleConfirmScopeChange}
-				onCancel={handleCancelScopeChange}
-			>
-				<Typography>
-					You have {selectedIds.length} item{selectedIds.length > 1 ? 's' : ''}{' '}
-					selected. Changing the scope will clear your current items.
-					<br />
-					<br />
-					Don&apos;t worry, this doesn&apos;t update this role yet, it only confirms
-					that you want to clear the items.
-				</Typography>
-			</ConfirmDialog>
-		</>
-	);
-}
-
-export default ActionToggle;

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.module.scss

@@ -1,105 +0,0 @@
-.itemInputSelector {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	background: var(--l1-background);
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	padding: var(--spacing-4);
-
-	--input-suffix-padding: var(--spacing-2);
-}
-
-.itemInputSelectorError {
-	border-color: var(--destructive);
-}
-
-.itemInputSelectorFooter {
-	position: relative;
-	display: flex;
-	align-items: flex-start;
-	gap: var(--spacing-3);
-	padding-top: var(--spacing-3);
-
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		height: 1px;
-		background: var(--l1-border);
-	}
-}
-
-.itemInputSelectorBadges {
-	flex: 1;
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--spacing-2);
-	max-height: 60px;
-	overflow-y: auto;
-}
-
-.itemInputSelectorInfoIcon {
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--l1-foreground);
-	}
-}
-
-.itemInputSelectorBadge {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	max-width: 140px;
-	padding: 2px 4px 2px 6px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-}
-
-.itemInputSelectorBadgeLabel {
-	flex: 1;
-	min-width: 0;
-}
-
-.itemInputSelectorBadgeRemove {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 14px;
-	height: 14px;
-	padding: 0;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--l2-foreground);
-	cursor: pointer;
-	transition:
-		background 0.15s ease,
-		color 0.15s ease;
-
-	&:hover {
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-	}
-}
-
-.itemInputSelectorHint {
-	margin: 0;
-	color: var(--l2-foreground);
-
-	a {
-		color: var(--primary);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}

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

@@ -1,206 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { Info, Plus, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-
-import styles from './ItemInputSelector.module.scss';
-
-const BASE_DOCS_URL =
-	'https://signoz.io/docs/manage/administrator-guide/iam/permissions/';
-
-export interface ItemInputSelectorProps {
-	placeholder: string;
-	selectedIds: string[];
-	onChange: (ids: string[]) => void;
-	docsAnchor?: string;
-	hasError?: boolean;
-}
-
-function parseInputValues(input: string): string[] {
-	return input
-		.split(/[\s,]+/)
-		.map((v) => v.trim())
-		.filter(Boolean);
-}
-
-function ItemInputSelector({
-	placeholder,
-	selectedIds,
-	onChange,
-	docsAnchor = 'role',
-	hasError = false,
-}: ItemInputSelectorProps): JSX.Element {
-	const [inputValue, setInputValue] = useState('');
-	const footerRef = useRef<HTMLDivElement>(null);
-
-	const addValues = useCallback(
-		(input: string): void => {
-			const values = parseInputValues(input);
-			if (values.length === 0) {
-				return;
-			}
-
-			const existingSet = new Set(selectedIds);
-			const newIds = values.filter((v) => !existingSet.has(v));
-
-			if (newIds.length > 0) {
-				onChange([...selectedIds, ...newIds]);
-			}
-
-			setInputValue('');
-		},
-		[selectedIds, onChange],
-	);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			setInputValue(e.target.value);
-		},
-		[],
-	);
-
-	const handleInputKeyDown = useCallback(
-		(e: React.KeyboardEvent<HTMLInputElement>): void => {
-			if (e.key === 'Enter') {
-				e.preventDefault();
-				addValues(inputValue);
-			}
-		},
-		[inputValue, addValues],
-	);
-
-	const handleInputBlur = useCallback((): void => {
-		addValues(inputValue);
-	}, [inputValue, addValues]);
-
-	const handleAddClick = useCallback((): void => {
-		addValues(inputValue);
-	}, [inputValue, addValues]);
-
-	const handleRemove = useCallback(
-		(itemId: string): void => {
-			onChange(selectedIds.filter((id) => id !== itemId));
-		},
-		[selectedIds, onChange],
-	);
-
-	const handleBadgeKeyDown = useCallback(
-		(
-			e: React.KeyboardEvent<HTMLButtonElement>,
-			itemId: string,
-			index: number,
-		): void => {
-			if (e.key !== 'Enter' && e.key !== ' ') {
-				return;
-			}
-
-			e.preventDefault();
-			handleRemove(itemId);
-
-			const targetIndex = index > 0 ? index - 1 : 0;
-			requestAnimationFrame(() => {
-				const buttons = footerRef.current?.querySelectorAll('button');
-				const targetButton = buttons?.[targetIndex] as
-					| HTMLButtonElement
-					| undefined;
-				targetButton?.focus();
-			});
-		},
-		[handleRemove],
-	);
-
-	const showError = hasError && selectedIds.length === 0;
-
-	return (
-		<div
-			className={cx(
-				styles.itemInputSelector,
-				showError ? styles.itemInputSelectorError : '',
-			)}
-			data-testid="item-input-selector"
-		>
-			<Input
-				placeholder={placeholder}
-				value={inputValue}
-				onChange={handleInputChange}
-				onKeyDown={handleInputKeyDown}
-				onBlur={handleInputBlur}
-				data-testid="item-input-selector-input"
-				suffix={
-					<Button
-						variant="solid"
-						size="sm"
-						onClick={handleAddClick}
-						disabled={!inputValue.trim()}
-						data-testid="item-input-selector-add-btn"
-					>
-						<Plus size={14} />
-						Add
-					</Button>
-				}
-			/>
-
-			{selectedIds.length > 0 ? (
-				<div ref={footerRef} className={styles.itemInputSelectorFooter}>
-					<div className={styles.itemInputSelectorBadges}>
-						{selectedIds.map((id, index) => (
-							<span key={id} className={styles.itemInputSelectorBadge} title={id}>
-								<Typography
-									as="span"
-									size="small"
-									truncate={1}
-									className={styles.itemInputSelectorBadgeLabel}
-								>
-									{id}
-								</Typography>
-								<button
-									type="button"
-									className={styles.itemInputSelectorBadgeRemove}
-									onClick={(): void => handleRemove(id)}
-									onKeyDown={(e): void => handleBadgeKeyDown(e, id, index)}
-									aria-label={`Remove ${id}`}
-								>
-									<X size={10} />
-								</button>
-							</span>
-						))}
-					</div>
-					<TooltipSimple
-						title={
-							<Typography align="left">
-								Still not sure on how to add selectors? <br />
-								<Typography.Link
-									href={`${BASE_DOCS_URL}#${docsAnchor}`}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									Check the docs
-								</Typography.Link>{' '}
-								to understand selectors for this resource.
-							</Typography>
-						}
-					>
-						<Info size={16} className={styles.itemInputSelectorInfoIcon} />
-					</TooltipSimple>
-				</div>
-			) : (
-				<Typography className={styles.itemInputSelectorHint}>
-					Not sure what to type here?{' '}
-					<Typography.Link
-						href={`${BASE_DOCS_URL}#${docsAnchor}`}
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Check the docs
-					</Typography.Link>{' '}
-					to understand selectors for this resource.
-				</Typography>
-			)}
-		</div>
-	);
-}
-
-export default ItemInputSelector;

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.module.scss

@@ -1,44 +0,0 @@
-.jsonEditor {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	flex: 1;
-	min-height: 0;
-}
-
-.jsonEditorContainer {
-	position: relative;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	flex: 1;
-	min-height: 200px;
-}
-
-.copyButton {
-	position: absolute;
-	top: 8px;
-	right: 24px;
-	z-index: 10;
-}
-
-.jsonEditorErrorWrapper {
-	min-height: 52px;
-}
-
-.jsonEditorError {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--spacing-2);
-	padding: var(--spacing-4) var(--spacing-6);
-	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-	border: 1px solid var(--danger-background);
-	border-radius: 4px;
-}
-
-.jsonEditorErrorMessage {
-	font-family:
-		Geist Mono,
-		monospace;
-	word-break: break-word;
-}

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

@@ -1,234 +0,0 @@
-import {
-	forwardRef,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useState,
-	useRef,
-} from 'react';
-import { useCopyToClipboard } from 'react-use';
-import MEditor, { Monaco, OnMount } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-import { Check, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import type { AuthtypesTransactionGroupDTO } from 'api/generated/services/sigNoz.schemas';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	defineJsonTheme,
-	EDITABLE_EDITOR_OPTIONS,
-	JSON_THEME_DARK,
-} from '../../monaco.config';
-import {
-	transformResourcePermissionsToTransactionGroups,
-	transformTransactionGroupsToResourcePermissions,
-} from '../../hooks/useRolePermissions';
-import {
-	registerCompletionProvider,
-	registerJsonSchema,
-	ROLE_PERMISSIONS_MODEL_PATH,
-} from './jsonSchema.config';
-
-import styles from './JsonEditor.module.scss';
-import { JsonEditorProps, JsonEditorRef } from './JsonEditor.types';
-
-type MonacoEditor = Parameters<OnMount>[0];
-
-const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
-	function JsonEditor({ resources, mode, onChange, onValidityChange }, ref) {
-		const isDarkMode = useIsDarkMode();
-		const [copyState, copyToClipboard] = useCopyToClipboard();
-		const [copied, setCopied] = useState(false);
-		const [parseError, setParseError] = useState<string | null>(null);
-		const [schemaErrors, setSchemaErrors] = useState<string[]>([]);
-		const [jsonBuffer, setJsonBuffer] = useState<string>(() => {
-			const transactionGroups =
-				transformResourcePermissionsToTransactionGroups(resources);
-			return JSON.stringify(transactionGroups, null, 2);
-		});
-		const prevModeRef = useRef(mode);
-		const completionDisposableRef = useRef<{ dispose(): void } | null>(null);
-		const editorRef = useRef<MonacoEditor | null>(null);
-		const markersListenerRef = useRef<{ dispose(): void } | null>(null);
-
-		const hasError = parseError !== null || schemaErrors.length > 0;
-
-		useImperativeHandle(ref, () => ({
-			hasParseError: (): boolean => hasError,
-		}));
-
-		useEffect(() => {
-			onValidityChange?.(hasError);
-		}, [hasError, onValidityChange]);
-
-		// Reinitialize buffer when switching from interactive to json mode
-		useEffect(() => {
-			const wasInteractive = prevModeRef.current === 'interactive';
-			const isNowJson = mode === 'json';
-
-			if (wasInteractive && isNowJson) {
-				const transactionGroups =
-					transformResourcePermissionsToTransactionGroups(resources);
-				setJsonBuffer(JSON.stringify(transactionGroups, null, 2));
-				setParseError(null);
-			}
-
-			prevModeRef.current = mode;
-		}, [mode, resources]);
-
-		const handleEditorChange = useCallback(
-			(value: string | undefined): void => {
-				if (!value) {
-					return;
-				}
-
-				setJsonBuffer(value);
-
-				try {
-					const parsed = JSON.parse(value) as AuthtypesTransactionGroupDTO[];
-					const resourcePermissions =
-						transformTransactionGroupsToResourcePermissions(parsed);
-					setParseError(null);
-					onChange(resourcePermissions);
-				} catch (err) {
-					setParseError(err instanceof Error ? err.message : 'Invalid JSON format');
-				}
-			},
-			[onChange],
-		);
-
-		const configureMonaco = useCallback((monaco: Monaco): void => {
-			defineJsonTheme(monaco);
-			registerJsonSchema(monaco);
-			completionDisposableRef.current = registerCompletionProvider(monaco);
-		}, []);
-
-		const handleEditorMount: OnMount = useCallback((editorInstance, monaco) => {
-			editorRef.current = editorInstance;
-
-			type MonacoMarker = ReturnType<typeof monaco.editor.getModelMarkers>[number];
-
-			markersListenerRef.current = monaco.editor.onDidChangeMarkers(
-				(uris: readonly Parameters<typeof monaco.Uri.parse>[0][]) => {
-					const model = editorInstance.getModel();
-					if (!model) {
-						return;
-					}
-
-					const modelUri = model.uri.toString();
-					const hasRelevantChange = uris.some((uri) => uri.toString() === modelUri);
-					if (!hasRelevantChange) {
-						return;
-					}
-
-					const markers = monaco.editor.getModelMarkers({ resource: model.uri });
-					const errors = markers
-						.filter(
-							(marker: MonacoMarker) =>
-								marker.severity === monaco.MarkerSeverity.Error,
-						)
-						.map(
-							(marker: MonacoMarker) =>
-								`Line ${marker.startLineNumber}: ${marker.message}`,
-						);
-
-					setSchemaErrors(errors);
-				},
-			);
-		}, []);
-
-		useEffect(
-			() => (): void => {
-				completionDisposableRef.current?.dispose();
-				markersListenerRef.current?.dispose();
-			},
-			[],
-		);
-
-		useEffect(() => {
-			if (copyState.value) {
-				setCopied(true);
-				const timer = setTimeout(() => setCopied(false), 1500);
-				return (): void => clearTimeout(timer);
-			}
-			return undefined;
-		}, [copyState]);
-
-		const handleCopy = useCallback((): void => {
-			copyToClipboard(jsonBuffer);
-		}, [copyToClipboard, jsonBuffer]);
-
-		return (
-			<div className={styles.jsonEditor} data-testid="json-editor">
-				<div className={styles.jsonEditorContainer}>
-					<TooltipSimple title={copied ? 'Copied!' : 'Copy JSON'}>
-						<Button
-							variant="ghost"
-							size="sm"
-							className={styles.copyButton}
-							onClick={handleCopy}
-						>
-							{copied ? (
-								<Check size={14} color={Color.BG_FOREST_400} />
-							) : (
-								<Copy
-									size={14}
-									color={isDarkMode ? Color.BG_VANILLA_400 : Color.TEXT_INK_400}
-								/>
-							)}
-						</Button>
-					</TooltipSimple>
-					<MEditor
-						value={jsonBuffer}
-						language="json"
-						path={ROLE_PERMISSIONS_MODEL_PATH}
-						options={EDITABLE_EDITOR_OPTIONS}
-						onChange={handleEditorChange}
-						onMount={handleEditorMount}
-						height="100%"
-						theme={isDarkMode ? JSON_THEME_DARK : 'light'}
-						beforeMount={configureMonaco}
-					/>
-				</div>
-				<div className={styles.jsonEditorErrorWrapper}>
-					{parseError && (
-						<div className={styles.jsonEditorError} data-testid="json-editor-error">
-							<Typography as="span" size="base" weight="medium">
-								Parse Error:
-							</Typography>
-							<Typography
-								as="span"
-								size="base"
-								className={styles.jsonEditorErrorMessage}
-							>
-								{parseError}
-							</Typography>
-						</div>
-					)}
-					{!parseError && schemaErrors.length > 0 && (
-						<div
-							className={styles.jsonEditorError}
-							data-testid="json-editor-schema-error"
-						>
-							<Typography as="span" size="base" weight="medium">
-								Schema Error:
-							</Typography>
-							<Typography
-								as="span"
-								size="base"
-								className={styles.jsonEditorErrorMessage}
-							>
-								{schemaErrors[0]}
-								{schemaErrors.length > 1 && ` (+${schemaErrors.length - 1} more)`}
-							</Typography>
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	},
-);
-
-export default JsonEditor;

frontend/src/container/RolesSettings/CreateEditRolePage/components/JsonEditor.types.ts

@@ -1,14 +0,0 @@
-import { ResourcePermissions } from '../../types';
-
-export type EditorMode = 'interactive' | 'json';
-
-export interface JsonEditorProps {
-	resources: ResourcePermissions[];
-	mode: EditorMode;
-	onChange: (resources: ResourcePermissions[]) => void;
-	onValidityChange?: (hasError: boolean) => void;
-}
-
-export interface JsonEditorRef {
-	hasParseError: () => boolean;
-}

frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.module.scss

@@ -1,155 +0,0 @@
-.permissionEditor {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	flex: 1;
-	min-height: 0;
-}
-
-.permissionEditorHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.permissionEditorTitle {
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	position: relative;
-}
-
-.permissionEditorDivider {
-	height: 7px;
-	flex: 1 1 0%;
-	border-width: medium medium;
-	border-style: none none;
-	border-color: currentcolor currentcolor;
-	border-image: initial;
-	border-top: 2px dotted var(--l1-border);
-	border-bottom: 2px dotted var(--l1-border);
-	margin: 0px var(--spacing-4);
-}
-
-.permissionEditorModeToggle {
-	display: inline-flex;
-	grid-auto-flow: column;
-	gap: 0;
-	flex-shrink: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-}
-
-.permissionEditorModeItem {
-	position: relative;
-	display: flex;
-	align-items: center;
-
-	&:not(:last-child) {
-		border-right: 1px solid var(--l2-border);
-	}
-
-	label {
-		display: flex;
-		align-items: center;
-		min-height: 24px;
-		padding: var(--spacing-3) var(--spacing-6);
-		font-family: Inter;
-		font-size: var(--periscope-font-size-base);
-		line-height: var(--line-height-20);
-		color: var(--l2-foreground);
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-	}
-}
-
-.permissionEditorModeInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-
-	* {
-		display: none;
-	}
-
-	&[data-state='checked'] + label {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
-		font-weight: var(--font-weight-medium);
-	}
-}
-
-.permissionEditorContent {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-}
-
-.permissionEditorResourceList {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	padding-bottom: var(--spacing-8);
-}
-
-.permissionEditorCollapsedSection {
-	display: flex;
-	flex-direction: column;
-}
-
-.permissionEditorCollapsedHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	width: 100%;
-	padding: var(--spacing-4) var(--spacing-6);
-	background: var(--l3-background);
-	border: 1px dashed var(--l2-border);
-	border-radius: 4px;
-	cursor: pointer;
-	transition: background 0.15s ease;
-	text-align: left;
-
-	&:hover {
-		background: var(--l2-background);
-	}
-
-	&:focus {
-		outline: 2px solid var(--primary);
-		outline-offset: -2px;
-	}
-}
-
-.permissionEditorCollapsedLabel {
-	font-family: Inter;
-	font-size: var(--periscope-font-size-base);
-	font-weight: var(--font-weight-normal);
-	line-height: var(--line-height-20);
-	color: var(--l2-foreground);
-	flex: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.permissionEditorCollapsedCount {
-	font-family: Inter;
-	font-size: var(--periscope-font-size-base);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-20);
-	color: var(--primary);
-	flex-shrink: 0;
-}
-
-.permissionEditorCollapseAction {
-	display: flex;
-	justify-content: flex-start;
-	padding-bottom: var(--spacing-4);
-}

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

@@ -1,252 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { SolidAlertTriangle } from '@signozhq/icons';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { Typography } from '@signozhq/ui/typography';
-import { Skeleton } from 'antd';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
-
-import { PermissionScope, ResourcePermissions } from '../../types';
-import type { EditorMode, JsonEditorRef } from './JsonEditor.types';
-import JsonEditor from './JsonEditor';
-import ResourceCard from './ResourceCard';
-
-import styles from './PermissionEditor.module.scss';
-
-interface PermissionEditorProps {
-	resources: ResourcePermissions[];
-	mode: EditorMode;
-	onModeChange: (mode: EditorMode) => void;
-	onResourceChange: (resources: ResourcePermissions[]) => void;
-	onJsonValidityChange?: (hasError: boolean) => void;
-	isLoading?: boolean;
-	validationErrors?: Set<string>;
-}
-
-function PermissionEditor({
-	resources,
-	mode,
-	onModeChange,
-	onResourceChange,
-	onJsonValidityChange,
-	isLoading = false,
-	validationErrors,
-}: PermissionEditorProps): JSX.Element {
-	const jsonEditorRef = useRef<JsonEditorRef>(null);
-
-	const handleJsonValidityChange = useCallback(
-		(hasError: boolean): void => {
-			onJsonValidityChange?.(mode === 'json' && hasError);
-		},
-		[mode, onJsonValidityChange],
-	);
-	const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
-	const [expandedResources, setExpandedResources] = useState<Set<string>>(
-		new Set(),
-	);
-
-	const handleExpandAll = useCallback((): void => {
-		setExpandedResources(new Set(resources.map((r) => r.resourceId)));
-	}, [resources]);
-
-	const handleCollapseAll = useCallback((): void => {
-		setExpandedResources(new Set());
-	}, []);
-
-	const handleExpandChange = useCallback(
-		(resourceId: string) =>
-			(expanded: boolean): void => {
-				setExpandedResources((prev) => {
-					const next = new Set(prev);
-					if (expanded) {
-						next.add(resourceId);
-					} else {
-						next.delete(resourceId);
-					}
-					return next;
-				});
-			},
-		[],
-	);
-
-	const handleActionChange = useCallback(
-		(
-			resourceId: AuthZResource,
-			action: AuthZVerb,
-			scope: PermissionScope,
-			selectedIds: string[],
-		): void => {
-			const updatedResources = resources.map((r) => {
-				if (r.resourceId !== resourceId) {
-					return r;
-				}
-				return {
-					...r,
-					actions: {
-						...r.actions,
-						[action]: {
-							scope: scope,
-							selectedIds,
-						},
-					},
-				};
-			});
-			onResourceChange(updatedResources);
-		},
-		[resources, onResourceChange],
-	);
-
-	const handleJsonChange = useCallback(
-		(updatedResources: ResourcePermissions[]): void => {
-			onResourceChange(updatedResources);
-		},
-		[onResourceChange],
-	);
-
-	const handleModeChange = useCallback(
-		(value: string): void => {
-			const newMode = value as EditorMode;
-
-			if (
-				newMode === 'interactive' &&
-				mode === 'json' &&
-				jsonEditorRef.current?.hasParseError()
-			) {
-				setShowDiscardConfirm(true);
-				return;
-			}
-
-			if (newMode === 'interactive') {
-				onJsonValidityChange?.(false);
-			}
-
-			onModeChange(newMode);
-		},
-		[mode, onModeChange, onJsonValidityChange],
-	);
-
-	const handleDiscardConfirm = useCallback(async (): Promise<boolean> => {
-		onJsonValidityChange?.(false);
-		onModeChange('interactive');
-		setShowDiscardConfirm(false);
-		return true;
-	}, [onModeChange, onJsonValidityChange]);
-
-	const handleDiscardCancel = useCallback((): void => {
-		setShowDiscardConfirm(false);
-	}, []);
-
-	if (isLoading) {
-		return (
-			<div className={styles.permissionEditor}>
-				<Skeleton active paragraph={{ rows: 6 }} />
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.permissionEditor} data-testid="permission-editor">
-			<div className={styles.permissionEditorHeader}>
-				<Typography
-					as="span"
-					size="small"
-					weight="medium"
-					color="muted"
-					className={styles.permissionEditorTitle}
-				>
-					Transaction Groups
-				</Typography>
-				<hr className={styles.permissionEditorDivider} />
-				<RadioGroup
-					className={styles.permissionEditorModeToggle}
-					value={mode}
-					onChange={handleModeChange}
-					testId="permission-editor-mode"
-				>
-					<RadioGroupItem
-						value="interactive"
-						containerClassName={styles.permissionEditorModeItem}
-						className={styles.permissionEditorModeInput}
-						testId="permission-editor-mode-interactive"
-					>
-						Interactive
-					</RadioGroupItem>
-					<RadioGroupItem
-						value="json"
-						containerClassName={styles.permissionEditorModeItem}
-						className={styles.permissionEditorModeInput}
-						testId="permission-editor-mode-json"
-					>
-						JSON
-					</RadioGroupItem>
-				</RadioGroup>
-			</div>
-
-			<div className={styles.permissionEditorContent}>
-				{mode === 'interactive' ? (
-					<>
-						<div className={styles.permissionEditorCollapseAction}>
-							<ButtonGroup
-								variant="outlined"
-								color="secondary"
-								size="sm"
-								testId="toggle-all-group"
-							>
-								<Button onClick={handleExpandAll} data-testid="expand-all-button">
-									Expand all
-								</Button>
-								<Button onClick={handleCollapseAll} data-testid="collapse-all-button">
-									Collapse all
-								</Button>
-							</ButtonGroup>
-						</div>
-						<div className={styles.permissionEditorResourceList}>
-							{resources.map((resource) => (
-								<ResourceCard
-									key={resource.resourceId}
-									resource={resource}
-									onActionChange={handleActionChange}
-									isExpanded={expandedResources.has(resource.resourceId)}
-									onExpandChange={handleExpandChange(resource.resourceId)}
-									validationErrors={validationErrors}
-								/>
-							))}
-						</div>
-					</>
-				) : (
-					<JsonEditor
-						ref={jsonEditorRef}
-						resources={resources}
-						mode={mode}
-						onChange={handleJsonChange}
-						onValidityChange={handleJsonValidityChange}
-					/>
-				)}
-			</div>
-
-			<ConfirmDialog
-				open={showDiscardConfirm}
-				onOpenChange={(next): void => {
-					if (!next) {
-						handleDiscardCancel();
-					}
-				}}
-				title="Discard JSON changes?"
-				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-				confirmText="Discard"
-				confirmColor="destructive"
-				cancelText="Stay in JSON"
-				onConfirm={handleDiscardConfirm}
-				onCancel={handleDiscardCancel}
-			>
-				<Typography>
-					The JSON contains errors and cannot be parsed. Switching to Interactive
-					mode will discard your changes.
-				</Typography>
-			</ConfirmDialog>
-		</div>
-	);
-}
-
-export default PermissionEditor;

frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.module.scss

@@ -1,64 +0,0 @@
-.resourceCard {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	background: var(--l2-background);
-	transition: border-color 0.15s ease;
-}
-
-.resourceCardHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: var(--spacing-6) var(--spacing-8);
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	transition: background 0.15s ease;
-	text-align: left;
-
-	&:hover {
-		background: var(--l1-background-hover);
-	}
-
-	&:focus {
-		outline: 2px solid var(--primary);
-		outline-offset: -2px;
-	}
-}
-
-.resourceCardHeaderLeft {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.resourceCardChevron {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 16px;
-	height: 16px;
-	color: var(--l2-foreground);
-	flex-shrink: 0;
-}
-
-.resourceCardHeaderRight {
-	display: flex;
-	align-items: center;
-}
-
-.resourceCardBody {
-	display: flex;
-	flex-direction: column;
-
-	&::before {
-		content: '';
-		height: 1px;
-		margin: 0 var(--spacing-8);
-		background: var(--l2-border);
-	}
-}

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

@@ -1,132 +0,0 @@
-import { useCallback, useState } from 'react';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
-
-import { Typography } from '@signozhq/ui/typography';
-
-import { useRoleGrantedCount } from '../../hooks/useRoleGrantedCount';
-import { supportsOnlySelected } from '../../permissions.config';
-import ActionToggle from './ActionToggle';
-
-import styles from './ResourceCard.module.scss';
-import { PermissionScope, ResourcePermissions } from '../../types';
-
-interface ResourceCardProps {
-	resource: ResourcePermissions;
-	onActionChange: (
-		resourceId: AuthZResource,
-		action: AuthZVerb,
-		scope: PermissionScope,
-		selectedIds: string[],
-	) => void;
-	defaultExpanded?: boolean;
-	isExpanded?: boolean;
-	onExpandChange?: (expanded: boolean) => void;
-	validationErrors?: Set<string>;
-}
-
-function ResourceCard({
-	resource,
-	onActionChange,
-	defaultExpanded = false,
-	isExpanded: controlledExpanded,
-	onExpandChange,
-	validationErrors,
-}: ResourceCardProps): JSX.Element {
-	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-	const isControlled = controlledExpanded !== undefined;
-	const isExpanded = isControlled ? controlledExpanded : internalExpanded;
-
-	const handleToggleExpand = useCallback((): void => {
-		if (isControlled) {
-			onExpandChange?.(!controlledExpanded);
-		} else {
-			setInternalExpanded((prev) => !prev);
-		}
-	}, [isControlled, controlledExpanded, onExpandChange]);
-
-	const handleScopeChange = useCallback(
-		(action: AuthZVerb) =>
-			(scope: PermissionScope): void => {
-				const currentConfig = resource.actions[action];
-				const selectedIds =
-					scope === PermissionScope.ONLY_SELECTED
-						? (currentConfig?.selectedIds ?? [])
-						: [];
-				onActionChange(resource.resourceId, action, scope, selectedIds);
-			},
-		[resource.resourceId, resource.actions, onActionChange],
-	);
-
-	const handleSelectedIdsChange = useCallback(
-		(action: AuthZVerb) =>
-			(ids: string[]): void => {
-				const currentConfig = resource.actions[action];
-				onActionChange(
-					resource.resourceId,
-					action,
-					currentConfig?.scope ?? PermissionScope.ONLY_SELECTED,
-					ids,
-				);
-			},
-		[resource.resourceId, resource.actions, onActionChange],
-	);
-
-	const [grantedCount, totalCount] = useRoleGrantedCount(resource);
-
-	return (
-		<div
-			className={styles.resourceCard}
-			data-testid={`resource-card-${resource.resourceId}`}
-		>
-			<button
-				type="button"
-				className={styles.resourceCardHeader}
-				onClick={handleToggleExpand}
-				aria-expanded={isExpanded}
-				aria-label={`${resource.resourceLabel}: ${grantedCount} of ${totalCount} permissions granted`}
-				data-testid={`resource-card-header-${resource.resourceId}`}
-			>
-				<div className={styles.resourceCardHeaderLeft}>
-					<span className={styles.resourceCardChevron}>
-						{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-					</span>
-					<Typography as="span" size="base" weight="medium">
-						{resource.resourceLabel}
-					</Typography>
-				</div>
-				<div className={styles.resourceCardHeaderRight}>
-					<Typography as="span" size="base" color="muted">
-						{grantedCount} / {totalCount} granted
-					</Typography>
-				</div>
-			</button>
-
-			{isExpanded && (
-				<div className={styles.resourceCardBody}>
-					{resource.availableActions.map((action) => {
-						const actionConfig = resource.actions[action] ?? {
-							scope: PermissionScope.NONE,
-							selectedIds: [],
-						};
-						return (
-							<ActionToggle
-								key={action}
-								action={action}
-								scope={actionConfig.scope}
-								selectedIds={actionConfig.selectedIds}
-								resource={resource.resourceId}
-								canSelectIndividually={supportsOnlySelected(action)}
-								onScopeChange={handleScopeChange(action)}
-								onSelectedIdsChange={handleSelectedIdsChange(action)}
-								hasError={validationErrors?.has(`${resource.resourceId}:${action}`)}
-							/>
-						);
-					})}
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ResourceCard;

frontend/src/container/RolesSettings/CreateEditRolePage/components/__tests__/jsonSchema.config.test.ts

@@ -1,97 +0,0 @@
-import {
-	ROLE_PERMISSIONS_MODEL_PATH,
-	shouldProvideCompletions,
-} from '../jsonSchema.config';
-
-describe('shouldProvideCompletions', () => {
-	const validPath = `/some/path/${ROLE_PERMISSIONS_MODEL_PATH}`;
-	const invalidPath = '/some/other/file.json';
-
-	describe('model path validation', () => {
-		it('returns false when model path does not end with ROLE_PERMISSIONS_MODEL_PATH', () => {
-			expect(shouldProvideCompletions(invalidPath, '[')).toBe(false);
-		});
-
-		it('returns true when model path ends with ROLE_PERMISSIONS_MODEL_PATH and at array position', () => {
-			expect(shouldProvideCompletions(validPath, '[')).toBe(true);
-		});
-	});
-
-	describe('cursor position validation', () => {
-		it('returns true when cursor is after opening bracket', () => {
-			expect(shouldProvideCompletions(validPath, '[')).toBe(true);
-		});
-
-		it('returns true when cursor is after comma at root level', () => {
-			expect(shouldProvideCompletions(validPath, '[{},\n')).toBe(true);
-		});
-
-		it('returns true with whitespace before bracket', () => {
-			expect(shouldProvideCompletions(validPath, '  \n  [')).toBe(true);
-		});
-
-		it('returns true with whitespace before comma', () => {
-			expect(shouldProvideCompletions(validPath, '[{}  ,  ')).toBe(true);
-		});
-
-		it('returns false when cursor is in middle of text', () => {
-			expect(shouldProvideCompletions(validPath, '[{"foo"')).toBe(false);
-		});
-
-		it('returns false when cursor is after closing bracket', () => {
-			expect(shouldProvideCompletions(validPath, '[]')).toBe(false);
-		});
-
-		it('returns false when cursor is after colon', () => {
-			expect(shouldProvideCompletions(validPath, '[{"key":')).toBe(false);
-		});
-	});
-
-	describe('brace depth validation', () => {
-		it('returns false when cursor is inside an object', () => {
-			expect(shouldProvideCompletions(validPath, '[{')).toBe(false);
-		});
-
-		it('returns false when cursor is inside nested object', () => {
-			const text = '[{"objectGroup": {"resource": {';
-			expect(shouldProvideCompletions(validPath, text)).toBe(false);
-		});
-
-		it('returns true when all objects are closed and at comma', () => {
-			const text = '[{"objectGroup": {"resource": {}}}],';
-			expect(shouldProvideCompletions(validPath, text)).toBe(true);
-		});
-
-		it('returns true after complete object with comma', () => {
-			const text = `[{
-  "objectGroup": {
-    "resource": { "kind": "dashboard", "type": "object" },
-    "selectors": ["*"]
-  },
-  "relation": "read"
-},`;
-			expect(shouldProvideCompletions(validPath, text)).toBe(true);
-		});
-
-		it('returns false inside partial object after comma', () => {
-			const text = `[{
-  "objectGroup": {
-    "resource": { "kind": "dashboard", "type": "object" },`;
-			expect(shouldProvideCompletions(validPath, text)).toBe(false);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('handles empty string', () => {
-			expect(shouldProvideCompletions(validPath, '')).toBe(false);
-		});
-
-		it('handles only whitespace', () => {
-			expect(shouldProvideCompletions(validPath, '   \n\t  ')).toBe(false);
-		});
-
-		it('handles unbalanced braces (more closing) - no completions for malformed JSON', () => {
-			expect(shouldProvideCompletions(validPath, '[{}}},')).toBe(false);
-		});
-	});
-});

frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts

@@ -1,207 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-import permissionsType from 'hooks/useAuthZ/permissions.type';
-import transactionGroupSchema from 'schemas/generated/transactionGroups.schema.json';
-
-export const TRANSACTION_GROUP_SCHEMA = transactionGroupSchema;
-
-const SCHEMA_URI = 'inmemory://model/transaction-groups-schema.json';
-export const ROLE_PERMISSIONS_MODEL_PATH = 'role-permissions.json';
-
-export function registerJsonSchema(monaco: Monaco): void {
-	monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-		validate: true,
-		schemaValidation: 'error',
-		schemas: [
-			{
-				uri: SCHEMA_URI,
-				fileMatch: [ROLE_PERMISSIONS_MODEL_PATH],
-				schema: TRANSACTION_GROUP_SCHEMA,
-			},
-		],
-	});
-}
-
-interface SnippetDef {
-	label: string;
-	insertText: string;
-	documentation: string;
-}
-
-type BasePermissionTypeDataResourcesType =
-	(typeof permissionsType.data)['resources'][number];
-
-function createGrantAllPermissionSnippet(
-	kind: BasePermissionTypeDataResourcesType['kind'],
-	allowedVerbs: BasePermissionTypeDataResourcesType['allowedVerbs'],
-	type: BasePermissionTypeDataResourcesType['type'],
-): SnippetDef {
-	return {
-		label: `${kind}:all`,
-		insertText: allowedVerbs
-			.map(
-				(verb) => `{
-  "objectGroup": {
-    "resource": { "kind": "${kind}", "type": "${type}" },
-    "selectors": ["*"]
-  },
-  "relation": "${verb}"
-}`,
-			)
-			.join(',\n'),
-		documentation: `Grant all permissions (${allowedVerbs.join(', ')}) on ${kind}`,
-	};
-}
-
-function createGrantPermissionToVerbAndKind(
-	kind: BasePermissionTypeDataResourcesType['kind'],
-	verb: string,
-	type: BasePermissionTypeDataResourcesType['type'],
-): SnippetDef {
-	return {
-		label: `${kind}:${verb}`,
-		insertText: `{
-  "objectGroup": {
-    "resource": { "kind": "${kind}", "type": "${type}" },
-    "selectors": ["*"]
-  },
-  "relation": "${verb}"
-}`,
-		documentation: `${verb} permission on ${kind}`,
-	};
-}
-
-function createGrantPermissionAsReadonly(
-	resources: (typeof permissionsType.data)['resources'],
-): SnippetDef {
-	return {
-		label: 'readonly',
-		insertText: resources
-			.filter(
-				(r) => r.allowedVerbs.includes('read') || r.allowedVerbs.includes('list'),
-			)
-			.flatMap((r) => {
-				const verbs = r.allowedVerbs.filter((v) => v === 'read' || v === 'list');
-				return verbs.map(
-					(verb) => `{
-  "objectGroup": {
-    "resource": { "kind": "${r.kind}", "type": "${r.type}" },
-    "selectors": ["*"]
-  },
-  "relation": "${verb}"
-}`,
-				);
-			})
-			.join(',\n'),
-		documentation: 'Read-only access to all resources (read + list)',
-	};
-}
-
-function buildResourceSnippets(): SnippetDef[] {
-	const { resources } = permissionsType.data;
-	const snippets: SnippetDef[] = [];
-
-	for (const resource of resources) {
-		const { kind, type, allowedVerbs } = resource;
-
-		snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
-
-		for (const verb of allowedVerbs) {
-			snippets.push(createGrantPermissionToVerbAndKind(kind, verb, type));
-		}
-	}
-
-	snippets.push(createGrantPermissionAsReadonly(resources));
-
-	return snippets;
-}
-
-const SNIPPETS = buildResourceSnippets();
-
-type MonacoModel = Parameters<
-	Parameters<
-		Monaco['languages']['registerCompletionItemProvider']
-	>[1]['provideCompletionItems']
->[0];
-type MonacoPosition = Parameters<
-	Parameters<
-		Monaco['languages']['registerCompletionItemProvider']
-	>[1]['provideCompletionItems']
->[1];
-
-interface Disposable {
-	dispose(): void;
-}
-
-/**
- * Check if completions should be provided based on model path and cursor position.
- * Pure function for testability.
- */
-export function shouldProvideCompletions(
-	modelPath: string,
-	textBeforeCursor: string,
-): boolean {
-	if (!modelPath.endsWith(ROLE_PERMISSIONS_MODEL_PATH)) {
-		return false;
-	}
-
-	const trimmed = textBeforeCursor.trim();
-	const endsAtArrayPosition = trimmed.endsWith('[') || trimmed.endsWith(',');
-
-	if (!endsAtArrayPosition) {
-		return false;
-	}
-
-	let braceDepth = 0;
-	for (const char of textBeforeCursor) {
-		if (char === '{') {
-			braceDepth++;
-		} else if (char === '}') {
-			braceDepth--;
-		}
-	}
-
-	return braceDepth === 0;
-}
-
-/**
- * Register completion provider for smart snippets.
- * Returns disposable to clean up on unmount.
- */
-export function registerCompletionProvider(monaco: Monaco): Disposable {
-	return monaco.languages.registerCompletionItemProvider('json', {
-		triggerCharacters: ['"', '{', '['],
-		provideCompletionItems(model: MonacoModel, position: MonacoPosition) {
-			const textBeforeCursor = model.getValueInRange({
-				startLineNumber: 1,
-				startColumn: 1,
-				endLineNumber: position.lineNumber,
-				endColumn: position.column,
-			});
-
-			if (!shouldProvideCompletions(model.uri.path, textBeforeCursor)) {
-				return { suggestions: [] };
-			}
-
-			const word = model.getWordUntilPosition(position);
-			const range = {
-				startLineNumber: position.lineNumber,
-				endLineNumber: position.lineNumber,
-				startColumn: word.startColumn,
-				endColumn: word.endColumn,
-			};
-
-			const suggestions = SNIPPETS.map((snippet, index) => ({
-				label: snippet.label,
-				kind: monaco.languages.CompletionItemKind.Snippet,
-				insertText: snippet.insertText,
-				insertTextRules:
-					monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-				documentation: snippet.documentation,
-				range,
-				sortText: String(index).padStart(3, '0'),
-			}));
-
-			return { suggestions };
-		},
-	});
-}

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

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

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

@@ -1,256 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import type { ErrorType } from 'api/generatedAPIInstance';
-import ROUTES from 'constants/routes';
-import { parseAsStringLiteral, useQueryState } from 'nuqs';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import type { ResourcePermissions } from '../types';
-import type { EditorMode } from './components/JsonEditor.types';
-import {
-	createEmptyRolePermissions,
-	useCreateRolePermissions,
-	useRolePermissions,
-	useUpdateRolePermissions,
-} from '../hooks/useRolePermissions';
-import { useRoleAuthZ } from '../hooks/useRoleAuthZ';
-import {
-	useRoleUnsavedChanges,
-	type RoleFormData,
-} from './useRoleUnsavedChanges';
-import { useRoleFormValidation } from './useRoleFormValidation';
-
-const EDITOR_MODES: EditorMode[] = ['interactive', 'json'];
-
-interface UseCreateEditRolePageCallbacksResult {
-	formData: RoleFormData;
-	setFormData: React.Dispatch<React.SetStateAction<RoleFormData>>;
-	editorMode: EditorMode;
-	setEditorMode: (mode: EditorMode) => void;
-	resources: ResourcePermissions[];
-	setResources: (resources: ResourcePermissions[]) => void;
-	isLoading: boolean;
-	isSaving: boolean;
-	hasUnsavedChanges: boolean;
-	handleSave: () => Promise<boolean>;
-	handleCancel: () => void;
-	handleFormChange: (field: keyof RoleFormData, value: string) => void;
-	isCreateMode: boolean;
-	loadError: APIError | null;
-	saveError: APIError | null;
-	clearSaveError: () => void;
-	validationErrors: Set<string>;
-	hasRequiredPermission: boolean;
-	isAuthZLoading: boolean;
-	deniedPermission: string;
-}
-
-export function useCreateEditRolePageActions(
-	roleId: string,
-	roleName: string,
-): UseCreateEditRolePageCallbacksResult {
-	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: '',
-	});
-	const [editorMode, setEditorMode] = useQueryState(
-		'viewMode',
-		parseAsStringLiteral(EDITOR_MODES).withDefault('interactive'),
-	);
-	const emptyResources = useMemo(() => createEmptyRolePermissions(), []);
-	const [localResources, setLocalResources] = useState<ResourcePermissions[]>(
-		() => (isCreateMode ? createEmptyRolePermissions() : []),
-	);
-	const [isInitialized, setIsInitialized] = useState(false);
-	const [saveError, setSaveError] = useState<APIError | null>(null);
-
-	const { validationErrors, validateResources, clearValidationErrors } =
-		useRoleFormValidation();
-
-	const {
-		data: rolePermissionsData,
-		isLoading: isLoadingPermissions,
-		error: rolePermissionsError,
-	} = useRolePermissions(roleId, {
-		enabled: !isCreateMode,
-	});
-
-	const loadError = rolePermissionsError
-		? toAPIError(rolePermissionsError, 'Failed to load role')
-		: null;
-
-	const { mutateAsync: createRole, isLoading: isCreating } =
-		useCreateRolePermissions();
-	const { mutateAsync: updateRole, isLoading: isUpdating } =
-		useUpdateRolePermissions();
-	const isSaving = isCreating || isUpdating;
-
-	useEffect(() => {
-		if (rolePermissionsData && !isInitialized) {
-			setFormData({
-				name: rolePermissionsData.roleName,
-				description: rolePermissionsData.roleDescription,
-			});
-			setLocalResources(JSON.parse(JSON.stringify(rolePermissionsData.resources)));
-			setIsInitialized(true);
-		}
-	}, [rolePermissionsData, isInitialized]);
-
-	const handleFormChange = useCallback(
-		(field: keyof RoleFormData, value: string): void => {
-			setFormData((prev) => ({
-				...prev,
-				[field]: value,
-			}));
-		},
-		[],
-	);
-
-	const handleModeChange = useCallback(
-		(mode: EditorMode): void => {
-			void setEditorMode(mode);
-		},
-		[setEditorMode],
-	);
-
-	const handleResourcesChange = useCallback(
-		(resources: ResourcePermissions[]): void => {
-			setLocalResources(resources);
-		},
-		[],
-	);
-
-	const hasUnsavedChanges = useRoleUnsavedChanges(
-		isCreateMode,
-		formData,
-		localResources,
-		rolePermissionsData,
-		emptyResources,
-	);
-
-	const handleSave = useCallback(async (): Promise<boolean> => {
-		if (!formData.name.trim()) {
-			toast.error('Role name is required', { position: 'bottom-center' });
-			return false;
-		}
-
-		const validationError = validateResources(localResources);
-		if (validationError) {
-			setSaveError(
-				new APIError({
-					httpStatusCode: 400,
-					error: {
-						code: 'VALIDATION_ERROR',
-						message: validationError,
-						url: '',
-						errors: [],
-					},
-				}),
-			);
-			return false;
-		}
-
-		clearValidationErrors();
-		setSaveError(null);
-
-		try {
-			if (isCreateMode) {
-				await createRole({
-					name: formData.name,
-					description: formData.description,
-					resources: localResources,
-				});
-			} else {
-				await updateRole({
-					roleId,
-					description: formData.description,
-					resources: localResources,
-				});
-			}
-			toast.success(
-				isCreateMode ? 'Role created successfully' : 'Role updated successfully',
-				{ position: 'bottom-center' },
-			);
-			return true;
-		} catch (error) {
-			setSaveError(
-				toAPIError(
-					error as ErrorType<RenderErrorResponseDTO>,
-					'Failed to save role',
-				),
-			);
-			return false;
-		}
-	}, [
-		formData.name,
-		formData.description,
-		isCreateMode,
-		roleId,
-		localResources,
-		createRole,
-		updateRole,
-		validateResources,
-		clearValidationErrors,
-	]);
-
-	const clearSaveError = useCallback((): void => {
-		setSaveError(null);
-	}, []);
-
-	const handleCancel = useCallback((): void => {
-		if (isCreateMode) {
-			history.push(ROUTES.ROLES_SETTINGS);
-		} else {
-			const viewUrl = `${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}?name=${encodeURIComponent(roleName)}`;
-			history.push(viewUrl);
-		}
-	}, [history, isCreateMode, roleId, roleName]);
-
-	return {
-		formData,
-		setFormData,
-		editorMode,
-		setEditorMode: handleModeChange,
-		resources: localResources,
-		setResources: handleResourcesChange,
-		isLoading: isLoadingPermissions,
-		isSaving,
-		hasUnsavedChanges,
-		handleSave,
-		handleCancel,
-		handleFormChange,
-		isCreateMode,
-		loadError,
-		saveError,
-		clearSaveError,
-		validationErrors,
-		hasRequiredPermission: isCreateMode
-			? hasCreatePermission
-			: hasReadPermission && hasUpdatePermission,
-		isAuthZLoading,
-		deniedPermission,
-	};
-}

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

@@ -1,50 +0,0 @@
-import { useCallback, useState } from 'react';
-import { PermissionScope, ResourcePermissions } from '../types';
-
-interface UseRoleFormValidationResult {
-	validationErrors: Set<string>;
-	validateResources: (resources: ResourcePermissions[]) => string | null;
-	clearValidationErrors: () => void;
-}
-
-export function useRoleFormValidation(): UseRoleFormValidationResult {
-	const [validationErrors, setValidationErrors] = useState<Set<string>>(
-		() => new Set(),
-	);
-
-	const validateResources = useCallback(
-		(resources: ResourcePermissions[]): string | null => {
-			const errors = new Set<string>();
-
-			for (const resource of resources) {
-				for (const [action, config] of Object.entries(resource.actions)) {
-					if (
-						config?.scope === PermissionScope.ONLY_SELECTED &&
-						config.selectedIds.length === 0
-					) {
-						errors.add(`${resource.resourceId}:${action}`);
-					}
-				}
-			}
-
-			if (errors.size > 0) {
-				setValidationErrors(errors);
-				return 'Please add at least one selector for each "Only selected" permission.';
-			}
-
-			setValidationErrors(new Set());
-			return null;
-		},
-		[],
-	);
-
-	const clearValidationErrors = useCallback((): void => {
-		setValidationErrors(new Set());
-	}, []);
-
-	return {
-		validationErrors,
-		validateResources,
-		clearValidationErrors,
-	};
-}

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

@@ -1,50 +0,0 @@
-import { useMemo } from 'react';
-import type { ResourcePermissions } from '../types';
-
-export interface RoleFormData {
-	name: string;
-	description: string;
-}
-
-interface RolePermissionsData {
-	roleName: string;
-	roleDescription: string;
-	resources: ResourcePermissions[];
-}
-
-export function useRoleUnsavedChanges(
-	isCreateMode: boolean,
-	formData: RoleFormData,
-	localResources: ResourcePermissions[],
-	rolePermissionsData: RolePermissionsData | undefined,
-	emptyResources: ResourcePermissions[],
-): boolean {
-	return useMemo(() => {
-		if (isCreateMode) {
-			return (
-				formData.name.trim() !== '' ||
-				formData.description.trim() !== '' ||
-				JSON.stringify(localResources) !== JSON.stringify(emptyResources)
-			);
-		}
-
-		if (!rolePermissionsData) {
-			return false;
-		}
-
-		const nameChanged = formData.name !== rolePermissionsData.roleName;
-		const descriptionChanged =
-			formData.description !== rolePermissionsData.roleDescription;
-		const resourcesChanged =
-			JSON.stringify(localResources) !==
-			JSON.stringify(rolePermissionsData.resources);
-
-		return nameChanged || descriptionChanged || resourcesChanged;
-	}, [
-		isCreateMode,
-		formData,
-		localResources,
-		rolePermissionsData,
-		emptyResources,
-	]);
-}

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

@@ -1,3 +0,0 @@
-.errorCallout {
-	margin-top: var(--spacing-4);
-}

frontend/src/container/RolesSettings/DeleteRoleModal/DeleteRoleModal.tsx

@@ -1,58 +0,0 @@
-import { Trash2 } from '@signozhq/icons';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import APIError from 'types/api/error';
-import styles from './DeleteRoleModal.module.scss';
-import { Callout } from '@signozhq/ui/callout';
-
-interface DeleteRoleModalProps {
-	isOpen: boolean;
-	roleName: string;
-	error: APIError | null;
-	onCancel: () => void;
-	onConfirm: () => Promise<boolean>;
-}
-
-function DeleteRoleModal({
-	isOpen,
-	roleName,
-	error,
-	onCancel,
-	onConfirm,
-}: DeleteRoleModalProps): JSX.Element {
-	return (
-		<ConfirmDialog
-			open={isOpen}
-			onOpenChange={(next): void => {
-				if (!next) {
-					onCancel();
-				}
-			}}
-			title="Delete Role"
-			titleIcon={<Trash2 size={14} />}
-			confirmText="Delete Role"
-			confirmColor="destructive"
-			cancelText="Cancel"
-			onConfirm={onConfirm}
-			onCancel={onCancel}
-			disableOutsideClick
-		>
-			<Typography>
-				Are you sure you want to delete the role <strong>{roleName}</strong>? This
-				action cannot be undone.
-			</Typography>
-			{error && (
-				<Callout
-					title="Failed to delete role"
-					color="cherry"
-					className={styles.errorCallout}
-				>
-					<ErrorInPlace error={error} height="auto" padding={0} />
-				</Callout>
-			)}
-		</ConfirmDialog>
-	);
-}
-
-export default DeleteRoleModal;

frontend/src/container/RolesSettings/DeleteRoleModal/useDeleteRoleModal.ts

@@ -1,97 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import {
-	invalidateGetRole,
-	invalidateListRoles,
-	useDeleteRole,
-} from 'api/generated/services/role';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import APIError from 'types/api/error';
-
-interface UseDeleteRoleModalProps {
-	roleId?: string | null;
-	isManaged: boolean;
-	hasDeletePermission: boolean;
-	onDeleteSuccess?: () => void;
-}
-
-interface UseDeleteRoleModalResult {
-	isDeleteModalOpen: boolean;
-	isDeleteDisabled: boolean;
-	deleteDisabledReason: string;
-	isDeleting: boolean;
-	deleteError: APIError | null;
-	handleOpenDeleteModal: () => void;
-	handleCloseDeleteModal: () => void;
-	handleConfirmDelete: () => Promise<boolean>;
-}
-
-export function useDeleteRoleModal(
-	props: UseDeleteRoleModalProps,
-): UseDeleteRoleModalResult {
-	const { roleId, isManaged, hasDeletePermission, onDeleteSuccess } = props;
-	const queryClient = useQueryClient();
-
-	const [deleteTargetRoleId, setDeleteTargetRoleId] = useState<string | null>(
-		null,
-	);
-	const [isDeleting, setIsDeleting] = useState(false);
-	const [deleteError, setDeleteError] = useState<APIError | null>(null);
-
-	const { mutateAsync: deleteRole } = useDeleteRole();
-
-	const handleOpenDeleteModal = useCallback((): void => {
-		setDeleteTargetRoleId(roleId ?? null);
-	}, [roleId]);
-
-	const handleCloseDeleteModal = useCallback((): void => {
-		setDeleteTargetRoleId(null);
-		setDeleteError(null);
-	}, []);
-
-	const handleConfirmDelete = useCallback(async (): Promise<boolean> => {
-		if (!deleteTargetRoleId) {
-			return false;
-		}
-
-		setIsDeleting(true);
-		setDeleteError(null);
-
-		try {
-			await deleteRole({ pathParams: { id: deleteTargetRoleId } });
-			await invalidateListRoles(queryClient);
-			await invalidateGetRole(queryClient, { id: deleteTargetRoleId });
-			setDeleteTargetRoleId(null);
-			onDeleteSuccess?.();
-			return true;
-		} catch (error) {
-			const apiError = convertToApiError(
-				error as AxiosError<RenderErrorResponseDTO>,
-			);
-			setDeleteError(apiError ?? null);
-			return false;
-		} finally {
-			setIsDeleting(false);
-		}
-	}, [deleteRole, deleteTargetRoleId, queryClient, onDeleteSuccess]);
-
-	const isDeleteModalOpen = deleteTargetRoleId !== null;
-
-	const isDeleteDisabled = isManaged || !hasDeletePermission;
-	const deleteDisabledReason = isManaged
-		? 'Managed roles cannot be deleted'
-		: 'You do not have permission to delete this role';
-
-	return {
-		isDeleteModalOpen,
-		isDeleteDisabled,
-		deleteDisabledReason,
-		isDeleting,
-		deleteError,
-		handleOpenDeleteModal,
-		handleCloseDeleteModal,
-		handleConfirmDelete,
-	};
-}

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.styles.scss

@@ -0,0 +1,271 @@
+.permission-side-panel-backdrop {
+	position: fixed;
+	inset: 0;
+	z-index: 100;
+	background: transparent;
+}
+
+.permission-side-panel {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 101;
+	width: 720px;
+	display: flex;
+	flex-direction: column;
+	background: var(--l2-background);
+	border-left: 1px solid var(--l1-border);
+	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+	&__header {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		flex-shrink: 0;
+		height: 48px;
+		padding: 0 16px;
+		background: var(--l2-background);
+		border-bottom: 1px solid var(--l1-border);
+	}
+
+	&__header-divider {
+		display: block;
+		width: 1px;
+		height: 16px;
+		background: var(--l1-border);
+		flex-shrink: 0;
+	}
+
+	&__title {
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		color: var(--foreground);
+	}
+
+	&__content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 12px 15px;
+	}
+
+	&__resource-list {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-shrink: 0;
+		height: 56px;
+		padding: 0 16px;
+		gap: 12px;
+		background: var(--l2-background);
+		border-top: 1px solid var(--l1-border);
+	}
+
+	&__unsaved {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-right: auto;
+	}
+
+	&__unsaved-dot {
+		display: block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50px;
+		background: var(--primary);
+		box-shadow: 0px 0px 6px 0px
+			color-mix(in srgb, var(--primary-background) 40%, transparent);
+		flex-shrink: 0;
+	}
+
+	&__unsaved-text {
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 24px;
+		letter-spacing: -0.07px;
+		color: var(--primary);
+	}
+
+	&__footer-actions {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+}
+
+.psp-resource {
+	display: flex;
+	flex-direction: column;
+	border-bottom: 1px solid var(--l1-border);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 12px 16px;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&--expanded {
+			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		}
+
+		&:hover {
+			background: color-mix(in srgb, var(--bg-robin-200) 3%, transparent);
+		}
+	}
+
+	&__left {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+
+	&__chevron {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		color: var(--foreground);
+		flex-shrink: 0;
+	}
+
+	&__label {
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		color: var(--l1-foreground);
+	}
+
+	&__body {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: 8px 0 8px 44px;
+		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+	}
+
+	&__radio-group {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	&__radio-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 6px 0;
+
+		label {
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+			color: var(--l1-foreground);
+			cursor: pointer;
+		}
+	}
+
+	&__select-wrapper {
+		padding: 6px 16px 4px 24px;
+	}
+
+	&__select {
+		width: 100%;
+
+		// todo: https://github.com/SigNoz/components/issues/116
+		.ant-select-selector {
+			background: var(--l2-background) !important;
+			border: 1px solid var(--border) !important;
+			border-radius: 2px !important;
+			padding: 4px 6px !important;
+			min-height: 32px !important;
+			box-shadow: none !important;
+
+			&:hover,
+			&:focus-within {
+				border-color: var(--input) !important;
+				box-shadow: none !important;
+			}
+		}
+
+		.ant-select-selection-placeholder {
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			color: var(--foreground);
+			opacity: 0.4;
+		}
+
+		.ant-select-selection-item {
+			background: var(--input) !important;
+			border: none !important;
+			border-radius: 2px !important;
+			padding: 0 6px !important;
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			color: var(--l1-foreground) !important;
+			height: auto !important;
+		}
+
+		.ant-select-selection-item-remove {
+			color: var(--foreground) !important;
+			display: flex;
+			align-items: center;
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+	}
+
+	&__select-popup {
+		.ant-select-item {
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			color: var(--foreground);
+			background: var(--l2-background);
+
+			&-option-selected {
+				background: var(--border) !important;
+				color: var(--l1-foreground) !important;
+			}
+
+			&-option-active {
+				background: var(--l2-background-hover) !important;
+			}
+		}
+
+		.ant-select-dropdown {
+			background: var(--l2-background);
+			border: 1px solid var(--l1-border);
+			border-radius: 2px;
+			padding: 4px 0;
+		}
+	}
+}

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx

@@ -0,0 +1,300 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/ui/radio-group';
+import { Select, Skeleton } from 'antd';
+
+import {
+	buildConfig,
+	configsEqual,
+	DEFAULT_RESOURCE_CONFIG,
+	isResourceConfigEqual,
+} from '../utils';
+import type {
+	PermissionConfig,
+	PermissionSidePanelProps,
+	ResourceConfig,
+	ResourceDefinition,
+	ScopeType,
+} from './PermissionSidePanel.types';
+import { PermissionScope } from './PermissionSidePanel.types';
+
+import './PermissionSidePanel.styles.scss';
+
+const RELATIONS_ALL_ONLY = new Set(['list', 'create']);
+
+interface ResourceRowProps {
+	resource: ResourceDefinition;
+	config: ResourceConfig;
+	isExpanded: boolean;
+	relation: string;
+	onToggleExpand: (id: string) => void;
+	onScopeChange: (id: string, scope: ScopeType) => void;
+	onSelectedIdsChange: (id: string, ids: string[]) => void;
+}
+
+function ResourceRow({
+	resource,
+	config,
+	isExpanded,
+	relation,
+	onToggleExpand,
+	onScopeChange,
+	onSelectedIdsChange,
+}: ResourceRowProps): JSX.Element {
+	const showOnlySelected = !RELATIONS_ALL_ONLY.has(relation);
+	return (
+		<div className="psp-resource">
+			<div
+				className={`psp-resource__row${
+					isExpanded ? ' psp-resource__row--expanded' : ''
+				}`}
+				role="button"
+				tabIndex={0}
+				onClick={(): void => onToggleExpand(resource.id)}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						onToggleExpand(resource.id);
+					}
+				}}
+			>
+				<div className="psp-resource__left">
+					<span className="psp-resource__chevron">
+						{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+					</span>
+					<span className="psp-resource__label">{resource.label}</span>
+				</div>
+			</div>
+
+			{isExpanded && (
+				<div className="psp-resource__body">
+					<RadioGroup
+						value={config.scope}
+						onChange={(val): void => onScopeChange(resource.id, val as ScopeType)}
+						color="robin"
+						className="psp-resource__radio-group"
+					>
+						<div className="psp-resource__radio-item">
+							<RadioGroupItem value={PermissionScope.ALL} id={`${resource.id}-all`} />
+							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
+						</div>
+
+						{showOnlySelected && (
+							<div className="psp-resource__radio-item">
+								<RadioGroupItem
+									value={PermissionScope.ONLY_SELECTED}
+									id={`${resource.id}-only-selected`}
+								/>
+								<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
+									Only selected
+								</RadioGroupLabel>
+							</div>
+						)}
+
+						<div className="psp-resource__radio-item">
+							<RadioGroupItem
+								value={PermissionScope.NONE}
+								id={`${resource.id}-none`}
+							/>
+							<RadioGroupLabel htmlFor={`${resource.id}-none`}>None</RadioGroupLabel>
+						</div>
+					</RadioGroup>
+
+					{config.scope === PermissionScope.ONLY_SELECTED && showOnlySelected && (
+						<div className="psp-resource__select-wrapper">
+							<Select
+								mode="tags"
+								open={false}
+								allowClear
+								suffixIcon={null}
+								value={config.selectedIds}
+								onChange={(vals: string[]): void =>
+									onSelectedIdsChange(resource.id, vals)
+								}
+								placeholder="Type and press Enter to add..."
+								className="psp-resource__select"
+							/>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function PermissionSidePanel({
+	open,
+	onClose,
+	permissionLabel,
+	relation,
+	resources,
+	initialConfig,
+	isLoading = false,
+	isSaving = false,
+	canEdit = true,
+	onSave,
+}: PermissionSidePanelProps): JSX.Element | null {
+	const [config, setConfig] = useState<PermissionConfig>(() =>
+		buildConfig(resources, initialConfig),
+	);
+	const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+	useEffect(() => {
+		if (open) {
+			setConfig(buildConfig(resources, initialConfig));
+			setExpandedIds(new Set());
+		}
+	}, [open, resources, initialConfig]);
+
+	const savedConfig = useMemo(
+		() => buildConfig(resources, initialConfig),
+		[resources, initialConfig],
+	);
+
+	const unsavedCount = useMemo(() => {
+		if (configsEqual(config, savedConfig)) {
+			return 0;
+		}
+		return Object.keys(config).filter(
+			(id) => !isResourceConfigEqual(config[id], savedConfig[id]),
+		).length;
+	}, [config, savedConfig]);
+
+	const updateResource = useCallback(
+		(id: string, patch: Partial<ResourceConfig>): void => {
+			setConfig((prev) => ({
+				...prev,
+				[id]: { ...prev[id], ...patch },
+			}));
+		},
+		[],
+	);
+
+	const handleToggleExpand = useCallback((id: string): void => {
+		setExpandedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) {
+				next.delete(id);
+			} else {
+				next.add(id);
+			}
+			return next;
+		});
+	}, []);
+
+	const handleScopeChange = useCallback(
+		(id: string, scope: ScopeType): void => {
+			updateResource(id, { scope, selectedIds: [] });
+		},
+		[updateResource],
+	);
+
+	const handleSelectedIdsChange = useCallback(
+		(id: string, ids: string[]): void => {
+			updateResource(id, { selectedIds: ids });
+		},
+		[updateResource],
+	);
+
+	const handleSave = useCallback((): void => {
+		onSave(config);
+	}, [config, onSave]);
+
+	const handleDiscard = useCallback((): void => {
+		setConfig(buildConfig(resources, initialConfig));
+		setExpandedIds(new Set());
+	}, [resources, initialConfig]);
+
+	if (!open) {
+		return null;
+	}
+
+	return (
+		<>
+			<div
+				className="permission-side-panel-backdrop"
+				role="presentation"
+				onClick={onClose}
+			/>
+
+			<div className="permission-side-panel">
+				<div className="permission-side-panel__header">
+					<Button
+						variant="link"
+						color="secondary"
+						size="icon"
+						onClick={onClose}
+						aria-label="Close panel"
+					>
+						<X size={14} />
+					</Button>
+					<span className="permission-side-panel__header-divider" />
+					<span className="permission-side-panel__title">
+						Edit {permissionLabel} Permissions
+					</span>
+				</div>
+
+				<div className="permission-side-panel__content">
+					{isLoading ? (
+						<Skeleton active paragraph={{ rows: 6 }} />
+					) : (
+						<div className="permission-side-panel__resource-list">
+							{resources.map((resource) => (
+								<ResourceRow
+									key={resource.id}
+									resource={resource}
+									config={config[resource.id] ?? DEFAULT_RESOURCE_CONFIG}
+									isExpanded={expandedIds.has(resource.id)}
+									relation={relation}
+									onToggleExpand={handleToggleExpand}
+									onScopeChange={handleScopeChange}
+									onSelectedIdsChange={handleSelectedIdsChange}
+								/>
+							))}
+						</div>
+					)}
+				</div>
+
+				<div className="permission-side-panel__footer">
+					{unsavedCount > 0 && (
+						<div className="permission-side-panel__unsaved">
+							<span className="permission-side-panel__unsaved-dot" />
+							<span className="permission-side-panel__unsaved-text">
+								{unsavedCount} unsaved change{unsavedCount !== 1 ? 's' : ''}
+							</span>
+						</div>
+					)}
+
+					<div className="permission-side-panel__footer-actions">
+						<Button
+							variant="solid"
+							color="secondary"
+							prefix={<X size={14} />}
+							onClick={unsavedCount > 0 ? handleDiscard : onClose}
+							size="sm"
+							disabled={isSaving}
+						>
+							{unsavedCount > 0 ? 'Discard' : 'Cancel'}
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							onClick={handleSave}
+							loading={isSaving}
+							disabled={isLoading || unsavedCount === 0 || !canEdit}
+						>
+							Save Changes
+						</Button>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default PermissionSidePanel;

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts

@@ -0,0 +1,40 @@
+export interface ResourceOption {
+	value: string;
+	label: string;
+}
+
+export interface ResourceDefinition {
+	id: string;
+	kind: string;
+	type: string;
+	label: string;
+	options?: ResourceOption[];
+}
+
+export enum PermissionScope {
+	ALL = 'all',
+	ONLY_SELECTED = 'only_selected',
+	NONE = 'none',
+}
+
+export type ScopeType = PermissionScope;
+
+export interface ResourceConfig {
+	scope: ScopeType;
+	selectedIds: string[];
+}
+
+export type PermissionConfig = Record<string, ResourceConfig>;
+
+export interface PermissionSidePanelProps {
+	open: boolean;
+	onClose: () => void;
+	permissionLabel: string;
+	relation: string;
+	resources: ResourceDefinition[];
+	initialConfig?: PermissionConfig;
+	isLoading?: boolean;
+	isSaving?: boolean;
+	canEdit?: boolean;
+	onSave: (config: PermissionConfig) => void;
+}

frontend/src/container/RolesSettings/PermissionSidePanel/index.tsx

@@ -0,0 +1,10 @@
+export { default } from './PermissionSidePanel';
+export type {
+	PermissionConfig,
+	PermissionSidePanelProps,
+	ResourceConfig,
+	ResourceDefinition,
+	ResourceOption,
+	ScopeType,
+} from './PermissionSidePanel.types';
+export { PermissionScope } from './PermissionSidePanel.types';

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss

@@ -0,0 +1,325 @@
+.role-details-page {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+	width: 100%;
+	max-width: 60vw;
+	margin: 0 auto;
+
+	.role-details-header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.role-details-title {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 18px;
+		font-weight: 500;
+		line-height: 28px;
+		letter-spacing: -0.09px;
+	}
+
+	.role-details-permission-item--readonly {
+		cursor: default !important;
+		pointer-events: none;
+		opacity: 0.55;
+	}
+
+	.role-details-actions {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.role-details-overview {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.role-details-meta {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.role-details-section-label {
+		font-family: Inter;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 20px;
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+		color: var(--foreground);
+	}
+
+	.role-details-description-text {
+		font-family: Inter;
+		font-size: 13px;
+		font-weight: 500;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		color: var(--foreground);
+	}
+
+	.role-details-info-row {
+		display: flex;
+		gap: 16px;
+		align-items: flex-start;
+	}
+
+	.role-details-info-col {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.role-details-info-value {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.role-details-info-name {
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		color: var(--foreground);
+	}
+
+	.role-details-permissions {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding-top: 8px;
+	}
+
+	.role-details-permissions-header {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		height: 20px;
+	}
+
+	.role-details-permissions-divider {
+		flex: 1;
+		border: none;
+		border-top: 2px dotted var(--l1-border);
+		border-bottom: 2px dotted var(--l1-border);
+		height: 7px;
+		margin: 0;
+	}
+
+	.role-details-permissions-learn-more {
+		color: var(--primary);
+		font-size: var(--font-size-xs);
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.role-details-permission-list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.role-details-permission-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		padding: 0 12px;
+		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+		border: 1px solid var(--secondary);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:hover {
+			background: color-mix(in srgb, var(--bg-robin-200) 12%, transparent);
+		}
+	}
+
+	.role-details-permission-item-left {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.role-details-permission-item-label {
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		color: var(--l1-foreground);
+	}
+
+	.role-details-members {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.role-details-members-search {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		height: 32px;
+		padding: 6px 6px 6px 8px;
+		background: var(--l2-background);
+		border: 1px solid var(--secondary);
+		border-radius: 2px;
+
+		.role-details-members-search-icon {
+			flex-shrink: 0;
+			color: var(--foreground);
+			opacity: 0.5;
+		}
+
+		.role-details-members-search-input {
+			flex: 1;
+			height: 100%;
+			background: transparent;
+			border: none;
+			outline: none;
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+			color: var(--foreground);
+
+			&::placeholder {
+				color: var(--foreground);
+				opacity: 0.4;
+			}
+		}
+	}
+
+	.role-details-members-content {
+		display: flex;
+		flex-direction: column;
+		min-height: 420px;
+		border: 1px dashed var(--secondary);
+		border-radius: 3px;
+		margin-top: -1px;
+	}
+
+	.role-details-members-empty-state {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		padding: 48px 0;
+		flex-grow: 1;
+
+		.role-details-members-empty-emoji {
+			font-size: 32px;
+			line-height: 1;
+		}
+
+		.role-details-members-empty-text {
+			font-family: Inter;
+			font-size: 14px;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+
+			&--bold {
+				font-weight: 500;
+				color: var(--l1-foreground);
+			}
+
+			&--muted {
+				font-weight: 400;
+				color: var(--foreground);
+			}
+		}
+	}
+
+	.role-details-skeleton {
+		padding: 16px 0;
+	}
+}
+
+.role-details-delete-modal {
+	width: calc(100% - 30px) !important;
+	max-width: 384px;
+
+	.ant-modal-content {
+		padding: 0;
+		border-radius: 4px;
+		border: 1px solid var(--secondary);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+
+		.ant-modal-header {
+			padding: 16px;
+			background: var(--l2-background);
+			margin-bottom: 0;
+		}
+
+		.ant-modal-body {
+			padding: 0 16px 28px 16px;
+		}
+
+		.ant-modal-footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: 16px;
+			margin: 0;
+
+			.cancel-btn {
+				display: flex;
+				align-items: center;
+				border: none;
+				border-radius: 2px;
+			}
+
+			.delete-btn {
+				display: flex;
+				align-items: center;
+				border: none;
+				border-radius: 2px;
+				margin-left: 12px;
+			}
+		}
+	}
+
+	.title {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 1;
+		letter-spacing: -0.065px;
+	}
+
+	.delete-text {
+		color: var(--foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+
+		strong {
+			font-weight: 600;
+			color: var(--l1-foreground);
+		}
+	}
+}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -0,0 +1,309 @@
+import { useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { Redirect, useHistory, useLocation } from 'react-router-dom';
+import { Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { toast } from '@signozhq/ui/sonner';
+import { Skeleton } from 'antd';
+import {
+	getGetObjectsQueryKey,
+	useDeleteRole,
+	useGetObjects,
+	useGetRole,
+	usePatchObjects,
+} from 'api/generated/services/role';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import permissionsType from 'hooks/useAuthZ/permissions.type';
+import {
+	buildRoleDeletePermission,
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+} from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
+
+import type { AuthzResources } from '../utils';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ROUTES from 'constants/routes';
+import { capitalize } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { RoleType } from 'types/roles';
+import { handleApiError, toAPIError } from 'utils/errorUtils';
+
+import type { PermissionConfig } from '../PermissionSidePanel';
+import PermissionSidePanel from '../PermissionSidePanel';
+import CreateRoleModal from '../RolesComponents/CreateRoleModal';
+import DeleteRoleModal from '../RolesComponents/DeleteRoleModal';
+import {
+	buildPatchPayload,
+	derivePermissionTypes,
+	deriveResourcesForRelation,
+	objectsToPermissionConfig,
+} from '../utils';
+import OverviewTab from './components/OverviewTab';
+import { ROLE_ID_REGEX } from './constants';
+
+import './RoleDetailsPage.styles.scss';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function RoleDetailsPage(): JSX.Element {
+	const { pathname, search } = useLocation();
+	const history = useHistory();
+
+	const queryClient = useQueryClient();
+	const { showErrorModal } = useErrorModal();
+	const { isRolesEnabled, isLoading: isRolesGateLoading } =
+		useRolesFeatureGate();
+
+	const authzResources: AuthzResources = permissionsType.data;
+
+	// Extract roleId from URL pathname since useParams doesn't work in nested routing
+	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
+	const roleId = roleIdMatch ? roleIdMatch[1] : '';
+
+	// Role name passed as query param by the listing page — used to check read permission
+	// before the role details API resolves. Absent when navigating directly (e.g. deep link),
+	// in which case we skip the FGA check and fall back to the BE guard.
+	const nameFromQuery = useMemo(
+		() => new URLSearchParams(search).get('name') ?? '',
+		[search],
+	);
+
+	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	const [activePermission, setActivePermission] = useState<string | null>(null);
+
+	const { data, isLoading, isFetching, isError, error } = useGetRole(
+		{ id: roleId },
+		{ query: { enabled: !!roleId } },
+	);
+	const role = data?.data;
+	const isTransitioning = isFetching && role?.id !== roleId;
+	const isManaged = role?.type === RoleType.MANAGED;
+
+	const roleName = role?.name ?? '';
+
+	// Read check — fires immediately using the name query param so we can gate the page
+	// before the role details API resolves. Skipped when name is absent.
+	const { permissions: readPerms, isLoading: isReadAuthZLoading } = useAuthZ(
+		nameFromQuery ? [buildRoleReadPermission(nameFromQuery)] : [],
+		{ enabled: !!nameFromQuery },
+	);
+	const hasReadPermission = nameFromQuery
+		? (readPerms?.[buildRoleReadPermission(nameFromQuery)]?.isGranted ?? true)
+		: true;
+
+	// Update check uses role name once loaded
+	const { permissions: updatePerms, isLoading: isAuthZLoading } = useAuthZ(
+		roleName && !isManaged ? [buildRoleUpdatePermission(roleName)] : [],
+		{ enabled: !!roleName && !isManaged },
+	);
+	const hasUpdatePermission = isAuthZLoading
+		? false
+		: (updatePerms?.[buildRoleUpdatePermission(roleName)]?.isGranted ?? false);
+
+	const permissionTypes = useMemo(
+		() => derivePermissionTypes(authzResources?.relations ?? null),
+		[authzResources],
+	);
+
+	const resourcesForActivePermission = useMemo(
+		() =>
+			activePermission
+				? deriveResourcesForRelation(authzResources ?? null, activePermission)
+				: [],
+		[authzResources, activePermission],
+	);
+
+	const { data: objectsData, isLoading: isLoadingObjects } = useGetObjects(
+		{ id: roleId, relation: activePermission ?? '' },
+		{
+			query: {
+				enabled: !!activePermission && !!roleId && !isManaged,
+			},
+		},
+	);
+
+	const initialConfig = useMemo(() => {
+		if (!objectsData?.data || !activePermission) {
+			return;
+		}
+		return objectsToPermissionConfig(
+			objectsData.data,
+			resourcesForActivePermission,
+		);
+	}, [objectsData, activePermission, resourcesForActivePermission]);
+
+	const handleSaveSuccess = (): void => {
+		toast.success('Permissions saved successfully');
+		if (activePermission) {
+			queryClient.removeQueries(
+				getGetObjectsQueryKey({ id: roleId, relation: activePermission }),
+			);
+		}
+	};
+
+	const { mutate: patchObjects, isLoading: isSaving } = usePatchObjects({
+		mutation: {
+			onSuccess: handleSaveSuccess,
+			onError: (err) => handleApiError(err, showErrorModal),
+		},
+	});
+
+	const { mutate: deleteRole, isLoading: isDeleting } = useDeleteRole({
+		mutation: {
+			onSuccess: (): void => {
+				toast.success('Role deleted successfully');
+				history.push(ROUTES.ROLES_SETTINGS);
+			},
+			onError: (err) => handleApiError(err, showErrorModal),
+		},
+	});
+
+	if (isRolesGateLoading) {
+		return (
+			<div className="role-details-page">
+				<Skeleton
+					active
+					paragraph={{ rows: 8 }}
+					className="role-details-skeleton"
+				/>
+			</div>
+		);
+	}
+
+	if (!isRolesEnabled) {
+		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
+	}
+
+	if (!hasReadPermission && readPerms !== null) {
+		return <PermissionDeniedFullPage permissionName="role:read" />;
+	}
+
+	if (isLoading || isTransitioning || (!!nameFromQuery && isReadAuthZLoading)) {
+		return (
+			<div className="role-details-page">
+				<Skeleton
+					active
+					paragraph={{ rows: 8 }}
+					className="role-details-skeleton"
+				/>
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="role-details-page">
+				<ErrorInPlace
+					error={toAPIError(
+						error,
+						'An unexpected error occurred while fetching role details.',
+					)}
+				/>
+			</div>
+		);
+	}
+
+	if (!role) {
+		return (
+			<div className="role-details-page">
+				<Skeleton
+					active
+					paragraph={{ rows: 8 }}
+					className="role-details-skeleton"
+				/>
+			</div>
+		);
+	}
+
+	const handleSave = (config: PermissionConfig): void => {
+		if (!activePermission || !authzResources) {
+			return;
+		}
+		patchObjects({
+			pathParams: { id: roleId, relation: activePermission },
+			data: buildPatchPayload({
+				newConfig: config,
+				initialConfig: initialConfig ?? {},
+				resources: resourcesForActivePermission,
+				authzRes: authzResources,
+			}),
+		});
+	};
+
+	return (
+		<div className="role-details-page">
+			<div className="role-details-header">
+				<h2 className="role-details-title">Role — {role.name}</h2>
+				{!isManaged && (
+					<div className="role-details-actions">
+						<AuthZTooltip checks={[buildRoleDeletePermission(role.name)]}>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => setIsDeleteModalOpen(true)}
+								aria-label="Delete role"
+							>
+								<Trash2 size={12} />
+							</Button>
+						</AuthZTooltip>
+						<AuthZTooltip checks={[buildRoleUpdatePermission(role.name)]}>
+							<Button
+								variant="solid"
+								color="secondary"
+								onClick={(): void => setIsEditModalOpen(true)}
+							>
+								Edit Role Details
+							</Button>
+						</AuthZTooltip>
+					</div>
+				)}
+			</div>
+
+			<OverviewTab
+				role={role || null}
+				isManaged={isManaged}
+				permissionTypes={permissionTypes}
+				onPermissionClick={(key): void => setActivePermission(key)}
+			/>
+			{!isManaged && (
+				<>
+					<PermissionSidePanel
+						open={activePermission !== null}
+						onClose={(): void => setActivePermission(null)}
+						permissionLabel={activePermission ? capitalize(activePermission) : ''}
+						relation={activePermission ?? ''}
+						resources={resourcesForActivePermission}
+						initialConfig={initialConfig}
+						isLoading={isLoadingObjects}
+						isSaving={isSaving}
+						canEdit={hasUpdatePermission}
+						onSave={handleSave}
+					/>
+
+					<CreateRoleModal
+						isOpen={isEditModalOpen}
+						onClose={(): void => setIsEditModalOpen(false)}
+						initialData={{
+							id: roleId,
+							name: role.name || '',
+							description: role.description || '',
+						}}
+					/>
+				</>
+			)}
+
+			<DeleteRoleModal
+				isOpen={isDeleteModalOpen}
+				roleName={role.name || ''}
+				isDeleting={isDeleting}
+				onCancel={(): void => setIsDeleteModalOpen(false)}
+				onConfirm={(): void => deleteRole({ pathParams: { id: roleId } })}
+			/>
+		</div>
+	);
+}
+
+export default RoleDetailsPage;

frontend/src/container/RolesSettings/RoleDetails/__tests__/RoleDetailsPage.authz.test.tsx

@@ -0,0 +1,536 @@
+import * as roleApi from 'api/generated/services/role';
+import {
+	customRoleResponse,
+	managedRoleResponse,
+} from 'mocks-server/__mockdata__/roles';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { Route, Switch } from 'react-router-dom';
+import {
+	defaultFeatureFlags,
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
+import { FeatureKeys } from 'constants/features';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import {
+	invalidLicense,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+} from 'tests/authz-test-utils';
+import RoleDetailsPage from '../RoleDetailsPage';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
+const MANAGED_ROLE_ID = '019c24aa-2248-756f-9833-984f1ab63819';
+
+const rolesApiBase = 'http://localhost/api/v1/roles';
+
+const emptyObjectsResponse = { status: 'success', data: [] };
+
+const allScopeObjectsResponse = {
+	status: 'success',
+	data: [
+		{
+			resource: { kind: 'role', type: 'role' },
+			selectors: ['*'],
+		},
+	],
+};
+
+function setupDefaultHandlers(roleId = CUSTOM_ROLE_ID): void {
+	const roleResponse =
+		roleId === MANAGED_ROLE_ID ? managedRoleResponse : customRoleResponse;
+
+	server.use(
+		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(roleResponse)),
+		),
+	);
+}
+
+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+	server.resetHandlers();
+});
+
+describe('RoleDetailsPage', () => {
+	it('renders custom role header, tabs, description, permissions, and action buttons', async () => {
+		setupDefaultHandlers();
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+		});
+
+		await expect(
+			screen.findByText('Role — billing-manager'),
+		).resolves.toBeInTheDocument();
+
+		expect(
+			screen.getByText('Custom role for managing billing and invoices.'),
+		).toBeInTheDocument();
+
+		expect(screen.getByText('Create')).toBeInTheDocument();
+		expect(screen.getByText('Read')).toBeInTheDocument();
+
+		expect(
+			screen.getByRole('button', { name: /edit role details/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /delete role/i }),
+		).toBeInTheDocument();
+	});
+
+	it('shows managed-role warning callout and hides edit/delete buttons', async () => {
+		setupDefaultHandlers(MANAGED_ROLE_ID);
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${MANAGED_ROLE_ID}`,
+		});
+
+		await expect(
+			screen.findByText(/Role — signoz-admin/),
+		).resolves.toBeInTheDocument();
+
+		expect(
+			screen.getByText(
+				'This is a managed role. Permissions and settings are view-only and cannot be modified.',
+			),
+		).toBeInTheDocument();
+
+		expect(screen.queryByText('Edit Role Details')).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /delete role/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('edit flow: modal opens pre-filled and calls PATCH on save', async () => {
+		const patchSpy = jest.fn();
+		let description = customRoleResponse.data.description;
+		server.use(
+			rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						...customRoleResponse,
+						data: { ...customRoleResponse.data, description },
+					}),
+				),
+			),
+			rest.patch(`${rolesApiBase}/:id`, async (req, res, ctx) => {
+				const body = await req.json();
+				patchSpy(body);
+				description = body.description;
+				return res(
+					ctx.status(200),
+					ctx.json({
+						...customRoleResponse,
+						data: { ...customRoleResponse.data, description },
+					}),
+				);
+			}),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+		});
+
+		await screen.findByText('Role — billing-manager');
+
+		await user.click(screen.getByRole('button', { name: /edit role details/i }));
+		await expect(
+			screen.findByText('Edit Role Details', { selector: '.ant-modal-title' }),
+		).resolves.toBeInTheDocument();
+
+		const nameInput = screen.getByPlaceholderText(
+			'Enter role name e.g. : Service Owner',
+		);
+		expect(nameInput).toBeDisabled();
+
+		const descField = screen.getByPlaceholderText(
+			'A helpful description of the role',
+		);
+		await user.clear(descField);
+		await user.type(descField, 'Updated description');
+		await user.click(screen.getByRole('button', { name: /save changes/i }));
+
+		await waitFor(() =>
+			expect(patchSpy).toHaveBeenCalledWith({
+				description: 'Updated description',
+			}),
+		);
+
+		await waitFor(() =>
+			expect(
+				screen.queryByText('Edit Role Details', { selector: '.ant-modal-title' }),
+			).not.toBeInTheDocument(),
+		);
+
+		await expect(
+			screen.findByText('Updated description'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('delete flow: modal shows role name, DELETE called on confirm', async () => {
+		const deleteSpy = jest.fn();
+
+		setupDefaultHandlers();
+		server.use(
+			rest.delete(`${rolesApiBase}/:id`, (_req, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+		});
+
+		await screen.findByText('Role — billing-manager');
+
+		await user.click(screen.getByRole('button', { name: /delete role/i }));
+
+		await expect(
+			screen.findByText(/Are you sure you want to delete the role/),
+		).resolves.toBeInTheDocument();
+
+		const dialog = await screen.findByRole('dialog');
+		await user.click(
+			within(dialog).getByRole('button', { name: /delete role/i }),
+		);
+
+		await waitFor(() => expect(deleteSpy).toHaveBeenCalled());
+
+		await waitFor(() =>
+			expect(
+				screen.queryByText(/Are you sure you want to delete the role/),
+			).not.toBeInTheDocument(),
+		);
+	});
+
+	it('shows PermissionDeniedFullPage when read permission is denied via query param', async () => {
+		mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}?name=billing-manager`,
+		});
+
+		await expect(
+			screen.findByText(/you don't have permission to view this page/i),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('redirects to the roles list when license is not valid', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: { activeLicense: invalidLicense },
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('redirects to the roles list when fine-grained authz flag is inactive', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: {
+					featureFlags: defaultFeatureFlags.map((f) =>
+						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+							? { ...f, active: false }
+							: f,
+					),
+				},
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
+	describe('permission side panel', () => {
+		beforeEach(() => {
+			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
+			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
+				data: customRoleResponse,
+				isLoading: false,
+				isFetching: false,
+				isError: false,
+				error: null,
+			} as any);
+			jest
+				.spyOn(roleApi, 'useGetObjects')
+				.mockReturnValue({ data: emptyObjectsResponse, isLoading: false } as any);
+		});
+
+		afterEach(() => {
+			jest.restoreAllMocks();
+		});
+
+		async function openCreatePanel(): Promise<HTMLElement> {
+			await screen.findByText('Role — billing-manager');
+			fireEvent.click(screen.getByText('Create'));
+			await screen.findByText('Edit Create Permissions');
+			const panel = document.querySelector(
+				'.permission-side-panel',
+			) as HTMLElement;
+			await within(panel).findByRole('button', { name: 'role' });
+			return panel;
+		}
+
+		async function openReadPanel(): Promise<HTMLElement> {
+			await screen.findByText('Role — billing-manager');
+			fireEvent.click(screen.getByText('Read'));
+			await screen.findByText('Edit Read Permissions');
+			const panel = document.querySelector(
+				'.permission-side-panel',
+			) as HTMLElement;
+			await within(panel).findByRole('button', { name: 'role' });
+			return panel;
+		}
+
+		it('Save Changes is disabled until a resource scope is changed', async () => {
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openCreatePanel();
+
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('All'));
+
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).not.toBeDisabled();
+			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
+		});
+
+		it('set scope to All → patchObjects additions: ["*"], deletions: null', async () => {
+			const patchSpy = jest.fn();
+
+			server.use(
+				rest.patch(
+					`${rolesApiBase}/:id/relations/:relation/objects`,
+					async (req, res, ctx) => {
+						patchSpy(await req.json());
+						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
+					},
+				),
+			);
+
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openCreatePanel();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('All'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
+
+			await waitFor(() =>
+				expect(patchSpy).toHaveBeenCalledWith({
+					additions: [
+						{
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['*'],
+						},
+					],
+					deletions: null,
+				}),
+			);
+		});
+
+		it('set scope to Only selected with IDs → patchObjects additions contain those IDs', async () => {
+			const patchSpy = jest.fn();
+
+			server.use(
+				rest.patch(
+					`${rolesApiBase}/:id/relations/:relation/objects`,
+					async (req, res, ctx) => {
+						patchSpy(await req.json());
+						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
+					},
+				),
+			);
+
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openReadPanel();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			// Default is NONE, so switch to Only selected first to reveal the combobox
+			fireEvent.click(screen.getByText('Only selected'));
+
+			const combobox = within(panel).getByRole('combobox');
+			fireEvent.change(combobox, { target: { value: 'role-001' } });
+			fireEvent.keyDown(combobox, { key: 'Enter', keyCode: 13 });
+
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
+
+			await waitFor(() =>
+				expect(patchSpy).toHaveBeenCalledWith({
+					additions: [
+						{
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['role-001'],
+						},
+					],
+					deletions: null,
+				}),
+			);
+		});
+
+		it('set scope to None on create panel (existing All) → patchObjects deletions: ["*"], additions: null', async () => {
+			const patchSpy = jest.fn();
+
+			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
+				data: allScopeObjectsResponse,
+				isLoading: false,
+			} as any);
+			server.use(
+				rest.patch(
+					`${rolesApiBase}/:id/relations/:relation/objects`,
+					async (req, res, ctx) => {
+						patchSpy(await req.json());
+						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
+					},
+				),
+			);
+
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openCreatePanel();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('None'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
+
+			await waitFor(() =>
+				expect(patchSpy).toHaveBeenCalledWith({
+					additions: null,
+					deletions: [
+						{
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['*'],
+						},
+					],
+				}),
+			);
+		});
+
+		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
+			const patchSpy = jest.fn();
+
+			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
+				data: allScopeObjectsResponse,
+				isLoading: false,
+			} as any);
+			server.use(
+				rest.patch(
+					`${rolesApiBase}/:id/relations/:relation/objects`,
+					async (req, res, ctx) => {
+						patchSpy(await req.json());
+						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
+					},
+				),
+			);
+
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openReadPanel();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('Only selected'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
+
+			await waitFor(() =>
+				expect(patchSpy).toHaveBeenCalledWith({
+					additions: null,
+					deletions: [
+						{
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['*'],
+						},
+					],
+				}),
+			);
+		});
+
+		it('unsaved changes counter shown on scope change, Discard resets it', async () => {
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openCreatePanel();
+
+			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('All'));
+
+			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
+
+			fireEvent.click(within(panel).getByRole('button', { name: /discard/i }));
+
+			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
+		});
+	});
+});

frontend/src/container/RolesSettings/RoleDetails/components/MembersTab.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Search } from '@signozhq/icons';
+
+function MembersTab(): JSX.Element {
+	const [searchQuery, setSearchQuery] = useState('');
+
+	return (
+		<div className="role-details-members">
+			<div className="role-details-members-search">
+				<Search size={12} className="role-details-members-search-icon" />
+				<input
+					type="text"
+					className="role-details-members-search-input"
+					placeholder="Search and add members..."
+					value={searchQuery}
+					onChange={(e): void => setSearchQuery(e.target.value)}
+				/>
+			</div>
+
+			{/* Todo: Right now we are only adding the empty state in this cut */}
+			<div className="role-details-members-content">
+				<div className="role-details-members-empty-state">
+					<span
+						className="role-details-members-empty-emoji"
+						role="img"
+						aria-label="monocle face"
+					>
+						🧐
+					</span>
+					<p className="role-details-members-empty-text">
+						<span className="role-details-members-empty-text--bold">
+							No members added.
+						</span>{' '}
+						<span className="role-details-members-empty-text--muted">
+							Start adding members to this role.
+						</span>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default MembersTab;

frontend/src/container/RolesSettings/RoleDetails/components/OverviewTab.tsx

@@ -0,0 +1,87 @@
+import { Callout } from '@signozhq/ui/callout';
+
+import { PermissionType, TimestampBadge } from '../../utils';
+import PermissionItem from './PermissionItem';
+import { AuthtypesRelationDTO } from 'api/generated/services/sigNoz.schemas';
+
+interface OverviewTabProps {
+	role: {
+		description?: string;
+		createdAt?: Date | string;
+		updatedAt?: Date | string;
+	} | null;
+	isManaged: boolean;
+	permissionTypes: PermissionType[];
+	onPermissionClick: (relationKey: string) => void;
+}
+
+function OverviewTab({
+	role,
+	isManaged,
+	permissionTypes,
+	onPermissionClick,
+}: OverviewTabProps): JSX.Element {
+	return (
+		<div className="role-details-overview">
+			{isManaged && (
+				<Callout
+					type="warning"
+					showIcon
+					title="This is a managed role. Permissions and settings are view-only and cannot be modified."
+				/>
+			)}
+
+			<div className="role-details-meta">
+				<div>
+					<p className="role-details-section-label">Description</p>
+					<p className="role-details-description-text">{role?.description || '—'}</p>
+				</div>
+
+				<div className="role-details-info-row">
+					<div className="role-details-info-col">
+						<p className="role-details-section-label">Created At</p>
+						<div className="role-details-info-value">
+							<TimestampBadge date={role?.createdAt} />
+						</div>
+					</div>
+					<div className="role-details-info-col">
+						<p className="role-details-section-label">Last Modified At</p>
+						<div className="role-details-info-value">
+							<TimestampBadge date={role?.updatedAt} />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="role-details-permissions">
+				<div className="role-details-permissions-header">
+					<span className="role-details-section-label">Permissions</span>
+					<a
+						href="https://signoz.io/docs/manage/administrator-guide/iam/permissions/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="role-details-permissions-learn-more"
+					>
+						Learn more
+					</a>
+					<hr className="role-details-permissions-divider" />
+				</div>
+
+				<div className="role-details-permission-list">
+					{permissionTypes
+						.filter((p) => p.key !== AuthtypesRelationDTO.assignee)
+						.map((permissionType) => (
+							<PermissionItem
+								key={permissionType.key}
+								permissionType={permissionType}
+								isManaged={isManaged}
+								onPermissionClick={onPermissionClick}
+							/>
+						))}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default OverviewTab;

frontend/src/container/RolesSettings/RoleDetails/components/PermissionItem.tsx

@@ -0,0 +1,54 @@
+import { ChevronRight } from '@signozhq/icons';
+
+import { PermissionType } from '../../utils';
+
+interface PermissionItemProps {
+	permissionType: PermissionType;
+	isManaged: boolean;
+	onPermissionClick: (key: string) => void;
+}
+
+function PermissionItem({
+	permissionType,
+	isManaged,
+	onPermissionClick,
+}: PermissionItemProps): JSX.Element {
+	const { key, label, icon } = permissionType;
+
+	if (isManaged) {
+		return (
+			<div
+				key={key}
+				className="role-details-permission-item role-details-permission-item--readonly"
+			>
+				<div className="role-details-permission-item-left">
+					{icon}
+					<span className="role-details-permission-item-label">{label}</span>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			key={key}
+			className="role-details-permission-item"
+			role="button"
+			tabIndex={0}
+			onClick={(): void => onPermissionClick(key)}
+			onKeyDown={(e): void => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					onPermissionClick(key);
+				}
+			}}
+		>
+			<div className="role-details-permission-item-left">
+				{icon}
+				<span className="role-details-permission-item-label">{label}</span>
+			</div>
+			<ChevronRight size={14} color="var(--foreground)" />
+		</div>
+	);
+}
+
+export default PermissionItem;

frontend/src/container/RolesSettings/RoleDetails/constants.ts

@@ -0,0 +1,22 @@
+import {
+	BadgePlus,
+	Eye,
+	LayoutList,
+	PencilRuler,
+	Settings,
+	Trash2,
+} from '@signozhq/icons';
+
+export const ROLE_ID_REGEX = /\/settings\/roles\/([^/]+)/;
+
+export type IconComponent = React.ComponentType<any>;
+
+export const PERMISSION_ICON_MAP: Record<string, IconComponent> = {
+	create: BadgePlus,
+	list: LayoutList,
+	read: Eye,
+	update: PencilRuler,
+	delete: Trash2,
+};
+
+export const FALLBACK_PERMISSION_ICON: IconComponent = Settings;

frontend/src/container/RolesSettings/RoleDetails/index.tsx

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

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

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useQueryClient } from 'react-query';
+import { generatePath, useHistory } from 'react-router-dom';
+import { X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { toast } from '@signozhq/ui/sonner';
+import { Form, Modal } from 'antd';
+import {
+	invalidateGetRole,
+	invalidateListRoles,
+	useCreateRole,
+	usePatchRole,
+} from 'api/generated/services/role';
+import {
+	AuthtypesPostableRoleDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
+import ROUTES from 'constants/routes';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { handleApiError } from 'utils/errorUtils';
+
+import '../RolesSettings.styles.scss';
+
+export interface CreateRoleModalInitialData {
+	id: string;
+	name: string;
+	description?: string;
+}
+
+interface CreateRoleModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	initialData?: CreateRoleModalInitialData;
+}
+
+interface CreateRoleFormValues {
+	name: string;
+	description?: string;
+}
+
+function CreateRoleModal({
+	isOpen,
+	onClose,
+	initialData,
+}: CreateRoleModalProps): JSX.Element {
+	const [form] = Form.useForm<CreateRoleFormValues>();
+	const queryClient = useQueryClient();
+	const history = useHistory();
+	const { showErrorModal } = useErrorModal();
+
+	const isEditMode = !!initialData?.id;
+	const prevIsOpen = useRef(isOpen);
+
+	useEffect(() => {
+		if (isOpen && !prevIsOpen.current) {
+			if (isEditMode && initialData) {
+				form.setFieldsValue({
+					name: initialData.name,
+					description: initialData.description || '',
+				});
+			} else {
+				form.resetFields();
+			}
+		}
+		prevIsOpen.current = isOpen;
+	}, [isOpen, isEditMode, initialData, form]);
+
+	const handleSuccess = async (
+		message: string,
+		redirectPath?: string,
+	): Promise<void> => {
+		await invalidateListRoles(queryClient);
+		if (isEditMode && initialData?.id) {
+			await invalidateGetRole(queryClient, { id: initialData.id });
+		}
+		toast.success(message);
+		form.resetFields();
+		onClose();
+		if (redirectPath) {
+			history.push(redirectPath);
+		}
+	};
+
+	const handleError = (error: ErrorType<RenderErrorResponseDTO>): void => {
+		handleApiError(error, showErrorModal);
+	};
+
+	const { mutate: createRole, isLoading: isCreating } = useCreateRole({
+		mutation: {
+			onSuccess: (res) =>
+				handleSuccess(
+					'Role created successfully',
+					generatePath(ROUTES.ROLE_DETAILS, { roleId: res.data.id }),
+				),
+			onError: handleError,
+		},
+	});
+
+	const { mutate: patchRole, isLoading: isPatching } = usePatchRole({
+		mutation: {
+			onSuccess: () => handleSuccess('Role updated successfully'),
+			onError: handleError,
+		},
+	});
+
+	const onSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+			if (isEditMode && initialData?.id) {
+				patchRole({
+					pathParams: { id: initialData.id },
+					data: { description: values.description || '' },
+				});
+			} else {
+				const data: AuthtypesPostableRoleDTO = {
+					name: values.name,
+					description: values.description || '',
+					transactionGroups: [],
+				};
+				createRole({ data });
+			}
+		} catch {
+			// form validation failed; antd handles inline error display
+		}
+	}, [form, createRole, patchRole, isEditMode, initialData]);
+
+	const onCancel = useCallback((): void => {
+		form.resetFields();
+		onClose();
+	}, [form, onClose]);
+
+	const isLoading = isCreating || isPatching;
+
+	return (
+		<Modal
+			open={isOpen}
+			onCancel={onCancel}
+			title={isEditMode ? 'Edit Role Details' : 'Create a New Role'}
+			footer={[
+				<Button
+					key="cancel"
+					variant="solid"
+					color="secondary"
+					onClick={onCancel}
+					size="sm"
+				>
+					<X size={14} />
+					Cancel
+				</Button>,
+				<Button
+					key="submit"
+					variant="solid"
+					color="primary"
+					onClick={onSubmit}
+					loading={isLoading}
+					size="sm"
+				>
+					{isEditMode ? 'Save Changes' : 'Create Role'}
+				</Button>,
+			]}
+			destroyOnClose
+			className="create-role-modal"
+			width={530}
+		>
+			<Form form={form} layout="vertical" className="create-role-form">
+				<Form.Item
+					name="name"
+					label="Name"
+					rules={[{ required: true, message: 'Role name is required' }]}
+				>
+					<Input
+						disabled={isEditMode}
+						placeholder="Enter role name e.g. : Service Owner"
+					/>
+				</Form.Item>
+				<Form.Item name="description" label="Description">
+					<textarea
+						className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+						placeholder="A helpful description of the role"
+					/>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
+
+export default CreateRoleModal;

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

@@ -0,0 +1,60 @@
+import { Trash2, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Modal } from 'antd';
+
+interface DeleteRoleModalProps {
+	isOpen: boolean;
+	roleName: string;
+	isDeleting: boolean;
+	onCancel: () => void;
+	onConfirm: () => void;
+}
+
+function DeleteRoleModal({
+	isOpen,
+	roleName,
+	isDeleting,
+	onCancel,
+	onConfirm,
+}: DeleteRoleModalProps): JSX.Element {
+	return (
+		<Modal
+			open={isOpen}
+			onCancel={onCancel}
+			title={<span className="title">Delete Role</span>}
+			closable
+			footer={[
+				<Button
+					key="cancel"
+					className="cancel-btn"
+					prefix={<X size={14} />}
+					onClick={onCancel}
+					variant="solid"
+					color="secondary"
+				>
+					Cancel
+				</Button>,
+				<Button
+					key="delete"
+					className="delete-btn"
+					prefix={<Trash2 size={14} />}
+					onClick={onConfirm}
+					loading={isDeleting}
+					variant="solid"
+					color="destructive"
+				>
+					Delete Role
+				</Button>,
+			]}
+			destroyOnClose
+			className="role-details-delete-modal"
+		>
+			<p className="delete-text">
+				Are you sure you want to delete the role <strong>{roleName}</strong>? This
+				action cannot be undone.
+			</p>
+		</Modal>
+	);
+}
+
+export default DeleteRoleModal;

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

@@ -1,167 +0,0 @@
-.rolesListingTable {
-	margin-top: 12px;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.scrollContainer {
-	overflow-x: auto;
-}
-
-.tableInner {
-	min-width: 850px;
-}
-
-.tableHeader {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	gap: 24px;
-}
-
-.headerCell {
-	font-family: Inter;
-	font-size: 11px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.44px;
-	color: var(--foreground);
-	line-height: 16px;
-}
-
-.headerCellName {
-	flex: 0 0 180px;
-}
-
-.headerCellDescription {
-	flex: 1;
-	min-width: 0;
-}
-
-.headerCellCreatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-}
-
-.headerCellUpdatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-}
-
-.sectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	height: 32px;
-	padding: 0 16px;
-	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	border-top: 1px solid var(--secondary);
-	border-bottom: 1px solid var(--secondary);
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--foreground);
-	line-height: 16px;
-	margin: 0;
-}
-
-.sectionHeaderCount {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 20px;
-	height: 18px;
-	padding: 0 6px;
-	border-radius: 9px;
-	background: var(--l3-background);
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--foreground);
-	line-height: 1;
-}
-
-.tableRow {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
-	border-bottom: 1px solid var(--secondary);
-	gap: 24px;
-}
-
-.tableRowClickable {
-	cursor: pointer;
-
-	&:hover {
-		background: color-mix(in srgb, var(--bg-robin-200) 5%, transparent);
-	}
-}
-
-.tableCell {
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	color: var(--foreground);
-	line-height: 20px;
-}
-
-.tableCellName {
-	flex: 0 0 180px;
-	font-weight: 500;
-}
-
-.tableCellDescription {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-}
-
-.tableCellCreatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-	white-space: nowrap;
-}
-
-.tableCellUpdatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-	white-space: nowrap;
-}
-
-.emptyState {
-	padding: 24px 16px;
-	text-align: center;
-	color: var(--foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-}
-
-.pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 8px 16px;
-
-	:global(.ant-pagination-total-text) {
-		margin-right: auto;
-
-		.numbers {
-			font-family: Inter;
-			font-size: 12px;
-			color: var(--foreground);
-		}
-
-		.total {
-			font-family: Inter;
-			font-size: 12px;
-			color: var(--foreground);
-			opacity: 0.5;
-		}
-	}
-}
-
-.descriptionTooltip {
-	max-height: none;
-	overflow-y: visible;
-}

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

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
-import cx from 'classnames';
 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 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
@@ -16,7 +16,7 @@ import { useTimezone } from 'providers/Timezone';
 import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';
 
-import styles from './RolesListingTable.module.scss';
+import '../RolesSettings.styles.scss';
 
 const PAGE_SIZE = 20;
 
@@ -41,7 +41,7 @@ function RolesListingTable({
 	const { data, isLoading, isError, error } = useListRoles({
 		query: { enabled: hasListPermission },
 	});
-	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
 	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
@@ -57,6 +57,19 @@ function RolesListingTable({
 
 	const roles = useMemo(() => data?.data ?? [], [data]);
 
+	const formatTimestamp = (date?: Date | string): string => {
+		if (!date) {
+			return '—';
+		}
+		const d = new Date(date);
+
+		if (Number.isNaN(d.getTime())) {
+			return '—';
+		}
+
+		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
+	};
+
 	const filteredRoles = useMemo(() => {
 		if (!searchQuery.trim()) {
 			return roles;
@@ -82,6 +95,7 @@ function RolesListingTable({
 		[filteredRoles],
 	);
 
+	// Combine managed + custom into a flat display list for pagination
 	const displayList = useMemo((): DisplayItem[] => {
 		const result: DisplayItem[] = [];
 
@@ -102,6 +116,7 @@ function RolesListingTable({
 
 	const totalRoleCount = managedRoles.length + customRoles.length;
 
+	// Ensure current page is valid; if out of bounds, redirect to last available page
 	useEffect(() => {
 		if (isLoading || totalRoleCount === 0) {
 			return;
@@ -112,6 +127,7 @@ function RolesListingTable({
 		}
 	}, [isLoading, totalRoleCount, currentPage, setCurrentPage]);
 
+	// Paginate: count only role items, but include section headers contextually
 	const paginatedItems = useMemo((): DisplayItem[] => {
 		const startRole = (currentPage - 1) * PAGE_SIZE;
 		const endRole = startRole + PAGE_SIZE;
@@ -124,6 +140,7 @@ function RolesListingTable({
 				lastSection = item;
 			} else {
 				if (roleIndex >= startRole && roleIndex < endRole) {
+					// Insert section header before first role in that section on this page
 					if (lastSection) {
 						result.push(lastSection);
 						lastSection = null;
@@ -136,16 +153,6 @@ function RolesListingTable({
 		return result;
 	}, [displayList, currentPage]);
 
-	const handleRowClick = useCallback(
-		(roleId: string, roleName: string): void => {
-			if (isRolesEnabled) {
-				const url = `${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}?name=${encodeURIComponent(roleName)}`;
-				history.push(url);
-			}
-		},
-		[isRolesEnabled, history],
-	);
-
 	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
 		<>
 			<span className="numbers">
@@ -161,7 +168,7 @@ function RolesListingTable({
 
 	if (isAuthZLoading || isLoading) {
 		return (
-			<div className={styles.rolesListingTable}>
+			<div className="roles-listing-table">
 				<Skeleton active paragraph={{ rows: 5 }} />
 			</div>
 		);
@@ -169,7 +176,7 @@ function RolesListingTable({
 
 	if (isError) {
 		return (
-			<div className={styles.rolesListingTable}>
+			<div className="roles-listing-table">
 				<ErrorInPlace
 					error={toAPIError(
 						error,
@@ -182,27 +189,31 @@ function RolesListingTable({
 
 	if (filteredRoles.length === 0) {
 		return (
-			<div className={styles.rolesListingTable}>
-				<div className={styles.emptyState}>
+			<div className="roles-listing-table">
+				<div className="roles-table-empty">
 					{searchQuery ? 'No roles match your search.' : 'No roles found.'}
 				</div>
 			</div>
 		);
 	}
 
+	const navigateToRole = (roleId: string, roleName?: string): void => {
+		const search = roleName ? `?name=${encodeURIComponent(roleName)}` : '';
+		history.push(`${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}${search}`);
+	};
+
+	// todo: use table from periscope when its available for consumption
 	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
-			className={cx(styles.tableRow, {
-				[styles.tableRowClickable]: isRolesEnabled,
-			})}
+			className={`roles-table-row${isRolesEnabled ? ' roles-table-row--clickable' : ''}`}
 			role={isRolesEnabled ? 'button' : undefined}
 			tabIndex={isRolesEnabled ? 0 : undefined}
 			onClick={
 				isRolesEnabled
 					? (): void => {
-							if (role.id && role.name) {
-								handleRowClick(role.id, role.name);
+							if (role.id) {
+								navigateToRole(role.id, role.name);
 							}
 						}
 					: undefined
@@ -210,54 +221,56 @@ function RolesListingTable({
 			onKeyDown={
 				isRolesEnabled
 					? (e): void => {
-							if ((e.key === 'Enter' || e.key === ' ') && role.id && role.name) {
-								handleRowClick(role.id, role.name);
+							if ((e.key === 'Enter' || e.key === ' ') && role.id) {
+								navigateToRole(role.id, role.name);
 							}
 						}
 					: undefined
 			}
 		>
-			<div className={cx(styles.tableCell, styles.tableCellName)}>
+			<div className="roles-table-cell roles-table-cell--name">
 				{role.name ?? '—'}
 			</div>
-			<div className={cx(styles.tableCell, styles.tableCellDescription)}>
+			<div className="roles-table-cell roles-table-cell--description">
 				<LineClampedText
 					text={role.description ?? '—'}
-					tooltipProps={{ overlayClassName: styles.descriptionTooltip }}
+					tooltipProps={{ overlayClassName: 'roles-description-tooltip' }}
 				/>
 			</div>
-			<div className={cx(styles.tableCell, styles.tableCellUpdatedAt)}>
-				{formatTimezoneAdjustedTimestampOptional(role.updatedAt)}
+			<div className="roles-table-cell roles-table-cell--updated-at">
+				{formatTimestamp(role.updatedAt)}
 			</div>
-			<div className={cx(styles.tableCell, styles.tableCellCreatedAt)}>
-				{formatTimezoneAdjustedTimestampOptional(role.createdAt)}
+			<div className="roles-table-cell roles-table-cell--created-at">
+				{formatTimestamp(role.createdAt)}
 			</div>
 		</div>
 	);
 
 	return (
-		<div className={styles.rolesListingTable}>
-			<div className={styles.scrollContainer}>
-				<div className={styles.tableInner}>
-					<div className={styles.tableHeader}>
-						<div className={cx(styles.headerCell, styles.headerCellName)}>Name</div>
-						<div className={cx(styles.headerCell, styles.headerCellDescription)}>
+		<div className="roles-listing-table">
+			<div className="roles-table-scroll-container">
+				<div className="roles-table-inner">
+					<div className="roles-table-header">
+						<div className="roles-table-header-cell roles-table-header-cell--name">
+							Name
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--description">
 							Description
 						</div>
-						<div className={cx(styles.headerCell, styles.headerCellUpdatedAt)}>
+						<div className="roles-table-header-cell roles-table-header-cell--updated-at">
 							Updated At
 						</div>
-						<div className={cx(styles.headerCell, styles.headerCellCreatedAt)}>
+						<div className="roles-table-header-cell roles-table-header-cell--created-at">
 							Created At
 						</div>
 					</div>
 
 					{paginatedItems.map((item) =>
 						item.type === 'section' ? (
-							<h3 key={`section-${item.label}`} className={styles.sectionHeader}>
+							<h3 key={`section-${item.label}`} className="roles-table-section-header">
 								{item.label}
 								{item.count !== undefined && (
-									<span className={styles.sectionHeaderCount}>{item.count}</span>
+									<span className="roles-table-section-header__count">{item.count}</span>
 								)}
 							</h3>
 						) : (
@@ -275,7 +288,7 @@ function RolesListingTable({
 				showSizeChanger={false}
 				hideOnSinglePage
 				onChange={(page): void => setCurrentPage(page)}
-				className={styles.pagination}
+				className="roles-table-pagination"
 			/>
 		</div>
 	);

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

@@ -1,229 +0,0 @@
-.rolesSettingsHeader {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 4px;
-	width: 100%;
-	padding: 16px;
-}
-
-.rolesSettingsHeaderTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-style: normal;
-	font-size: 18px;
-	font-weight: 500;
-	line-height: 28px;
-	letter-spacing: -0.09px;
-	margin: 0;
-}
-
-.rolesSettingsHeaderDescription {
-	color: var(--foreground);
-	font-family: Inter;
-	font-style: normal;
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-	margin: 0;
-}
-
-.rolesSettingsHeaderLearnMore {
-	color: var(--primary);
-	text-decoration: none;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.rolesSettingsContent {
-	padding: 0 16px;
-}
-
-.rolesSettingsToolbar {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 12px;
-}
-
-.roleSettingsToolbarButton {
-	display: flex;
-	width: 156px;
-	height: 32px;
-	padding: 6px 12px;
-	justify-content: center;
-	align-items: center;
-	gap: 6px;
-	border-radius: 2px;
-}
-
-.rolesDescriptionTooltip {
-	max-height: none;
-	overflow-y: visible;
-}
-
-.rolesListingTable {
-	margin-top: 12px;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.rolesTableScrollContainer {
-	overflow-x: auto;
-}
-
-.rolesTableInner {
-	min-width: 850px;
-}
-
-.rolesTableHeader {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	gap: 24px;
-}
-
-.rolesTableHeaderCell {
-	font-family: Inter;
-	font-size: 11px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.44px;
-	color: var(--foreground);
-	line-height: 16px;
-}
-
-.rolesTableHeaderCellName {
-	flex: 0 0 180px;
-}
-
-.rolesTableHeaderCellDescription {
-	flex: 1;
-	min-width: 0;
-}
-
-.rolesTableHeaderCellCreatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-}
-
-.rolesTableHeaderCellUpdatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-}
-
-.rolesTableSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	height: 32px;
-	padding: 0 16px;
-	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	border-top: 1px solid var(--secondary);
-	border-bottom: 1px solid var(--secondary);
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--foreground);
-	line-height: 16px;
-	margin: 0;
-}
-
-.rolesTableSectionHeaderCount {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 20px;
-	height: 18px;
-	padding: 0 6px;
-	border-radius: 9px;
-	background: var(--l3-background);
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--foreground);
-	line-height: 1;
-}
-
-.rolesTableRow {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
-	border-bottom: 1px solid var(--secondary);
-	gap: 24px;
-}
-
-.rolesTableRowClickable {
-	cursor: pointer;
-
-	&:hover {
-		background: color-mix(in srgb, var(--bg-robin-200) 5%, transparent);
-	}
-}
-
-.rolesTableCell {
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	color: var(--foreground);
-	line-height: 20px;
-}
-
-.rolesTableCellName {
-	flex: 0 0 180px;
-	font-weight: 500;
-}
-
-.rolesTableCellDescription {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-}
-
-.rolesTableCellCreatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-	white-space: nowrap;
-}
-
-.rolesTableCellUpdatedAt {
-	flex: 0 0 180px;
-	text-align: right;
-	white-space: nowrap;
-}
-
-.rolesTableEmpty {
-	padding: 24px 16px;
-	text-align: center;
-	color: var(--foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-}
-
-.rolesTablePagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 8px 16px;
-
-	:global(.ant-pagination-total-text) {
-		margin-right: auto;
-	}
-
-	:global(.ant-pagination-total-text .numbers) {
-		font-family: Inter;
-		font-size: 12px;
-		color: var(--foreground);
-	}
-
-	:global(.ant-pagination-total-text .total) {
-		font-family: Inter;
-		font-size: 12px;
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-}

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -0,0 +1,345 @@
+.roles-settings {
+	.roles-settings-header {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		width: 100%;
+		padding: 16px;
+
+		.roles-settings-header-title {
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-style: normal;
+			font-size: 18px;
+			font-weight: 500;
+			line-height: 28px;
+			letter-spacing: -0.09px;
+			margin: 0;
+		}
+
+		.roles-settings-header-description {
+			color: var(--foreground);
+			font-family: Inter;
+			font-style: normal;
+			font-size: var(--paragraph-base-400-font-size);
+			font-weight: var(--paragraph-base-400-font-weight);
+			line-height: 20px;
+			letter-spacing: -0.07px;
+			margin: 0;
+		}
+
+		.roles-settings-header-learn-more {
+			color: var(--primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.roles-settings-content {
+		padding: 0 16px;
+	}
+
+	.roles-settings-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 12px;
+
+		.role-settings-toolbar-button {
+			display: flex;
+			width: 156px;
+			height: 32px;
+			padding: 6px 12px;
+			justify-content: center;
+			align-items: center;
+			gap: 6px;
+			border-radius: 2px;
+		}
+	}
+}
+
+.roles-description-tooltip {
+	max-height: none;
+	overflow-y: visible;
+}
+
+.roles-listing-table {
+	margin-top: 12px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.roles-table-scroll-container {
+	overflow-x: auto;
+}
+
+.roles-table-inner {
+	min-width: 850px;
+}
+
+.roles-table-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 24px;
+}
+
+.roles-table-header-cell {
+	font-family: Inter;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.44px;
+	color: var(--foreground);
+	line-height: 16px;
+
+	&--name {
+		flex: 0 0 180px;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+}
+
+.roles-table-section-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 16px;
+	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+	border-top: 1px solid var(--secondary);
+	border-bottom: 1px solid var(--secondary);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 16px;
+	margin: 0;
+
+	&__count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		height: 18px;
+		padding: 0 6px;
+		border-radius: 9px;
+		background: var(--l3-background);
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--foreground);
+		line-height: 1;
+	}
+}
+
+.roles-table-row {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
+	border-bottom: 1px solid var(--secondary);
+	gap: 24px;
+
+	&--clickable {
+		cursor: pointer;
+
+		&:hover {
+			background: color-mix(in srgb, var(--bg-robin-200) 5%, transparent);
+		}
+	}
+}
+
+.roles-table-cell {
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 20px;
+
+	&--name {
+		flex: 0 0 180px;
+		font-weight: 500;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+}
+
+.roles-table-empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.roles-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 8px 16px;
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+
+		.numbers {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+		}
+
+		.total {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+			opacity: 0.5;
+		}
+	}
+}
+
+.create-role-modal {
+	.ant-modal-content {
+		padding: 0;
+		background: var(--l2-background);
+		border: 1px solid var(--secondary);
+		border-radius: 4px;
+	}
+
+	.ant-modal-header {
+		background: var(--l2-background);
+		border-bottom: 1px solid var(--secondary);
+		padding: 16px;
+		margin-bottom: 0;
+	}
+
+	.ant-modal-close {
+		top: 14px;
+		inset-inline-end: 16px;
+		width: 14px;
+		height: 14px;
+		color: var(--foreground);
+
+		.ant-modal-close-x {
+			font-size: 12px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.ant-modal-title {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 1;
+		letter-spacing: -0.065px;
+	}
+
+	.ant-modal-body {
+		padding: 16px;
+	}
+
+	.create-role-form {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+
+		.ant-form-item-label {
+			padding-bottom: 8px;
+
+			label {
+				color: var(--foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+			}
+		}
+
+		input {
+			&::placeholder {
+				opacity: 0.4;
+			}
+		}
+
+		textarea {
+			width: 100%;
+			box-sizing: border-box;
+			min-height: 100px;
+			resize: vertical;
+			background: var(--input-background, transparent);
+			border: 1px solid var(--border);
+			border-radius: 2px;
+			padding: 6px 8px;
+			font-family: Inter;
+			font-size: var(--font-size-xs);
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+			color: var(--l1-foreground);
+			outline: none;
+			box-shadow: none;
+
+			&::placeholder {
+				color: var(--muted-foreground);
+				opacity: 0.4;
+			}
+
+			&:focus,
+			&:hover {
+				border-color: var(--input);
+				box-shadow: none;
+			}
+		}
+	}
+
+	.ant-modal-footer {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 12px;
+		margin: 0;
+		padding: 0 16px;
+		height: 56px;
+		border-top: 1px solid var(--secondary);
+	}
+}

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -1,42 +1,39 @@
 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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import ROUTES from 'constants/routes';
 import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
+import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
 
-import styles from './RolesSettings.module.scss';
+import './RolesSettings.styles.scss';
 
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
-	const history = useHistory();
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 	const { isRolesEnabled } = useRolesFeatureGate();
 
 	return (
-		<div data-testid="roles-settings">
-			<div className={styles.rolesSettingsHeader}>
-				<h3 className={styles.rolesSettingsHeaderTitle}>Roles</h3>
-				<p className={styles.rolesSettingsHeaderDescription}>
-					{isRolesEnabled
-						? 'Create and manage custom roles for your team. '
-						: 'The built-in roles of this instance.'}{' '}
+		<div className="roles-settings" data-testid="roles-settings">
+			<div className="roles-settings-header">
+				<h3 className="roles-settings-header-title">Roles</h3>
+				<p className="roles-settings-header-description">
+					Create and manage custom roles for your team.{' '}
 					<a
 						href="https://signoz.io/docs/manage/administrator-guide/iam/roles/"
 						target="_blank"
 						rel="noopener noreferrer"
-						className={styles.rolesSettingsHeaderLearnMore}
+						className="roles-settings-header-learn-more"
 					>
 						Learn more
 					</a>
 				</p>
 			</div>
-			<div className={styles.rolesSettingsContent}>
-				<div className={styles.rolesSettingsToolbar}>
+			<div className="roles-settings-content">
+				<div className="roles-settings-toolbar">
 					<Input
 						type="search"
 						placeholder="Search for roles..."
@@ -48,8 +45,8 @@ function RolesSettings(): JSX.Element {
 							<Button
 								variant="solid"
 								color="primary"
-								className={styles.roleSettingsToolbarButton}
-								onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
+								className="role-settings-toolbar-button"
+								onClick={(): void => setIsCreateModalOpen(true)}
 							>
 								<Plus size={14} />
 								Custom role
@@ -59,6 +56,10 @@ function RolesSettings(): JSX.Element {
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />
 			</div>
+			<CreateRoleModal
+				isOpen={isCreateModalOpen}
+				onClose={(): void => setIsCreateModalOpen(false)}
+			/>
 		</div>
 	);
 }

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

@@ -1,22 +0,0 @@
-.readOnlyJsonViewer {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-}
-
-.editorContainer {
-	position: relative;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	flex: 1;
-	min-height: 300px;
-}
-
-.copyButton {
-	position: absolute;
-	top: 8px;
-	right: 24px;
-	z-index: 10;
-}

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

@@ -1,91 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import MEditor from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-import { Check, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	defineJsonTheme,
-	JSON_THEME_DARK,
-	READONLY_EDITOR_OPTIONS,
-} from '../monaco.config';
-import { RolePermissionsData } from '../types';
-import { transformResourcePermissionsToTransactionGroups } from '../hooks/useRolePermissions';
-
-import styles from './ReadOnlyJsonViewer.module.scss';
-
-export interface ReadOnlyJsonViewerProps {
-	permissions: RolePermissionsData;
-}
-
-function ReadOnlyJsonViewer({
-	permissions,
-}: ReadOnlyJsonViewerProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [copyState, copyToClipboard] = useCopyToClipboard();
-	const [copied, setCopied] = useState(false);
-
-	const jsonContent = useMemo(() => {
-		if (!permissions.resources) {
-			return '[]';
-		}
-		const transactionGroups = transformResourcePermissionsToTransactionGroups(
-			permissions.resources,
-		);
-		return JSON.stringify(transactionGroups, null, 2);
-	}, [permissions.resources]);
-
-	useEffect(() => {
-		if (copyState.value) {
-			setCopied(true);
-			const timer = setTimeout(() => setCopied(false), 1500);
-			return (): void => clearTimeout(timer);
-		}
-		return undefined;
-	}, [copyState]);
-
-	const handleCopy = useCallback((): void => {
-		copyToClipboard(jsonContent);
-	}, [copyToClipboard, jsonContent]);
-
-	return (
-		<div
-			className={styles.readOnlyJsonViewer}
-			data-testid="read-only-json-viewer"
-		>
-			<div className={styles.editorContainer}>
-				<TooltipSimple title={copied ? 'Copied!' : 'Copy JSON'}>
-					<Button
-						variant="ghost"
-						size="sm"
-						className={styles.copyButton}
-						onClick={handleCopy}
-						data-testid="read-only-json-viewer-copy-button"
-					>
-						{copied ? (
-							<Check size={14} color={Color.BG_FOREST_400} />
-						) : (
-							<Copy
-								size={14}
-								color={isDarkMode ? Color.BG_VANILLA_400 : Color.TEXT_INK_400}
-							/>
-						)}
-					</Button>
-				</TooltipSimple>
-				<MEditor
-					value={jsonContent}
-					language="json"
-					options={READONLY_EDITOR_OPTIONS}
-					height="100%"
-					theme={isDarkMode ? JSON_THEME_DARK : 'light'}
-					beforeMount={defineJsonTheme}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default ReadOnlyJsonViewer;

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

@@ -1,210 +0,0 @@
-.viewRolePage {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-8);
-	width: 100%;
-	max-width: 1400px;
-	margin: 0 auto;
-	height: 100%;
-	min-height: 0;
-}
-
-.viewRolePageHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.viewRolePageHeaderLeft {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.backButton {
-	--button-padding: var(--spacing-3);
-}
-
-.viewRolePageActions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.deleteButton {
-	margin-right: 0px;
-
-	&:disabled {
-		pointer-events: auto;
-	}
-}
-
-.unsavedText {
-	font-family: Inter;
-	font-size: var(--periscope-font-size-base);
-	font-weight: var(--font-weight-normal);
-	line-height: var(--line-height-20);
-	color: var(--primary);
-}
-
-.viewRolePageContent {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	flex: 1;
-	min-height: 0;
-}
-
-.viewRolePageForm {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-}
-
-.formRow {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: var(--spacing-8);
-}
-
-.formField {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-disabled-background: var(--l2-background);
-
-	input::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.formLabel {
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-20);
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	color: var(--l2-foreground);
-}
-
-.viewRolePageDivider {
-	width: 100%;
-	height: 1px;
-	background: var(--l1-border);
-}
-
-.roleTabs {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	--tab-content-padding: 0px;
-
-	[role='tabpanel'] {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-	}
-}
-
-.permissionSection {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	flex: 1;
-	min-height: 0;
-}
-
-.permissionHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.permissionTitle {
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	position: relative;
-}
-
-.permissionDivider {
-	height: 7px;
-	flex: 1 1 0%;
-	border-width: medium medium;
-	border-style: none none;
-	border-color: currentcolor currentcolor;
-	border-image: initial;
-	border-top: 2px dotted var(--l1-border);
-	border-bottom: 2px dotted var(--l1-border);
-	margin: 0px var(--spacing-4);
-}
-
-.permissionModeToggle {
-	display: inline-flex;
-	grid-auto-flow: column;
-	gap: 0;
-	flex-shrink: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-}
-
-.permissionModeItem {
-	position: relative;
-	display: flex;
-	align-items: center;
-
-	&:not(:last-child) {
-		border-right: 1px solid var(--l2-border);
-	}
-
-	label {
-		display: flex;
-		align-items: center;
-		min-height: 24px;
-		padding: var(--spacing-3) var(--spacing-6);
-		font-family: Inter;
-		font-size: var(--periscope-font-size-base);
-		line-height: var(--line-height-20);
-		color: var(--l2-foreground);
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-	}
-}
-
-.permissionModeInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-
-	* {
-		display: none;
-	}
-
-	&[data-state='checked'] + label {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
-		font-weight: var(--font-weight-medium);
-	}
-}
-
-.permissionContent {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-}

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

@@ -1,339 +0,0 @@
-import { useMemo } from 'react';
-import { ArrowLeft } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Divider } from '@signozhq/ui/divider';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { Tabs } from '@signozhq/ui/tabs';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-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 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
-import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
-import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';
-import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-import { useTimezone } from 'providers/Timezone';
-import APIError from 'types/api/error';
-import { RoleType } from 'types/roles';
-import { toAPIError } from 'utils/errorUtils';
-
-import DeleteRoleModal from '../DeleteRoleModal/DeleteRoleModal';
-import PermissionOverview from './components/PermissionOverview';
-import ReadOnlyJsonViewer from './ReadOnlyJsonViewer';
-import { useViewRolePageActions } from './useViewRolePageActions';
-
-import styles from './ViewRolePage.module.scss';
-
-function ViewRolePage(): JSX.Element {
-	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
-	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
-		useRolesFeatureGate();
-
-	const {
-		roleId,
-		roleName,
-		activeTab,
-		viewMode,
-		expandedResources,
-		setExpandedResources,
-		handleRedirectToUpdate,
-		handleCancel,
-		handleModeChange,
-		handleTabChange,
-	} = useViewRolePageActions();
-
-	const {
-		hasReadPermission,
-		readRolePermission,
-		hasUpdatePermission,
-		updateRolePermission,
-		hasDeletePermission,
-		isAuthZLoading,
-	} = useRoleAuthZ(roleName);
-
-	const { data, isLoading, error } = useGetRole(
-		{ id: roleId ?? '' },
-		{ query: { enabled: !!roleId && hasReadPermission } },
-	);
-	const role = data?.data;
-	const isManaged = role?.type === RoleType.MANAGED;
-
-	const {
-		isDeleteModalOpen,
-		isDeleteDisabled,
-		deleteDisabledReason,
-		deleteError,
-		handleOpenDeleteModal,
-		handleCloseDeleteModal,
-		handleConfirmDelete,
-	} = useDeleteRoleModal({
-		roleId,
-		isManaged: isManaged ?? false,
-		hasDeletePermission,
-		onDeleteSuccess: handleCancel,
-	});
-
-	const tabItems = useMemo(
-		() => [
-			{
-				key: 'overview' as const,
-				label: 'Overview',
-				children: (
-					<div className={styles.permissionSection}>
-						<div className={styles.permissionHeader}>
-							<Typography
-								as="span"
-								size="small"
-								weight="medium"
-								color="muted"
-								className={styles.permissionTitle}
-							>
-								Transaction Groups
-							</Typography>
-							<hr className={styles.permissionDivider} />
-							<RadioGroup
-								className={styles.permissionModeToggle}
-								value={viewMode}
-								onChange={handleModeChange}
-								testId="permission-view-mode"
-							>
-								<RadioGroupItem
-									value="list"
-									containerClassName={styles.permissionModeItem}
-									className={styles.permissionModeInput}
-									testId="permission-view-mode-list"
-								>
-									List
-								</RadioGroupItem>
-								<RadioGroupItem
-									value="json"
-									containerClassName={styles.permissionModeItem}
-									className={styles.permissionModeInput}
-									testId="permission-view-mode-json"
-								>
-									JSON
-								</RadioGroupItem>
-							</RadioGroup>
-						</div>
-
-						<div className={styles.permissionContent}>
-							{viewMode === 'list' ? (
-								<PermissionOverview
-									roleId={roleId ?? ''}
-									expandedResources={expandedResources}
-									onExpandedResourcesChange={setExpandedResources}
-								/>
-							) : role ? (
-								<ReadOnlyJsonViewer permissions={transformApiToRolePermissions(role)} />
-							) : null}
-						</div>
-					</div>
-				),
-			},
-		],
-		[
-			viewMode,
-			handleModeChange,
-			roleId,
-			role,
-			expandedResources,
-			setExpandedResources,
-		],
-	);
-
-	if (!hasReadPermission && !isAuthZLoading) {
-		return (
-			<PermissionDeniedFullPage permissionName={readRolePermission.object} />
-		);
-	}
-
-	if (!isRolesEnabled && !isFeatureGateLoading) {
-		return (
-			<div className={styles.viewRolePage} data-testid="view-role-page">
-				<div className={styles.viewRolePageHeader}>
-					<div className={styles.viewRolePageHeaderLeft}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							onClick={handleCancel}
-							data-testid="cancel-button"
-							className={styles.backButton}
-						>
-							<ArrowLeft size={16} />
-						</Button>
-						<Typography.Title level={3}>View Role</Typography.Title>
-					</div>
-				</div>
-
-				<ErrorInPlace
-					error={
-						new APIError({
-							httpStatusCode: 403,
-							error: {
-								code: 'FEATURE_DISABLED',
-								message:
-									'Custom roles feature is not available. Please check your license or feature configuration.',
-								url: '',
-								errors: [],
-							},
-						})
-					}
-					data-testid="feature-gate-error-banner"
-				/>
-			</div>
-		);
-	}
-
-	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
-		return (
-			<div className={styles.viewRolePage}>
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className={styles.viewRolePage} data-testid="view-role-page">
-				<div className={styles.viewRolePageHeader}>
-					<div className={styles.viewRolePageHeaderLeft}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							onClick={handleCancel}
-							data-testid="cancel-button"
-							className={styles.backButton}
-						>
-							<ArrowLeft size={16} />
-						</Button>
-						<Typography.Title level={3}>Failed to load role</Typography.Title>
-					</div>
-				</div>
-
-				<ErrorInPlace
-					error={toAPIError(error, 'Failed to load role details')}
-					data-testid="role-error-banner"
-				/>
-			</div>
-		);
-	}
-
-	if (!role) {
-		return <></>;
-	}
-
-	return (
-		<div className={styles.viewRolePage} data-testid="view-role-page">
-			<div className={styles.viewRolePageHeader}>
-				<div className={styles.viewRolePageHeaderLeft}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						onClick={handleCancel}
-						data-testid="cancel-button"
-						className={styles.backButton}
-					>
-						<ArrowLeft size={16} />
-					</Button>
-					<Typography.Title level={3}>
-						{'Role - ' + role.name || 'Loading role...'}
-					</Typography.Title>
-				</div>
-
-				<div className={styles.viewRolePageActions}>
-					<TooltipSimple
-						title={isDeleteDisabled ? deleteDisabledReason : 'Open delete modal'}
-					>
-						<Button
-							variant="link"
-							color="destructive"
-							onClick={handleOpenDeleteModal}
-							disabled={isDeleteDisabled}
-							data-testid="delete-button"
-							className={styles.deleteButton}
-						>
-							Delete
-						</Button>
-					</TooltipSimple>
-
-					<Divider type="vertical" />
-
-					<TooltipSimple
-						title={
-							isManaged
-								? 'Managed roles cannot be updated'
-								: hasUpdatePermission
-									? 'Open update page'
-									: `You are not authorized to perform ${updateRolePermission.object}`
-						}
-					>
-						<Button
-							variant="solid"
-							color="primary"
-							data-testid="save-button"
-							disabled={isManaged || !hasUpdatePermission}
-							onClick={handleRedirectToUpdate}
-							style={
-								isManaged || !hasUpdatePermission
-									? { pointerEvents: 'auto' }
-									: undefined
-							}
-						>
-							Update
-						</Button>
-					</TooltipSimple>
-				</div>
-			</div>
-
-			<div className={styles.viewRolePageContent}>
-				<div className={styles.viewRolePageForm}>
-					<div className={styles.formField}>
-						<label htmlFor="role-description" className={styles.formLabel}>
-							Description
-						</label>
-						<Typography>{role.description}</Typography>
-					</div>
-					<div className={styles.formRow}>
-						<div className={styles.formField}>
-							<label htmlFor="role-created-at" className={styles.formLabel}>
-								Created At
-							</label>
-							<Badge color="secondary">
-								{formatTimezoneAdjustedTimestampOptional(role.createdAt)}
-							</Badge>
-						</div>
-						<div className={styles.formField}>
-							<label htmlFor="role-modified-at" className={styles.formLabel}>
-								Last Modified At
-							</label>
-							<Badge color="secondary">
-								{formatTimezoneAdjustedTimestampOptional(role.updatedAt)}
-							</Badge>
-						</div>
-					</div>
-				</div>
-
-				<Divider />
-
-				<Tabs
-					className={styles.roleTabs}
-					value={activeTab}
-					onChange={handleTabChange}
-					items={tabItems}
-				/>
-			</div>
-			<DeleteRoleModal
-				isOpen={isDeleteModalOpen}
-				roleName={role.name}
-				error={deleteError}
-				onCancel={handleCloseDeleteModal}
-				onConfirm={handleConfirmDelete}
-			/>
-		</div>
-	);
-}
-
-export default ViewRolePage;

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

@@ -1,130 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import * as roleApi from 'api/generated/services/role';
-import { render, screen, waitFor, within } from 'tests/test-utils';
-
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	mockHooksForCustomRole,
-} from './testUtils';
-
-describe('ViewRolePage - Actions', () => {
-	beforeEach(() => {
-		mockHooksForCustomRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('navigates to roles list when Cancel clicked', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId">
-					<ViewRolePage />
-				</Route>
-				<Route path="/settings/roles">
-					<div data-testid="roles-list-target" />
-				</Route>
-			</Switch>,
-			undefined,
-			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
-		);
-
-		const cancelBtn = screen.getByTestId('cancel-button');
-		await user.click(cancelBtn);
-
-		await expect(
-			screen.findByTestId('roles-list-target'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('navigates to edit page when Update clicked', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId/edit">
-					<div data-testid="edit-page-target" />
-				</Route>
-				<Route path="/settings/roles/:roleId">
-					<ViewRolePage />
-				</Route>
-			</Switch>,
-			undefined,
-			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
-		);
-
-		const updateBtn = screen.getByTestId('save-button');
-		await user.click(updateBtn);
-
-		await expect(
-			screen.findByTestId('edit-page-target'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('opens delete modal when Delete clicked', async () => {
-		const user = userEvent.setup();
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		const deleteBtn = screen.getByTestId('delete-button');
-		await user.click(deleteBtn);
-
-		await expect(
-			screen.findByText(/Are you sure you want to delete the role/),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('calls delete API and redirects on successful delete', async () => {
-		const user = userEvent.setup();
-
-		const mockDeleteRole = jest.fn().mockResolvedValue({});
-		jest.spyOn(roleApi, 'useDeleteRole').mockReturnValue({
-			mutateAsync: mockDeleteRole,
-		} as unknown as ReturnType<typeof roleApi.useDeleteRole>);
-
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId">
-					<ViewRolePage />
-				</Route>
-				<Route path="/settings/roles">
-					<div data-testid="roles-list-target" />
-				</Route>
-			</Switch>,
-			undefined,
-			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
-		);
-
-		await user.click(screen.getByTestId('delete-button'));
-
-		await expect(
-			screen.findByText(/Are you sure you want to delete the role/),
-		).resolves.toBeInTheDocument();
-
-		const modal = screen.getByRole('dialog');
-		const modalConfirmBtn = within(modal).getByRole('button', {
-			name: /Delete Role/i,
-		});
-		await user.click(modalConfirmBtn);
-
-		await waitFor(() => {
-			expect(mockDeleteRole).toHaveBeenCalledWith({
-				pathParams: { id: CUSTOM_ROLE_ID },
-			});
-		});
-
-		await expect(
-			screen.findByTestId('roles-list-target'),
-		).resolves.toBeInTheDocument();
-	});
-});

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

@@ -1,429 +0,0 @@
-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 'hooks/useAuthZ/useAuthZ';
-import {
-	customRoleResponse,
-	managedRoleResponse,
-} from 'mocks-server/__mockdata__/roles';
-import {
-	mockUseAuthZDenyAll,
-	mockUseAuthZGrantAll,
-	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	MANAGED_ROLE_ID,
-	MANAGED_ROLE_NAME,
-	mockPermissionsData,
-} from './testUtils';
-
-const mockUseAuthZGrantReadDeleteDenied = mockUseAuthZGrantByPrefix(
-	'read',
-	'update',
-);
-const mockUseAuthZGrantReadUpdateDenied = mockUseAuthZGrantByPrefix(
-	'read',
-	'delete',
-);
-
-describe('ViewRolePage - AuthZ', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('permission denied', () => {
-		it('shows permission denied page when read permission denied', async () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZDenyAll);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: undefined,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-			});
-
-			await expect(
-				screen.findByText(/You are not authorized/i),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	describe('update button visibility', () => {
-		it('enables Update button when update 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('save-button')).toBeInTheDocument();
-		});
-
-		it('disables Update button when update permission denied', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
-
-			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('save-button')).toBeDisabled();
-		});
-
-		it('disables Update button when role is managed', () => {
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: managedRoleResponse,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-				data: {
-					...mockPermissionsData,
-					roleId: MANAGED_ROLE_ID,
-					roleName: MANAGED_ROLE_NAME,
-				},
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-			render(
-				<TooltipProvider>
-					<ViewRolePage />
-				</TooltipProvider>,
-				undefined,
-				{
-					initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-				},
-			);
-
-			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);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: managedRoleResponse,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-				data: {
-					...mockPermissionsData,
-					roleId: MANAGED_ROLE_ID,
-					roleName: MANAGED_ROLE_NAME,
-				},
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-			render(
-				<TooltipProvider>
-					<ViewRolePage />
-				</TooltipProvider>,
-				undefined,
-				{
-					initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-				},
-			);
-
-			const updateButton = screen.getByTestId('save-button');
-			await user.hover(updateButton);
-
-			await waitFor(() => {
-				expect(screen.getByRole('tooltip')).toHaveTextContent(
-					'Managed roles cannot be updated',
-				);
-			});
-		});
-
-		it('shows authorization tooltip when update permission denied', async () => {
-			const user = userEvent.setup();
-
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
-
-			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 updateButton = screen.getByTestId('save-button');
-			await user.hover(updateButton);
-
-			await waitFor(() => {
-				expect(screen.getByRole('tooltip')).toHaveTextContent(
-					/You are not authorized to perform/,
-				);
-			});
-		});
-	});
-
-	describe('delete button visibility', () => {
-		it('disables Delete button when delete permission denied', () => {
-			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),
-				},
-			);
-
-			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',
-				);
-			});
-		});
-
-		it('shows managed role tooltip when role is managed', async () => {
-			const user = userEvent.setup();
-
-			jest
-				.spyOn(useAuthZModule, 'useAuthZ')
-				.mockImplementation(mockUseAuthZGrantAll);
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: managedRoleResponse,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-				data: {
-					...mockPermissionsData,
-					roleId: MANAGED_ROLE_ID,
-					roleName: MANAGED_ROLE_NAME,
-				},
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-			render(
-				<TooltipProvider>
-					<ViewRolePage />
-				</TooltipProvider>,
-				undefined,
-				{
-					initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-				},
-			);
-
-			const deleteButton = screen.getByTestId('delete-button');
-			await user.hover(deleteButton);
-
-			await waitFor(() => {
-				expect(screen.getByRole('tooltip')).toHaveTextContent(
-					'Managed roles cannot be deleted',
-				);
-			});
-		});
-	});
-
-	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(),
-			});
-
-			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-				data: undefined,
-				isLoading: false,
-				isError: false,
-				error: null,
-			} as ReturnType<typeof roleApi.useGetRole>);
-
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-			});
-
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,75 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	mockHooksForCustomRole,
-} from './testUtils';
-
-describe('ViewRolePage - Custom Role', () => {
-	beforeEach(() => {
-		mockHooksForCustomRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders role name in page title', async () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(
-			screen.findByText('Role - billing-manager'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('shows role description', async () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(
-			screen.findByText('Custom role for managing billing and invoices.'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('shows Update button for custom roles', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('save-button')).toBeInTheDocument();
-	});
-
-	it('shows Cancel button', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-	});
-
-	it('shows Delete button', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('delete-button')).toBeInTheDocument();
-	});
-
-	it('renders created/updated timestamps labels', async () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(screen.findByText('Created At')).resolves.toBeInTheDocument();
-		await expect(
-			screen.findByText('Last Modified At'),
-		).resolves.toBeInTheDocument();
-	});
-});

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

@@ -1,115 +0,0 @@
-import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import { render, screen } from 'tests/test-utils';
-
-import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	mockPermissionsData,
-} from './testUtils';
-
-describe('ViewRolePage - Edge Cases', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows fallback for missing description', async () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: {
-				status: 'success',
-				data: {
-					...customRoleResponse.data,
-					description: '',
-				},
-			},
-			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(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(screen.findByText('Description')).resolves.toBeInTheDocument();
-	});
-
-	it('shows fallback for invalid timestamps', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: {
-				status: 'success',
-				data: {
-					...customRoleResponse.data,
-					createdAt: 'invalid-date',
-					updatedAt: 'also-invalid',
-				},
-			},
-			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(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		const dashes = screen.getAllByText('—');
-		expect(dashes.length).toBeGreaterThanOrEqual(2);
-	});
-
-	it('shows fallback for undefined timestamps', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: {
-				status: 'success',
-				data: {
-					...customRoleResponse.data,
-					createdAt: undefined,
-					updatedAt: undefined,
-				},
-			},
-			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(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		const dashes = screen.getAllByText('—');
-		expect(dashes.length).toBeGreaterThanOrEqual(2);
-	});
-});

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

@@ -1,115 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import { render, screen } from 'tests/test-utils';
-
-import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	mockPermissionsData,
-} from './testUtils';
-
-describe('ViewRolePage - Error State', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('displays error component when API has error but role data exists', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: customRoleResponse,
-			isLoading: false,
-			isError: true,
-			error: new Error('Failed to fetch'),
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-			data: mockPermissionsData,
-			isLoading: false,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-	});
-
-	it('displays error state with title when API fails without role data', async () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-			error: new Error('Failed to fetch role'),
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(
-			screen.findByText('Failed to load role'),
-		).resolves.toBeInTheDocument();
-		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-	});
-
-	it('shows back button on error state', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-			error: new Error('Failed to fetch role'),
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-	});
-
-	it('navigates to roles list when back button clicked on error state', async () => {
-		const user = userEvent.setup();
-
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-			error: new Error('Failed to fetch role'),
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		render(
-			<Switch>
-				<Route path="/settings/roles/:roleId">
-					<ViewRolePage />
-				</Route>
-				<Route path="/settings/roles">
-					<div data-testid="roles-list-target" />
-				</Route>
-			</Switch>,
-			undefined,
-			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
-		);
-
-		const cancelButton = screen.getByTestId('cancel-button');
-		await user.click(cancelButton);
-
-		await expect(
-			screen.findByTestId('roles-list-target'),
-		).resolves.toBeInTheDocument();
-	});
-});

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

@@ -1,82 +0,0 @@
-import * as roleApi from 'api/generated/services/role';
-import { FeatureKeys } from 'constants/features';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-} from './testUtils';
-
-describe('ViewRolePage - Feature Gate', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof roleApi.useGetRole>);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('feature disabled', () => {
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				appContextOverrides: {
-					featureFlags: defaultFeatureFlags.map((f) =>
-						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-							? { ...f, active: false }
-							: f,
-					),
-				},
-			});
-
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows error when license is invalid', async () => {
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				appContextOverrides: { activeLicense: invalidLicense },
-			});
-
-			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows back button when feature disabled', () => {
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				appContextOverrides: { activeLicense: invalidLicense },
-			});
-
-			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-		});
-
-		it('back button is enabled when feature disabled', () => {
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				appContextOverrides: { activeLicense: invalidLicense },
-			});
-
-			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
-		});
-	});
-});

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

@@ -1,52 +0,0 @@
-import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import { render } from 'tests/test-utils';
-
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-} from './testUtils';
-
-describe('ViewRolePage - Loading State', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows skeleton while fetching role', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: undefined,
-			isLoading: true,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-	});
-
-	it('does not fetch when roleId is missing from URL', () => {
-		const getRole = jest.spyOn(roleApi, 'useGetRole');
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: '/settings/roles',
-		});
-
-		expect(getRole).toHaveBeenCalledWith(
-			{ id: '' },
-			expect.objectContaining({ query: { enabled: false } }),
-		);
-	});
-});

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

@@ -1,63 +0,0 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen } from 'tests/test-utils';
-
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	MANAGED_ROLE_ID,
-	MANAGED_ROLE_NAME,
-	mockHooksForManagedRole,
-} from './testUtils';
-
-describe('ViewRolePage - Managed Role', () => {
-	beforeEach(() => {
-		mockHooksForManagedRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('disables Delete button for managed roles', () => {
-		render(
-			<TooltipProvider>
-				<ViewRolePage />
-			</TooltipProvider>,
-			undefined,
-			{
-				initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-			},
-		);
-
-		expect(screen.getByTestId('delete-button')).toBeDisabled();
-	});
-
-	it('disables Update button for managed roles', () => {
-		render(
-			<TooltipProvider>
-				<ViewRolePage />
-			</TooltipProvider>,
-			undefined,
-			{
-				initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-			},
-		);
-
-		expect(screen.getByTestId('save-button')).toBeDisabled();
-	});
-
-	it('still shows Cancel button for managed roles', () => {
-		render(
-			<TooltipProvider>
-				<ViewRolePage />
-			</TooltipProvider>,
-			undefined,
-			{
-				initialRoute: buildViewRoleRoute(MANAGED_ROLE_ID, MANAGED_ROLE_NAME),
-			},
-		);
-
-		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-	});
-});

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

@@ -1,679 +0,0 @@
-import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import userEvent from '@testing-library/user-event';
-import { render, screen, within } from 'tests/test-utils';
-
-import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
-import ViewRolePage from '../ViewRolePage';
-
-import {
-	buildViewRoleRoute,
-	CUSTOM_ROLE_ID,
-	CUSTOM_ROLE_NAME,
-	mockHooksForCustomRole,
-	mockHooksWithPermissions,
-	mockPermissionsData,
-} from './testUtils';
-
-async function expandAllCards(): Promise<void> {
-	const user = userEvent.setup();
-	const expandButton = screen.getByTestId('expand-all-button');
-	await user.click(expandButton);
-}
-
-describe('ViewRolePage - Permission Overview', () => {
-	beforeEach(() => {
-		mockHooksForCustomRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders Transaction Groups section label', async () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expect(
-			screen.findByText('Transaction Groups'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('renders permission overview container', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();
-	});
-
-	it('shows resource permission cards', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(
-			screen.getByTestId('resource-section-factor-api-key'),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('resource-section-role')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('resource-section-serviceaccount'),
-		).toBeInTheDocument();
-	});
-
-	it('displays granted count for each resource', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(
-			screen.getByTestId('granted-count-factor-api-key'),
-		).toBeInTheDocument();
-	});
-});
-
-describe('ViewRolePage - Permission Overview Loading State', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows skeleton when permissions are loading', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: customRoleResponse,
-			isLoading: false,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-			data: undefined,
-			isLoading: true,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('permission-overview-loading')).toBeInTheDocument();
-	});
-});
-
-describe('ViewRolePage - Permission Overview Error State', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows error when permissions fail to load', () => {
-		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
-			data: customRoleResponse,
-			isLoading: false,
-			isError: false,
-			error: null,
-		} as ReturnType<typeof roleApi.useGetRole>);
-
-		jest.spyOn(useRolePermissionsModule, 'useRolePermissions').mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-			error: new Error('Failed'),
-		} as ReturnType<typeof useRolePermissionsModule.useRolePermissions>);
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('permission-overview-error')).toBeInTheDocument();
-	});
-});
-
-describe('ViewRolePage - Scope: ALL permissions', () => {
-	beforeEach(() => {
-		jest
-			.spyOn(useAuthZModule, 'useAuthZ')
-			.mockImplementation(mockUseAuthZGrantAll);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows "All" badge for actions with ALL scope', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'factor-api-key',
-					resourceKind: 'factor-api-key',
-					resourceType: 'metaresource',
-					resourceLabel: 'API Keys',
-					actions: {
-						read: { scope: 'all', selectedIds: [] },
-						create: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['read', 'create'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		expect(screen.getByTestId('scope-badge-read')).toHaveTextContent('All');
-		expect(screen.getByTestId('scope-badge-create')).toHaveTextContent('All');
-	});
-
-	it('shows full granted count when all actions are ALL', () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'role',
-					resourceKind: 'role',
-					resourceType: 'role',
-					resourceLabel: 'Roles',
-					actions: {
-						read: { scope: 'all', selectedIds: [] },
-						create: { scope: 'all', selectedIds: [] },
-						update: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['read', 'create', 'update'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('granted-count-role')).toHaveTextContent(
-			'3 / 3 granted',
-		);
-	});
-});
-
-describe('ViewRolePage - Scope: NONE permissions', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows "None" badge for actions with NONE scope', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'serviceaccount',
-					resourceKind: 'serviceaccount',
-					resourceType: 'serviceaccount',
-					resourceLabel: 'Service Accounts',
-					actions: {
-						read: { scope: 'none', selectedIds: [] },
-						delete: { scope: 'none', selectedIds: [] },
-					},
-					availableActions: ['read', 'delete'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		expect(screen.getByTestId('scope-badge-read')).toHaveTextContent('None');
-		expect(screen.getByTestId('scope-badge-delete')).toHaveTextContent('None');
-	});
-
-	it('shows zero granted count when all actions are NONE', () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'factor-api-key',
-					resourceKind: 'factor-api-key',
-					resourceType: 'metaresource',
-					resourceLabel: 'API Keys',
-					actions: {
-						read: { scope: 'none', selectedIds: [] },
-						create: { scope: 'none', selectedIds: [] },
-						update: { scope: 'none', selectedIds: [] },
-						delete: { scope: 'none', selectedIds: [] },
-					},
-					availableActions: ['read', 'create', 'update', 'delete'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
-			'0 / 4 granted',
-		);
-	});
-});
-
-describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('shows "Only selected" badge with count', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'role',
-					resourceKind: 'role',
-					resourceType: 'role',
-					resourceLabel: 'Roles',
-					actions: {
-						read: {
-							scope: 'only_selected',
-							selectedIds: ['admin', 'editor', 'viewer'],
-						},
-					},
-					availableActions: ['read'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		expect(screen.getByTestId('scope-badge-read')).toHaveTextContent(
-			'Only selected · 3',
-		);
-	});
-
-	it('displays selected IDs as expandable chips', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'factor-api-key',
-					resourceKind: 'factor-api-key',
-					resourceType: 'metaresource',
-					resourceLabel: 'API Keys',
-					actions: {
-						read: {
-							scope: 'only_selected',
-							selectedIds: ['key-abc-123', 'key-def-456'],
-						},
-					},
-					availableActions: ['read'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		await expect(screen.findByText('key-abc-123')).resolves.toBeInTheDocument();
-		await expect(screen.findByText('key-def-456')).resolves.toBeInTheDocument();
-	});
-
-	it('counts ONLY_SELECTED as granted in count', () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'serviceaccount',
-					resourceKind: 'serviceaccount',
-					resourceType: 'serviceaccount',
-					resourceLabel: 'Service Accounts',
-					actions: {
-						read: { scope: 'only_selected', selectedIds: ['sa-1'] },
-						create: { scope: 'none', selectedIds: [] },
-					},
-					availableActions: ['read', 'create'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('granted-count-serviceaccount')).toHaveTextContent(
-			'1 / 2 granted',
-		);
-	});
-
-	it('can collapse and expand selected items list', async () => {
-		const user = userEvent.setup();
-
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'role',
-					resourceKind: 'role',
-					resourceType: 'role',
-					resourceLabel: 'Roles',
-					actions: {
-						update: {
-							scope: 'only_selected',
-							selectedIds: ['editor-role'],
-						},
-					},
-					availableActions: ['update'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		await expect(screen.findByText('editor-role')).resolves.toBeInTheDocument();
-
-		const toggle = screen.getByTestId('toggle-items-update');
-		await user.click(toggle);
-
-		expect(screen.queryByText('editor-role')).not.toBeInTheDocument();
-
-		await user.click(toggle);
-		await expect(screen.findByText('editor-role')).resolves.toBeInTheDocument();
-	});
-});
-
-describe('ViewRolePage - Mixed permission scopes', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders all three scope types in single resource card', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'factor-api-key',
-					resourceKind: 'factor-api-key',
-					resourceType: 'metaresource',
-					resourceLabel: 'API Keys',
-					actions: {
-						read: { scope: 'all', selectedIds: [] },
-						create: { scope: 'none', selectedIds: [] },
-						update: { scope: 'only_selected', selectedIds: ['key-1', 'key-2'] },
-						delete: { scope: 'none', selectedIds: [] },
-					},
-					availableActions: ['read', 'create', 'update', 'delete'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		const section = screen.getByTestId('resource-section-factor-api-key');
-
-		expect(within(section).getByTestId('scope-badge-read')).toHaveTextContent(
-			'All',
-		);
-		expect(within(section).getByTestId('scope-badge-create')).toHaveTextContent(
-			'None',
-		);
-		expect(within(section).getByTestId('scope-badge-update')).toHaveTextContent(
-			'Only selected · 2',
-		);
-		expect(within(section).getByTestId('scope-badge-delete')).toHaveTextContent(
-			'None',
-		);
-
-		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
-			'2 / 4 granted',
-		);
-	});
-
-	it('renders multiple resources with different scope combinations', () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'factor-api-key',
-					resourceKind: 'factor-api-key',
-					resourceType: 'metaresource',
-					resourceLabel: 'API Keys',
-					actions: {
-						read: { scope: 'all', selectedIds: [] },
-						create: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['read', 'create'],
-				},
-				{
-					resourceId: 'role',
-					resourceKind: 'role',
-					resourceType: 'role',
-					resourceLabel: 'Roles',
-					actions: {
-						read: { scope: 'none', selectedIds: [] },
-						create: { scope: 'none', selectedIds: [] },
-					},
-					availableActions: ['read', 'create'],
-				},
-				{
-					resourceId: 'serviceaccount',
-					resourceKind: 'serviceaccount',
-					resourceType: 'serviceaccount',
-					resourceLabel: 'Service Accounts',
-					actions: {
-						read: { scope: 'only_selected', selectedIds: ['sa-1'] },
-						create: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['read', 'create'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
-			'2 / 2 granted',
-		);
-		expect(screen.getByTestId('granted-count-role')).toHaveTextContent(
-			'0 / 2 granted',
-		);
-		expect(screen.getByTestId('granted-count-serviceaccount')).toHaveTextContent(
-			'2 / 2 granted',
-		);
-	});
-});
-
-describe('ViewRolePage - Unknown resources', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders unknown resource with fallback label', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'future-resource',
-					resourceKind: 'future-resource',
-					resourceType: 'metaresource',
-					resourceLabel: 'future-resource',
-					actions: {
-						read: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['read'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(
-			screen.getByTestId('resource-section-future-resource'),
-		).toBeInTheDocument();
-		await expect(
-			screen.findByText('future-resource'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('shows raw verb name when no label mapping exists', async () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'test-resource',
-					resourceKind: 'test-resource',
-					resourceType: 'metaresource',
-					resourceLabel: 'Test Resource',
-					actions: {
-						unknown_action: { scope: 'all', selectedIds: [] },
-					},
-					availableActions: ['unknown_action'],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		await expandAllCards();
-
-		await expect(
-			screen.findByText('Unknown_action'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('handles resource with empty actions', () => {
-		mockHooksWithPermissions({
-			...mockPermissionsData,
-			resources: [
-				{
-					resourceId: 'empty-resource',
-					resourceKind: 'empty-resource',
-					resourceType: 'metaresource',
-					resourceLabel: 'Empty Resource',
-					actions: {},
-					availableActions: [],
-				},
-			],
-		});
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(
-			screen.getByTestId('resource-section-empty-resource'),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('granted-count-empty-resource')).toHaveTextContent(
-			'0 / 0 granted',
-		);
-	});
-});
-
-describe('ViewRolePage - View mode toggle', () => {
-	beforeEach(() => {
-		mockHooksForCustomRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders Interactive/JSON toggle', () => {
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('permission-view-mode-list')).toBeInTheDocument();
-		expect(screen.getByTestId('permission-view-mode-json')).toBeInTheDocument();
-	});
-
-	it('switches to JSON view when JSON toggle clicked', async () => {
-		const user = userEvent.setup();
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();
-
-		const jsonToggle = screen.getByTestId('permission-view-mode-json');
-		await user.click(jsonToggle);
-
-		expect(screen.queryByTestId('permission-overview')).not.toBeInTheDocument();
-	});
-});
-
-describe('ViewRolePage - JSON Viewer Copy Button', () => {
-	beforeEach(() => {
-		mockHooksForCustomRole();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('renders copy button in JSON view', async () => {
-		const user = userEvent.setup();
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		const jsonToggle = screen.getByTestId('permission-view-mode-json');
-		await user.click(jsonToggle);
-
-		expect(
-			screen.getByTestId('read-only-json-viewer-copy-button'),
-		).toBeInTheDocument();
-	});
-
-	it('copy button is clickable', async () => {
-		const user = userEvent.setup();
-
-		render(<ViewRolePage />, undefined, {
-			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-		});
-
-		const jsonToggle = screen.getByTestId('permission-view-mode-json');
-		await user.click(jsonToggle);
-
-		const copyButton = screen.getByTestId('read-only-json-viewer-copy-button');
-		expect(copyButton).not.toBeDisabled();
-		await user.click(copyButton);
-	});
-});