chore: reorder

docs/contributing/go/abstractions.md

@@ -0,0 +1,127 @@
+# Abstractions
+
+This document provides rules for deciding when a new type, interface, or intermediate representation is warranted in Go code. The goal is to keep the codebase navigable by ensuring every abstraction earns its place.
+
+## The cost of a new abstraction
+
+Every exported type, interface, or wrapper is a permanent commitment. It must be named, documented, tested, and understood by every future contributor. It creates a new concept in the codebase vocabulary. Before introducing one, verify that the cost is justified by a concrete benefit that cannot be achieved with existing mechanisms.
+
+## Before you introduce anything new
+
+Answer these four questions. If writing a PR, include the answers in the description.
+
+1. **What already exists?** Name the specific type, function, interface, or library that covers this ground today.
+2. **What does the new abstraction add?** Name the concrete operation, guarantee, or capability. "Cleaner" or "more reusable" are not sufficient; name what the caller can do that it could not do before.
+3. **What does the new abstraction drop?** If it wraps or mirrors an existing structure, list what it cannot represent. Every gap must be either justified or handled with an explicit error.
+4. **Who consumes it?** List the call sites. If there is only one producer and one consumer in the same call chain, you likely need a function, not a type.
+
+## Rules
+
+### 1. Prefer functions over types
+
+If a piece of logic has one input and one output, write a function. Do not create a struct to hold intermediate state that is built in one place and read in one place. A function is easier to test, easier to inline, and does not expand the vocabulary of the codebase.
+
+```go
+// Prefer this:
+func ConvertConfig(src ExternalConfig) (InternalConfig, error)
+
+// Over this:
+type ConfigAdapter struct { ... }
+func NewConfigAdapter(src ExternalConfig) *ConfigAdapter
+func (a *ConfigAdapter) ToInternal() (InternalConfig, error)
+```
+
+The two-step version is only justified when `ConfigAdapter` has multiple distinct consumers that use it in different ways.
+
+### 2. Do not duplicate structures you do not own
+
+When a library or external package produces a structured output, operate on that output directly. Do not create a parallel type that mirrors a subset of its fields.
+
+A partial copy will:
+- **Silently lose data** when the source has fields or variants the copy does not account for.
+- **Drift** when the source evolves and the copy is not updated in lockstep.
+- **Add a conversion step** that doubles the code surface and the opportunity for bugs.
+
+If you need to shield consumers from a dependency, define a narrow interface over the dependency's type rather than copying its shape into a new struct.
+
+### 3. Never silently discard input
+
+If your code receives structured input and cannot handle part of it, return an error. Do not silently return nil, skip the element, or produce a partial result. Silent data loss is the hardest class of bug to detect because the code appears to work, it just produces wrong results.
+
+```go
+// Wrong: silently ignores the unrecognized case.
+default:
+    return nil
+
+// Right: makes the gap visible.
+default:
+    return nil, fmt.Errorf("unsupported %T value: %v", v, v)
+```
+
+This applies broadly: type switches, format conversions, data migrations, enum mappings, configuration parsing. Anywhere a `default` or `else` branch can swallow input, it should surface an error instead.
+
+### 4. Do not expose methods that lose information
+
+A method on a structured type should not strip meaning from the structure it belongs to. If a caller needs to iterate over elements for a specific purpose (validation, aggregation, logging), write that logic as a standalone function that operates on the structure with full context, rather than adding a method that returns a reduced view.
+
+```go
+// Problematic: callers cannot distinguish how items were related.
+func (o *Order) AllLineItems() []LineItem { ... }
+
+// Better: the validation logic operates on the full structure.
+func ValidateOrder(o *Order) error { ... }
+```
+
+Public methods shape how a type is used. Once a lossy accessor exists, callers will depend on it, and the lost information becomes unrecoverable at those call sites.
+
+### 5. Interfaces should be discovered, not predicted
+
+Do not define an interface before you have at least two concrete implementations that need it. An interface with one implementation is not abstraction; it is indirection that makes it harder to navigate from call site to implementation.
+
+The exception is interfaces required for testing (e.g., for mocking an external dependency). In that case, define the interface in the **consuming** package, not the providing package, following the Go convention of [accepting interfaces and returning structs](https://go.dev/wiki/CodeReviewComments#interfaces).
+
+### 6. Wrappers must add semantics, not just rename
+
+A wrapper type is justified when it adds meaning, validation, or invariants that the underlying type does not carry. It is not justified when it merely renames fields or reorganizes the same data into a different shape.
+
+```go
+// Justified: adds validation that the underlying string does not carry.
+type OrgID struct{ value string }
+func NewOrgID(s string) (OrgID, error) { /* validates format */ }
+
+// Not justified: renames fields with no new invariant or behavior.
+type UserInfo struct {
+    Name  string // same as source.Name
+    Email string // same as source.Email
+}
+```
+
+Ask: what does the wrapper guarantee that the underlying type does not? If the answer is nothing, use the underlying type directly.
+
+## When a new type IS warranted
+
+A new type earns its place when it meets **at least one** of these criteria:
+
+- **Serialization boundary**: It must be persisted, sent over the wire, or written to config. The source type is unsuitable (unexported fields, function pointers, cycles).
+- **Invariant enforcement**: The constructor or methods enforce constraints that raw data does not carry (e.g., non-empty, validated format, bounded range).
+- **Multiple distinct consumers**: Three or more call sites use the type in meaningfully different ways. The type is the shared vocabulary between them.
+- **Dependency firewall**: The type lives in a lightweight package so that consumers avoid importing a heavy dependency.
+
+## What should I remember?
+
+- A function is almost always simpler than a type. Start with a function; promote to a type only when you have evidence of need.
+- Never silently drop data. If you cannot handle it, error.
+- If your new type mirrors an existing one, you need a strong reason beyond "nicer to work with".
+- If your type has one producer and one consumer, it is indirection, not abstraction.
+- Interfaces come from need (multiple implementations), not from prediction.
+- When in doubt, do not add it. It is easier to add an abstraction later when the need is clear than to remove one after it has spread through the codebase.
+
+## Further reading
+
+These works and our own lessions shaped the above guidelines
+
+- [The Wrong Abstraction](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction) - Sandi Metz. The wrong abstraction is worse than duplication. If you find yourself passing parameters and adding conditional paths through shared code, inline it back into every caller and let the duplication show you what the right abstraction is.
+- [Write code that is easy to delete, not easy to extend](https://programmingisterrible.com/post/139222674273/write-code-that-is-easy-to-delete-not-easy-to) - tef. Every abstraction is a bet on the future. Optimize for how cheaply you can remove code when the bet is wrong, not for how easily you can extend it when the bet is right.
+- [Goodbye, Clean Code](https://overreacted.io/goodbye-clean-code/) - Dan Abramov. A refactoring that removes duplication can look cleaner while making the code harder to change. Clean-looking and easy-to-change are not the same thing.
+- [A Philosophy of Software Design](https://www.amazon.com/Philosophy-Software-Design-John-Ousterhout/dp/1732102201) - John Ousterhout. Good abstractions are deep: simple interface, complex implementation. A "false abstraction" omits important details while appearing simple, and is worse than no abstraction at all. ([Summary by Pragmatic Engineer](https://blog.pragmaticengineer.com/a-philosophy-of-software-design-review/))
+- [Simplicity is Complicated](https://go.dev/talks/2015/simplicity-is-complicated.slide) - Rob Pike. Go-specific. Fewer orthogonal concepts that compose predictably beat many overlapping ones. Features were left out of Go deliberately; the same discipline applies to your own code.

docs/contributing/go/packages.md

@@ -0,0 +1,126 @@
+# Packages
+
+All shared Go code in SigNoz lives under `pkg/`. Each package represents a distinct domain concept and exposes a clear public interface. This guide covers the conventions for creating, naming, and organising packages so the codebase stays consistent as it grows.
+
+## How should I name a package?
+
+Use short, lowercase, single-word names. No underscores or camelCase (`querier`, `cache`, `authz`, not `query_builder` or `dataStore`).
+
+Names must be **domain-specific**. A package name should tell you what problem domain it deals with, not what data structure it wraps. Prefer `alertmanager` over `manager`, `licensing` over `checker`.
+
+Avoid generic names like `util`, `helpers`, `common`, `misc`, or `base`. If you can't name it, the code probably belongs in an existing package.
+
+## When should I create a new package?
+
+Create a new package when:
+
+- The functionality represents a **distinct domain concept** (e.g., `authz`, `licensing`, `cache`).
+- Two or more other packages would import it; it serves as shared infrastructure.
+- The code has a clear public interface that can stand on its own.
+
+Do **not** create a new package when:
+
+- There is already a package that covers the same domain. Extend the existing package instead.
+- The code is only used in one place. Keep it local to the caller.
+- You are splitting purely for file size. Use multiple files within the same package instead.
+
+## How should I lay out a package?
+
+A typical package looks like:
+
+```
+pkg/cache/
+├── cache.go            # Public interface + exported types
+├── config.go           # Configuration types if needed
+├── memorycache/        # Implementation sub-package
+├── rediscache/         # Another implementation
+└── cachetest/          # Test helpers for consumers
+```
+
+Follow these rules:
+
+1. **Interface-first file**: The file matching the package name (e.g., `cache.go` in `pkg/cache/`) should define the public interface and core exported types. Keep implementation details out of this file.
+
+2. **One responsibility per file**: Name files after what they contain (`config.go`, `handler.go`, `service.go`), not after the package name. If a package merges two concerns, prefix files to group them (e.g., `memory_store.go`, `redis_store.go` in a storage package).
+
+3. **Sub-packages for implementations**: When a package defines an interface with multiple implementations, put each implementation in its own sub-package (`memorycache/`, `rediscache/`). This keeps the parent package import-free of implementation dependencies.
+
+4. **Test helpers in `{pkg}test/`**: If consumers need test mocks or builders, put them in a `{pkg}test/` sub-package (e.g., `cachetest/`, `sqlstoretest/`). This avoids polluting the main package with test-only code.
+
+5. **Test files stay alongside source**: Unit tests go in `_test.go` files next to the code they test, in the same package.
+
+## How should I name symbols?
+
+### Exported symbols
+
+- **Interfaces**: For single-method interfaces, follow the standard `-er` suffix convention (`Reader`, `Writer`, `Closer`). For multi-method interfaces, use clear nouns (`Cache`, `Store`, `Provider`).
+- **Constructors**: `New<Type>(...)` (e.g., `NewMemoryCache()`).
+- **Avoid stutter**: Since callers qualify with the package name, don't repeat it. Write `cache.Cache`, not `cache.CacheInterface`. Write `authz.FromRole`, not `authz.AuthzFromRole`.
+
+### Unexported symbols
+
+- Struct receivers: one or two characters (`c`, `f`, `br`).
+- Helper functions: descriptive lowercase names (`parseToken`, `buildQuery`).
+
+### Constants
+
+- Use `PascalCase` for exported constants.
+- When merging files from different origins into one package, watch out for **name collisions** across files. Prefix to disambiguate when two types share a natural name.
+
+## How should I organise imports?
+
+Group imports in three blocks separated by blank lines:
+
+```go
+import (
+    // 1. Standard library
+    "fmt"
+    "net/http"
+
+    // 2. External dependencies
+    "github.com/gorilla/mux"
+
+    // 3. Internal
+    "github.com/SigNoz/signoz/pkg/errors"
+    "github.com/SigNoz/signoz/pkg/types"
+)
+```
+
+Never introduce circular imports. If package A needs package B and B needs A, extract the shared types into a third package (often under `pkg/types/`).
+
+## Where do shared types go?
+
+Most types belong in `pkg/types/` under a domain-specific sub-package (e.g., `pkg/types/ruletypes`, `pkg/types/authtypes`).
+
+Do not put domain logic in `pkg/types/`. Only data structures, constants, and simple methods.
+
+## How do I merge or move packages?
+
+When two packages are tightly coupled (one imports the other's constants, they cover the same domain), merge them:
+
+1. Pick a domain-specific name for the combined package.
+2. Prefix files to preserve origin (e.g., `memory_store.go`, `redis_store.go`).
+3. Resolve symbol conflicts explicitly; rename with a prefix rather than silently shadowing.
+4. Update all consumers in a single change.
+5. Delete the old packages. Do not leave behind re-export shims.
+6. Verify with `go build ./...`, `go test ./<new-pkg>/...`, and `go vet ./...`.
+
+## When should I add documentation?
+
+Add a `doc.go` with a package-level comment for any package that is non-trivial or has multiple consumers. Keep it to 1–3 sentences:
+
+```go
+// Package cache provides a caching interface with pluggable backends
+// for in-memory and Redis-based storage.
+package cache
+```
+
+## What should I remember?
+
+- Package names are domain-specific and lowercase. Never generic names like `util` or `common`.
+- The file matching the package name (e.g., `cache.go`) defines the public interface. Implementation details go elsewhere.
+- Never introduce circular imports. Extract shared types into `pkg/types/` when needed.
+- Watch for symbol name collisions when merging packages, prefix to disambiguate.
+- Put test helpers in a `{pkg}test/` sub-package, not in the main package.
+- Before submitting, verify with `go build ./...`, `go test ./<your-pkg>/...`, and `go vet ./...`.
+- Update all consumers when you rename or move symbols.

docs/contributing/go/readme.md

@@ -8,4 +8,14 @@ We adhere to three primary style guides as our foundation:
 - [Code Review Comments](https://go.dev/wiki/CodeReviewComments) - For understanding common comments in code reviews
 - [Google Style Guide](https://google.github.io/styleguide/go/) - Additional practices from Google
 
-We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package.
+We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package:
+
+- [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
+- [Errors](errors.md) - Structured error handling
+- [Endpoint](endpoint.md) - HTTP endpoint patterns
+- [Flagger](flagger.md) - Feature flag patterns
+- [Handler](handler.md) - HTTP handler patterns
+- [Integration](integration.md) - Integration testing
+- [Provider](provider.md) - Dependency injection and provider patterns
+- [Packages](packages.md) — Naming, layout, and conventions for `pkg/` packages
+- [SQL](sql.md) - Database and SQL patterns

frontend/package.json

@@ -60,7 +60,6 @@
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
-		"@signozhq/toggle-group": "^0.0.1",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",

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

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details"
+	"roles": "Roles"
 }

frontend/public/locales/en/routes.json

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details"
+	"roles": "Roles"
 }

frontend/src/auto-import-registry.d.ts

@@ -26,5 +26,4 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/tooltip';

frontend/src/constants/routes.ts

@@ -56,7 +56,6 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
 	ROLES_SETTINGS: '/settings/roles',
-	ROLE_DETAILS: '/settings/roles/:roleId',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

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

@@ -1,315 +0,0 @@
-.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(--l2-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(--l2-border);
-	}
-
-	&__close {
-		width: 16px;
-		height: 16px;
-		padding: 0;
-		color: var(--foreground);
-		flex-shrink: 0;
-
-		&:hover {
-			color: var(--text-base-white);
-		}
-	}
-
-	&__header-divider {
-		display: block;
-		width: 1px;
-		height: 16px;
-		background: var(--l2-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(--l2-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(--l2-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 rgba(78, 116, 248, 0.4);
-		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(--l2-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: rgba(171, 189, 255, 0.04);
-		}
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.03);
-		}
-	}
-
-	&__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(--text-base-white);
-		text-transform: capitalize;
-	}
-
-	&__body {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		padding: 8px 0 8px 44px;
-		background: rgba(171, 189, 255, 0.04);
-	}
-
-	&__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(--text-base-white);
-			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(--text-base-white) !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(--text-base-white) !important;
-			}
-
-			&-option-active {
-				background: var(--l2-background-hover) !important;
-			}
-		}
-
-		.ant-select-dropdown {
-			background: var(--l2-background);
-			border: 1px solid var(--border);
-			border-radius: 2px;
-			padding: 4px 0;
-		}
-	}
-}
-
-.lightMode {
-	.permission-side-panel {
-		&__close {
-			&:hover {
-				color: var(--text-base-black);
-			}
-		}
-	}
-
-	.psp-resource {
-		&__label {
-			color: var(--text-base-black);
-		}
-
-		&__radio-item label {
-			color: var(--text-base-black);
-		}
-
-		&__select .ant-select-selection-item {
-			color: var(--text-base-black) !important;
-		}
-	}
-
-	.psp-resource__select-popup {
-		.ant-select-item {
-			&-option-selected {
-				color: var(--text-base-black) !important;
-			}
-		}
-	}
-}

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

@@ -1,294 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { ChevronDown, ChevronRight, X } from '@signozhq/icons';
-import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupLabel,
-} from '@signozhq/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';
-
-interface ResourceRowProps {
-	resource: ResourceDefinition;
-	config: ResourceConfig;
-	isExpanded: boolean;
-	onToggleExpand: (id: string) => void;
-	onScopeChange: (id: string, scope: ScopeType) => void;
-	onSelectedIdsChange: (id: string, ids: string[]) => void;
-}
-
-function ResourceRow({
-	resource,
-	config,
-	isExpanded,
-	onToggleExpand,
-	onScopeChange,
-	onSelectedIdsChange,
-}: ResourceRowProps): JSX.Element {
-	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}
-						onValueChange={(val): void =>
-							onScopeChange(resource.id, val as ScopeType)
-						}
-						className="psp-resource__radio-group"
-					>
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem
-								value={PermissionScope.ALL}
-								id={`${resource.id}-all`}
-								color="robin"
-							/>
-							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
-						</div>
-
-						<div className="psp-resource__radio-item">
-							<RadioGroupItem
-								value={PermissionScope.ONLY_SELECTED}
-								id={`${resource.id}-only-selected`}
-								color="robin"
-							/>
-							<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
-								Only selected
-							</RadioGroupLabel>
-						</div>
-					</RadioGroup>
-
-					{config.scope === PermissionScope.ONLY_SELECTED && (
-						<div className="psp-resource__select-wrapper">
-							{/* TODO: right now made to only accept user input, we need to give it proper resource based value fetching from APIs */}
-							<Select
-								mode="tags"
-								value={config.selectedIds}
-								onChange={(vals: string[]): void =>
-									onSelectedIdsChange(resource.id, vals)
-								}
-								options={resource.options ?? []}
-								placeholder="Select resources..."
-								className="psp-resource__select"
-								popupClassName="psp-resource__select-popup"
-								showSearch
-								filterOption={(input, option): boolean =>
-									String(option?.label ?? '')
-										.toLowerCase()
-										.includes(input.toLowerCase())
-								}
-							/>
-						</div>
-					)}
-				</div>
-			)}
-		</div>
-	);
-}
-
-function PermissionSidePanel({
-	open,
-	onClose,
-	permissionLabel,
-	resources,
-	initialConfig,
-	isLoading = false,
-	isSaving = false,
-	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="ghost"
-						size="icon"
-						className="permission-side-panel__close"
-						onClick={onClose}
-						aria-label="Close panel"
-					>
-						<X size={16} />
-					</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)}
-									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"
-							prefixIcon={<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}
-						>
-							Save Changes
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default PermissionSidePanel;

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

@@ -1,35 +0,0 @@
-export interface ResourceOption {
-	value: string;
-	label: string;
-}
-
-export interface ResourceDefinition {
-	id: string;
-	label: string;
-	options?: ResourceOption[];
-}
-
-export enum PermissionScope {
-	ALL = 'all',
-	ONLY_SELECTED = 'only_selected',
-}
-
-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;
-	resources: ResourceDefinition[];
-	initialConfig?: PermissionConfig;
-	isLoading?: boolean;
-	isSaving?: boolean;
-	onSave: (config: PermissionConfig) => void;
-}

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

@@ -1,10 +0,0 @@
-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

@@ -1,417 +0,0 @@
-.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: column;
-		gap: 0;
-	}
-
-	.role-details-title {
-		color: var(--text-base-white);
-		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-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.role-details-tab {
-		gap: 4px;
-		padding: 0 16px;
-		height: 32px;
-		border-radius: 0;
-		font-size: 12px;
-		overflow: hidden;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-
-		&[data-state='on'] {
-			border-radius: 2px 0 0 2px;
-		}
-	}
-
-	.role-details-tab-count {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		padding: 0 6px;
-		border-radius: 50px;
-		background: var(--secondary);
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 20px;
-		color: var(--foreground);
-		letter-spacing: -0.06px;
-		text-transform: uppercase;
-	}
-
-	.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(--border);
-		border-bottom: 2px dotted var(--border);
-		height: 7px;
-		margin: 0;
-	}
-
-	.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: rgba(171, 189, 255, 0.08);
-		border: 1px solid var(--secondary);
-		border-radius: 4px;
-		cursor: pointer;
-		transition: background 0.15s ease;
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.12);
-		}
-	}
-
-	.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(--text-base-white);
-	}
-
-	.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(--text-base-white);
-			}
-
-			&--muted {
-				font-weight: 400;
-				color: var(--foreground);
-			}
-		}
-	}
-
-	.role-details-skeleton {
-		padding: 16px 0;
-	}
-}
-
-.role-details-delete-action-btn {
-	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: rgba(229, 72, 77, 0.1);
-		opacity: 0.9;
-	}
-}
-
-.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(--text-base-white);
-		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(--text-base-white);
-		}
-	}
-}
-
-.lightMode {
-	.role-details-delete-modal {
-		.ant-modal-content {
-			.ant-modal-header {
-				.title {
-					color: var(--text-base-black);
-				}
-			}
-
-			.ant-modal-body {
-				.delete-text {
-					strong {
-						color: var(--text-base-black);
-					}
-				}
-			}
-		}
-	}
-
-	.role-details-page {
-		.role-details-title {
-			color: var(--text-base-black);
-		}
-
-		.role-details-members-empty-state {
-			.role-details-members-empty-text--bold {
-				color: var(--text-base-black);
-			}
-		}
-
-		.role-details-permission-item {
-			background: rgba(0, 0, 0, 0.04);
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.07);
-			}
-		}
-
-		.role-details-permission-item-label {
-			color: var(--text-base-black);
-		}
-	}
-}

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

@@ -1,276 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { Table2, Trash2, Users } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Skeleton } from 'antd';
-import { useAuthzResources } from 'api/generated/services/authz';
-import {
-	getGetObjectsQueryKey,
-	useDeleteRole,
-	useGetObjects,
-	useGetRole,
-	usePatchObjects,
-} from 'api/generated/services/role';
-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 { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from '../config';
-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 MembersTab from './components/MembersTab';
-import OverviewTab from './components/OverviewTab';
-import { ROLE_ID_REGEX } from './constants';
-
-import './RoleDetailsPage.styles.scss';
-
-type TabKey = 'overview' | 'members';
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function RoleDetailsPage(): JSX.Element {
-	const { pathname } = useLocation();
-	const history = useHistory();
-
-	useEffect(() => {
-		if (!IS_ROLE_DETAILS_AND_CRUD_ENABLED) {
-			history.push(ROUTES.ROLES_SETTINGS);
-		}
-	}, [history]);
-
-	const queryClient = useQueryClient();
-	const { showErrorModal } = useErrorModal();
-
-	const { data: authzResourcesResponse } = useAuthzResources({
-		query: { enabled: true },
-	});
-	const authzResources = authzResourcesResponse?.data ?? null;
-
-	// Extract channelId from URL pathname since useParams doesn't work in nested routing
-	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
-	const roleId = roleIdMatch ? roleIdMatch[1] : '';
-
-	const [activeTab, setActiveTab] = useState<TabKey>('overview');
-	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 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 undefined;
-		}
-		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 }),
-			);
-		}
-		setActivePermission(null);
-	};
-
-	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 (
-		!IS_ROLE_DETAILS_AND_CRUD_ENABLED ||
-		isLoading ||
-		isTransitioning ||
-		!role
-	) {
-		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>
-		);
-	}
-
-	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>
-			</div>
-
-			<div className="role-details-nav">
-				<ToggleGroup
-					type="single"
-					value={activeTab}
-					onValueChange={(val): void => {
-						if (val) {
-							setActiveTab(val as TabKey);
-						}
-					}}
-					className="role-details-tabs"
-				>
-					<ToggleGroupItem value="overview" className="role-details-tab">
-						<Table2 size={14} />
-						Overview
-					</ToggleGroupItem>
-					<ToggleGroupItem value="members" className="role-details-tab">
-						<Users size={14} />
-						Members
-						<span className="role-details-tab-count">0</span>
-					</ToggleGroupItem>
-				</ToggleGroup>
-
-				{!isManaged && (
-					<div className="role-details-actions">
-						<Button
-							variant="ghost"
-							color="destructive"
-							className="role-details-delete-action-btn"
-							onClick={(): void => setIsDeleteModalOpen(true)}
-							aria-label="Delete role"
-						>
-							<Trash2 size={14} />
-						</Button>
-						<Button
-							variant="solid"
-							color="secondary"
-							size="sm"
-							onClick={(): void => setIsEditModalOpen(true)}
-						>
-							Edit Role Details
-						</Button>
-					</div>
-				)}
-			</div>
-
-			{activeTab === 'overview' && (
-				<OverviewTab
-					role={role || null}
-					isManaged={isManaged}
-					permissionTypes={permissionTypes}
-					onPermissionClick={(key): void => setActivePermission(key)}
-				/>
-			)}
-			{activeTab === 'members' && <MembersTab />}
-
-			{!isManaged && (
-				<>
-					<PermissionSidePanel
-						open={activePermission !== null}
-						onClose={(): void => setActivePermission(null)}
-						permissionLabel={activePermission ? capitalize(activePermission) : ''}
-						resources={resourcesForActivePermission}
-						initialConfig={initialConfig}
-						isLoading={isLoadingObjects}
-						isSaving={isSaving}
-						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.test.tsx

@@ -1,438 +0,0 @@
-// Ungate feature flag for all tests in this file
-jest.mock('../../config', () => ({ IS_ROLE_DETAILS_AND_CRUD_ENABLED: true }));
-
-import {
-	customRoleResponse,
-	managedRoleResponse,
-} 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 RoleDetailsPage from '../RoleDetailsPage';
-
-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 authzResourcesUrl = 'http://localhost/api/v1/authz/resources';
-
-const authzResourcesResponse = {
-	status: 'success',
-	data: {
-		relations: { create: ['dashboard'], read: ['dashboard'] },
-		resources: [{ name: 'dashboard', type: 'dashboard' }],
-	},
-};
-
-const emptyObjectsResponse = { status: 'success', data: [] };
-
-const allScopeObjectsResponse = {
-	status: 'success',
-	data: [
-		{
-			resource: { name: 'dashboard', type: 'dashboard' },
-			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)),
-		),
-		rest.get(authzResourcesUrl, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(authzResourcesResponse)),
-		),
-	);
-}
-
-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}`,
-		});
-
-		expect(await screen.findByText('Role — billing-manager')).toBeInTheDocument();
-
-		// Tab navigation
-		expect(screen.getByText('Overview')).toBeInTheDocument();
-		expect(screen.getByText('Members')).toBeInTheDocument();
-
-		// Role description (OverviewTab)
-		expect(
-			screen.getByText('Custom role for managing billing and invoices.'),
-		).toBeInTheDocument();
-
-		// Permission items derived from mocked authz relations
-		expect(screen.getByText('Create')).toBeInTheDocument();
-		expect(screen.getByText('Read')).toBeInTheDocument();
-
-		// Action buttons present for custom role
-		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}`,
-		});
-
-		expect(await screen.findByText(/Role — signoz-admin/)).toBeInTheDocument();
-
-		expect(
-			screen.getByText(
-				'This is a managed role. Permissions and settings are view-only and cannot be modified.',
-			),
-		).toBeInTheDocument();
-
-		// Action buttons absent for managed role
-		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 and verify', 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');
-
-		// Open the edit modal
-		await user.click(screen.getByRole('button', { name: /edit role details/i }));
-		expect(
-			await screen.findByText('Edit Role Details', {
-				selector: '.ant-modal-title',
-			}),
-		).toBeInTheDocument();
-
-		// Name field is disabled in edit mode (role rename is not allowed)
-		const nameInput = screen.getByPlaceholderText(
-			'Enter role name e.g. : Service Owner',
-		);
-		expect(nameInput).toBeDisabled();
-
-		// Update description and save
-		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(),
-		);
-
-		expect(await screen.findByText('Updated description')).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 }));
-
-		expect(
-			await screen.findByText(/Are you sure you want to delete the role/),
-		).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(),
-		);
-	});
-
-	describe('permission side panel', () => {
-		async function openCreatePanel(
-			user: ReturnType<typeof userEvent.setup>,
-		): Promise<void> {
-			await screen.findByText('Role — billing-manager');
-			await user.click(screen.getByText('Create'));
-			await screen.findByText('Edit Create Permissions');
-			await screen.findByRole('button', { name: /dashboard/i });
-		}
-
-		it('Save Changes is disabled until a resource scope is changed', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			await openCreatePanel(user);
-
-			// No change yet — config matches initial, unsavedCount = 0
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
-
-			// Expand Dashboard and flip to All — now Save is enabled
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
-
-			expect(
-				screen.getByRole('button', { name: /save changes/i }),
-			).not.toBeDisabled();
-
-			// check for what shown now - unsavedCount = 1
-			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
-		});
-
-		it('set scope to All → patchObjects additions: ["*"], deletions: null', async () => {
-			const patchSpy = jest.fn();
-
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			await openCreatePanel(user);
-
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: [
-						{
-							resource: { name: 'dashboard', type: 'dashboard' },
-							selectors: ['*'],
-						},
-					],
-					deletions: null,
-				}),
-			);
-		});
-
-		it('set scope to Only selected with IDs → patchObjects additions contain those IDs', async () => {
-			const patchSpy = jest.fn();
-
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			await openCreatePanel(user);
-
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-			await user.type(combobox, 'dash-1');
-			await user.keyboard('{Enter}');
-
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: [
-						{
-							resource: { name: 'dashboard', type: 'dashboard' },
-							selectors: ['dash-1'],
-						},
-					],
-					deletions: null,
-				}),
-			);
-		});
-
-		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
-			const patchSpy = jest.fn();
-
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) =>
-						res(ctx.status(200), ctx.json(allScopeObjectsResponse)),
-				),
-				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					async (req, res, ctx) => {
-						patchSpy(await req.json());
-						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
-					},
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			await openCreatePanel(user);
-
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-
-			await user.click(screen.getByText('Only selected'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-			// Should delete the '*' selector and add nothing
-			await waitFor(() =>
-				expect(patchSpy).toHaveBeenCalledWith({
-					additions: null,
-					deletions: [
-						{
-							resource: { name: 'dashboard', type: 'dashboard' },
-							selectors: ['*'],
-						},
-					],
-				}),
-			);
-		});
-
-		it('unsaved changes counter shown on scope change, Discard resets it', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<RoleDetailsPage />, undefined, {
-				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
-			});
-
-			await openCreatePanel(user);
-
-			// No unsaved changes indicator yet
-			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-
-			// Change dashboard scope to "All"
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
-
-			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
-
-			// Discard reverts to initial config — counter disappears, Save re-disabled
-			await user.click(screen.getByRole('button', { name: /discard/i }));
-
-			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
-		});
-	});
-});

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

@@ -1,44 +0,0 @@
-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

@@ -1,76 +0,0 @@
-import { Callout } from '@signozhq/callout';
-
-import { PermissionType, TimestampBadge } from '../../utils';
-import PermissionItem from './PermissionItem';
-
-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
-					message="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>
-					<hr className="role-details-permissions-divider" />
-				</div>
-
-				<div className="role-details-permission-list">
-					{permissionTypes.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

@@ -1,54 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-import { generatePath, useHistory } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-import { Input, inputVariants } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Form, Modal } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import {
-	invalidateGetRole,
-	invalidateListRoles,
-	useCreateRole,
-	usePatchRole,
-} from 'api/generated/services/role';
-import type { RoletypesPostableRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import ROUTES from 'constants/routes';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-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: unknown): void => {
-		try {
-			ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		} catch (apiError) {
-			showErrorModal(apiError as APIError);
-		}
-	};
-
-	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: RoletypesPostableRoleDTO = {
-					name: values.name,
-					...(values.description ? { description: values.description } : {}),
-				};
-				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={inputVariants()}
-						placeholder="A helpful description of the role"
-					/>
-				</Form.Item>
-			</Form>
-		</Modal>
-	);
-}
-
-export default CreateRoleModal;

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

@@ -1,62 +0,0 @@
-import { Button } from '@signozhq/button';
-import { Trash2, X } from '@signozhq/icons';
-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"
-					prefixIcon={<X size={16} />}
-					onClick={onCancel}
-					size="sm"
-					variant="solid"
-					color="secondary"
-				>
-					Cancel
-				</Button>,
-				<Button
-					key="delete"
-					className="delete-btn"
-					prefixIcon={<Trash2 size={16} />}
-					onClick={onConfirm}
-					loading={isDeleting}
-					size="sm"
-					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.tsx

@@ -5,15 +5,11 @@ import { useListRoles } from 'api/generated/services/role';
 import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useTimezone } from 'providers/Timezone';
-import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';
 
-import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from '../config';
-
 import '../RolesSettings.styles.scss';
 
 const PAGE_SIZE = 20;
@@ -72,15 +68,11 @@ function RolesListingTable({
 	}, [roles, searchQuery]);
 
 	const managedRoles = useMemo(
-		() =>
-			filteredRoles.filter(
-				(role) => role.type?.toLowerCase() === RoleType.MANAGED,
-			),
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'managed'),
 		[filteredRoles],
 	);
 	const customRoles = useMemo(
-		() =>
-			filteredRoles.filter((role) => role.type?.toLowerCase() === RoleType.CUSTOM),
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'custom'),
 		[filteredRoles],
 	);
 
@@ -182,34 +174,9 @@ function RolesListingTable({
 		);
 	}
 
-	const navigateToRole = (roleId: string): void => {
-		history.push(ROUTES.ROLE_DETAILS.replace(':roleId', roleId));
-	};
-
 	// todo: use table from periscope when its available for consumption
 	const renderRow = (role: RoletypesRoleDTO): JSX.Element => (
-		<div
-			key={role.id}
-			className={`roles-table-row ${
-				IS_ROLE_DETAILS_AND_CRUD_ENABLED ? 'roles-table-row--clickable' : ''
-			}`}
-			role="button"
-			tabIndex={IS_ROLE_DETAILS_AND_CRUD_ENABLED ? 0 : -1}
-			onClick={(): void => {
-				if (IS_ROLE_DETAILS_AND_CRUD_ENABLED && role.id) {
-					navigateToRole(role.id);
-				}
-			}}
-			onKeyDown={(e): void => {
-				if (
-					IS_ROLE_DETAILS_AND_CRUD_ENABLED &&
-					(e.key === 'Enter' || e.key === ' ') &&
-					role.id
-				) {
-					navigateToRole(role.id);
-				}
-			}}
-		>
+		<div key={role.id} className="roles-table-row">
 			<div className="roles-table-cell roles-table-cell--name">
 				{role.name ?? '—'}
 			</div>

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

@@ -2,7 +2,6 @@
 	.roles-settings-header {
 		display: flex;
 		flex-direction: column;
-		align-items: flex-start;
 		gap: 4px;
 		width: 100%;
 		padding: 16px;
@@ -32,28 +31,8 @@
 		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;
-		}
-	}
-
 	// todo: https://github.com/SigNoz/components/issues/116
 	.roles-search-wrapper {
-		flex: 1;
-
 		input {
 			width: 100%;
 			background: var(--l3-background);
@@ -174,14 +153,6 @@
 	background: rgba(171, 189, 255, 0.02);
 	border-bottom: 1px solid var(--secondary);
 	gap: 24px;
-
-	&--clickable {
-		cursor: pointer;
-
-		&:hover {
-			background: rgba(171, 189, 255, 0.05);
-		}
-	}
 }
 
 .roles-table-cell {
@@ -264,136 +235,4 @@
 	.roles-table-row {
 		background: rgba(0, 0, 0, 0.01);
 	}
-
-	.create-role-modal {
-		.ant-modal-title {
-			color: var(--text-base-black);
-		}
-	}
-}
-
-.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(--text-base-white);
-		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;
-			}
-		}
-
-		// todo: https://github.com/SigNoz/components/issues/116
-		input,
-		textarea {
-			width: 100%;
-			background: var(--l3-background);
-			border: 1px solid var(--l3-border);
-			border-radius: 2px;
-			padding: 6px 8px;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
-			outline: none;
-			box-shadow: none;
-
-			&::placeholder {
-				color: var(--l3-foreground);
-				opacity: 0.4;
-			}
-
-			&:focus,
-			&:hover {
-				border-color: var(--input);
-				box-shadow: none;
-			}
-		}
-
-		input {
-			height: 32px;
-		}
-
-		input:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-
-			&:hover {
-				border-color: var(--l3-border);
-				box-shadow: none;
-			}
-		}
-
-		textarea {
-			min-height: 100px;
-			resize: vertical;
-		}
-	}
-
-	.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,17 +1,12 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Plus } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 
-import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from './config';
-import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
 
 import './RolesSettings.styles.scss';
 
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
 	return (
 		<div className="roles-settings" data-testid="roles-settings">
@@ -22,33 +17,16 @@ function RolesSettings(): JSX.Element {
 				</p>
 			</div>
 			<div className="roles-settings-content">
-				<div className="roles-settings-toolbar">
-					<div className="roles-search-wrapper">
-						<Input
-							type="search"
-							placeholder="Search for roles..."
-							value={searchQuery}
-							onChange={(e): void => setSearchQuery(e.target.value)}
-						/>
-					</div>
-					{IS_ROLE_DETAILS_AND_CRUD_ENABLED && (
-						<Button
-							variant="solid"
-							color="primary"
-							className="role-settings-toolbar-button"
-							onClick={(): void => setIsCreateModalOpen(true)}
-						>
-							<Plus size={14} />
-							Custom role
-						</Button>
-					)}
+				<div className="roles-search-wrapper">
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />
 			</div>
-			<CreateRoleModal
-				isOpen={isCreateModalOpen}
-				onClose={(): void => setIsCreateModalOpen(false)}
-			/>
 		</div>
 	);
 }

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

@@ -1,384 +0,0 @@
-import type {
-	AuthtypesGettableObjectsDTO,
-	AuthtypesGettableResourcesDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type {
-	PermissionConfig,
-	ResourceDefinition,
-} from '../PermissionSidePanel/PermissionSidePanel.types';
-import { PermissionScope } from '../PermissionSidePanel/PermissionSidePanel.types';
-import {
-	buildConfig,
-	buildPatchPayload,
-	configsEqual,
-	DEFAULT_RESOURCE_CONFIG,
-	derivePermissionTypes,
-	deriveResourcesForRelation,
-	objectsToPermissionConfig,
-} from '../utils';
-
-jest.mock('../RoleDetails/constants', () => {
-	const MockIcon = (): null => null;
-	return {
-		PERMISSION_ICON_MAP: {
-			create: MockIcon,
-			list: MockIcon,
-			read: MockIcon,
-			update: MockIcon,
-			delete: MockIcon,
-		},
-		FALLBACK_PERMISSION_ICON: MockIcon,
-		ROLE_ID_REGEX: /\/settings\/roles\/([^/]+)/,
-	};
-});
-
-const dashboardResource: AuthtypesGettableResourcesDTO['resources'][number] = {
-	name: 'dashboard',
-	type: 'metaresource',
-};
-
-const alertResource: AuthtypesGettableResourcesDTO['resources'][number] = {
-	name: 'alert',
-	type: 'metaresource',
-};
-
-const baseAuthzResources: AuthtypesGettableResourcesDTO = {
-	resources: [dashboardResource, alertResource],
-	relations: {
-		create: ['metaresource'],
-		read: ['metaresource'],
-	},
-};
-
-const resourceDefs: ResourceDefinition[] = [
-	{ id: 'dashboard', label: 'Dashboard' },
-	{ id: 'alert', label: 'Alert' },
-];
-
-const ID_A = 'aaaaaaaa-0000-0000-0000-000000000001';
-const ID_B = 'bbbbbbbb-0000-0000-0000-000000000002';
-const ID_C = 'cccccccc-0000-0000-0000-000000000003';
-
-describe('buildPatchPayload', () => {
-	it('sends only the added selector as an addition', () => {
-		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.additions).toEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
-		]);
-		expect(result.deletions).toBeNull();
-	});
-
-	it('sends only the removed selector as a deletion', () => {
-		const initial: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B, ID_C],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_C],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.deletions).toEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
-		]);
-		expect(result.additions).toBeNull();
-	});
-
-	it('treats selector order as irrelevant — produces no payload when IDs are identical', () => {
-		const initial: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_B, ID_A],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.additions).toBeNull();
-		expect(result.deletions).toBeNull();
-	});
-
-	it('replaces wildcard with specific IDs when switching all → only_selected', () => {
-		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.deletions).toEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
-		]);
-		expect(result.additions).toEqual([
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
-		]);
-	});
-
-	it('only deletes wildcard when switching all → only_selected with empty selector list', () => {
-		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.deletions).toEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
-		]);
-		expect(result.additions).toBeNull();
-	});
-
-	it('only includes resources that actually changed', () => {
-		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
-		};
-		const newConfig: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] }, // unchanged
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A, ID_B] }, // added ID_B
-		};
-
-		const result = buildPatchPayload({
-			newConfig,
-			initialConfig: initial,
-			resources: resourceDefs,
-			authzRes: baseAuthzResources,
-		});
-
-		expect(result.additions).toEqual([
-			{ resource: alertResource, selectors: [ID_B] },
-		]);
-		expect(result.deletions).toBeNull();
-	});
-});
-
-describe('objectsToPermissionConfig', () => {
-	it('maps a wildcard selector to ALL scope', () => {
-		const objects: AuthtypesGettableObjectsDTO[] = [
-			{ resource: dashboardResource, selectors: ['*'] },
-		];
-
-		const result = objectsToPermissionConfig(objects, resourceDefs);
-
-		expect(result.dashboard).toEqual({
-			scope: PermissionScope.ALL,
-			selectedIds: [],
-		});
-	});
-
-	it('maps specific selectors to ONLY_SELECTED scope with the IDs', () => {
-		const objects: AuthtypesGettableObjectsDTO[] = [
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
-		];
-
-		const result = objectsToPermissionConfig(objects, resourceDefs);
-
-		expect(result.dashboard).toEqual({
-			scope: PermissionScope.ONLY_SELECTED,
-			selectedIds: [ID_A, ID_B],
-		});
-	});
-
-	it('defaults to ONLY_SELECTED with empty selectedIds when resource is absent from API response', () => {
-		const result = objectsToPermissionConfig([], resourceDefs);
-
-		expect(result.dashboard).toEqual({
-			scope: PermissionScope.ONLY_SELECTED,
-			selectedIds: [],
-		});
-		expect(result.alert).toEqual({
-			scope: PermissionScope.ONLY_SELECTED,
-			selectedIds: [],
-		});
-	});
-});
-
-describe('configsEqual', () => {
-	it('returns true for identical configs', () => {
-		const config: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
-		};
-
-		expect(configsEqual(config, { ...config })).toBe(true);
-	});
-
-	it('returns false when configs differ', () => {
-		const a: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-		};
-		const b: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-		};
-
-		expect(configsEqual(a, b)).toBe(false);
-
-		const c: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_C, ID_B],
-			},
-		};
-		const d: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			},
-		};
-
-		expect(configsEqual(c, d)).toBe(false);
-	});
-
-	it('returns true when selectedIds are the same but in different order', () => {
-		const a: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_A, ID_B],
-			},
-		};
-		const b: PermissionConfig = {
-			dashboard: {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [ID_B, ID_A],
-			},
-		};
-
-		expect(configsEqual(a, b)).toBe(true);
-	});
-});
-
-describe('buildConfig', () => {
-	it('uses initial values when provided and defaults for resources not in initial', () => {
-		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-		};
-
-		const result = buildConfig(resourceDefs, initial);
-
-		expect(result.dashboard).toEqual({
-			scope: PermissionScope.ALL,
-			selectedIds: [],
-		});
-		expect(result.alert).toEqual(DEFAULT_RESOURCE_CONFIG);
-	});
-
-	it('applies DEFAULT_RESOURCE_CONFIG to all resources when no initial is provided', () => {
-		const result = buildConfig(resourceDefs);
-
-		expect(result.dashboard).toEqual(DEFAULT_RESOURCE_CONFIG);
-		expect(result.alert).toEqual(DEFAULT_RESOURCE_CONFIG);
-	});
-});
-
-describe('derivePermissionTypes', () => {
-	it('derives one PermissionType per relation key with correct key and capitalised label', () => {
-		const relations: AuthtypesGettableResourcesDTO['relations'] = {
-			create: ['metaresource'],
-			read: ['metaresource'],
-			delete: ['metaresource'],
-		};
-
-		const result = derivePermissionTypes(relations);
-
-		expect(result).toHaveLength(3);
-		expect(result.map((p) => p.key)).toEqual(['create', 'read', 'delete']);
-		expect(result[0].label).toBe('Create');
-	});
-
-	it('falls back to the default set of permission types when relations is null', () => {
-		const result = derivePermissionTypes(null);
-
-		expect(result.map((p) => p.key)).toEqual([
-			'create',
-			'list',
-			'read',
-			'update',
-			'delete',
-		]);
-	});
-});
-
-describe('deriveResourcesForRelation', () => {
-	it('returns resources whose type matches the relation', () => {
-		const result = deriveResourcesForRelation(baseAuthzResources, 'create');
-
-		expect(result).toHaveLength(2);
-		expect(result.map((r) => r.id)).toEqual(['dashboard', 'alert']);
-	});
-
-	it('returns an empty array when authzResources is null', () => {
-		expect(deriveResourcesForRelation(null, 'create')).toHaveLength(0);
-	});
-
-	it('returns an empty array when the relation is not defined in the map', () => {
-		expect(
-			deriveResourcesForRelation(baseAuthzResources, 'nonexistent'),
-		).toHaveLength(0);
-	});
-});

frontend/src/container/RolesSettings/config.ts

@@ -1 +0,0 @@
-export const IS_ROLE_DETAILS_AND_CRUD_ENABLED = false;

frontend/src/container/RolesSettings/utils.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { Badge } from '@signozhq/badge';
-import type {
-	AuthtypesGettableObjectsDTO,
-	AuthtypesGettableResourcesDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { capitalize } from 'lodash-es';
-import { useTimezone } from 'providers/Timezone';
-
-import type {
-	PermissionConfig,
-	ResourceConfig,
-	ResourceDefinition,
-} from './PermissionSidePanel/PermissionSidePanel.types';
-import { PermissionScope } from './PermissionSidePanel/PermissionSidePanel.types';
-import {
-	FALLBACK_PERMISSION_ICON,
-	PERMISSION_ICON_MAP,
-} from './RoleDetails/constants';
-
-export interface PermissionType {
-	key: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-export interface PatchPayloadOptions {
-	newConfig: PermissionConfig;
-	initialConfig: PermissionConfig;
-	resources: ResourceDefinition[];
-	authzRes: AuthtypesGettableResourcesDTO;
-}
-
-export function derivePermissionTypes(
-	relations: AuthtypesGettableResourcesDTO['relations'] | null,
-): PermissionType[] {
-	const iconSize = { size: 14 };
-
-	if (!relations) {
-		return Object.entries(PERMISSION_ICON_MAP).map(([key, IconComp]) => ({
-			key,
-			label: capitalize(key),
-			icon: React.createElement(IconComp, iconSize),
-		}));
-	}
-	return Object.keys(relations).map((key) => {
-		const IconComp = PERMISSION_ICON_MAP[key] ?? FALLBACK_PERMISSION_ICON;
-		return {
-			key,
-			label: capitalize(key),
-			icon: React.createElement(IconComp, iconSize),
-		};
-	});
-}
-
-export function deriveResourcesForRelation(
-	authzResources: AuthtypesGettableResourcesDTO | null,
-	relation: string,
-): ResourceDefinition[] {
-	if (!authzResources?.relations) {
-		return [];
-	}
-	const supportedTypes = authzResources.relations[relation] ?? [];
-	return authzResources.resources
-		.filter((r) => supportedTypes.includes(r.type))
-		.map((r) => ({
-			id: r.name,
-			label: capitalize(r.name).replace(/_/g, ' '),
-			options: [],
-		}));
-}
-
-export function objectsToPermissionConfig(
-	objects: AuthtypesGettableObjectsDTO[],
-	resources: ResourceDefinition[],
-): PermissionConfig {
-	const config: PermissionConfig = {};
-	for (const res of resources) {
-		const obj = objects.find((o) => o.resource.name === res.id);
-		if (!obj) {
-			config[res.id] = {
-				scope: PermissionScope.ONLY_SELECTED,
-				selectedIds: [],
-			};
-		} else {
-			const isAll = obj.selectors.includes('*');
-			config[res.id] = {
-				scope: isAll ? PermissionScope.ALL : PermissionScope.ONLY_SELECTED,
-				selectedIds: isAll ? [] : obj.selectors,
-			};
-		}
-	}
-	return config;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function buildPatchPayload({
-	newConfig,
-	initialConfig,
-	resources,
-	authzRes,
-}: PatchPayloadOptions): {
-	additions: AuthtypesGettableObjectsDTO[] | null;
-	deletions: AuthtypesGettableObjectsDTO[] | null;
-} {
-	if (!authzRes) {
-		return { additions: null, deletions: null };
-	}
-	const additions: AuthtypesGettableObjectsDTO[] = [];
-	const deletions: AuthtypesGettableObjectsDTO[] = [];
-
-	for (const res of resources) {
-		const initial = initialConfig[res.id];
-		const current = newConfig[res.id];
-		const resourceDef = authzRes.resources.find((r) => r.name === res.id);
-		if (!resourceDef) {
-			continue;
-		}
-
-		const initialScope = initial?.scope ?? PermissionScope.ONLY_SELECTED;
-		const currentScope = current?.scope ?? PermissionScope.ONLY_SELECTED;
-
-		if (initialScope === currentScope) {
-			// Same scope — only diff individual selectors when both are ONLY_SELECTED
-			if (initialScope === PermissionScope.ONLY_SELECTED) {
-				const initialIds = new Set(initial?.selectedIds ?? []);
-				const currentIds = new Set(current?.selectedIds ?? []);
-				const removed = [...initialIds].filter((id) => !currentIds.has(id));
-				const added = [...currentIds].filter((id) => !initialIds.has(id));
-				if (removed.length > 0) {
-					deletions.push({ resource: resourceDef, selectors: removed });
-				}
-				if (added.length > 0) {
-					additions.push({ resource: resourceDef, selectors: added });
-				}
-			}
-			// Both ALL → no change, skip
-		} else {
-			// Scope changed (ALL ↔ ONLY_SELECTED) — replace old with new
-			const initialSelectors =
-				initialScope === PermissionScope.ALL ? ['*'] : initial?.selectedIds ?? [];
-			if (initialSelectors.length > 0) {
-				deletions.push({ resource: resourceDef, selectors: initialSelectors });
-			}
-			const currentSelectors =
-				currentScope === PermissionScope.ALL ? ['*'] : current?.selectedIds ?? [];
-			if (currentSelectors.length > 0) {
-				additions.push({ resource: resourceDef, selectors: currentSelectors });
-			}
-		}
-	}
-
-	return {
-		additions: additions.length > 0 ? additions : null,
-		deletions: deletions.length > 0 ? deletions : null,
-	};
-}
-
-interface TimestampBadgeProps {
-	date?: Date | string;
-}
-
-export function TimestampBadge({ date }: TimestampBadgeProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	if (!date) {
-		return <Badge color="vanilla">—</Badge>;
-	}
-
-	const d = new Date(date);
-	if (Number.isNaN(d.getTime())) {
-		return <Badge color="vanilla">—</Badge>;
-	}
-
-	const formatted = formatTimezoneAdjustedTimestamp(
-		date,
-		DATE_TIME_FORMATS.DASH_DATETIME,
-	);
-
-	return <Badge color="vanilla">{formatted}</Badge>;
-}
-
-export const DEFAULT_RESOURCE_CONFIG: ResourceConfig = {
-	scope: PermissionScope.ONLY_SELECTED,
-	selectedIds: [],
-};
-
-export function buildConfig(
-	resources: ResourceDefinition[],
-	initial?: PermissionConfig,
-): PermissionConfig {
-	const config: PermissionConfig = {};
-	resources.forEach((r) => {
-		config[r.id] = initial?.[r.id] ?? { ...DEFAULT_RESOURCE_CONFIG };
-	});
-	return config;
-}
-
-export function isResourceConfigEqual(
-	ac: ResourceConfig,
-	bc?: ResourceConfig,
-): boolean {
-	if (!bc) {
-		return false;
-	}
-	return (
-		ac.scope === bc.scope &&
-		JSON.stringify([...ac.selectedIds].sort()) ===
-			JSON.stringify([...bc.selectedIds].sort())
-	);
-}
-
-export function configsEqual(
-	a: PermissionConfig,
-	b: PermissionConfig,
-): boolean {
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-
-	if (keysA.length !== keysB.length) {
-		return false;
-	}
-
-	return keysA.every((id) => isResourceConfigEqual(a[id], b[id]));
-}

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -160,7 +160,6 @@ export const routesToSkip = [
 	ROUTES.LOGS_PIPELINES,
 	ROUTES.BILLING,
 	ROUTES.ROLES_SETTINGS,
-	ROUTES.ROLE_DETAILS,
 	ROUTES.SUPPORT,
 	ROUTES.WORKSPACE_LOCKED,
 	ROUTES.WORKSPACE_SUSPENDED,

frontend/src/mocks-server/__mockdata__/roles.ts

@@ -62,6 +62,3 @@ export const listRolesSuccessResponse = {
 	status: 'success',
 	data: allRoles,
 };
-
-export const customRoleResponse = { status: 'success', data: customRoles[0] };
-export const managedRoleResponse = { status: 'success', data: managedRoles[0] };

frontend/src/pages/Settings/Settings.tsx

@@ -109,7 +109,6 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
@@ -138,8 +137,7 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS
+							item.key === ROUTES.ROLES_SETTINGS
 								? true
 								: item.isEnabled,
 					}));
@@ -231,13 +229,6 @@ function SettingsPage(): JSX.Element {
 			return true;
 		}
 
-		if (
-			pathname.startsWith(ROUTES.ROLES_SETTINGS) &&
-			key === ROUTES.ROLES_SETTINGS
-		) {
-			return true;
-		}
-
 		return pathname === key;
 	};
 

frontend/src/pages/Settings/config.tsx

@@ -13,7 +13,6 @@ import MultiIngestionSettings from 'container/IngestionSettings/MultiIngestionSe
 import MySettings from 'container/MySettings';
 import OrganizationSettings from 'container/OrganizationSettings';
 import RolesSettings from 'container/RolesSettings';
-import RoleDetailsPage from 'container/RolesSettings/RoleDetails';
 import { TFunction } from 'i18next';
 import {
 	Backpack,
@@ -164,19 +163,6 @@ export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const roleDetails = (t: TFunction): RouteTabProps['routes'] => [
-	{
-		Component: RoleDetailsPage,
-		name: (
-			<div className="periscope-tab">
-				<Shield size={16} /> {t('routes:role_details').toString()}
-			</div>
-		),
-		route: ROUTES.ROLE_DETAILS,
-		key: ROUTES.ROLE_DETAILS,
-	},
-];
-
 export const keyboardShortcuts = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: Shortcuts,

frontend/src/pages/Settings/utils.ts

@@ -15,7 +15,6 @@ import {
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
-	roleDetails,
 	rolesSettings,
 } from './config';
 
@@ -69,7 +68,7 @@ export const getRoutes = (
 	}
 
 	if (isAdmin) {
-		settings.push(...rolesSettings(t), ...roleDetails(t));
+		settings.push(...rolesSettings(t));
 	}
 
 	settings.push(

frontend/src/tests/test-utils.tsx

@@ -245,7 +245,6 @@ export function getAppContextMock(
 			ee: 'Y',
 			setupCompleted: true,
 		},
-
 		...appContextOverrides,
 	};
 }

frontend/src/types/roles.ts

@@ -11,8 +11,3 @@ export const USER_ROLES = {
 	EDITOR: 'EDITOR',
 	AUTHOR: 'AUTHOR',
 };
-
-export enum RoleType {
-	MANAGED = 'managed',
-	CUSTOM = 'custom',
-}

frontend/src/utils/errorUtils.ts

@@ -1,6 +1,6 @@
-import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
 /**
@@ -35,11 +35,11 @@ export const isRetryableError = (error: any): boolean => {
 };
 
 export function toAPIError(
-	error: ErrorType<RenderErrorResponseDTO>,
+	error: unknown,
 	defaultMessage = 'An unexpected error occurred.',
 ): APIError {
 	try {
-		ErrorResponseHandlerForGeneratedAPIs(error);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	} catch (apiError) {
 		if (apiError instanceof APIError) {
 			return apiError;
@@ -55,14 +55,3 @@ export function toAPIError(
 		},
 	});
 }
-
-export function handleApiError(
-	err: ErrorType<RenderErrorResponseDTO>,
-	showErrorFunction: (error: APIError) => void,
-): void {
-	try {
-		ErrorResponseHandlerForGeneratedAPIs(err);
-	} catch (apiError) {
-		showErrorFunction(apiError as APIError);
-	}
-}

frontend/src/utils/permission/index.ts

@@ -98,7 +98,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ROLES_SETTINGS: ['ADMIN'],
-	ROLE_DETAILS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],

frontend/yarn.lock

@@ -4476,28 +4476,6 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/react-toggle-group@^1.1.7":
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz#e513d6ffdb07509b400ab5b26f2523747c0d51c1"
-  integrity sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-direction" "1.1.1"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-roving-focus" "1.1.11"
-    "@radix-ui/react-toggle" "1.1.10"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
-"@radix-ui/react-toggle@1.1.10", "@radix-ui/react-toggle@^1.1.6":
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz#b04ba0f9609599df666fce5b2f38109a197f08cf"
-  integrity sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-
 "@radix-ui/react-tooltip@1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
@@ -5200,21 +5178,6 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/toggle-group@^0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@signozhq/toggle-group/-/toggle-group-0.0.1.tgz#c82ff1da34e77b24da53c2d595ad6b4a0d1b1de4"
-  integrity sha512-871bQayL5MaqsuNOFHKexidu9W2Hlg1y4xmH8C5mGmlfZ4bd0ovJ9OweQrM6Puys3jeMwi69xmJuesYCfKQc1g==
-  dependencies:
-    "@radix-ui/react-icons" "^1.3.0"
-    "@radix-ui/react-slot" "^1.1.0"
-    "@radix-ui/react-toggle" "^1.1.6"
-    "@radix-ui/react-toggle-group" "^1.1.7"
-    class-variance-authority "^0.7.0"
-    clsx "^2.1.1"
-    lucide-react "^0.445.0"
-    tailwind-merge "^2.5.2"
-    tailwindcss-animate "^1.0.7"
-
 "@signozhq/tooltip@0.0.2":
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@signozhq/tooltip/-/tooltip-0.0.2.tgz#bb4e2681868fa2e06db78eff5872ffb2a78b93b6"