chore: added test for tooltip parent behaviour

.github/workflows/commitci.yaml

@@ -7,14 +7,10 @@ on:
   pull_request_target:
     types:
       - labeled
-  merge_group:
-    types:
-      - checks_requested
 
 jobs:
   refcheck:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/goci.yaml

@@ -7,14 +7,10 @@ on:
   pull_request_target:
     types:
       - labeled
-  merge_group:
-    types:
-      - checks_requested
 
 jobs:
   test:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-test.yaml@main
@@ -25,7 +21,6 @@ jobs:
       GO_VERSION: 1.24
   fmt:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-fmt.yaml@main
@@ -35,7 +30,6 @@ jobs:
       GO_VERSION: 1.24
   lint:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-lint.yaml@main
@@ -45,7 +39,6 @@ jobs:
       GO_VERSION: 1.24
   deps:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-deps.yaml@main
@@ -55,7 +48,6 @@ jobs:
       GO_VERSION: 1.24
   build:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -87,7 +79,6 @@ jobs:
           make docker-build-enterprise
   openapi:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/jsci.yaml

@@ -7,14 +7,26 @@ on:
   pull_request_target:
     types:
       - labeled
-  merge_group:
-    types:
-      - checks_requested
 
 jobs:
   tsc:
     if: |
-      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install
+        run: cd frontend && yarn install
+      - name: tsc
+        run: cd frontend && yarn tsc
+  tsc2:
+    if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-tsc.yaml@main
@@ -24,7 +36,6 @@ jobs:
       JS_SRC: frontend
   test:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-test.yaml@main
@@ -34,7 +45,6 @@ jobs:
       JS_SRC: frontend
   fmt:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-fmt.yaml@main
@@ -44,7 +54,6 @@ jobs:
       JS_SRC: frontend
   lint:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-lint.yaml@main
@@ -54,7 +63,6 @@ jobs:
       JS_SRC: frontend
   md-languages:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -65,7 +73,6 @@ jobs:
         run: bash frontend/scripts/validate-md-languages.sh
   authz:
     if: |
-      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,4 +1,4 @@
-FROM node:22-bookworm AS build
+FROM node:18-bullseye AS build
 
 WORKDIR /opt/
 COPY ./frontend/ ./

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -2108,16 +2108,6 @@ components:
         token:
           type: string
       type: object
-    TypesPostableBulkInviteRequest:
-      properties:
-        invites:
-          items:
-            $ref: '#/components/schemas/TypesPostableInvite'
-          nullable: true
-          type: array
-      required:
-      - invites
-      type: object
     TypesPostableForgotPassword:
       properties:
         email:
@@ -2206,8 +2196,6 @@ components:
           type: string
         role:
           type: string
-        status:
-          type: string
         updatedAt:
           format: date-time
           type: string
@@ -3550,7 +3538,9 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/TypesPostableBulkInviteRequest'
+              items:
+                $ref: '#/components/schemas/TypesPostableInvite'
+              type: array
       responses:
         "201":
           description: Created

ee/anomaly/seasonal.go

@@ -8,8 +8,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/valuer"
 
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
@@ -69,10 +67,6 @@ func (p *BaseSeasonalProvider) toTSResults(ctx context.Context, resp *qbtypes.Qu
 }
 
 func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID, params *anomalyQueryParams) (*anomalyQueryResults, error) {
-	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
-		instrumentationtypes.CodeNamespace:    "anomaly",
-		instrumentationtypes.CodeFunctionName: "getResults",
-	})
 	// TODO(srikanthccv): parallelize this?
 	p.logger.InfoContext(ctx, "fetching results for current period", "anomaly_current_period_query", params.CurrentPeriodQuery)
 	currentPeriodResults, err := p.querier.QueryRange(ctx, orgID, &params.CurrentPeriodQuery)

ee/modules/dashboard/impldashboard/module.go

@@ -15,9 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
-	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -107,10 +105,6 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 }
 
 func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.UUID, widgetIdx, startTime, endTime uint64) (*querybuildertypesv5.QueryRangeResponse, error) {
-	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
-		instrumentationtypes.CodeNamespace:    "dashboard",
-		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRange",
-	})
 	dashboard, err := module.GetDashboardByPublicID(ctx, id)
 	if err != nil {
 		return nil, err

ee/query-service/anomaly/seasonal.go

@@ -10,8 +10,6 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/query-service/postprocess"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"go.uber.org/zap"
 )
@@ -63,10 +61,6 @@ func (p *BaseSeasonalProvider) getQueryParams(req *GetAnomaliesRequest) *anomaly
 }
 
 func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID, params *anomalyQueryParams) (*anomalyQueryResults, error) {
-	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
-		instrumentationtypes.CodeNamespace:    "anomaly",
-		instrumentationtypes.CodeFunctionName: "getResults",
-	})
 	zap.L().Info("fetching results for current period", zap.Any("currentPeriodQuery", params.CurrentPeriodQuery))
 	currentPeriodResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.CurrentPeriodQuery)
 	if err != nil {

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

@@ -170,7 +170,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
-	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId), types.UserStatusActive)
+	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}

frontend/jest.config.ts

@@ -23,7 +23,29 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
+		'^@signozhq/sonner$':
+			'<rootDir>/node_modules/@signozhq/sonner/dist/sonner.js',
+		'^@signozhq/button$':
+			'<rootDir>/node_modules/@signozhq/button/dist/button.js',
+		'^@signozhq/calendar$':
+			'<rootDir>/node_modules/@signozhq/calendar/dist/calendar.js',
+		'^@signozhq/badge': '<rootDir>/node_modules/@signozhq/badge/dist/badge.js',
+		'^@signozhq/checkbox':
+			'<rootDir>/node_modules/@signozhq/checkbox/dist/checkbox.js',
+		'^@signozhq/switch': '<rootDir>/node_modules/@signozhq/switch/dist/switch.js',
+		'^@signozhq/callout':
+			'<rootDir>/node_modules/@signozhq/callout/dist/callout.js',
+		'^@signozhq/combobox':
+			'<rootDir>/node_modules/@signozhq/combobox/dist/combobox.js',
+		'^@signozhq/input': '<rootDir>/node_modules/@signozhq/input/dist/input.js',
+		'^@signozhq/command':
+			'<rootDir>/node_modules/@signozhq/command/dist/command.js',
+		'^@signozhq/radio-group':
+			'<rootDir>/node_modules/@signozhq/radio-group/dist/radio-group.js',
+		'^@signozhq/toggle-group$':
+			'<rootDir>/node_modules/@signozhq/toggle-group/dist/toggle-group.js',
+		'^@signozhq/dialog$':
+			'<rootDir>/node_modules/@signozhq/dialog/dist/dialog.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],

frontend/jest.setup.ts

@@ -7,10 +7,9 @@
  */
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
+import './src/styles.scss';
 
 import { server } from './src/mocks-server/server';
-
-import './src/styles.scss';
 // Establish API mocking before all tests.
 
 // Mock window.matchMedia

frontend/package.json

@@ -55,7 +55,6 @@
     "@signozhq/command": "0.0.0",
     "@signozhq/design-tokens": "2.1.1",
     "@signozhq/dialog": "^0.0.2",
-    "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/input": "0.0.2",
     "@signozhq/popover": "0.0.0",

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

@@ -14,6 +14,5 @@
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
-	"role_details": "Role Details",
-	"members": "Members"
+	"role_details": "Role Details"
 }

frontend/public/locales/en/routes.json

@@ -14,6 +14,5 @@
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
-	"role_details": "Role Details",
-	"members": "Members"
+	"role_details": "Role Details"
 }

frontend/public/locales/en/titles.json

@@ -74,6 +74,5 @@
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"ROLES_SETTINGS": "SigNoz | Roles"
 }

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

@@ -2525,14 +2525,6 @@ export interface TypesPostableAcceptInviteDTO {
 	token?: string;
 }
 
-export interface TypesPostableBulkInviteRequestDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	invites: TypesPostableInviteDTO[] | null;
-}
-
 export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
@@ -2673,10 +2665,6 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	role?: string;
-	/**
-	 * @type string
-	 */
-	status?: string;
 	/**
 	 * @type string
 	 * @format date-time

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

@@ -41,7 +41,6 @@ import type {
 	TypesChangePasswordRequestDTO,
 	TypesPostableAcceptInviteDTO,
 	TypesPostableAPIKeyDTO,
-	TypesPostableBulkInviteRequestDTO,
 	TypesPostableForgotPasswordDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
@@ -672,14 +671,14 @@ export const useAcceptInvite = <
  * @summary Create bulk invite
  */
 export const createBulkInvite = (
-	typesPostableBulkInviteRequestDTO: BodyType<TypesPostableBulkInviteRequestDTO>,
+	typesPostableInviteDTO: BodyType<TypesPostableInviteDTO[]>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/invite/bulk`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: typesPostableBulkInviteRequestDTO,
+		data: typesPostableInviteDTO,
 		signal,
 	});
 };
@@ -691,13 +690,13 @@ export const getCreateBulkInviteMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
 		TError,
-		{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
+		{ data: BodyType<TypesPostableInviteDTO[]> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createBulkInvite>>,
 	TError,
-	{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
+	{ data: BodyType<TypesPostableInviteDTO[]> },
 	TContext
 > => {
 	const mutationKey = ['createBulkInvite'];
@@ -711,7 +710,7 @@ export const getCreateBulkInviteMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createBulkInvite>>,
-		{ data: BodyType<TypesPostableBulkInviteRequestDTO> }
+		{ data: BodyType<TypesPostableInviteDTO[]> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -724,7 +723,7 @@ export const getCreateBulkInviteMutationOptions = <
 export type CreateBulkInviteMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createBulkInvite>>
 >;
-export type CreateBulkInviteMutationBody = BodyType<TypesPostableBulkInviteRequestDTO>;
+export type CreateBulkInviteMutationBody = BodyType<TypesPostableInviteDTO[]>;
 export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -737,13 +736,13 @@ export const useCreateBulkInvite = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
 		TError,
-		{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
+		{ data: BodyType<TypesPostableInviteDTO[]> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createBulkInvite>>,
 	TError,
-	{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
+	{ data: BodyType<TypesPostableInviteDTO[]> },
 	TContext
 > => {
 	const mutationOptions = getCreateBulkInviteMutationOptions(options);

frontend/src/api/index.ts

@@ -94,13 +94,19 @@ export const interceptorRejected = async (
 					afterLogin(response.data.accessToken, response.data.refreshToken, true);
 
 					try {
-						const reResponse = await axios({
-							...value.config,
-							headers: {
-								...value.config.headers,
-								Authorization: `Bearer ${response.data.accessToken}`,
+						const reResponse = await axios(
+							`${value.config.baseURL}${value.config.url?.substring(1)}`,
+							{
+								method: value.config.method,
+								headers: {
+									...value.config.headers,
+									Authorization: `Bearer ${response.data.accessToken}`,
+								},
+								data: {
+									...JSON.parse(value.config.data || '{}'),
+								},
 							},
-						});
+						);
 
 						return await Promise.resolve(reResponse);
 					} catch (error) {

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -1,5 +1,6 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
+import store from 'store';
 import {
 	QueryKeyRequestProps,
 	QueryKeySuggestionsResponseProps,
@@ -17,6 +18,12 @@ export const getKeySuggestions = (
 		signalSource = '',
 	} = props;
 
+	const { globalTime } = store.getState();
+	const resolvedTimeRange = {
+		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+	};
+
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedMetricName = encodeURIComponent(metricName);
@@ -24,7 +31,14 @@ export const getKeySuggestions = (
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);
 
-	return axios.get(
-		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
-	);
+	let url = `/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`;
+
+	if (resolvedTimeRange.startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
+	}
+	if (resolvedTimeRange.endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
+	}
+
+	return axios.get(url);
 };

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -1,5 +1,6 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
+import store from 'store';
 import {
 	QueryKeyValueRequestProps,
 	QueryKeyValueSuggestionsResponseProps,
@@ -8,7 +9,20 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	const { signal, key, searchText, signalSource, metricName } = props;
+	const {
+		signal,
+		key,
+		searchText,
+		signalSource,
+		metricName,
+		existingQuery,
+	} = props;
+
+	const { globalTime } = store.getState();
+	const resolvedTimeRange = {
+		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+	};
 
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
@@ -16,7 +30,17 @@ export const getValueSuggestions = (
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedSource = encodeURIComponent(signalSource || '');
 
-	return axios.get(
-		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
-	);
+	let url = `/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`;
+
+	if (resolvedTimeRange.startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
+	}
+	if (resolvedTimeRange.endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
+	}
+	if (existingQuery) {
+		url += `&existingQuery=${encodeURIComponent(existingQuery)}`;
+	}
+
+	return axios.get(url);
 };

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

@@ -19,7 +19,6 @@ import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
 import '@signozhq/dialog';
-import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -1,304 +0,0 @@
-.edit-member-drawer {
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
-	&__body {
-		flex: 1;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-5) var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		cursor: default;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__input-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.8;
-		}
-	}
-
-	&__email-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__role-select {
-		width: 100%;
-		height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 0 var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			line-height: 32px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		margin-top: var(--margin-1);
-	}
-
-	&__meta-item {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: 56px;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--border);
-		flex-shrink: 0;
-		background: var(--card);
-	}
-
-	&__footer-left {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-8);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-6);
-	}
-
-	&__footer-divider {
-		width: 1px;
-		height: 21px;
-		background: var(--border);
-		flex-shrink: 0;
-	}
-
-	&__footer-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-3);
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		font-family: Inter, sans-serif;
-		font-size: var(--label-small-400-font-size);
-		font-weight: var(--label-small-400-font-weight);
-		line-height: var(--label-small-400-line-height);
-		letter-spacing: var(--label-small-400-letter-spacing);
-		transition: opacity 0.15s ease;
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&:not(:disabled):hover {
-			opacity: 0.8;
-		}
-
-		&--danger {
-			color: var(--destructive);
-		}
-
-		&--warning {
-			color: var(--accent-amber);
-		}
-	}
-}
-
-.delete-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-title'] {
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
-		}
-	}
-
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-4);
-		margin-top: var(--margin-6);
-	}
-}
-
-.reset-link-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-header'] {
-		border-color: var(--l2-border);
-		color: var(--l1-foreground);
-	}
-
-	[data-slot='dialog-description'] {
-		width: 510px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-	}
-
-	&__description {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-		white-space: normal;
-		word-break: break-word;
-	}
-
-	&__link-row {
-		display: flex;
-		align-items: center;
-		height: 32px;
-		overflow: hidden;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-	}
-
-	&__link-text-wrap {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-	}
-
-	&__link-text {
-		display: block;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		padding: 0 var(--padding-2);
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-	}
-
-	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
-		border-left: 1px solid var(--border);
-		min-width: 64px;
-	}
-}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,510 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	ChevronDown,
-	Copy,
-	Link,
-	LockKeyhole,
-	RefreshCw,
-	Trash2,
-	X,
-} from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import sendInvite from 'api/v1/invite/create';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
-import { MemberRow } from 'components/MembersTable/MembersTable';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { INVITE_PREFIX, MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './EditMemberDrawer.styles.scss';
-
-export interface EditMemberDrawerProps {
-	member: MemberRow | null;
-	open: boolean;
-	onClose: () => void;
-	onComplete: () => void;
-	onRefetch?: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function EditMemberDrawer({
-	member,
-	open,
-	onClose,
-	onComplete,
-	onRefetch,
-}: EditMemberDrawerProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const [displayName, setDisplayName] = useState('');
-	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
-	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
-	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-	const [resetLink, setResetLink] = useState<string | null>(null);
-	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
-	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
-
-	const isInvited = member?.status === MemberStatus.Invited;
-	// Invited member IDs are prefixed with 'invite-'; strip it to get the real invite ID
-	const inviteId =
-		isInvited && member ? member.id.slice(INVITE_PREFIX.length) : null;
-
-	useEffect(() => {
-		if (member) {
-			setDisplayName(member.name ?? '');
-			setSelectedRole(member.role);
-		}
-	}, [member]);
-
-	const isDirty =
-		member !== null &&
-		(displayName !== member.name || selectedRole !== member.role);
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const saveInvitedMember = useCallback(async (): Promise<void> => {
-		if (!member || !inviteId) {
-			return;
-		}
-		await cancelInvite({ id: inviteId });
-		try {
-			await sendInvite({
-				email: member.email,
-				name: displayName,
-				role: selectedRole,
-				frontendBaseUrl: window.location.origin,
-			});
-			toast.success('Invite updated successfully', { richColors: true });
-			onComplete();
-			onClose();
-		} catch {
-			onRefetch?.();
-			onClose();
-			toast.error(
-				'Failed to send the updated invite. Please re-invite this member.',
-				{ richColors: true },
-			);
-		}
-	}, [
-		member,
-		inviteId,
-		displayName,
-		selectedRole,
-		onComplete,
-		onClose,
-		onRefetch,
-	]);
-
-	const saveActiveMember = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		await update({
-			userId: member.id,
-			displayName,
-			role: selectedRole,
-		});
-		toast.success('Member details updated successfully', { richColors: true });
-		onComplete();
-		onClose();
-	}, [member, displayName, selectedRole, onComplete, onClose]);
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!member || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			if (isInvited && inviteId) {
-				await saveInvitedMember();
-			} else {
-				await saveActiveMember();
-			}
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to update invite' : 'Failed to update member details',
-				{ richColors: true },
-			);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		member,
-		isDirty,
-		isInvited,
-		inviteId,
-		saveInvitedMember,
-		saveActiveMember,
-	]);
-
-	const handleDelete = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsDeleting(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				toast.success('Invitation cancelled successfully', { richColors: true });
-			} else {
-				await deleteUser({ userId: member.id });
-				toast.success('Member deleted successfully', { richColors: true });
-			}
-			setShowDeleteConfirm(false);
-			onComplete();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to cancel invitation' : 'Failed to delete member',
-				{ richColors: true },
-			);
-		} finally {
-			setIsDeleting(false);
-		}
-	}, [member, isInvited, inviteId, onComplete, onClose]);
-
-	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsGeneratingLink(true);
-		try {
-			const response = await getResetPasswordToken({ userId: member.id });
-			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
-				setResetLink(link);
-				setHasCopiedResetLink(false);
-				setShowResetLinkDialog(true);
-				onClose();
-			} else {
-				toast.error('Failed to generate password reset link', {
-					richColors: true,
-					position: 'top-right',
-				});
-			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} finally {
-			setIsGeneratingLink(false);
-		}
-	}, [member, onClose]);
-
-	const handleCopyResetLink = useCallback(async (): Promise<void> => {
-		if (!resetLink) {
-			return;
-		}
-		try {
-			await navigator.clipboard.writeText(resetLink);
-			setHasCopiedResetLink(true);
-			setTimeout(() => setHasCopiedResetLink(false), 2000);
-			toast.success('Reset link copied to clipboard', { richColors: true });
-		} catch {
-			toast.error('Failed to copy link', {
-				richColors: true,
-			});
-		}
-	}, [resetLink]);
-
-	const handleCopyInviteLink = useCallback(async (): Promise<void> => {
-		if (!member?.token) {
-			toast.error('Invite link is not available', {
-				richColors: true,
-				position: 'top-right',
-			});
-			return;
-		}
-		const inviteLink = `${window.location.origin}${ROUTES.SIGN_UP}?token=${member.token}`;
-		try {
-			await navigator.clipboard.writeText(inviteLink);
-			toast.success('Invite link copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} catch {
-			toast.error('Failed to copy invite link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		}
-	}, [member]);
-
-	const handleClose = useCallback((): void => {
-		setShowDeleteConfirm(false);
-		onClose();
-	}, [onClose]);
-
-	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
-
-	const drawerContent = (
-		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-name">
-						Name
-					</label>
-					<Input
-						id="member-name"
-						value={displayName}
-						onChange={(e): void => setDisplayName(e.target.value)}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-					/>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-email">
-						Email Address
-					</label>
-					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-						<span className="edit-member-drawer__email-text">
-							{member?.email || '—'}
-						</span>
-						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-					</div>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-role">
-						Roles
-					</label>
-					<Select
-						id="member-role"
-						value={selectedRole}
-						onChange={(role): void => setSelectedRole(role as ROLES)}
-						className="edit-member-drawer__role-select"
-						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.edit-member-drawer') as HTMLElement) ||
-							document.body
-						}
-					>
-						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
-						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
-						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
-					</Select>
-				</div>
-
-				<div className="edit-member-drawer__meta">
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Status</span>
-						{member?.status === MemberStatus.Active ? (
-							<Badge color="forest" variant="outline">
-								ACTIVE
-							</Badge>
-						) : (
-							<Badge color="amber" variant="outline">
-								INVITED
-							</Badge>
-						)}
-					</div>
-
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-					</div>
-					{!isInvited && (
-						<div className="edit-member-drawer__meta-item">
-							<span className="edit-member-drawer__meta-label">Last Modified</span>
-							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<Button
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-						onClick={(): void => setShowDeleteConfirm(true)}
-					>
-						<Trash2 size={12} />
-						{isInvited ? 'Cancel Invite' : 'Delete Member'}
-					</Button>
-
-					<div className="edit-member-drawer__footer-divider" />
-
-					{isInvited ? (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleCopyInviteLink}
-							disabled={!member?.token}
-						>
-							<Link size={12} />
-							Copy Invite Link
-						</Button>
-					) : (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleGenerateResetLink}
-							disabled={isGeneratingLink}
-						>
-							<RefreshCw size={12} />
-							{isGeneratingLink ? 'Generating...' : 'Generate Password Reset Link'}
-						</Button>
-					)}
-				</div>
-
-				<div className="edit-member-drawer__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-
-	const deleteDialogTitle = isInvited ? 'Cancel Invitation' : 'Delete Member';
-	const deleteDialogBody = isInvited ? (
-		<>
-			Are you sure you want to cancel the invitation for{' '}
-			<strong>{member?.email}</strong>? They will no longer be able to join the
-			workspace using this invite.
-		</>
-	) : (
-		<>
-			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will permanently
-			remove their access to the workspace.
-		</>
-	);
-	const deleteConfirmLabel = isInvited ? 'Cancel Invite' : 'Delete Member';
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				type="panel"
-				showCloseButton
-				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Member Details' }}
-				content={drawerContent}
-				className="edit-member-drawer"
-			/>
-
-			<DialogWrapper
-				open={showResetLinkDialog}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowResetLinkDialog(false);
-					}
-				}}
-				title="Password Reset Link"
-				showCloseButton
-				width="base"
-				className="reset-link-dialog"
-			>
-				<div className="reset-link-dialog__content">
-					<p className="reset-link-dialog__description">
-						This creates a one-time link the team member can use to set a new password
-						for their SigNoz account.
-					</p>
-					<div className="reset-link-dialog__link-row">
-						<div className="reset-link-dialog__link-text-wrap">
-							<span className="reset-link-dialog__link-text">{resetLink}</span>
-						</div>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleCopyResetLink}
-							prefixIcon={
-								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
-							}
-							className="reset-link-dialog__copy-btn"
-						>
-							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
-						</Button>
-					</div>
-				</div>
-			</DialogWrapper>
-
-			<DialogWrapper
-				open={showDeleteConfirm}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowDeleteConfirm(false);
-					}
-				}}
-				title={deleteDialogTitle}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">{deleteDialogBody}</p>
-
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setShowDeleteConfirm(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDeleting}
-						onClick={handleDelete}
-					>
-						<Trash2 size={12} />
-						{isDeleting ? 'Processing...' : deleteConfirmLabel}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-		</>
-	);
-}
-
-export default EditMemberDrawer;

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

@@ -1,277 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
-import { MemberStatus } from 'container/MembersSettings/utils';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-import { ROLES } from 'types/roles';
-
-import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
-
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
-}));
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-jest.mock('api/v1/user/id/update');
-jest.mock('api/v1/user/id/delete');
-jest.mock('api/v1/invite/id/delete');
-jest.mock('api/v1/invite/create');
-jest.mock('api/v1/factor_password/getResetPasswordToken');
-jest.mock('@signozhq/sonner', () => ({
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const mockUpdate = jest.mocked(update);
-const mockDeleteUser = jest.mocked(deleteUser);
-const mockCancelInvite = jest.mocked(cancelInvite);
-const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
-
-const activeMember = {
-	id: 'user-1',
-	name: 'Alice Smith',
-	email: 'alice@signoz.io',
-	role: 'ADMIN' as ROLES,
-	status: MemberStatus.Active,
-	joinedOn: '1700000000000',
-	updatedAt: '1710000000000',
-};
-
-const invitedMember = {
-	id: 'invite-abc123',
-	name: '',
-	email: 'bob@signoz.io',
-	role: 'VIEWER' as ROLES,
-	status: MemberStatus.Invited,
-	joinedOn: '1700000000000',
-	token: 'tok-xyz',
-};
-
-function renderDrawer(
-	props: Partial<EditMemberDrawerProps> = {},
-): ReturnType<typeof render> {
-	return render(
-		<EditMemberDrawer
-			member={activeMember}
-			open
-			onClose={jest.fn()}
-			onComplete={jest.fn()}
-			{...props}
-		/>,
-	);
-}
-
-describe('EditMemberDrawer', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUpdate.mockResolvedValue({ httpStatusCode: 200, data: null });
-		mockDeleteUser.mockResolvedValue({ httpStatusCode: 200, data: null });
-		mockCancelInvite.mockResolvedValue({ httpStatusCode: 200, data: null });
-	});
-
-	it('renders active member details and disables Save when form is not dirty', () => {
-		renderDrawer();
-
-		expect(screen.getByDisplayValue('Alice Smith')).toBeInTheDocument();
-		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /save member details/i }),
-		).toBeDisabled();
-	});
-
-	it('enables Save after editing name and calls update API on confirm', async () => {
-		const onComplete = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		renderDrawer({ onComplete });
-
-		const nameInput = screen.getByDisplayValue('Alice Smith');
-		await user.clear(nameInput);
-		await user.type(nameInput, 'Alice Updated');
-
-		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(mockUpdate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					userId: 'user-1',
-					displayName: 'Alice Updated',
-				}),
-			);
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	it('shows delete confirm dialog and calls deleteUser for active members', async () => {
-		const onComplete = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		renderDrawer({ onComplete });
-
-		await user.click(screen.getByRole('button', { name: /delete member/i }));
-
-		expect(
-			await screen.findByText(/are you sure you want to delete/i),
-		).toBeInTheDocument();
-
-		const confirmBtns = screen.getAllByRole('button', { name: /delete member/i });
-		await user.click(confirmBtns[confirmBtns.length - 1]);
-
-		await waitFor(() => {
-			expect(mockDeleteUser).toHaveBeenCalledWith({ userId: 'user-1' });
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	it('shows Cancel Invite and Copy Invite Link for invited members; hides Last Modified', () => {
-		renderDrawer({ member: invitedMember });
-
-		expect(
-			screen.getByRole('button', { name: /cancel invite/i }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /copy invite link/i }),
-		).toBeInTheDocument();
-		expect(screen.getByText('Invited On')).toBeInTheDocument();
-		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
-	});
-
-	it('calls cancelInvite after confirming Cancel Invite for invited members', async () => {
-		const onComplete = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		renderDrawer({ member: invitedMember, onComplete });
-
-		await user.click(screen.getByRole('button', { name: /cancel invite/i }));
-
-		expect(
-			await screen.findByText(/are you sure you want to cancel the invitation/i),
-		).toBeInTheDocument();
-
-		const confirmBtns = screen.getAllByRole('button', { name: /cancel invite/i });
-		await user.click(confirmBtns[confirmBtns.length - 1]);
-
-		await waitFor(() => {
-			expect(mockCancelInvite).toHaveBeenCalledWith({ id: 'abc123' });
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	describe('Generate Password Reset Link', () => {
-		const mockWriteText = jest.fn().mockResolvedValue(undefined);
-		let clipboardSpy: jest.SpyInstance | undefined;
-
-		beforeAll(() => {
-			Object.defineProperty(navigator, 'clipboard', {
-				value: { writeText: (): Promise<void> => Promise.resolve() },
-				configurable: true,
-				writable: true,
-			});
-		});
-
-		beforeEach(() => {
-			mockWriteText.mockClear();
-			clipboardSpy = jest
-				.spyOn(navigator.clipboard, 'writeText')
-				.mockImplementation(mockWriteText);
-			mockGetResetPasswordToken.mockResolvedValue({
-				httpStatusCode: 200,
-				data: { token: 'reset-tok-abc', userId: 'user-1' },
-			});
-		});
-
-		afterEach(() => {
-			clipboardSpy?.mockRestore();
-		});
-
-		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			renderDrawer();
-
-			await user.click(
-				screen.getByRole('button', { name: /generate password reset link/i }),
-			);
-
-			const dialog = await screen.findByRole('dialog', {
-				name: /password reset link/i,
-			});
-			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
-				userId: 'user-1',
-			});
-			expect(dialog).toBeInTheDocument();
-			expect(dialog).toHaveTextContent('reset-tok-abc');
-		});
-
-		it('copies the link to clipboard and shows "Copied!" on the button', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
-
-			renderDrawer();
-
-			await user.click(
-				screen.getByRole('button', { name: /generate password reset link/i }),
-			);
-
-			const dialog = await screen.findByRole('dialog', {
-				name: /password reset link/i,
-			});
-			expect(dialog).toHaveTextContent('reset-tok-abc');
-
-			fireEvent.click(screen.getByRole('button', { name: /^copy$/i }));
-
-			// Verify success path: writeText called with the correct link
-			await waitFor(() => {
-				expect(mockToast.success).toHaveBeenCalledWith(
-					'Reset link copied to clipboard',
-					expect.anything(),
-				);
-			});
-
-			expect(mockWriteText).toHaveBeenCalledWith(
-				expect.stringContaining('reset-tok-abc'),
-			);
-			expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
-		});
-	});
-});

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

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

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

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

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

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

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

@@ -1,216 +0,0 @@
-.members-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-.members-table {
-	.ant-table {
-		background: transparent;
-		font-size: 13px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--background);
-			font-size: var(--paragraph-small-600-font-size);
-			font-weight: var(--paragraph-small-600-font-weight);
-			line-height: var(--paragraph-small-600-line-height);
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--foreground);
-			padding: var(--padding-2) var(--padding-4);
-			border-bottom: none !important;
-			border-top: none !important;
-
-			&::before {
-				display: none !important;
-			}
-
-			.ant-table-column-sorters {
-				display: inline-flex;
-				align-items: center;
-				gap: var(--spacing-1);
-				width: auto;
-			}
-
-			.ant-table-column-title {
-				flex: unset;
-			}
-
-			.ant-table-column-sorter {
-				color: var(--foreground);
-				opacity: 0.6;
-			}
-
-			.ant-table-column-sorter-up.active,
-			.ant-table-column-sorter-down.active {
-				color: var(--bg-base-white);
-				opacity: 1;
-			}
-		}
-	}
-
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: var(--padding-2) var(--padding-4);
-			background: transparent;
-			transition: none;
-		}
-
-		> tr.members-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.member-status-cell {
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-}
-.member-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: 22px;
-	overflow: hidden;
-
-	.member-name {
-		font-size: var(--paragraph-base-500-font-size);
-		font-weight: var(--paragraph-base-500-font-weight);
-		color: var(--foreground);
-		line-height: var(--paragraph-base-500-line-height);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.member-email {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l3-foreground-hover);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.member-joined-date {
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	color: var(--foreground);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-	white-space: nowrap;
-}
-
-.member-joined-dash {
-	font-size: var(--paragraph-base-400-font-size);
-	color: var(--l3-foreground-hover);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-}
-
-.members-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--padding-12) var(--padding-4);
-	gap: var(--spacing-4);
-	color: var(--foreground);
-
-	&__emoji {
-		font-size: var(--font-size-2xl);
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-		line-height: var(--paragraph-base-400-font-height);
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
-		}
-	}
-}
-
-.members-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: var(--padding-2) var(--padding-4);
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.members-pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-	}
-
-	.members-pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-}
-
-.lightMode {
-	.members-table {
-		.ant-table-tbody {
-			> tr.members-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.members-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,238 +0,0 @@
-import type React from 'react';
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './MembersTable.styles.scss';
-
-export interface MemberRow {
-	id: string;
-	name?: string;
-	email: string;
-	role: ROLES;
-	status: MemberStatus;
-	joinedOn: string | null;
-	updatedAt?: string | null;
-	token?: string | null;
-}
-
-interface MembersTableProps {
-	data: MemberRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onRowClick?: (member: MemberRow) => void;
-	onSortChange?: (
-		sorter: SorterResult<MemberRow> | SorterResult<MemberRow>[],
-	) => void;
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name?: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="member-name-email-cell">
-			{name && (
-				<span className="member-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="member-tooltip">
-				<span className="member-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
-	if (status === MemberStatus.Active) {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="amber" variant="outline">
-			INVITED
-		</Badge>
-	);
-}
-
-function MembersEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="members-empty-state">
-			<span
-				className="members-empty-state__emoji"
-				role="img"
-				aria-label="monocle face"
-			>
-				🧐
-			</span>
-			{searchQuery ? (
-				<p className="members-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="members-empty-state__text">No members found</p>
-			)}
-		</div>
-	);
-}
-
-function MembersTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onRowClick,
-	onSortChange,
-}: MembersTableProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatJoinedOn = (date: string | null): string => {
-		if (!date) {
-			return '—';
-		}
-		const d = new Date(date);
-		if (Number.isNaN(d.getTime())) {
-			return '—';
-		}
-		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
-	};
-
-	const columns: ColumnsType<MemberRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			sorter: (a, b): number => a.email.localeCompare(b.email),
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			sorter: (a, b): number => a.role.localeCompare(b.role),
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{capitalize(role)}</Badge>
-			),
-		},
-
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 100,
-			align: 'right' as const,
-			className: 'member-status-cell',
-			sorter: (a, b): number => a.status.localeCompare(b.status),
-			render: (status: MemberRow['status']): JSX.Element => (
-				<StatusBadge status={status} />
-			),
-		},
-		{
-			title: 'Joined On',
-			dataIndex: 'joinedOn',
-			key: 'joinedOn',
-			width: 250,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				if (!a.joinedOn && !b.joinedOn) {
-					return 0;
-				}
-				if (!a.joinedOn) {
-					return 1;
-				}
-				if (!b.joinedOn) {
-					return -1;
-				}
-				return new Date(a.joinedOn).getTime() - new Date(b.joinedOn).getTime();
-			},
-			render: (joinedOn: string | null): JSX.Element => {
-				const formatted = formatJoinedOn(joinedOn);
-				const isDash = formatted === '—';
-				return (
-					<span className={isDash ? 'member-joined-dash' : 'member-joined-date'}>
-						{formatted}
-					</span>
-				);
-			},
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="members-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="members-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="members-table-wrapper">
-			<Table<MemberRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'members-table-row--tinted' : ''
-				}
-				onRow={(record): React.HTMLAttributes<HTMLElement> => ({
-					onClick: (): void => onRowClick?.(record),
-					style: onRowClick ? { cursor: 'pointer' } : undefined,
-				})}
-				onChange={(_, __, sorter): void => {
-					if (onSortChange) {
-						onSortChange(
-							sorter as SorterResult<MemberRow> | SorterResult<MemberRow>[],
-						);
-					}
-				}}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <MembersEmptyState searchQuery={searchQuery} />,
-				}}
-				className="members-table"
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="members-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default MembersTable;

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

@@ -1,143 +0,0 @@
-import { MemberStatus } from 'container/MembersSettings/utils';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { ROLES } from 'types/roles';
-
-import MembersTable, { MemberRow } from '../MembersTable';
-
-const mockActiveMembers: MemberRow[] = [
-	{
-		id: 'user-1',
-		name: 'Alice Smith',
-		email: 'alice@signoz.io',
-		role: 'ADMIN' as ROLES,
-		status: MemberStatus.Active,
-		joinedOn: '1700000000000',
-	},
-	{
-		id: 'user-2',
-		name: 'Bob Jones',
-		email: 'bob@signoz.io',
-		role: 'VIEWER' as ROLES,
-		status: MemberStatus.Active,
-		joinedOn: null,
-	},
-];
-
-const mockInvitedMember: MemberRow = {
-	id: 'invite-abc',
-	name: '',
-	email: 'charlie@signoz.io',
-	role: 'EDITOR' as ROLES,
-	status: MemberStatus.Invited,
-	joinedOn: null,
-	token: 'tok-123',
-};
-
-const defaultProps = {
-	loading: false,
-	total: 2,
-	currentPage: 1,
-	pageSize: 20,
-	searchQuery: '',
-	onPageChange: jest.fn(),
-	onRowClick: jest.fn(),
-};
-
-describe('MembersTable', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders member rows with name, email, role badge, and ACTIVE status', () => {
-		render(<MembersTable {...defaultProps} data={mockActiveMembers} />);
-
-		expect(screen.getByText('Alice Smith')).toBeInTheDocument();
-		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Admin')).toBeInTheDocument();
-		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
-	});
-
-	it('renders INVITED badge for pending invite members', () => {
-		render(
-			<MembersTable
-				{...defaultProps}
-				data={[...mockActiveMembers, mockInvitedMember]}
-				total={3}
-			/>,
-		);
-
-		expect(screen.getByText('INVITED')).toBeInTheDocument();
-		expect(screen.getByText('charlie@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Editor')).toBeInTheDocument();
-	});
-
-	it('calls onRowClick with the member data when a row is clicked', async () => {
-		const onRowClick = jest.fn() as jest.MockedFunction<
-			(member: MemberRow) => void
-		>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<MembersTable
-				{...defaultProps}
-				data={mockActiveMembers}
-				onRowClick={onRowClick}
-			/>,
-		);
-
-		await user.click(screen.getByText('Alice Smith'));
-
-		expect(onRowClick).toHaveBeenCalledTimes(1);
-		expect(onRowClick).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'user-1', email: 'alice@signoz.io' }),
-		);
-	});
-
-	it('shows "No members found" empty state when no data and no search query', () => {
-		render(<MembersTable {...defaultProps} data={[]} total={0} searchQuery="" />);
-
-		expect(screen.getByText('No members found')).toBeInTheDocument();
-	});
-
-	it('shows "No results for X" when no data and a search query is set', () => {
-		render(
-			<MembersTable {...defaultProps} data={[]} total={0} searchQuery="unknown" />,
-		);
-
-		expect(screen.getByText(/No results for/i)).toBeInTheDocument();
-		expect(screen.getByText('unknown')).toBeInTheDocument();
-	});
-
-	it('hides pagination when total does not exceed pageSize', () => {
-		const { container } = render(
-			<MembersTable
-				{...defaultProps}
-				data={mockActiveMembers}
-				total={2}
-				pageSize={20}
-			/>,
-		);
-
-		expect(
-			container.querySelector('.members-table-pagination'),
-		).not.toBeInTheDocument();
-	});
-
-	it('shows pagination when total exceeds pageSize', () => {
-		const { container } = render(
-			<MembersTable
-				{...defaultProps}
-				data={mockActiveMembers}
-				total={25}
-				pageSize={20}
-			/>,
-		);
-
-		expect(
-			container.querySelector('.members-table-pagination'),
-		).toBeInTheDocument();
-		expect(
-			container.querySelector('.members-pagination-total'),
-		).toBeInTheDocument();
-	});
-});

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

@@ -14,7 +14,6 @@ import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import HavingFilter from './HavingFilter/HavingFilter';
-import { buildDefaultLegendFromGroupBy } from './utils';
 
 import './QueryAddOns.styles.scss';
 
@@ -251,33 +250,12 @@ function QueryAddOns({
 	}, [panelType, isListViewPanel, query, showReduceTo]);
 
 	const handleOptionClick = (e: RadioChangeEvent): void => {
-		const clickedAddOn = e.target.value as AddOn;
-		const isAlreadySelected = selectedViews.some(
-			(view) => view.key === clickedAddOn.key,
-		);
-
-		if (isAlreadySelected) {
-			setSelectedViews((prev) =>
-				prev.filter((view) => view.key !== clickedAddOn.key),
+		if (selectedViews.find((view) => view.key === e.target.value.key)) {
+			setSelectedViews(
+				selectedViews.filter((view) => view.key !== e.target.value.key),
 			);
 		} else {
-			// When enabling Legend format for the first time with an empty legend
-			// and existing group-by keys, prefill the legend using all group-by keys.
-			// This keeps existing custom legends intact and only helps seed a sensible default.
-			if (
-				clickedAddOn.key === ADD_ONS_KEYS.LEGEND_FORMAT &&
-				isEmpty(query?.legend) &&
-				Array.isArray(query.groupBy) &&
-				query.groupBy.length > 0
-			) {
-				const defaultLegend = buildDefaultLegendFromGroupBy(query.groupBy);
-
-				if (defaultLegend) {
-					handleChangeQueryLegend(defaultLegend);
-				}
-			}
-
-			setSelectedViews((prev) => [...prev, clickedAddOn]);
+			setSelectedViews([...selectedViews, e.target.value]);
 		}
 	};
 
@@ -310,9 +288,12 @@ function QueryAddOns({
 		[handleSetQueryData, index, query],
 	);
 
-	const handleRemoveView = useCallback((key: string): void => {
-		setSelectedViews((prev) => prev.filter((view) => view.key !== key));
-	}, []);
+	const handleRemoveView = useCallback(
+		(key: string): void => {
+			setSelectedViews(selectedViews.filter((view) => view.key !== key));
+		},
+		[selectedViews],
+	);
 
 	const handleChangeQueryLegend = useCallback(
 		(value: string) => {
@@ -398,8 +379,8 @@ function QueryAddOns({
 								<div className="input">
 									<HavingFilter
 										onClose={(): void => {
-											setSelectedViews((prev) =>
-												prev.filter((view) => view.key !== 'having'),
+											setSelectedViews(
+												selectedViews.filter((view) => view.key !== 'having'),
 											);
 										}}
 										onChange={handleChangeHaving}
@@ -418,9 +399,7 @@ function QueryAddOns({
 								initialValue={query?.limit ?? undefined}
 								placeholder="Enter limit"
 								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'limit'),
-									);
+									setSelectedViews(selectedViews.filter((view) => view.key !== 'limit'));
 								}}
 								closeIcon={<ChevronUp size={16} />}
 							/>
@@ -503,8 +482,8 @@ function QueryAddOns({
 								onChange={handleChangeQueryLegend}
 								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
 								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'legend_format'),
+									setSelectedViews(
+										selectedViews.filter((view) => view.key !== 'legend_format'),
 									);
 								}}
 								closeIcon={<ChevronUp size={16} />}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/utils.ts

@@ -1,16 +0,0 @@
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-export const buildDefaultLegendFromGroupBy = (
-	groupBy: IBuilderQuery['groupBy'],
-): string | null => {
-	const segments = groupBy
-		.map((item) => item?.key)
-		.filter((key): key is string => Boolean(key))
-		.map((key) => `${key} = {{${key}}}`);
-
-	if (segments.length === 0) {
-		return null;
-	}
-
-	return segments.join(', ');
-};

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

@@ -272,7 +272,6 @@ function QuerySearch({
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
 			});
-
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
@@ -432,6 +431,7 @@ function QuerySearch({
 			}
 
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
+			const existingQuery = queryData.filter?.expression || '';
 
 			try {
 				const response = await getValueSuggestions({
@@ -440,9 +440,9 @@ function QuerySearch({
 					signal: dataSource,
 					signalSource: signalSource as 'meter' | '',
 					metricName: debouncedMetricName ?? undefined,
-				});
+					existingQuery,
+				}); // Skip updates if component unmounted or key changed
 
-				// Skip updates if component unmounted or key changed
 				if (
 					!isMountedRef.current ||
 					lastKeyRef.current !== key ||
@@ -454,7 +454,9 @@ function QuerySearch({
 				// Process the response data
 				const responseData = response.data as any;
 				const values = responseData.data?.values || {};
-				const stringValues = values.stringValues || [];
+				const relatedValues = values.relatedValues || [];
+				const stringValues =
+					relatedValues.length > 0 ? relatedValues : values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
 				// Generate options from string values - explicitly handle empty strings
@@ -529,11 +531,12 @@ function QuerySearch({
 		},
 		[
 			activeKey,
-			dataSource,
 			isLoadingSuggestions,
-			debouncedMetricName,
-			signalSource,
+			queryData.filter?.expression,
 			toggleSuggestions,
+			dataSource,
+			signalSource,
+			debouncedMetricName,
 		],
 	);
 
@@ -1240,19 +1243,17 @@ function QuerySearch({
 		if (!queryContext) {
 			return;
 		}
-		// Trigger suggestions based on context
-		if (editorRef.current) {
+		// Only trigger suggestions and fetch if editor is focused (i.e., user is interacting)
+		if (isFocused && editorRef.current) {
 			toggleSuggestions(10);
-		}
-
-		// Handle value suggestions for value context
-		if (queryContext.isInValue) {
-			const { keyToken, currentToken } = queryContext;
-			const key = keyToken || currentToken;
-
-			// Only fetch if needed and if we have a valid key
-			if (key && key !== activeKey && !isLoadingSuggestions) {
-				fetchValueSuggestions({ key });
+			// Handle value suggestions for value context
+			if (queryContext.isInValue) {
+				const { keyToken, currentToken } = queryContext;
+				const key = keyToken || currentToken;
+				// Only fetch if needed and if we have a valid key
+				if (key && key !== activeKey && !isLoadingSuggestions) {
+					fetchValueSuggestions({ key });
+				}
 			}
 		}
 	}, [
@@ -1261,6 +1262,7 @@ function QuerySearch({
 		isLoadingSuggestions,
 		activeKey,
 		fetchValueSuggestions,
+		isFocused,
 	]);
 
 	const getTooltipContent = (): JSX.Element => (

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -275,59 +275,4 @@ describe('QueryAddOns', () => {
 			});
 		});
 	});
-
-	it('auto-generates legend from all groupBy keys when enabling Legend format with empty legend', async () => {
-		const user = userEvent.setup();
-		const query = baseQuery({
-			groupBy: [{ key: 'service.name' }, { key: 'operation' }],
-		});
-
-		render(
-			<QueryAddOns
-				query={query}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		const legendTab = screen.getByTestId('query-add-on-legend_format');
-		await user.click(legendTab);
-
-		expect(mockHandleChangeQueryData).toHaveBeenCalledWith(
-			'legend',
-			'service.name = {{service.name}}, operation = {{operation}}',
-		);
-	});
-
-	it('does not override existing legend when enabling Legend format', async () => {
-		const user = userEvent.setup();
-		const query = baseQuery({
-			legend: 'existing legend',
-			groupBy: [{ key: 'service.name' }],
-		});
-
-		render(
-			<QueryAddOns
-				query={query}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		const legendTab = screen.getByTestId('query-add-on-legend_format');
-		await user.click(legendTab);
-
-		expect(mockHandleChangeQueryData).not.toHaveBeenCalledWith(
-			'legend',
-			expect.anything(),
-		);
-	});
 });

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

@@ -48,7 +48,12 @@
 		.filter-separator {
 			height: 1px;
 			background-color: var(--bg-slate-400);
-			margin: 4px 0;
+			margin: 7px 0;
+
+			&.related-separator {
+				opacity: 0.5;
+				margin: 0.5px 0;
+			}
 		}
 
 		.value {
@@ -138,6 +143,93 @@
 			cursor: pointer;
 		}
 	}
+
+	.search-prompt {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 10px 12px;
+		margin-top: 4px;
+		border: 1px dashed var(--bg-amber-500);
+		border-radius: 10px;
+		color: var(--bg-amber-200);
+		background: linear-gradient(
+			90deg,
+			var(--bg-ink-500) 0%,
+			var(--bg-ink-400) 100%
+		);
+		cursor: pointer;
+		transition: all 0.16s ease, transform 0.12s ease;
+		text-align: left;
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+
+		&:hover {
+			background: linear-gradient(
+				90deg,
+				var(--bg-ink-400) 0%,
+				var(--bg-ink-300) 100%
+			);
+			box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
+		}
+
+		&:active {
+			transform: translateY(1px);
+		}
+
+		&__icon {
+			color: var(--bg-amber-400);
+			flex-shrink: 0;
+		}
+
+		&__text {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		&__title {
+			color: var(--bg-amber-200);
+		}
+
+		&__subtitle {
+			color: var(--bg-amber-300);
+			font-size: 12px;
+		}
+	}
+	.lightMode & {
+		.search-prompt {
+			border: 1px dashed var(--bg-amber-500);
+			color: var(--bg-amber-800);
+			background: linear-gradient(
+				90deg,
+				var(--bg-vanilla-200) 0%,
+				var(--bg-vanilla-100) 100%
+			);
+			box-shadow: 0 2px 12px rgba(184, 107, 0, 0.08);
+
+			&:hover {
+				background: linear-gradient(
+					90deg,
+					var(--bg-vanilla-100) 0%,
+					var(--bg-vanilla-50) 100%
+				);
+				box-shadow: 0 4px 16px rgba(184, 107, 0, 0.15);
+			}
+
+			&__icon {
+				color: var(--bg-amber-600);
+			}
+
+			&__title {
+				color: var(--bg-amber-800);
+			}
+
+			&__subtitle {
+				color: var(--bg-amber-800);
+			}
+		}
+	}
 	.go-to-docs {
 		display: flex;
 		flex-direction: column;

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

@@ -150,7 +150,8 @@ describe('CheckboxFilter - User Flows', () => {
 		// User should see the filter is automatically opened (not collapsed)
 		expect(screen.getByText('Service Name')).toBeInTheDocument();
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			// eslint-disable-next-line sonarjs/no-duplicate-string
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 
 		// User should see visual separator between checked and unchecked items
@@ -184,7 +185,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// Initially auto-opened due to active filters
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 
 		// User manually closes the filter
@@ -192,7 +193,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now closed (respecting user preference)
 		expect(
-			screen.queryByPlaceholderText('Filter values'),
+			screen.queryByPlaceholderText('Search values'),
 		).not.toBeInTheDocument();
 
 		// User manually opens the filter again
@@ -200,7 +201,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now open (respecting user preference)
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 	});
 

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

@@ -1,6 +1,15 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {
+	Fragment,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { Button, Checkbox, Input, InputRef, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -8,19 +17,14 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import {
-	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
@@ -57,6 +61,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	// null = no user action, true = user opened, false = user closed
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
+	const [visibleUncheckedCount, setVisibleUncheckedCount] = useState<number>(5);
 
 	const {
 		lastUsedQuery,
@@ -78,6 +83,12 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		return lastUsedQuery || 0;
 	}, [isListView, source, lastUsedQuery]);
 
+	// Extract current filter expression for the active query
+	const currentFilterExpression = useMemo(() => {
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		return queryData?.filter?.expression || '';
+	}, [currentQuery.builder.queryData, activeQueryIndex]);
+
 	// Check if this filter has active filters in the query
 	const isSomeFilterPresentForCurrentAttribute = useMemo(
 		() =>
@@ -109,54 +120,125 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		filter.defaultOpen,
 	]);
 
-	const { data, isLoading } = useGetAggregateValues(
-		{
-			aggregateOperator: filter.aggregateOperator || 'noop',
-			dataSource: filter.dataSource || DataSource.LOGS,
-			aggregateAttribute: filter.aggregateAttribute || '',
-			attributeKey: filter.attributeKey.key,
-			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
-			tagType: filter.attributeKey.type || '',
-			searchText: searchText ?? '',
-		},
-		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	);
-
 	const {
 		data: keyValueSuggestions,
 		isLoading: isLoadingKeyValueSuggestions,
+		refetch: refetchKeyValueSuggestions,
 	} = useGetQueryKeyValueSuggestions({
 		key: filter.attributeKey.key,
 		signal: filter.dataSource || DataSource.LOGS,
 		signalSource: 'meter',
+		searchText: searchText || '',
+		existingQuery: currentFilterExpression,
 		options: {
-			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+			enabled: isOpen,
 			keepPreviousData: true,
 		},
 	});
 
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
+	const searchInputRef = useRef<InputRef | null>(null);
+	const searchContainerRef = useRef<HTMLDivElement | null>(null);
+	const previousFiltersItemsRef = useRef(
+		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items,
+	);
 
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
+	// Refetch when other filters change (not this filter)
+	// Watch for when filters.items is different from previous value, indicating other filters changed
+	useEffect(() => {
+		const currentFiltersItems =
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
+
+		const previousFiltersItems = previousFiltersItemsRef.current;
+
+		// Check if filters items have changed (not the same)
+		const filtersChanged = !isEqual(previousFiltersItems, currentFiltersItems);
+
+		if (isOpen && filtersChanged) {
+			// Check if OTHER filters (not this filter) have changed
+			const currentOtherFilters = currentFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+			const previousOtherFilters = previousFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+
+			// Refetch if other filters changed (not just this filter's values)
+			const otherFiltersChanged = !isEqual(
+				currentOtherFilters,
+				previousOtherFilters,
+			);
+
+			// Only update ref if we have valid API data or if filters actually changed
+			// Don't update if search returned 0 results to preserve unchecked values
+			const hasValidData = keyValueSuggestions && !isLoadingKeyValueSuggestions;
+			if (otherFiltersChanged || hasValidData) {
+				previousFiltersItemsRef.current = currentFiltersItems;
+			}
+
+			if (otherFiltersChanged) {
+				refetchKeyValueSuggestions();
+			}
+		} else {
+			previousFiltersItemsRef.current = currentFiltersItems;
+		}
+	}, [
+		activeQueryIndex,
+		isOpen,
+		refetchKeyValueSuggestions,
+		filter.attributeKey.key,
+		currentQuery.builder.queryData,
+		keyValueSuggestions,
+		isLoadingKeyValueSuggestions,
+	]);
+
+	const handleSearchPromptClick = useCallback((): void => {
+		if (searchContainerRef.current) {
+			searchContainerRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+		}
+		if (searchInputRef.current) {
+			setTimeout(() => searchInputRef.current?.focus({ cursor: 'end' }), 120);
+		}
+	}, []);
+
+	const isDataComplete = useMemo(() => {
+		if (keyValueSuggestions) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const responseData = keyValueSuggestions?.data as any;
+			return responseData.data?.complete || false;
+		}
+		return false;
+	}, [keyValueSuggestions]);
+
+	const previousUncheckedValuesRef = useRef<string[]>([]);
+
+	const { attributeValues, relatedValuesSet } = useMemo(() => {
+		if (keyValueSuggestions) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const responseData = keyValueSuggestions?.data as any;
 			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
+			const relatedValues: string[] = values.relatedValues || [];
+			const stringValues: string[] = values.stringValues || [];
+			const numberValues: number[] = values.numberValues || [];
 
-			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
-				// Strict filtering for empty string - we'll handle it as a special case if needed
-				.filter(
-					(value: string | null | undefined): value is string =>
-						value !== null && value !== undefined && value !== '',
-				);
+			const valuesToUse = [
+				...relatedValues,
+				...stringValues.filter(
+					(value: string | null | undefined) =>
+						value !== null &&
+						value !== undefined &&
+						value !== '' &&
+						!relatedValues.includes(value),
+				),
+			];
+
+			const stringOptions = valuesToUse.filter(
+				(value: string | null | undefined): value is string =>
+					value !== null && value !== undefined && value !== '',
+			);
 
-			// Generate options from number values
 			const numberOptions = numberValues
 				.filter(
 					(value: number | null | undefined): value is number =>
@@ -164,15 +246,27 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				)
 				.map((value: number) => value.toString());
 
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
+			const filteredRelated = new Set(
+				relatedValues.filter(
+					(v): v is string => v !== null && v !== undefined && v !== '',
+				),
+			);
 
-		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter(
-			(val) => val !== undefined && val !== null,
-		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
+			const baseValues = [...stringOptions, ...numberOptions];
+			const previousUnchecked = previousUncheckedValuesRef.current || [];
+			const preservedUnchecked = previousUnchecked.filter(
+				(value) => !baseValues.includes(value),
+			);
+			return {
+				attributeValues: [...baseValues, ...preservedUnchecked],
+				relatedValuesSet: filteredRelated,
+			};
+		}
+		return {
+			attributeValues: [] as string[],
+			relatedValuesSet: new Set<string>(),
+		};
+	}, [keyValueSuggestions]);
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
@@ -246,22 +340,51 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;
 
-	// Sort checked items to the top, then unchecked items
-	const currentAttributeKeys = useMemo(() => {
+	// Sort checked items to the top; always show unchecked items beneath, regardless of pagination
+	const {
+		visibleCheckedValues,
+		uncheckedValues,
+		visibleUncheckedValues,
+		visibleCheckedCount,
+		hasMoreChecked,
+		hasMoreUnchecked,
+		checkedSeparatorIndex,
+	} = useMemo(() => {
 		const checkedValues = attributeValues.filter(
 			(val) => currentFilterState[val],
 		);
-		const uncheckedValues = attributeValues.filter(
-			(val) => !currentFilterState[val],
-		);
-		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
-	}, [attributeValues, currentFilterState, visibleItemsCount]);
+		const unchecked = attributeValues.filter((val) => !currentFilterState[val]);
+		const visibleChecked = checkedValues.slice(0, visibleItemsCount);
+		const visibleUnchecked = unchecked.slice(0, visibleUncheckedCount);
 
-	// Count of checked values in the currently visible items
-	const checkedValuesCount = useMemo(
-		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
-		[currentAttributeKeys, currentFilterState],
-	);
+		const findSeparatorIndex = (list: string[]): number => {
+			if (relatedValuesSet.size === 0) {
+				return -1;
+			}
+			const firstNonRelated = list.findIndex((v) => !relatedValuesSet.has(v));
+			return firstNonRelated > 0 ? firstNonRelated : -1;
+		};
+
+		return {
+			visibleCheckedValues: visibleChecked,
+			uncheckedValues: unchecked,
+			visibleUncheckedValues: visibleUnchecked,
+			visibleCheckedCount: visibleChecked.length,
+			hasMoreChecked: checkedValues.length > visibleChecked.length,
+			hasMoreUnchecked: unchecked.length > visibleUnchecked.length,
+			checkedSeparatorIndex: findSeparatorIndex(visibleChecked),
+		};
+	}, [
+		attributeValues,
+		currentFilterState,
+		visibleItemsCount,
+		visibleUncheckedCount,
+		relatedValuesSet,
+	]);
+
+	useEffect(() => {
+		previousUncheckedValuesRef.current = uncheckedValues;
+	}, [uncheckedValues]);
 
 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
@@ -302,6 +425,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		isOnlyOrAllClicked: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
+		setVisibleUncheckedCount(5);
 		const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
 
 		// if only or all are clicked we do not need to worry about anything just override whatever we have
@@ -562,6 +686,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					if (isOpen) {
 						setUserToggleState(false);
 						setVisibleItemsCount(10);
+						setVisibleUncheckedCount(5);
 					} else {
 						setUserToggleState(true);
 					}
@@ -590,35 +715,93 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen &&
-				(isLoading || isLoadingKeyValueSuggestions) &&
-				!attributeValues.length && (
-					<section className="loading">
-						<Skeleton paragraph={{ rows: 4 }} />
-					</section>
-				)}
-			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
+			{isOpen && isLoadingKeyValueSuggestions && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
-						<section className="search">
+						<section className="search" ref={searchContainerRef}>
 							<Input
-								placeholder="Filter values"
+								placeholder="Search values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
+								ref={searchInputRef}
 							/>
 						</section>
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{currentAttributeKeys.map((value: string, index: number) => (
+							{visibleCheckedValues.map((value: string, index: number) => (
 								<Fragment key={value}>
-									{index === checkedValuesCount && checkedValuesCount > 0 && (
-										<div
-											key="separator"
-											className="filter-separator"
-											data-testid="filter-separator"
-										/>
+									{index === checkedSeparatorIndex && (
+										<div className="filter-separator related-separator" />
 									)}
+									<div className="value">
+										<Checkbox
+											onChange={(e): void => onChange(value, e.target.checked, false)}
+											checked={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											rootClassName="check-box"
+										/>
+
+										<div
+											className={cx(
+												'checkbox-value-section',
+												isFilterDisabled ? 'filter-disabled' : '',
+											)}
+											onClick={(): void => {
+												if (isFilterDisabled) {
+													return;
+												}
+												onChange(value, currentFilterState[value], true);
+											}}
+										>
+											<div className={`${filter.title} label-${value}`} />
+											{filter.customRendererForValue ? (
+												filter.customRendererForValue(value)
+											) : (
+												<Typography.Text
+													className="value-string"
+													ellipsis={{ tooltip: { placement: 'top' } }}
+												>
+													{String(value)}
+												</Typography.Text>
+											)}
+											<Button type="text" className="only-btn">
+												{isSomeFilterPresentForCurrentAttribute
+													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+														? 'All'
+														: 'Only'
+													: 'Only'}
+											</Button>
+											<Button type="text" className="toggle-btn">
+												Toggle
+											</Button>
+										</div>
+									</div>
+								</Fragment>
+							))}
+
+							{hasMoreChecked && (
+								<section className="show-more">
+									<Typography.Text
+										className="show-more-text"
+										onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+									>
+										Show More...
+									</Typography.Text>
+								</section>
+							)}
+
+							{visibleCheckedCount > 0 && uncheckedValues.length > 0 && (
+								<div className="filter-separator" data-testid="filter-separator" />
+							)}
+
+							{visibleUncheckedValues.map((value: string) => (
+								<Fragment key={value}>
 									<div className="value">
 										<Checkbox
 											onChange={(e): void => onChange(value, e.target.checked, false)}
@@ -670,6 +853,17 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									</div>
 								</Fragment>
 							))}
+
+							{hasMoreUnchecked && (
+								<section className="show-more">
+									<Typography.Text
+										className="show-more-text"
+										onClick={(): void => setVisibleUncheckedCount((prev) => prev + 5)}
+									>
+										Show More...
+									</Typography.Text>
+								</section>
+							)}
 						</section>
 					) : isEmptyStateWithDocsEnabled ? (
 						<LogsQuickFilterEmptyState attributeKey={filter.attributeKey.key} />
@@ -678,16 +872,18 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							<Typography.Text>No values found</Typography.Text>{' '}
 						</section>
 					)}
-					{visibleItemsCount < attributeValues?.length && (
-						<section className="show-more">
-							<Typography.Text
-								className="show-more-text"
-								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
-							>
-								Show More...
-							</Typography.Text>
-						</section>
-					)}
+					{visibleItemsCount >= attributeValues?.length &&
+						attributeValues?.length > 0 &&
+						!isDataComplete && (
+							<section className="search-prompt" onClick={handleSearchPromptClick}>
+								<AlertTriangle size={16} className="search-prompt__icon" />
+								<span className="search-prompt__text">
+									<Typography.Text className="search-prompt__subtitle">
+										Tap to search and load more suggestions.
+									</Typography.Text>
+								</span>
+							</section>
+						)}
 				</>
 			)}
 		</div>

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

@@ -127,6 +127,34 @@
 		align-items: center;
 		padding: 8px;
 	}
+
+	.filters-info {
+		display: flex;
+		align-items: center;
+		padding: 6px 10px 0 10px;
+		color: var(--bg-vanilla-400);
+		gap: 6px;
+		flex-wrap: wrap;
+
+		.filters-info-toggle {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			padding: 0;
+			height: auto;
+			color: var(--bg-vanilla-400);
+
+			&:hover {
+				color: var(--bg-robin-500);
+			}
+		}
+
+		.filters-info-text {
+			color: var(--bg-vanilla-400);
+			font-size: 13px;
+			line-height: 16px;
+		}
+	}
 }
 
 .perilin-bg {
@@ -180,5 +208,30 @@
 				}
 			}
 		}
+
+		.filters-info {
+			color: var(--bg-ink-400);
+
+			.filters-info-toggle {
+				color: var(--bg-ink-400);
+
+				&:hover {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.filters-info-text {
+				color: var(--bg-ink-400);
+			}
+		}
 	}
 }
+
+.filters-info-tooltip-title {
+	font-weight: var(--font-weight-bold);
+	margin-bottom: 4px;
+}
+
+.filters-info-tooltip-detail {
+	margin-top: 4px;
+}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -23,7 +23,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { isFunction, isNull } from 'lodash-es';
-import { Frown, Settings2 as SettingsIcon } from 'lucide-react';
+import { Frown, Lightbulb, Settings2 as SettingsIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
@@ -291,6 +291,27 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 					/>
 				</div>
 			)}
+			<section className="filters-info">
+				<Tooltip
+					title={
+						<div className="filters-info-tooltip">
+							<div className="filters-info-tooltip-title">Adaptive Filters</div>
+							<div>Values update automatically as you apply filters.</div>
+							<div className="filters-info-tooltip-detail">
+								The most relevant values are shown first, followed by all other
+								available options.
+							</div>
+						</div>
+					}
+					placement="right"
+					mouseEnterDelay={0.3}
+				>
+					<Typography.Text className="filters-info-toggle">
+						<Lightbulb size={15} />
+						Adaptive filters
+					</Typography.Text>
+				</Tooltip>
+			</section>
 			<section className="filters">
 				{filterConfig.map((filter) => {
 					switch (filter.type) {

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -4,6 +4,7 @@ import {
 	useApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import {
 	otherFiltersResponse,
 	quickFiltersAttributeValuesResponse,
@@ -24,6 +25,8 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));
 jest.mock('container/ApiMonitoring/queryParams');
 
+jest.mock('hooks/querySuggestions/useGetQueryKeyValueSuggestions');
+
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
@@ -32,13 +35,15 @@ const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
 >;
 const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
+const mockUseGetQueryKeyValueSuggestions = jest.mocked(
+	useGetQueryKeyValueSuggestions,
+);
+
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
 const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
 const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
-const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
-const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
 const FILTER_OS_DESCRIPTION = 'os.description';
 const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
@@ -62,10 +67,7 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
-		),
-		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+		rest.get('*/api/v1/fields/values*', (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -135,18 +137,28 @@ beforeEach(() => {
 				queryData: [
 					{
 						queryName: QUERY_NAME,
-						filters: { items: [{ key: 'test', value: 'value' }] },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
 					},
 				],
 			},
 		},
 		lastUsedQuery: 0,
+		panelType: 'logs',
 		redirectWithQueryBuilderData,
 	});
 	mockUseApiMonitoringParams.mockReturnValue([
 		{ showIP: true } as ApiMonitoringParams,
 		mockSetApiMonitoringParams,
 	]);
+
+	// Mock the hook to return data with mq-kafka
+	mockUseGetQueryKeyValueSuggestions.mockReturnValue({
+		data: quickFiltersAttributeValuesResponse,
+		isLoading: false,
+		refetch: jest.fn(),
+	} as any);
+
 	setupServer();
 });
 
@@ -259,8 +271,9 @@ describe('Quick Filters', () => {
 
 		render(<TestQuickFilters />);
 
-		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
-		const target = await screen.findByText('mq-kafka');
+		// Wait for the filter to load with data
+		const target = await screen.findByText('mq-kafka', {}, { timeout: 5000 });
+
 		await user.click(target);
 
 		await waitFor(() => {

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -14,6 +14,8 @@ import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 import ResizableHeader from './ResizableHeader';
 import { DragSpanStyle } from './styles';
@@ -24,26 +26,31 @@ function ResizeTable({
 	columns,
 	onDragColumn,
 	pagination,
-	columnWidths,
-	onColumnWidthsChange,
+	widgetId,
+	shouldPersistColumnWidths = false,
 	...restProps
 }: ResizeTableProps): JSX.Element {
 	const [columnsData, setColumns] = useState<ColumnsType>([]);
-	const onColumnWidthsChangeRef = useRef(onColumnWidthsChange);
+	const { setColumnWidths, selectedDashboard } = useDashboard();
+
+	const columnWidths = shouldPersistColumnWidths
+		? (selectedDashboard?.data?.widgets?.find(
+				(widget) => widget.id === widgetId,
+		  ) as Widgets)?.columnWidths
+		: undefined;
 
 	const updateAllColumnWidths = useRef(
 		debounce((widthsConfig: Record<string, number>) => {
-			if (!onColumnWidthsChangeRef.current) {
+			if (!widgetId || !shouldPersistColumnWidths) {
 				return;
 			}
-			onColumnWidthsChangeRef.current(widthsConfig);
+			setColumnWidths?.((prev) => ({
+				...prev,
+				[widgetId]: widthsConfig,
+			}));
 		}, 1000),
 	).current;
 
-	useEffect(() => {
-		onColumnWidthsChangeRef.current = onColumnWidthsChange;
-	}, [onColumnWidthsChange]);
-
 	const handleResize = useCallback(
 		(index: number) => (
 			e: SyntheticEvent<Element>,
@@ -68,7 +75,7 @@ function ResizeTable({
 				...col,
 				...(onDragColumn && {
 					title: (
-						<DragSpanStyle className="dragHandler" data-testid="drag-column-title">
+						<DragSpanStyle className="dragHandler">
 							{col?.title?.toString() || ''}
 						</DragSpanStyle>
 					),
@@ -99,31 +106,31 @@ function ResizeTable({
 	}, [mergedColumns, pagination, restProps]);
 
 	useEffect(() => {
-		if (!columns) {
-			return;
-		}
-
-		const columnsWithStoredWidths = columns.map((col) => {
-			const dataIndex = (col as RowData).dataIndex as string;
-			if (dataIndex && columnWidths) {
-				const width = getColumnWidth(dataIndex, columnWidths);
-				if (width) {
-					return { ...col, width };
+		if (columns) {
+			// Apply stored column widths from widget configuration
+			const columnsWithStoredWidths = columns.map((col) => {
+				const dataIndex = (col as RowData).dataIndex as string;
+				if (dataIndex && columnWidths) {
+					const width = getColumnWidth(dataIndex, columnWidths);
+					if (width) {
+						return {
+							...col,
+							width, // Apply stored width
+						};
+					}
 				}
-			}
-			return col;
-		});
+				return col;
+			});
 
-		setColumns(columnsWithStoredWidths);
+			setColumns(columnsWithStoredWidths);
+		}
 	}, [columns, columnWidths]);
 
-	const lastReportedWidthsRef = useRef<Record<string, number>>({});
-
 	useEffect(() => {
-		if (!onColumnWidthsChange) {
+		if (!shouldPersistColumnWidths) {
 			return;
 		}
-
+		// Collect all column widths in a single object
 		const newColumnWidths: Record<string, number> = {};
 
 		mergedColumns.forEach((col) => {
@@ -133,20 +140,11 @@ function ResizeTable({
 			}
 		});
 
-		if (Object.keys(newColumnWidths).length === 0) {
-			return;
-		}
-
-		const last = lastReportedWidthsRef.current;
-		const hasChange =
-			Object.keys(newColumnWidths).length !== Object.keys(last).length ||
-			Object.keys(newColumnWidths).some((k) => newColumnWidths[k] !== last[k]);
-
-		if (hasChange) {
-			lastReportedWidthsRef.current = newColumnWidths;
+		// Only update if there are actual widths to set
+		if (Object.keys(newColumnWidths).length > 0) {
 			updateAllColumnWidths(newColumnWidths);
 		}
-	}, [mergedColumns, updateAllColumnWidths, onColumnWidthsChange]);
+	}, [mergedColumns, updateAllColumnWidths, shouldPersistColumnWidths]);
 
 	return onDragColumn ? (
 		<ReactDragListView.DragColumn {...dragColumnParams} onDragEnd={onDragColumn}>

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

@@ -1,244 +0,0 @@
-import { act } from '@testing-library/react';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import ResizeTable from '../ResizeTable';
-
-jest.mock('react-resizable', () => ({
-	Resizable: ({
-		children,
-		onResize,
-		width,
-	}: {
-		children: React.ReactNode;
-		onResize: (
-			e: React.SyntheticEvent,
-			data: { size: { width: number } },
-		) => void;
-		width: number;
-	}): JSX.Element => (
-		<div>
-			{children}
-			<button
-				data-testid="resize-trigger"
-				type="button"
-				onClick={(e): void => onResize(e, { size: { width: width + 50 } })}
-			/>
-		</div>
-	),
-}));
-
-// Make debounce synchronous so onColumnWidthsChange fires immediately
-jest.mock('lodash-es', () => ({
-	...jest.requireActual('lodash-es'),
-	debounce: (fn: (...args: any[]) => any): ((...args: any[]) => any) => fn,
-}));
-
-const baseColumns = [
-	{ dataIndex: 'name', title: 'Name', width: 100 },
-	{ dataIndex: 'value', title: 'Value', width: 100 },
-];
-
-const baseDataSource = [
-	{ key: '1', name: 'Alice', value: 42 },
-	{ key: '2', name: 'Bob', value: 99 },
-];
-
-describe('ResizeTable', () => {
-	it('renders column headers and data rows', () => {
-		render(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-			/>,
-		);
-
-		expect(screen.getByText('Name')).toBeInTheDocument();
-		expect(screen.getByText('Value')).toBeInTheDocument();
-		expect(screen.getByText('Alice')).toBeInTheDocument();
-		expect(screen.getByText('Bob')).toBeInTheDocument();
-	});
-
-	it('overrides column widths from columnWidths prop and reports them via onColumnWidthsChange', () => {
-		const onColumnWidthsChange = jest.fn();
-
-		act(() => {
-			render(
-				<ResizeTable
-					columns={baseColumns}
-					dataSource={baseDataSource}
-					rowKey="key"
-					columnWidths={{ name: 250, value: 180 }}
-					onColumnWidthsChange={onColumnWidthsChange}
-				/>,
-			);
-		});
-
-		expect(onColumnWidthsChange).toHaveBeenCalledWith(
-			expect.objectContaining({ name: 250, value: 180 }),
-		);
-	});
-
-	it('reports original column widths via onColumnWidthsChange when columnWidths prop is not provided', () => {
-		const onColumnWidthsChange = jest.fn();
-
-		act(() => {
-			render(
-				<ResizeTable
-					columns={baseColumns}
-					dataSource={baseDataSource}
-					rowKey="key"
-					onColumnWidthsChange={onColumnWidthsChange}
-				/>,
-			);
-		});
-
-		expect(onColumnWidthsChange).toHaveBeenCalledWith(
-			expect.objectContaining({ name: 100, value: 100 }),
-		);
-	});
-
-	it('does not call onColumnWidthsChange when it is not provided', () => {
-		// Should render without errors and without attempting to call an undefined callback
-		expect(() => {
-			render(
-				<ResizeTable
-					columns={baseColumns}
-					dataSource={baseDataSource}
-					rowKey="key"
-				/>,
-			);
-		}).not.toThrow();
-	});
-
-	it('only overrides the column that has a stored width, leaving others at their original width', () => {
-		const onColumnWidthsChange = jest.fn();
-
-		act(() => {
-			render(
-				<ResizeTable
-					columns={baseColumns}
-					dataSource={baseDataSource}
-					rowKey="key"
-					columnWidths={{ name: 250 }}
-					onColumnWidthsChange={onColumnWidthsChange}
-				/>,
-			);
-		});
-
-		expect(onColumnWidthsChange).toHaveBeenCalledWith(
-			expect.objectContaining({ name: 250, value: 100 }),
-		);
-	});
-
-	it('does not call onColumnWidthsChange on re-render when widths have not changed', () => {
-		const onColumnWidthsChange = jest.fn();
-
-		const { rerender } = render(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onColumnWidthsChange={onColumnWidthsChange}
-			/>,
-		);
-
-		expect(onColumnWidthsChange).toHaveBeenCalledTimes(1);
-		onColumnWidthsChange.mockClear();
-
-		rerender(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onColumnWidthsChange={onColumnWidthsChange}
-			/>,
-		);
-
-		expect(onColumnWidthsChange).not.toHaveBeenCalled();
-	});
-
-	it('does not call onColumnWidthsChange when no column has a defined width', () => {
-		const onColumnWidthsChange = jest.fn();
-
-		render(
-			<ResizeTable
-				columns={[
-					{ dataIndex: 'name', title: 'Name' },
-					{ dataIndex: 'value', title: 'Value' },
-				]}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onColumnWidthsChange={onColumnWidthsChange}
-			/>,
-		);
-
-		expect(onColumnWidthsChange).not.toHaveBeenCalled();
-	});
-
-	it('calls onColumnWidthsChange with the new width after a column is resized', async () => {
-		const user = userEvent.setup();
-		const onColumnWidthsChange = jest.fn();
-
-		render(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onColumnWidthsChange={onColumnWidthsChange}
-			/>,
-		);
-
-		onColumnWidthsChange.mockClear();
-
-		// Click the first column's resize trigger — mock adds 50px to the current width (100 → 150)
-		const [firstResizeTrigger] = screen.getAllByTestId('resize-trigger');
-		await user.click(firstResizeTrigger);
-
-		expect(onColumnWidthsChange).toHaveBeenCalledWith(
-			expect.objectContaining({ name: 150, value: 100 }),
-		);
-	});
-
-	it('does not affect other columns when only one column is resized', async () => {
-		const user = userEvent.setup();
-		const onColumnWidthsChange = jest.fn();
-
-		render(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onColumnWidthsChange={onColumnWidthsChange}
-			/>,
-		);
-
-		onColumnWidthsChange.mockClear();
-
-		// Resize only the second column (value: 100 → 150), name should stay at 100
-		const resizeTriggers = screen.getAllByTestId('resize-trigger');
-		await user.click(resizeTriggers[1]);
-
-		expect(onColumnWidthsChange).toHaveBeenCalledWith(
-			expect.objectContaining({ name: 100, value: 150 }),
-		);
-	});
-
-	it('wraps column titles in drag handler spans when onDragColumn is provided', () => {
-		const onDragColumn = jest.fn();
-
-		render(
-			<ResizeTable
-				columns={baseColumns}
-				dataSource={baseDataSource}
-				rowKey="key"
-				onDragColumn={onDragColumn}
-			/>,
-		);
-
-		const dragTitles = screen.getAllByTestId('drag-column-title');
-		expect(dragTitles).toHaveLength(baseColumns.length);
-		expect(dragTitles[0]).toHaveTextContent('Name');
-		expect(dragTitles[1]).toHaveTextContent('Value');
-	});
-});

frontend/src/components/ResizeTable/types.ts

@@ -6,25 +6,10 @@ import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatS
 
 import { TableDataSource } from './contants';
 
-type ColumnWidths = Record<string, number>;
-
 export interface ResizeTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
-	/**
-	 * Pre-resolved column widths for this table, keyed by column dataIndex.
-	 * Use this to apply persisted widths on mount (e.g. from widget.columnWidths).
-	 * Do NOT pass a value that updates reactively on every resize — that creates a
-	 * feedback loop. Pass only stable / persisted values.
-	 */
-	columnWidths?: ColumnWidths;
-	/**
-	 * Called (debounced) whenever the user finishes resizing a column.
-	 * The widths object contains all current column widths keyed by dataIndex.
-	 * Intended for persisting widths to an external store (e.g. dashboard context
-	 * staging buffer). The caller owns the storage; ResizeTable does not read back
-	 * whatever is written here.
-	 */
-	onColumnWidthsChange?: (widths: ColumnWidths) => void;
+	widgetId?: string;
+	shouldPersistColumnWidths?: boolean;
 }
 export interface DynamicColumnTableProps extends TableProps<any> {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];

frontend/src/constants/routes.ts

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

frontend/src/container/AppLayout/index.tsx

@@ -249,7 +249,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 
 		return (): void => {
-			clearTimeout(timer);
+			clearInterval(timer);
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -674,7 +674,7 @@ function GeneralSettings({
 	return (
 		<div className="general-settings-page">
 			<div className="general-settings-header">
-				<span className="general-settings-title">Workspace</span>
+				<span className="general-settings-title">General</span>
 				<span className="general-settings-subtitle">
 					Manage your workspace settings.
 				</span>

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

@@ -81,18 +81,7 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const {
-		selectedDashboard,
-		isDashboardLocked,
-		setColumnWidths,
-	} = useDashboard();
-
-	const onColumnWidthsChange = useCallback(
-		(widths: Record<string, number>) => {
-			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
-		},
-		[setColumnWidths, widget.id],
-	);
+	const { selectedDashboard, isDashboardLocked } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
 	const { user } = useAppContext();
 
@@ -392,7 +381,6 @@ function FullView({
 								onClickHandler={onClickHandler}
 								enableDrillDown={enableDrillDown}
 								selectedGraph={selectedPanelType}
-								onColumnWidthsChange={onColumnWidthsChange}
 							/>
 						</GraphContainer>
 					</div>

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -168,9 +168,6 @@ jest.mock('providers/Dashboard/Dashboard', () => ({
 				variables: [],
 			},
 		},
-		setLayouts: jest.fn(),
-		setSelectedDashboard: jest.fn(),
-		setColumnWidths: jest.fn(),
 	}),
 }));
 

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

@@ -101,19 +101,7 @@ function WidgetGraphComponent({
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 
-	const {
-		setLayouts,
-		selectedDashboard,
-		setSelectedDashboard,
-		setColumnWidths,
-	} = useDashboard();
-
-	const onColumnWidthsChange = useCallback(
-		(widths: Record<string, number>) => {
-			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
-		},
-		[setColumnWidths, widget.id],
-	);
+	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
 
 	const onToggleModal = useCallback(
 		(func: Dispatch<SetStateAction<boolean>>) => {
@@ -436,7 +424,6 @@ function WidgetGraphComponent({
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
 						enableDrillDown={enableDrillDown}
-						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</div>
 			)}

frontend/src/container/GridTableComponent/index.tsx

@@ -45,8 +45,6 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
-	columnWidths,
-	onColumnWidthsChange,
 	panelType,
 	queryRangeRequest,
 	decimalPrecision,
@@ -286,8 +284,6 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
-				columnWidths={columnWidths}
-				onColumnWidthsChange={onColumnWidthsChange}
 				panelType={panelType}
 				queryRangeRequest={queryRangeRequest}
 				onRow={

frontend/src/container/GridTableComponent/types.ts

@@ -24,8 +24,6 @@ export type GridTableComponentProps = {
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	customOnRowClick?: (record: RowData) => void;
 	widgetId?: string;
-	columnWidths?: Record<string, number>;
-	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
 	enableDrillDown?: boolean;

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -33,7 +33,6 @@ function LogsPanelComponent({
 	widget,
 	setRequestData,
 	queryResponse,
-	onColumnWidthsChange,
 }: LogsPanelComponentProps): JSX.Element {
 	const [pageSize, setPageSize] = useState<number>(10);
 	const [offset, setOffset] = useState<number>(0);
@@ -146,8 +145,8 @@ function LogsPanelComponent({
 							columns={columns}
 							onRow={handleRow}
 							rowKey={(record): string => record.id}
-							columnWidths={widget.columnWidths}
-							onColumnWidthsChange={onColumnWidthsChange}
+							widgetId={widget.id}
+							shouldPersistColumnWidths
 						/>
 					</OverlayScrollbar>
 				</div>
@@ -190,7 +189,6 @@ export type LogsPanelComponentProps = {
 		Error
 	>;
 	widget: Widgets;
-	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default LogsPanelComponent;

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

@@ -1,120 +0,0 @@
-.members-settings {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
-	height: 100%;
-
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__title {
-		font-size: var(--label-large-500-font-size);
-		font-weight: var(--label-large-500-font-weight);
-		color: var(--text-base-white);
-		letter-spacing: -0.09px;
-		line-height: var(--line-height-normal);
-		margin: 0;
-	}
-
-	&__subtitle {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		letter-spacing: -0.07px;
-		line-height: var(--paragraph-base-400-line-height);
-		margin: 0;
-	}
-
-	&__controls {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__search {
-		flex: 1;
-		min-width: 0;
-	}
-}
-
-.members-filter-trigger {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	border: 1px solid var(--border);
-	border-radius: 2px;
-	background-color: var(--l2-background);
-
-	> span {
-		color: var(--foreground);
-	}
-
-	&__chevron {
-		flex-shrink: 0;
-		color: var(--foreground);
-	}
-}
-
-.members-filter-dropdown {
-	.ant-dropdown-menu {
-		padding: var(--padding-3) 14px;
-		border-radius: 4px;
-		border: 1px solid var(--border);
-		background: var(--l2-background);
-		backdrop-filter: blur(20px);
-	}
-
-	.ant-dropdown-menu-item {
-		background: transparent !important;
-		padding: var(--padding-1) 0 !important;
-
-		&:hover {
-			background: transparent !important;
-		}
-	}
-}
-
-.members-filter-option {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	color: var(--foreground);
-	letter-spacing: 0.14px;
-	min-width: 170px;
-
-	&:hover {
-		color: var(--card-foreground);
-		background: transparent;
-	}
-}
-
-.members-search-input {
-	height: 32px;
-	color: var(--l1-foreground);
-	background-color: var(--l2-background);
-	border-color: var(--border);
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.lightMode {
-	.members-settings {
-		&__title {
-			color: var(--text-base-black);
-		}
-	}
-
-	.members-filter-option {
-		&:hover {
-			color: var(--bg-neutral-light-100);
-		}
-	}
-}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,262 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useHistory } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { Check, ChevronDown, Plus } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
-import getPendingInvites from 'api/v1/invite/get';
-import getAll from 'api/v1/user/get';
-import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
-import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
-import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useAppContext } from 'providers/App/App';
-
-import { FilterMode, INVITE_PREFIX, MemberStatus } from './utils';
-
-import './MembersSettings.styles.scss';
-
-const PAGE_SIZE = 20;
-
-function MembersSettings(): JSX.Element {
-	const { org } = useAppContext();
-	const history = useHistory();
-	const urlQuery = useUrlQuery();
-
-	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
-	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
-
-	// TODO(nuqs): Replace with nuqs once the nuqs setup and integration is done - for search
-	const [searchQuery, setSearchQuery] = useState('');
-	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
-	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
-	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
-
-	const {
-		data: usersData,
-		isLoading: isUsersLoading,
-		refetch: refetchUsers,
-	} = useQuery({
-		queryFn: getAll,
-		queryKey: ['getOrgUser', org?.[0]?.id],
-	});
-
-	const {
-		data: invitesData,
-		isLoading: isInvitesLoading,
-		refetch: refetchInvites,
-	} = useQuery({
-		queryFn: getPendingInvites,
-		queryKey: ['getPendingInvites'],
-	});
-
-	const isLoading = isUsersLoading || isInvitesLoading;
-
-	const allMembers = useMemo((): MemberRow[] => {
-		const activeMembers: MemberRow[] = (usersData?.data ?? []).map((user) => ({
-			id: user.id,
-			name: user.displayName,
-			email: user.email,
-			role: user.role,
-			status: MemberStatus.Active,
-			joinedOn: user.createdAt ? String(user.createdAt) : null,
-			updatedAt: user?.updatedAt ? String(user.updatedAt) : null,
-		}));
-
-		const pendingInvites: MemberRow[] = (invitesData?.data ?? []).map(
-			(invite) => ({
-				id: `${INVITE_PREFIX}${invite.id}`,
-				name: invite.name ?? '',
-				email: invite.email,
-				role: invite.role,
-				status: MemberStatus.Invited,
-				joinedOn: invite.createdAt ? String(invite.createdAt) : null,
-				token: invite.token ?? null,
-			}),
-		);
-
-		return [...activeMembers, ...pendingInvites];
-	}, [usersData, invitesData]);
-
-	const filteredMembers = useMemo((): MemberRow[] => {
-		let result = allMembers;
-
-		if (filterMode === FilterMode.Invited) {
-			result = result.filter((m) => m.status === MemberStatus.Invited);
-		}
-
-		if (searchQuery.trim()) {
-			const q = searchQuery.toLowerCase();
-			result = result.filter(
-				(m) =>
-					m?.name?.toLowerCase().includes(q) ||
-					m.email.toLowerCase().includes(q) ||
-					m.role.toLowerCase().includes(q),
-			);
-		}
-
-		return result;
-	}, [allMembers, filterMode, searchQuery]);
-
-	const paginatedMembers = useMemo((): MemberRow[] => {
-		const start = (currentPage - 1) * PAGE_SIZE;
-		return filteredMembers.slice(start, start + PAGE_SIZE);
-	}, [filteredMembers, currentPage]);
-
-	// TODO(nuqs): Replace with nuqs once the nuqs setup and integration is done
-	const setPage = useCallback(
-		(page: number): void => {
-			urlQuery.set('page', String(page));
-			history.replace({ search: urlQuery.toString() });
-		},
-		[history, urlQuery],
-	);
-
-	useEffect(() => {
-		if (filteredMembers.length === 0) {
-			return;
-		}
-		const maxPage = Math.ceil(filteredMembers.length / PAGE_SIZE);
-		if (currentPage > maxPage) {
-			setPage(maxPage);
-		}
-	}, [filteredMembers.length, currentPage, setPage]);
-
-	const pendingCount = invitesData?.data?.length ?? 0;
-	const totalCount = allMembers.length;
-
-	const filterMenuItems: MenuProps['items'] = [
-		{
-			key: FilterMode.All,
-			label: (
-				<div className="members-filter-option">
-					<span>All members ⎯ {totalCount}</span>
-					{filterMode === FilterMode.All && <Check size={14} />}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode(FilterMode.All);
-				setPage(1);
-			},
-		},
-		{
-			key: FilterMode.Invited,
-			label: (
-				<div className="members-filter-option">
-					<span>Pending invites ⎯ {pendingCount}</span>
-					{filterMode === FilterMode.Invited && <Check size={14} />}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode(FilterMode.Invited);
-				setPage(1);
-			},
-		},
-	];
-
-	const filterLabel =
-		filterMode === FilterMode.All
-			? `All members ⎯ ${totalCount}`
-			: `Pending invites ⎯ ${pendingCount}`;
-
-	const handleInviteComplete = useCallback((): void => {
-		refetchUsers();
-		refetchInvites();
-	}, [refetchUsers, refetchInvites]);
-
-	const handleRowClick = useCallback((member: MemberRow): void => {
-		setSelectedMember(member);
-	}, []);
-
-	const handleDrawerClose = useCallback((): void => {
-		setSelectedMember(null);
-	}, []);
-
-	const handleMemberEditComplete = useCallback((): void => {
-		refetchUsers();
-		refetchInvites();
-		setSelectedMember(null);
-	}, [refetchUsers, refetchInvites]);
-
-	return (
-		<>
-			<div className="members-settings">
-				<div className="members-settings__header">
-					<h1 className="members-settings__title">Members</h1>
-					<p className="members-settings__subtitle">
-						Overview of people added to this workspace.
-					</p>
-				</div>
-
-				<div className="members-settings__controls">
-					<Dropdown
-						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="members-filter-dropdown"
-					>
-						<Button
-							variant="solid"
-							size="sm"
-							color="secondary"
-							className="members-filter-trigger"
-						>
-							<span>{filterLabel}</span>
-							<ChevronDown size={12} className="members-filter-trigger__chevron" />
-						</Button>
-					</Dropdown>
-
-					<div className="members-settings__search">
-						<Input
-							placeholder="Search by name, email, or role..."
-							value={searchQuery}
-							onChange={(e): void => {
-								setSearchQuery(e.target.value);
-								setPage(1);
-							}}
-							className="members-search-input"
-							color="secondary"
-						/>
-					</div>
-
-					<Button
-						variant="solid"
-						size="sm"
-						color="primary"
-						onClick={(): void => setIsInviteModalOpen(true)}
-					>
-						<Plus size={12} />
-						Invite member
-					</Button>
-				</div>
-			</div>
-			<MembersTable
-				data={paginatedMembers}
-				loading={isLoading}
-				total={filteredMembers.length}
-				currentPage={currentPage}
-				pageSize={PAGE_SIZE}
-				searchQuery={searchQuery}
-				onPageChange={setPage}
-				onRowClick={handleRowClick}
-			/>
-
-			<InviteMembersModal
-				open={isInviteModalOpen}
-				onClose={(): void => setIsInviteModalOpen(false)}
-				onComplete={handleInviteComplete}
-			/>
-
-			<EditMemberDrawer
-				member={selectedMember}
-				open={selectedMember !== null}
-				onClose={handleDrawerClose}
-				onComplete={handleMemberEditComplete}
-				onRefetch={handleInviteComplete}
-			/>
-		</>
-	);
-}
-
-export default MembersSettings;

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

@@ -1,131 +0,0 @@
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { PendingInvite } from 'types/api/user/getPendingInvites';
-import { UserResponse } from 'types/api/user/getUser';
-
-import MembersSettings from '../MembersSettings';
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const USERS_ENDPOINT = '*/api/v1/user';
-const INVITES_ENDPOINT = '*/api/v1/invite';
-
-const mockUsers: UserResponse[] = [
-	{
-		id: 'user-1',
-		displayName: 'Alice Smith',
-		email: 'alice@signoz.io',
-		role: 'ADMIN',
-		createdAt: 1700000000,
-		organization: 'TestOrg',
-		orgId: 'org-1',
-	},
-	{
-		id: 'user-2',
-		displayName: 'Bob Jones',
-		email: 'bob@signoz.io',
-		role: 'VIEWER',
-		createdAt: 1700000001,
-		organization: 'TestOrg',
-		orgId: 'org-1',
-	},
-];
-
-const mockInvites: PendingInvite[] = [
-	{
-		id: 'inv-1',
-		email: 'charlie@signoz.io',
-		name: 'Charlie',
-		role: 'EDITOR',
-		createdAt: 1700000002,
-		token: 'tok-abc',
-	},
-];
-
-describe('MembersSettings (integration)', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			rest.get(USERS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: mockUsers })),
-			),
-			rest.get(INVITES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: mockInvites })),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('loads and displays active users and pending invites', async () => {
-		render(<MembersSettings />);
-
-		await screen.findByText('Alice Smith');
-		expect(screen.getByText('Bob Jones')).toBeInTheDocument();
-		expect(screen.getByText('charlie@signoz.io')).toBeInTheDocument();
-		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
-		expect(screen.getByText('INVITED')).toBeInTheDocument();
-	});
-
-	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<MembersSettings />);
-
-		await screen.findByText('Alice Smith');
-
-		await user.click(screen.getByRole('button', { name: /all members/i }));
-
-		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
-
-		await screen.findByText('charlie@signoz.io');
-		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
-	});
-
-	it('filters members by name using the search input', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<MembersSettings />);
-
-		await screen.findByText('Alice Smith');
-
-		await user.type(
-			screen.getByPlaceholderText(/Search by name, email, or role/i),
-			'bob',
-		);
-
-		await screen.findByText('Bob Jones');
-		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
-		expect(screen.queryByText('charlie@signoz.io')).not.toBeInTheDocument();
-	});
-
-	it('opens EditMemberDrawer when a member row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<MembersSettings />);
-
-		await user.click(await screen.findByText('Alice Smith'));
-
-		await screen.findByText('Member Details');
-	});
-
-	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<MembersSettings />);
-
-		await user.click(screen.getByRole('button', { name: /invite member/i }));
-
-		expect(await screen.findAllByPlaceholderText('john@signoz.io')).toHaveLength(
-			3,
-		);
-	});
-});

frontend/src/container/MembersSettings/utils.ts

@@ -1,11 +0,0 @@
-export const INVITE_PREFIX = 'invite-';
-
-export enum FilterMode {
-	All = 'all',
-	Invited = 'invited',
-}
-
-export enum MemberStatus {
-	Active = 'Active',
-	Invited = 'Invited',
-}

frontend/src/container/MySettings/index.tsx

@@ -161,7 +161,7 @@ function MySettings(): JSX.Element {
 		<div className="my-settings-container">
 			<div className="user-info-section">
 				<div className="user-info-section-header">
-					<div className="user-info-section-title">Account </div>
+					<div className="user-info-section-title">General </div>
 
 					<div className="user-info-section-subtitle">
 						Manage your account settings.

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -11,7 +11,7 @@ import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
 import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
-import { InviteMemberFormValues } from 'container/OrganizationSettings/utils';
+import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer';
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -12,7 +12,7 @@ import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { FeatureKeys } from 'constants/features';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
-import { InviteTeamMembersProps } from 'container/OrganizationSettings/utils';
+import { InviteTeamMembersProps } from 'container/OrganizationSettings/PendingInvitesContainer';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';

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

@@ -0,0 +1,32 @@
+import { gold } from '@ant-design/colors';
+import { ExclamationCircleTwoTone } from '@ant-design/icons';
+import { Space, Typography } from 'antd';
+
+function DeleteMembersDetails({
+	name,
+}: DeleteMembersDetailsProps): JSX.Element {
+	return (
+		<div>
+			<Space direction="horizontal" size="middle" align="start">
+				<ExclamationCircleTwoTone
+					twoToneColor={[gold[6], '#1f1f1f']}
+					style={{
+						fontSize: '1.4rem',
+					}}
+				/>
+				<Space direction="vertical">
+					<Typography>Are you sure you want to delete {name}</Typography>
+					<Typography>
+						This will remove all access from dashboards and other features in SigNoz
+					</Typography>
+				</Space>
+			</Space>
+		</div>
+	);
+}
+
+interface DeleteMembersDetailsProps {
+	name: string;
+}
+
+export default DeleteMembersDetails;

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

@@ -0,0 +1,167 @@
+import {
+	ChangeEventHandler,
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import { CopyOutlined } from '@ant-design/icons';
+import { Button, Input, Select, Space, Tooltip } from 'antd';
+import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
+import ROUTES from 'constants/routes';
+import { useNotifications } from 'hooks/useNotifications';
+import APIError from 'types/api/error';
+import { ROLES } from 'types/roles';
+
+import { InputGroup, SelectDrawer, Title } from './styles';
+
+const { Option } = Select;
+
+function EditMembersDetails({
+	emailAddress,
+	name,
+	role,
+	setEmailAddress,
+	setName,
+	setRole,
+	id,
+}: EditMembersDetailsProps): JSX.Element {
+	const [passwordLink, setPasswordLink] = useState<string>('');
+
+	const { t } = useTranslation(['common']);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [state, copyToClipboard] = useCopyToClipboard();
+
+	const getPasswordLink = (token: string): string =>
+		`${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`;
+
+	const onChangeHandler = useCallback(
+		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
+			setFunc(value);
+		},
+		[],
+	);
+
+	const { notifications } = useNotifications();
+
+	useEffect(() => {
+		if (state.error) {
+			notifications.error({
+				message: t('something_went_wrong'),
+			});
+		}
+
+		if (state.value) {
+			notifications.success({
+				message: t('success'),
+			});
+		}
+	}, [state.error, state.value, t, notifications]);
+
+	const onPasswordChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+		(event) => {
+			setPasswordLink(event.target.value);
+		},
+		[],
+	);
+
+	const onGeneratePasswordHandler = async (): Promise<void> => {
+		try {
+			setIsLoading(true);
+			const response = await getResetPasswordToken({
+				userId: id || '',
+			});
+			setPasswordLink(getPasswordLink(response.data.token));
+			setIsLoading(false);
+		} catch (error) {
+			setIsLoading(false);
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+		}
+	};
+
+	return (
+		<Space direction="vertical" size="large">
+			<Space direction="horizontal">
+				<Title>Email address</Title>
+				<Input
+					placeholder="john@signoz.io"
+					readOnly
+					onChange={(event): void =>
+						onChangeHandler(setEmailAddress, event.target.value)
+					}
+					disabled={isLoading}
+					value={emailAddress}
+				/>
+			</Space>
+			<Space direction="horizontal">
+				<Title>Name (optional)</Title>
+				<Input
+					placeholder="John"
+					onChange={(event): void => onChangeHandler(setName, event.target.value)}
+					value={name}
+					disabled={isLoading}
+				/>
+			</Space>
+			<Space direction="horizontal">
+				<Title>Role</Title>
+				<SelectDrawer
+					value={role}
+					onSelect={(value: unknown): void => {
+						if (typeof value === 'string') {
+							setRole(value as ROLES);
+						}
+					}}
+					disabled={isLoading}
+				>
+					<Option value="ADMIN">ADMIN</Option>
+					<Option value="VIEWER">VIEWER</Option>
+					<Option value="EDITOR">EDITOR</Option>
+				</SelectDrawer>
+			</Space>
+
+			<Button
+				loading={isLoading}
+				disabled={isLoading}
+				onClick={onGeneratePasswordHandler}
+				type="primary"
+			>
+				Generate Reset Password link
+			</Button>
+			{passwordLink && (
+				<InputGroup>
+					<Input
+						style={{ width: '100%' }}
+						defaultValue="git@github.com:ant-design/ant-design.git"
+						onChange={onPasswordChangeHandler}
+						value={passwordLink}
+						disabled={isLoading}
+					/>
+					<Tooltip title="COPY LINK">
+						<Button
+							icon={<CopyOutlined />}
+							onClick={(): void => copyToClipboard(passwordLink)}
+						/>
+					</Tooltip>
+				</InputGroup>
+			)}
+		</Space>
+	);
+}
+
+interface EditMembersDetailsProps {
+	emailAddress: string;
+	name: string;
+	role: ROLES;
+	setEmailAddress: Dispatch<SetStateAction<string>>;
+	setName: Dispatch<SetStateAction<string>>;
+	setRole: Dispatch<SetStateAction<ROLES>>;
+	id: string;
+}
+
+export default EditMembersDetails;

frontend/src/container/OrganizationSettings/EditMembersDetails/styles.ts

@@ -0,0 +1,16 @@
+import { Select, Typography } from 'antd';
+import styled from 'styled-components';
+
+export const SelectDrawer = styled(Select)`
+	width: 120px;
+`;
+
+export const Title = styled(Typography)`
+	width: 7rem;
+`;
+
+export const InputGroup = styled.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+`;

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

@@ -11,7 +11,7 @@ import {
 } from 'antd';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 
-import { InviteMemberFormValues } from '../utils';
+import { InviteMemberFormValues } from '../PendingInvitesContainer/index';
 import { SelectDrawer, SpaceContainer, TitleWrapper } from './styles';
 
 function InviteTeamMembers({ form, onFinish }: Props): JSX.Element {

frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx

@@ -6,7 +6,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
 
 import InviteTeamMembers from '../InviteTeamMembers';
-import { InviteMemberFormValues } from '../utils';
+import { InviteMemberFormValues } from '../PendingInvitesContainer';
 
 export interface InviteUserModalProps {
 	isInviteTeamMemberModalOpen: boolean;

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

@@ -0,0 +1,324 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import {
+	Button,
+	Modal,
+	Space,
+	TableColumnsType as ColumnsType,
+	Typography,
+} from 'antd';
+import getAll from 'api/v1/user/get';
+import deleteUser from 'api/v1/user/id/delete';
+import update from 'api/v1/user/id/update';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { ResizeTable } from 'components/ResizeTable';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { useNotifications } from 'hooks/useNotifications';
+import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { ROLES } from 'types/roles';
+
+import DeleteMembersDetails from '../DeleteMembersDetails';
+import EditMembersDetails from '../EditMembersDetails';
+
+function UserFunction({
+	setDataSource,
+	accessLevel,
+	name,
+	email,
+	id,
+}: UserFunctionProps): JSX.Element {
+	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+
+	const onModalToggleHandler = (
+		func: Dispatch<SetStateAction<boolean>>,
+		value: boolean,
+	): void => {
+		func(value);
+	};
+
+	const [emailAddress, setEmailAddress] = useState(email);
+	const [updatedName, setUpdatedName] = useState(name);
+	const [role, setRole] = useState<ROLES>(accessLevel);
+	const { t } = useTranslation(['common']);
+	const [isDeleteLoading, setIsDeleteLoading] = useState<boolean>(false);
+	const [isUpdateLoading, setIsUpdateLoading] = useState<boolean>(false);
+	const { notifications } = useNotifications();
+
+	const onUpdateDetailsHandler = (): void => {
+		setDataSource((data) => {
+			const index = data.findIndex((e) => e.id === id);
+			if (index !== -1) {
+				const current = data[index];
+
+				const updatedData: DataType[] = [
+					...data.slice(0, index),
+					{
+						...current,
+						name: updatedName,
+						accessLevel: role,
+						email: emailAddress,
+					},
+					...data.slice(index + 1, data.length),
+				];
+
+				return updatedData;
+			}
+			return data;
+		});
+	};
+
+	const onDelete = (): void => {
+		setDataSource((source) => {
+			const index = source.findIndex((e) => e.id === id);
+
+			if (index !== -1) {
+				const updatedData: DataType[] = [
+					...source.slice(0, index),
+					...source.slice(index + 1, source.length),
+				];
+
+				return updatedData;
+			}
+			return source;
+		});
+	};
+
+	const onDeleteHandler = async (): Promise<void> => {
+		try {
+			setIsDeleteLoading(true);
+			await deleteUser({
+				userId: id,
+			});
+			onDelete();
+			notifications.success({
+				message: t('success', {
+					ns: 'common',
+				}),
+			});
+			setIsDeleteModalVisible(false);
+			setIsDeleteLoading(false);
+		} catch (error) {
+			setIsDeleteLoading(false);
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+		}
+	};
+
+	const onEditMemberDetails = async (): Promise<void> => {
+		try {
+			setIsUpdateLoading(true);
+			await update({
+				userId: id,
+				displayName: updatedName,
+				role,
+			});
+			onUpdateDetailsHandler();
+
+			if (role !== accessLevel) {
+				notifications.success({
+					message: 'User details updated successfully',
+					description: 'The user details have been updated successfully.',
+				});
+			} else {
+				notifications.success({
+					message: t('success', {
+						ns: 'common',
+					}),
+				});
+			}
+
+			setIsUpdateLoading(false);
+			setIsModalVisible(false);
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			setIsUpdateLoading(false);
+		}
+	};
+
+	return (
+		<>
+			<Space direction="horizontal">
+				<Typography.Link
+					onClick={(): void => onModalToggleHandler(setIsModalVisible, true)}
+				>
+					Edit
+				</Typography.Link>
+				<Typography.Link
+					onClick={(): void => onModalToggleHandler(setIsDeleteModalVisible, true)}
+				>
+					Delete
+				</Typography.Link>
+			</Space>
+			<Modal
+				title="Edit member details"
+				className="edit-member-details-modal"
+				open={isModalVisible}
+				onOk={(): void => onModalToggleHandler(setIsModalVisible, false)}
+				onCancel={(): void => onModalToggleHandler(setIsModalVisible, false)}
+				centered
+				destroyOnClose
+				footer={[
+					<Button
+						key="back"
+						onClick={(): void => onModalToggleHandler(setIsModalVisible, false)}
+						type="default"
+					>
+						Cancel
+					</Button>,
+					<Button
+						key="Invite_team_members"
+						onClick={onEditMemberDetails}
+						type="primary"
+						disabled={isUpdateLoading}
+						loading={isUpdateLoading}
+					>
+						Update Details
+					</Button>,
+				]}
+			>
+				<EditMembersDetails
+					{...{
+						emailAddress,
+						name: updatedName,
+						role,
+						setEmailAddress,
+						setName: setUpdatedName,
+						setRole,
+						id,
+					}}
+				/>
+			</Modal>
+			<Modal
+				title="Edit member details"
+				open={isDeleteModalVisible}
+				onOk={onDeleteHandler}
+				onCancel={(): void => onModalToggleHandler(setIsDeleteModalVisible, false)}
+				centered
+				confirmLoading={isDeleteLoading}
+			>
+				<DeleteMembersDetails name={name} />
+			</Modal>
+		</>
+	);
+}
+
+function Members(): JSX.Element {
+	const { org } = useAppContext();
+
+	const { data, isLoading, error } = useQuery({
+		queryFn: () => getAll(),
+		queryKey: ['getOrgUser', org?.[0].id],
+	});
+
+	const [dataSource, setDataSource] = useState<DataType[]>([]);
+
+	useEffect(() => {
+		if (data?.data && Array.isArray(data.data)) {
+			const updatedData: DataType[] = data?.data?.map((e) => ({
+				accessLevel: e.role,
+				email: e.email,
+				id: String(e.id),
+				joinedOn: String(e.createdAt),
+				name: e.displayName,
+			}));
+			setDataSource(updatedData);
+		}
+	}, [data]);
+
+	const columns: ColumnsType<DataType> = [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			width: 100,
+		},
+		{
+			title: 'Emails',
+			dataIndex: 'email',
+			key: 'email',
+			width: 100,
+		},
+		{
+			title: 'Access Level',
+			dataIndex: 'accessLevel',
+			key: 'accessLevel',
+			width: 50,
+		},
+		{
+			title: 'Joined On',
+			dataIndex: 'joinedOn',
+			key: 'joinedOn',
+			width: 60,
+			render: (_, record): JSX.Element => {
+				const { joinedOn } = record;
+				return (
+					<Typography>
+						{dayjs(joinedOn).format(DATE_TIME_FORMATS.MONTH_DATE_FULL)}
+					</Typography>
+				);
+			},
+		},
+		{
+			title: 'Action',
+			dataIndex: 'action',
+			width: 80,
+			render: (_, record): JSX.Element => (
+				<UserFunction
+					{...{
+						accessLevel: record.accessLevel,
+						email: record.email,
+						joinedOn: record.joinedOn,
+						name: record.name,
+						id: record.id,
+						setDataSource,
+					}}
+				/>
+			),
+		},
+	];
+
+	return (
+		<div className="members-container">
+			<Typography.Title level={3}>
+				Members{' '}
+				{!isLoading && dataSource && (
+					<div className="members-count"> ({dataSource.length}) </div>
+				)}
+			</Typography.Title>
+			{!(error as APIError) && (
+				<ResizeTable
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={dataSource}
+					pagination={false}
+					loading={isLoading}
+					bordered
+				/>
+			)}
+			{(error as APIError) && <ErrorContent error={error as APIError} />}
+		</div>
+	);
+}
+
+interface DataType {
+	id: string;
+	name: string;
+	email: string;
+	accessLevel: ROLES;
+	joinedOn: string;
+}
+
+interface UserFunctionProps extends DataType {
+	setDataSource: Dispatch<SetStateAction<DataType[]>>;
+}
+
+export default Members;

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

@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+import { PlusOutlined } from '@ant-design/icons';
+import {
+	Button,
+	Form,
+	Space,
+	TableColumnsType as ColumnsType,
+	Typography,
+} from 'antd';
+import get from 'api/v1/invite/get';
+import deleteInvite from 'api/v1/invite/id/delete';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { ResizeTable } from 'components/ResizeTable';
+import { INVITE_MEMBERS_HASH } from 'constants/app';
+import ROUTES from 'constants/routes';
+import { useNotifications } from 'hooks/useNotifications';
+import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { PendingInvite } from 'types/api/user/getPendingInvites';
+import { ROLES } from 'types/roles';
+
+import InviteUserModal from '../InviteUserModal/InviteUserModal';
+import { TitleWrapper } from './styles';
+
+function PendingInvitesContainer(): JSX.Element {
+	const [
+		isInviteTeamMemberModalOpen,
+		setIsInviteTeamMemberModalOpen,
+	] = useState<boolean>(false);
+	const [form] = Form.useForm<InviteMemberFormValues>();
+	const { t } = useTranslation(['organizationsettings', 'common']);
+	const [state, setText] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+	const { user } = useAppContext();
+
+	useEffect(() => {
+		if (state.error) {
+			notifications.error({
+				message: state.error.message,
+			});
+		}
+
+		if (state.value) {
+			notifications.success({
+				message: t('success', {
+					ns: 'common',
+				}),
+			});
+		}
+	}, [state.error, state.value, t, notifications]);
+
+	const { data, isLoading, error, isError, refetch } = useQuery({
+		queryFn: get,
+		queryKey: ['getPendingInvites', user?.accessJwt],
+	});
+
+	const [dataSource, setDataSource] = useState<DataProps[]>([]);
+
+	const toggleModal = useCallback(
+		(value: boolean): void => {
+			setIsInviteTeamMemberModalOpen(value);
+			if (!value) {
+				form.resetFields();
+			}
+		},
+		[form],
+	);
+
+	const { hash } = useLocation();
+
+	const getParsedInviteData = useCallback(
+		(payload: PendingInvite[] = []) =>
+			payload?.map((data) => ({
+				key: data.createdAt,
+				name: data.name,
+				id: data.id,
+				email: data.email,
+				accessLevel: data.role,
+				inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
+			})),
+		[],
+	);
+
+	useEffect(() => {
+		if (hash === INVITE_MEMBERS_HASH) {
+			toggleModal(true);
+		}
+	}, [hash, toggleModal]);
+
+	useEffect(() => {
+		if (data?.data) {
+			const parsedData = getParsedInviteData(data?.data || []);
+			setDataSource(parsedData);
+		}
+	}, [data, getParsedInviteData]);
+
+	const onRevokeHandler = async (id: string): Promise<void> => {
+		try {
+			await deleteInvite({
+				id,
+			});
+			// remove from the client data
+			const index = dataSource.findIndex((e) => e.id === id);
+			if (index !== -1) {
+				setDataSource([
+					...dataSource.slice(0, index),
+					...dataSource.slice(index + 1, dataSource.length),
+				]);
+			}
+			notifications.success({
+				message: t('success', {
+					ns: 'common',
+				}),
+			});
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+		}
+	};
+
+	const columns: ColumnsType<DataProps> = [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			width: 100,
+		},
+		{
+			title: 'Emails',
+			dataIndex: 'email',
+			key: 'email',
+			width: 80,
+		},
+		{
+			title: 'Access Level',
+			dataIndex: 'accessLevel',
+			key: 'accessLevel',
+			width: 50,
+		},
+		{
+			title: 'Invite Link',
+			dataIndex: 'inviteLink',
+			key: 'Invite Link',
+			ellipsis: true,
+			width: 100,
+		},
+		{
+			title: 'Action',
+			dataIndex: 'action',
+			width: 80,
+			key: 'Action',
+			render: (_, record): JSX.Element => (
+				<Space direction="horizontal">
+					<Typography.Link onClick={(): Promise<void> => onRevokeHandler(record.id)}>
+						Revoke
+					</Typography.Link>
+					<Typography.Link
+						onClick={(): void => {
+							setText(record.inviteLink);
+						}}
+					>
+						Copy Invite Link
+					</Typography.Link>
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<div className="pending-invites-container-wrapper">
+			<InviteUserModal
+				form={form}
+				isInviteTeamMemberModalOpen={isInviteTeamMemberModalOpen}
+				toggleModal={toggleModal}
+				onClose={refetch}
+			/>
+
+			<div className="pending-invites-container">
+				<TitleWrapper>
+					<Typography.Title level={3}>
+						{t('pending_invites')}
+						{dataSource && (
+							<div className="members-count"> ({dataSource.length})</div>
+						)}
+					</Typography.Title>
+
+					<Space>
+						<Button
+							icon={<PlusOutlined />}
+							type="primary"
+							onClick={(): void => {
+								toggleModal(true);
+							}}
+						>
+							{t('invite_members')}
+						</Button>
+					</Space>
+				</TitleWrapper>
+				{!isError && (
+					<ResizeTable
+						columns={columns}
+						tableLayout="fixed"
+						dataSource={dataSource}
+						pagination={false}
+						loading={isLoading}
+						bordered
+					/>
+				)}
+				{isError && <ErrorContent error={error as APIError} />}
+			</div>
+		</div>
+	);
+}
+
+export interface InviteTeamMembersProps {
+	email: string;
+	name: string;
+	role: string;
+	id: string;
+	frontendBaseUrl: string;
+}
+
+interface DataProps {
+	key: number;
+	name: string;
+	id: string;
+	email: string;
+	accessLevel: ROLES;
+	inviteLink: string;
+}
+
+type Role = 'ADMIN' | 'VIEWER' | 'EDITOR';
+
+export interface InviteMemberFormValues {
+	members: {
+		email: string;
+		name: string;
+		role: Role;
+	}[];
+}
+
+export default PendingInvitesContainer;

frontend/src/container/OrganizationSettings/PendingInvitesContainer/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const TitleWrapper = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+`;

frontend/src/container/OrganizationSettings/index.tsx

@@ -3,6 +3,8 @@ import { useAppContext } from 'providers/App/App';
 
 import AuthDomain from './AuthDomain';
 import DisplayName from './DisplayName';
+import Members from './Members';
+import PendingInvitesContainer from './PendingInvitesContainer';
 
 import './OrganizationSettings.styles.scss';
 
@@ -21,6 +23,9 @@ function OrganizationSettings(): JSX.Element {
 				))}
 			</Space>
 
+			<PendingInvitesContainer />
+
+			<Members />
 			<AuthDomain />
 		</div>
 	);

frontend/src/container/OrganizationSettings/tests/OrganizationSettings.test.tsx

@@ -0,0 +1,37 @@
+import { act, render, screen, waitFor } from 'tests/test-utils';
+
+import Members from '../Members';
+
+describe('Organization Settings Page', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('render list of members', async () => {
+		act(() => {
+			render(<Members />);
+		});
+
+		const title = await screen.findByText(/Members/i);
+		expect(title).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByText('firstUser@test.io')).toBeInTheDocument(); // first item
+			expect(screen.getByText('lastUser@test.io')).toBeInTheDocument(); // last item
+		});
+	});
+
+	// this is required as our edit/delete logic is dependent on the index and it will break with pagination enabled
+	it('render list of members without pagination', async () => {
+		render(<Members />);
+
+		await waitFor(() => {
+			expect(screen.getByText('firstUser@test.io')).toBeInTheDocument(); // first item
+			expect(screen.getByText('lastUser@test.io')).toBeInTheDocument(); // last item
+
+			expect(
+				document.querySelector('.ant-table-pagination'),
+			).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/OrganizationSettings/utils.ts

@@ -1,17 +0,0 @@
-export interface InviteTeamMembersProps {
-	email: string;
-	name: string;
-	role: string;
-	id: string;
-	frontendBaseUrl: string;
-}
-
-type Role = 'ADMIN' | 'VIEWER' | 'EDITOR';
-
-export interface InviteMemberFormValues {
-	members: {
-		email: string;
-		name: string;
-		role: Role;
-	}[];
-}

frontend/src/container/PanelWrapper/ListPanelWrapper.tsx

@@ -8,7 +8,6 @@ function ListPanelWrapper({
 	widget,
 	queryResponse,
 	setRequestData,
-	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const dataSource = widget.query.builder?.queryData[0]?.dataSource;
 
@@ -22,7 +21,6 @@ function ListPanelWrapper({
 				widget={widget}
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
-				onColumnWidthsChange={onColumnWidthsChange}
 			/>
 		);
 	}
@@ -31,7 +29,6 @@ function ListPanelWrapper({
 			widget={widget}
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
-			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -24,7 +24,6 @@ function PanelWrapper({
 	customOnRowClick,
 	panelMode,
 	enableDrillDown = false,
-	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -59,7 +58,6 @@ function PanelWrapper({
 			customOnRowClick={customOnRowClick}
 			customSeries={customSeries}
 			enableDrillDown={enableDrillDown}
-			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -14,7 +14,6 @@ function TablePanelWrapper({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	enableDrillDown = false,
-	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -35,8 +34,6 @@ function TablePanelWrapper({
 			onOpenTraceBtnClick={onOpenTraceBtnClick}
 			customOnRowClick={customOnRowClick}
 			widgetId={widget.id}
-			columnWidths={widget.columnWidths}
-			onColumnWidthsChange={onColumnWidthsChange}
 			renderColumnCell={widget.renderColumnCell}
 			customColTitles={widget.customColTitles}
 			contextLinks={widget.contextLinks}

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -29,7 +29,6 @@ export type PanelWrapperProps = {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	enableDrillDown?: boolean;
 	panelMode: PanelMode;
-	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export type TooltipData = {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -33,8 +33,6 @@ import { ALL_TIME_ZONES } from 'utils/timeZoneUtil';
 
 import 'dayjs/locale/en';
 
-import { SOMETHING_WENT_WRONG } from '../../constants/api';
-import { showErrorNotification } from '../../utils/error';
 import { AlertRuleTags } from './PlannedDowntimeList';
 import {
 	createEditDowntimeSchedule,
@@ -177,14 +175,14 @@ export function PlannedDowntimeForm(
 				} else {
 					notifications.error({
 						message: 'Error',
-						description:
-							typeof response.error === 'string'
-								? response.error
-								: response.error?.message || SOMETHING_WENT_WRONG,
+						description: response.error || 'unexpected_error',
 					});
 				}
-			} catch (e: unknown) {
-				showErrorNotification(notifications, e as Error);
+			} catch (e) {
+				notifications.error({
+					message: 'Error',
+					description: 'unexpected_error',
+				});
 			}
 			setSaveLoading(false);
 		},

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -25,7 +25,6 @@ import { CalendarClock, PenLine, Trash2 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
-import { showErrorNotification } from '../../utils/error';
 import {
 	formatDateTime,
 	getAlertOptionsFromIds,
@@ -360,7 +359,7 @@ export function PlannedDowntimeList({
 
 	useEffect(() => {
 		if (downtimeSchedules.isError) {
-			showErrorNotification(notifications, downtimeSchedules.error);
+			notifications.error(downtimeSchedules.error);
 		}
 	}, [downtimeSchedules.error, downtimeSchedules.isError, notifications]);
 

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -137,10 +137,7 @@ export const deleteDowntimeHandler = ({
 
 export const createEditDowntimeSchedule = async (
 	props: DowntimeScheduleUpdatePayload,
-): Promise<
-	| SuccessResponse<PayloadProps>
-	| ErrorResponse<{ code: string; message: string } | string>
-> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	if (props.id) {
 		return updateDowntimeSchedule({ ...props });
 	}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -100,17 +100,6 @@ interface QueryBuilderSearchV2Props {
 	// Determines whether to call onChange when a tag is closed
 	triggerOnChangeOnClose?: boolean;
 	skipQueryBuilderRedirect?: boolean;
-	/** Additional props passed through to the underlying Ant Design Select (e.g. listHeight, listItemHeight) */
-	selectProps?: Partial<
-		Pick<
-			React.ComponentProps<typeof Select>,
-			| 'listHeight'
-			| 'listItemHeight'
-			| 'popupClassName'
-			| 'dropdownMatchSelectWidth'
-			| 'popupMatchSelectWidth'
-		>
-	>;
 }
 
 export interface Option {
@@ -153,7 +142,6 @@ function QueryBuilderSearchV2(
 		hideSpanScopeSelector,
 		triggerOnChangeOnClose,
 		skipQueryBuilderRedirect,
-		selectProps,
 	} = props;
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -984,7 +972,6 @@ function QueryBuilderSearchV2(
 	return (
 		<div className="query-builder-search-v2">
 			<Select
-				{...selectProps}
 				data-testid={'qb-search-select'}
 				ref={selectRef}
 				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}
@@ -1090,7 +1077,6 @@ QueryBuilderSearchV2.defaultProps = {
 	hideSpanScopeSelector: true,
 	triggerOnChangeOnClose: false,
 	skipQueryBuilderRedirect: false,
-	selectProps: undefined,
 };
 
 export default QueryBuilderSearchV2;

frontend/src/container/QueryTable/QueryTable.intefaces.ts

@@ -24,8 +24,6 @@ export type QueryTableProps = Omit<
 	sticky?: TableProps<RowData>['sticky'];
 	searchTerm?: string;
 	widgetId?: string;
-	columnWidths?: Record<string, number>;
-	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	enableDrillDown?: boolean;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;

frontend/src/container/QueryTable/QueryTable.tsx

@@ -28,8 +28,6 @@ export function QueryTable({
 	sticky,
 	searchTerm,
 	widgetId,
-	columnWidths,
-	onColumnWidthsChange,
 	panelType,
 	...props
 }: QueryTableProps): JSX.Element {
@@ -177,8 +175,8 @@ export function QueryTable({
 					dataSource={filterTable === null ? newDataSource : filterTable}
 					scroll={{ x: 'max-content' }}
 					pagination={paginationConfig}
-					columnWidths={columnWidths}
-					onColumnWidthsChange={onColumnWidthsChange}
+					widgetId={widgetId}
+					shouldPersistColumnWidths
 					sticky={sticky}
 					{...props}
 				/>

frontend/src/container/SideNav/SideNav.styles.scss

@@ -1057,20 +1057,21 @@
 		gap: 8px;
 
 		.user-settings-dropdown-label-text {
-			color: var(--l3-foreground);
+			color: var(--bg-slate-50, #62687c);
 			font-family: Inter;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
+			font-size: 10px;
+			font-family: Inter;
+			font-weight: 600;
 			font-style: normal;
-			line-height: 18px;
+			line-height: 18px; /* 163.636% */
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
 		}
 
 		.user-settings-dropdown-label-email {
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-400, #c0c1c3);
 			font-family: Inter;
-			font-size: var(--font-size-xs);
+			font-size: 12px;
 			font-style: normal;
 			line-height: normal;
 			letter-spacing: 0.14px;
@@ -1078,7 +1079,7 @@
 	}
 
 	.ant-dropdown-menu-item-divider {
-		background-color: var(--secondary) !important;
+		background-color: var(--bg-slate-500, #161922) !important;
 	}
 
 	.ant-dropdown-menu-item-disabled {
@@ -1094,14 +1095,6 @@
 .help-support-dropdown {
 	.ant-dropdown-menu-item {
 		min-height: 32px;
-
-		.ant-dropdown-menu-title-content {
-			color: var(--l1-foreground) !important;
-		}
-
-		.user-settings-dropdown-logout-section {
-			color: var(--danger-background);
-		}
 	}
 }
 
@@ -1278,7 +1271,7 @@
 }
 
 .help-support-dropdown li.ant-dropdown-menu-item-divider {
-	background-color: var(--secondary) !important;
+	background-color: var(--bg-slate-500, #161922) !important;
 }
 
 .lightMode {
@@ -1438,6 +1431,22 @@
 		}
 	}
 
+	.settings-dropdown {
+		.user-settings-dropdown-logged-in-section {
+			.user-settings-dropdown-label-text {
+				color: var(--bg-ink-400);
+			}
+
+			.user-settings-dropdown-label-email {
+				color: var(--bg-ink-300);
+			}
+		}
+
+		.ant-dropdown-menu-item-divider {
+			background-color: var(--bg-vanilla-300) !important;
+		}
+	}
+
 	.reorder-shortcut-nav-items-modal {
 		.ant-modal-content {
 			border: 1px solid var(--bg-vanilla-300);
@@ -1494,6 +1503,10 @@
 			color: var(--bg-ink-400);
 		}
 	}
+
+	.help-support-dropdown li.ant-dropdown-menu-item-divider {
+		background-color: var(--bg-vanilla-300) !important;
+	}
 }
 
 .version-tooltip-overlay {

frontend/src/container/SideNav/SideNav.tsx

@@ -69,7 +69,6 @@ import { routeConfig } from './config';
 import { getQueryString } from './helper';
 import {
 	defaultMoreMenuItems,
-	getUserSettingsDropdownMenuItems,
 	helpSupportDropdownMenuItems as DefaultHelpSupportDropdownMenuItems,
 	helpSupportMenuItem,
 	primaryMenuItems,
@@ -486,12 +485,48 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const userSettingsDropdownMenuItems: MenuProps['items'] = useMemo(
 		() =>
-			getUserSettingsDropdownMenuItems({
-				userEmail: user.email,
-				isWorkspaceBlocked,
-				isEnterpriseSelfHostedUser,
-				isCommunityEnterpriseUser,
-			}),
+			[
+				{
+					key: 'label',
+					label: (
+						<div className="user-settings-dropdown-logged-in-section">
+							<span className="user-settings-dropdown-label-text">LOGGED IN AS</span>
+							<span className="user-settings-dropdown-label-email">{user.email}</span>
+						</div>
+					),
+					disabled: true,
+					dataTestId: 'logged-in-as-nav-item',
+				},
+				{ type: 'divider' as const },
+				{
+					key: 'account',
+					label: 'Account Settings',
+					dataTestId: 'account-settings-nav-item',
+				},
+				{
+					key: 'workspace',
+					label: 'Workspace Settings',
+					disabled: isWorkspaceBlocked,
+					dataTestId: 'workspace-settings-nav-item',
+				},
+				...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
+					? [
+							{
+								key: 'license',
+								label: 'Manage License',
+								dataTestId: 'manage-license-nav-item',
+							},
+					  ]
+					: []),
+				{ type: 'divider' as const },
+				{
+					key: 'logout',
+					label: (
+						<span className="user-settings-dropdown-logout-section">Sign out</span>
+					),
+					dataTestId: 'logout-nav-item',
+				},
+			].filter(Boolean),
 		[
 			isEnterpriseSelfHostedUser,
 			isCommunityEnterpriseUser,
@@ -821,6 +856,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			});
 
 			switch (item.key) {
+				case ROUTES.SHORTCUTS:
+					history.push(ROUTES.SHORTCUTS);
+					break;
 				case 'invite-collaborators':
 					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
 					break;
@@ -840,7 +878,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	};
 
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
-		const item = (userSettingsDropdownMenuItems ?? []).find(
+		const item = userSettingsDropdownMenuItems.find(
 			(item) => item?.key === info.key,
 		);
 		let menuLabel = '';
@@ -866,9 +904,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			case 'license':
 				history.push(ROUTES.LIST_LICENSES);
 				break;
-			case 'keyboard-shortcuts':
-				history.push(ROUTES.SHORTCUTS);
-				break;
 			case 'logout':
 				Logout();
 				break;

frontend/src/container/SideNav/__tests__/menuItems.test.tsx

@@ -1,74 +0,0 @@
-import { getUserSettingsDropdownMenuItems } from 'container/SideNav/menuItems';
-
-const BASE_PARAMS = {
-	userEmail: 'test@signoz.io',
-	isWorkspaceBlocked: false,
-	isEnterpriseSelfHostedUser: false,
-	isCommunityEnterpriseUser: false,
-};
-
-describe('getUserSettingsDropdownMenuItems', () => {
-	it('always includes logged-in-as label, workspace, account, keyboard shortcuts, and sign out', () => {
-		const items = getUserSettingsDropdownMenuItems(BASE_PARAMS);
-		const keys = items?.map((item) => item?.key);
-
-		expect(keys).toContain('label');
-		expect(keys).toContain('workspace');
-		expect(keys).toContain('account');
-		expect(keys).toContain('keyboard-shortcuts');
-		expect(keys).toContain('logout');
-
-		// workspace item is enabled when workspace is not blocked
-		const workspaceItem = items?.find(
-			(item: any) => item.key === 'workspace',
-		) as any;
-
-		expect(workspaceItem?.disabled).toBe(false);
-
-		// does not include license item for regular cloud user
-		expect(keys).not.toContain('license');
-	});
-
-	it('includes manage license item for enterprise self-hosted users', () => {
-		const items = getUserSettingsDropdownMenuItems({
-			...BASE_PARAMS,
-			isEnterpriseSelfHostedUser: true,
-		});
-		const keys = items?.map((item) => item?.key);
-
-		expect(keys).toContain('license');
-	});
-
-	it('includes manage license item for community enterprise users', () => {
-		const items = getUserSettingsDropdownMenuItems({
-			...BASE_PARAMS,
-			isCommunityEnterpriseUser: true,
-		});
-		const keys = items?.map((item) => item?.key);
-
-		expect(keys).toContain('license');
-	});
-
-	it('workspace item is disabled when workspace is blocked', () => {
-		const items = getUserSettingsDropdownMenuItems({
-			...BASE_PARAMS,
-			isWorkspaceBlocked: true,
-		});
-		const workspaceItem = items?.find(
-			(item: any) => item.key === 'workspace',
-		) as any;
-
-		expect(workspaceItem?.disabled).toBe(true);
-	});
-
-	it('returns items in correct order: label, divider, workspace, account, ..., shortcuts, divider, logout', () => {
-		const items = getUserSettingsDropdownMenuItems(BASE_PARAMS) ?? [];
-		const keys = items.map((item: any) => item.key ?? item.type);
-
-		expect(keys[0]).toBe('label');
-		expect(keys[1]).toBe('divider');
-		expect(keys[2]).toBe('workspace');
-		expect(keys[3]).toBe('account');
-		expect(keys[keys.length - 1]).toBe('logout');
-	});
-});

frontend/src/container/SideNav/menuItems.tsx

@@ -1,6 +1,4 @@
 import { RocketOutlined } from '@ant-design/icons';
-import { Style } from '@signozhq/design-tokens';
-import { MenuProps } from 'antd';
 import ROUTES from 'constants/routes';
 import {
 	ArrowUpRight,
@@ -10,7 +8,6 @@ import {
 	Book,
 	Boxes,
 	BugIcon,
-	Building2,
 	ChartArea,
 	Cloudy,
 	DraftingCompass,
@@ -23,26 +20,21 @@ import {
 	Layers2,
 	LayoutGrid,
 	ListMinus,
-	LogOut,
 	MessageSquareText,
 	Plus,
 	Receipt,
 	Route,
 	ScrollText,
+	Search,
 	Settings,
 	Shield,
 	Slack,
 	Unplug,
 	User,
 	UserPlus,
-	Users,
 } from 'lucide-react';
 
-import {
-	SecondaryMenuItemKey,
-	SettingsNavSection,
-	SidebarItem,
-} from './sideNav.types';
+import { SecondaryMenuItemKey, SidebarItem } from './sideNav.types';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -196,6 +188,12 @@ export const primaryMenuItems: SidebarItem[] = [
 		icon: <Home size={16} />,
 		itemKey: 'home',
 	},
+	{
+		key: 'quick-search',
+		label: 'Search',
+		icon: <Search size={16} />,
+		itemKey: 'quick-search',
+	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
 		label: 'Alerts',
@@ -298,107 +296,77 @@ export const defaultMoreMenuItems: SidebarItem[] = [
 	},
 ];
 
-export const settingsNavSections: SettingsNavSection[] = [
+export const settingsMenuItems: SidebarItem[] = [
 	{
-		key: 'general',
-		items: [
-			{
-				key: ROUTES.SETTINGS,
-				label: 'Workspace',
-				icon: <Settings size={16} />,
-				isEnabled: true,
-				itemKey: 'workspace',
-			},
-			{
-				key: ROUTES.MY_SETTINGS,
-				label: 'Account',
-				icon: <User size={16} />,
-				isEnabled: true,
-				itemKey: 'account',
-			},
-			{
-				key: ROUTES.ALL_CHANNELS,
-				label: 'Notification Channels',
-				icon: <FileKey2 size={16} />,
-				isEnabled: true,
-				itemKey: 'notification-channels',
-			},
-			{
-				key: ROUTES.BILLING,
-				label: 'Billing',
-				icon: <Receipt size={16} />,
-				isEnabled: false,
-				itemKey: 'billing',
-			},
-			{
-				key: ROUTES.INTEGRATIONS,
-				label: 'Integrations',
-				icon: <Unplug size={16} />,
-				isEnabled: false,
-				itemKey: 'integrations',
-			},
-		],
+		key: ROUTES.SETTINGS,
+		label: 'General',
+		icon: <Settings size={16} />,
+		isEnabled: true,
+		itemKey: 'general',
+	},
+	{
+		key: ROUTES.BILLING,
+		label: 'Billing',
+		icon: <Receipt size={16} />,
+		isEnabled: false,
+		itemKey: 'billing',
+	},
+	{
+		key: ROUTES.ROLES_SETTINGS,
+		label: 'Roles',
+		icon: <Shield size={16} />,
+		isEnabled: false,
+		itemKey: 'roles',
+	},
+	{
+		key: ROUTES.ORG_SETTINGS,
+		label: 'Members & SSO',
+		icon: <User size={16} />,
+		isEnabled: false,
+		itemKey: 'members-sso',
 	},
 
 	{
-		key: 'identity-access',
-		title: 'Identity & Access',
-		items: [
-			{
-				key: ROUTES.ROLES_SETTINGS,
-				label: 'Roles',
-				icon: <Shield size={16} />,
-				isEnabled: false,
-				itemKey: 'roles',
-			},
-			{
-				key: ROUTES.MEMBERS_SETTINGS,
-				label: 'Members',
-				icon: <Users size={16} />,
-				isEnabled: false,
-				itemKey: 'members',
-			},
-			{
-				key: ROUTES.API_KEYS,
-				label: 'API Keys',
-				icon: <Key size={16} />,
-				isEnabled: false,
-				itemKey: 'api-keys',
-			},
-			{
-				key: ROUTES.INGESTION_SETTINGS,
-				label: 'Ingestion',
-				icon: <RocketOutlined rotate={45} />,
-				isEnabled: false,
-				itemKey: 'ingestion',
-			},
-		],
+		key: ROUTES.INTEGRATIONS,
+		label: 'Integrations',
+		icon: <Unplug size={16} />,
+		isEnabled: false,
+		itemKey: 'integrations',
 	},
 	{
-		key: 'authentication',
-		title: 'Authentication',
-		items: [
-			{
-				key: ROUTES.ORG_SETTINGS,
-				label: 'Single Sign-on',
-				icon: <User size={16} />,
-				isEnabled: false,
-				itemKey: 'sso',
-			},
-		],
+		key: ROUTES.ALL_CHANNELS,
+		label: 'Notification Channels',
+		icon: <FileKey2 size={16} />,
+		isEnabled: true,
+		itemKey: 'notification-channels',
 	},
 	{
-		key: 'shortcuts',
-		hasDivider: true,
-		items: [
-			{
-				key: ROUTES.SHORTCUTS,
-				label: 'Keyboard Shortcuts',
-				icon: <Keyboard size={16} />,
-				isEnabled: true,
-				itemKey: 'keyboard-shortcuts',
-			},
-		],
+		key: ROUTES.API_KEYS,
+		label: 'API Keys',
+		icon: <Key size={16} />,
+		isEnabled: false,
+		itemKey: 'api-keys',
+	},
+	{
+		key: ROUTES.INGESTION_SETTINGS,
+		label: 'Ingestion',
+		icon: <RocketOutlined rotate={45} />,
+		isEnabled: false,
+		itemKey: 'ingestion',
+	},
+	{
+		key: ROUTES.MY_SETTINGS,
+		label: 'Account Settings',
+		icon: <User size={16} />,
+		isEnabled: true,
+		itemKey: 'account-settings',
+	},
+	{
+		key: ROUTES.SHORTCUTS,
+		label: 'Keyboard Shortcuts',
+		icon: <Layers2 size={16} />,
+		isEnabled: true,
+		itemKey: 'keyboard-shortcuts',
 	},
 ];
 
@@ -449,6 +417,12 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 		icon: <MessageSquareText size={14} />,
 		itemKey: 'chat-support',
 	},
+	{
+		key: ROUTES.SHORTCUTS,
+		label: 'Keyboard Shortcuts',
+		icon: <Keyboard size={14} />,
+		itemKey: 'keyboard-shortcuts',
+	},
 	{
 		key: 'invite-collaborators',
 		label: 'Invite a Team Member',
@@ -457,78 +431,6 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	},
 ];
 
-export interface UserSettingsMenuItemsParams {
-	userEmail: string;
-	isWorkspaceBlocked: boolean;
-	isEnterpriseSelfHostedUser: boolean;
-	isCommunityEnterpriseUser: boolean;
-}
-
-export const getUserSettingsDropdownMenuItems = ({
-	userEmail,
-	isWorkspaceBlocked,
-	isEnterpriseSelfHostedUser,
-	isCommunityEnterpriseUser,
-}: UserSettingsMenuItemsParams): MenuProps['items'] =>
-	[
-		{
-			key: 'label',
-			label: (
-				<div className="user-settings-dropdown-logged-in-section">
-					<span className="user-settings-dropdown-label-text">LOGGED IN AS</span>
-					<span className="user-settings-dropdown-label-email">{userEmail}</span>
-				</div>
-			),
-			disabled: true,
-			dataTestId: 'logged-in-as-nav-item',
-		},
-		{ type: 'divider' as const },
-		{
-			key: 'workspace',
-			label: 'Workspace Settings',
-			icon: <Building2 size={14} color={Style.L1_FOREGROUND} />,
-			disabled: isWorkspaceBlocked,
-			dataTestId: 'workspace-settings-nav-item',
-		},
-		{
-			key: 'account',
-			label: 'Account Settings',
-			icon: <User size={14} color={Style.L1_FOREGROUND} />,
-			dataTestId: 'account-settings-nav-item',
-		},
-		...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
-			? [
-					{
-						key: 'license',
-						label: 'Manage License',
-						icon: <Shield size={14} color={Style.L1_FOREGROUND} />,
-						dataTestId: 'manage-license-nav-item',
-					},
-			  ]
-			: []),
-		{
-			key: 'keyboard-shortcuts',
-			label: 'Keyboard Shortcuts',
-			icon: <Keyboard size={14} color={Style.L1_FOREGROUND} />,
-			dataTestId: 'keyboard-shortcuts-nav-item',
-		},
-		{ type: 'divider' as const },
-		{
-			key: 'logout',
-			label: (
-				<span className="user-settings-dropdown-logout-section">Sign out</span>
-			),
-			icon: (
-				<LogOut
-					size={14}
-					className="user-settings-dropdown-logout-section"
-					color={Style.DANGER_BACKGROUND}
-				/>
-			),
-			dataTestId: 'logout-nav-item',
-		},
-	].filter(Boolean);
-
 /** Mapping of some newly added routes and their corresponding active sidebar menu key */
 export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record<string, string> = {
 	[ROUTES.TRACE]: ROUTES.TRACES_EXPLORER,

frontend/src/container/SideNav/sideNav.types.ts

@@ -24,13 +24,6 @@ export interface SidebarItem {
 
 export const CHANGELOG_LABEL = 'Full Changelog';
 
-export interface SettingsNavSection {
-	title?: string;
-	items: SidebarItem[];
-	key: string;
-	hasDivider?: boolean;
-}
-
 export interface DropdownSeparator {
 	type: 'divider' | 'group';
 	label?: ReactNode;

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

@@ -153,7 +153,6 @@ export const routesToSkip = [
 	ROUTES.VERSION,
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
-	ROUTES.MEMBERS_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.API_KEYS,
 	ROUTES.ERROR_DETAIL,

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -160,7 +160,6 @@ function Filters({
 				onChange={handleFilterChange}
 				hideSpanScopeSelector={false}
 				skipQueryBuilderRedirect
-				selectProps={{ listHeight: 125 }}
 			/>
 			{filteredSpanIds.length > 0 && (
 				<div className="pre-next-toggle">

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -35,7 +35,6 @@ function TracesTableComponent({
 	widget,
 	queryResponse,
 	setRequestData,
-	onColumnWidthsChange,
 }: TracesTableComponentProps): JSX.Element {
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
@@ -132,8 +131,8 @@ function TracesTableComponent({
 						columns={columns}
 						onRow={handleRow}
 						sticky
-						columnWidths={widget.columnWidths}
-						onColumnWidthsChange={onColumnWidthsChange}
+						widgetId={widget.id}
+						shouldPersistColumnWidths
 					/>
 				</OverlayScrollbar>
 			</div>
@@ -176,7 +175,6 @@ export type TracesTableComponentProps = {
 	>;
 	widget: Widgets;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
-	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default TracesTableComponent;

frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts

@@ -1,7 +1,11 @@
+/* eslint-disable no-restricted-imports */
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { useSelector } from 'react-redux';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { AxiosError, AxiosResponse } from 'axios';
+import { AppState } from 'store/reducers';
 import { QueryKeyValueSuggestionsResponseProps } from 'types/api/querySuggestions/types';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 export const useGetQueryKeyValueSuggestions = ({
 	key,
@@ -9,6 +13,7 @@ export const useGetQueryKeyValueSuggestions = ({
 	searchText,
 	signalSource,
 	metricName,
+	existingQuery,
 	options,
 }: {
 	key: string;
@@ -20,11 +25,24 @@ export const useGetQueryKeyValueSuggestions = ({
 		AxiosError
 	>;
 	metricName?: string;
+	existingQuery?: string;
 }): UseQueryResult<
 	AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
 	AxiosError
-> =>
-	useQuery<AxiosResponse<QueryKeyValueSuggestionsResponseProps>, AxiosError>({
+> => {
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const timeRangeKey =
+		minTime != null && maxTime != null
+			? `${Math.floor(minTime / 1e9)}-${Math.floor(maxTime / 1e9)}`
+			: null;
+
+	return useQuery<
+		AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
+		AxiosError
+	>({
 		queryKey: [
 			'queryKeyValueSuggestions',
 			key,
@@ -32,6 +50,7 @@ export const useGetQueryKeyValueSuggestions = ({
 			searchText,
 			signalSource,
 			metricName,
+			timeRangeKey,
 		],
 		queryFn: () =>
 			getValueSuggestions({
@@ -40,6 +59,8 @@ export const useGetQueryKeyValueSuggestions = ({
 				searchText: searchText || '',
 				signalSource: signalSource as 'meter' | '',
 				metricName: metricName || '',
+				existingQuery,
 			}),
 		...options,
 	});
+};

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

@@ -118,13 +118,13 @@ export const otherFiltersResponse = {
 export const quickFiltersAttributeValuesResponse = {
 	status: 'success',
 	data: {
-		stringAttributeValues: [
-			'mq-kafka',
-			'otel-demo',
-			'otlp-python',
-			'sample-flask',
-		],
-		numberAttributeValues: null,
-		boolAttributeValues: null,
+		data: {
+			values: {
+				relatedValues: ['mq-kafka', 'otel-demo', 'otlp-python', 'sample-flask'],
+				stringValues: ['mq-kafka', 'otel-demo', 'otlp-python', 'sample-flask'],
+				numberValues: [],
+			},
+			complete: true,
+		},
 	},
 };

frontend/src/pages/MembersSettings/index.tsx

@@ -1,7 +0,0 @@
-import MembersSettingsContainer from 'container/MembersSettings/MembersSettings';
-
-function MembersSettings(): JSX.Element {
-	return <MembersSettingsContainer />;
-}
-
-export default MembersSettings;

frontend/src/pages/Settings/Settings.styles.scss

@@ -31,33 +31,9 @@
 		.settings-page-sidenav {
 			width: 240px;
 			height: calc(100vh - 48px);
-			border-right: 1px solid var(--secondary);
-			background: var(--sidebar-primary-foreground);
-			padding-top: var(--padding-1);
-			display: flex;
-			flex-direction: column;
-			gap: var(--spacing-12);
-			overflow-y: auto;
-
-			.settings-nav-section {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.settings-nav-section--with-divider {
-				border-top: 1px solid var(--secondary);
-				padding-top: var(--padding-4);
-			}
-
-			.settings-nav-section-title {
-				font-size: var(--uppercase-small-600-font-size);
-				font-weight: var(--uppercase-small-600-font-weight);
-				letter-spacing: 0.88px;
-				text-transform: uppercase;
-				color: var(--l3-foreground);
-				margin-bottom: var(--margin-2);
-				padding: var(--padding-1) var(--padding-3);
-			}
+			border-right: 1px solid var(--Slate-500, #161922);
+			background: var(--Ink-500, #0b0c0e);
+			margin-top: 4px;
 
 			.nav-item {
 				.nav-item-data {

frontend/src/pages/Settings/Settings.tsx

@@ -7,7 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
-import { settingsNavSections } from 'container/SideNav/menuItems';
+import { settingsMenuItems as defaultSettingsMenuItems } from 'container/SideNav/menuItems';
 import NavItem from 'container/SideNav/NavItem/NavItem';
 import { SidebarItem } from 'container/SideNav/sideNav.types';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -33,7 +33,7 @@ function SettingsPage(): JSX.Element {
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 
 	const [settingsMenuItems, setSettingsMenuItems] = useState<SidebarItem[]>(
-		settingsNavSections.flatMap((section) => section.items),
+		defaultSettingsMenuItems,
 	);
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
@@ -83,7 +83,6 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS
 								? true
 								: item.isEnabled,
@@ -114,7 +113,6 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS
 								? true
 								: item.isEnabled,
@@ -138,9 +136,7 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
-							item.key === ROUTES.API_KEYS ||
-							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS
+							item.key === ROUTES.API_KEYS || item.key === ROUTES.ORG_SETTINGS
 								? true
 								: item.isEnabled,
 					}));
@@ -256,45 +252,25 @@ function SettingsPage(): JSX.Element {
 
 			<div className="settings-page-content-container">
 				<div className="settings-page-sidenav" data-testid="settings-page-sidenav">
-					{settingsNavSections.map((section) => {
-						const enabledItems = section.items.filter((sectionItem) =>
-							settingsMenuItems.some(
-								(item) => item.key === sectionItem.key && item.isEnabled,
-							),
-						);
-						if (enabledItems.length === 0) {
-							return null;
-						}
-						return (
-							<div
-								key={section.key}
-								className={`settings-nav-section${
-									section.hasDivider ? ' settings-nav-section--with-divider' : ''
-								}`}
-							>
-								{section.title && (
-									<div className="settings-nav-section-title">{section.title}</div>
-								)}
-								{enabledItems.map((item) => (
-									<NavItem
-										key={item.key}
-										item={item}
-										isActive={isActiveNavItem(item.key as string)}
-										isDisabled={false}
-										showIcon={false}
-										onClick={(event): void => {
-											logEvent('Settings V2: Menu clicked', {
-												menuLabel: item.label,
-												menuRoute: item.key,
-											});
-											handleMenuItemClick((event as unknown) as MouseEvent, item);
-										}}
-										dataTestId={item.itemKey}
-									/>
-								))}
-							</div>
-						);
-					})}
+					{settingsMenuItems
+						.filter((item) => item.isEnabled)
+						.map((item) => (
+							<NavItem
+								key={item.key}
+								item={item}
+								isActive={isActiveNavItem(item.key as string)}
+								isDisabled={false}
+								showIcon={false}
+								onClick={(event): void => {
+									logEvent('Settings V2: Menu clicked', {
+										menuLabel: item.label,
+										menuRoute: item.key,
+									});
+									handleMenuItemClick((event as unknown) as MouseEvent, item);
+								}}
+								dataTestId={item.itemKey}
+							/>
+						))}
 				</div>
 
 				<div className="settings-page-content">

frontend/src/pages/Settings/__tests__/Settings.test.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import SettingsPage from 'pages/Settings/Settings';
-import { render, screen, within } from 'tests/test-utils';
-import { LicensePlatform } from 'types/api/licensesV3/getActive';
-import { USER_ROLES } from 'types/roles';
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	__esModule: true,
-	default: ({ children }: { children: React.ReactNode }): React.ReactNode =>
-		children,
-}));
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('lib/history', () => ({
-	push: jest.fn(),
-	listen: jest.fn(() => jest.fn()),
-	location: { pathname: '/settings', search: '' },
-}));
-
-const getCloudAdminOverrides = (): any => ({
-	activeLicense: {
-		key: 'test-key',
-		platform: LicensePlatform.CLOUD,
-	},
-});
-
-const getSelfHostedAdminOverrides = (): any => ({
-	activeLicense: {
-		key: 'test-key',
-		platform: LicensePlatform.SELF_HOSTED,
-	},
-});
-
-describe('SettingsPage nav sections', () => {
-	describe('Cloud Admin', () => {
-		beforeEach(() => {
-			render(<SettingsPage />, undefined, {
-				role: USER_ROLES.ADMIN,
-				appContextOverrides: getCloudAdminOverrides(),
-				initialRoute: '/settings',
-			});
-		});
-
-		it.each([
-			'settings-page-sidenav',
-			'workspace',
-			'account',
-			'notification-channels',
-			'billing',
-			'roles',
-			'members',
-			'api-keys',
-			'sso',
-			'integrations',
-			'ingestion',
-		])('renders "%s" element', (id) => {
-			expect(screen.getByTestId(id)).toBeInTheDocument();
-		});
-
-		it.each(['Identity & Access', 'Authentication'])(
-			'renders "%s" section title',
-			(text) => {
-				expect(screen.getByText(text)).toBeInTheDocument();
-			},
-		);
-	});
-
-	describe('Cloud Viewer', () => {
-		beforeEach(() => {
-			render(<SettingsPage />, undefined, {
-				role: USER_ROLES.VIEWER,
-				appContextOverrides: getCloudAdminOverrides(),
-				initialRoute: '/settings',
-			});
-		});
-
-		it.each(['workspace', 'account'])('renders "%s" element', (id) => {
-			expect(screen.getByTestId(id)).toBeInTheDocument();
-		});
-
-		it.each(['billing', 'roles', 'api-keys'])(
-			'does not render "%s" element',
-			(id) => {
-				expect(screen.queryByTestId(id)).not.toBeInTheDocument();
-			},
-		);
-	});
-
-	describe('Self-hosted Admin', () => {
-		beforeEach(() => {
-			render(<SettingsPage />, undefined, {
-				role: USER_ROLES.ADMIN,
-				appContextOverrides: getSelfHostedAdminOverrides(),
-				initialRoute: '/settings',
-			});
-		});
-
-		it.each(['roles', 'members', 'api-keys', 'integrations', 'sso', 'ingestion'])(
-			'renders "%s" element',
-			(id) => {
-				expect(screen.getByTestId(id)).toBeInTheDocument();
-			},
-		);
-	});
-
-	describe('section structure', () => {
-		it('renders items in correct sections for cloud admin', () => {
-			const { container } = render(<SettingsPage />, undefined, {
-				role: USER_ROLES.ADMIN,
-				appContextOverrides: getCloudAdminOverrides(),
-				initialRoute: '/settings',
-			});
-
-			const sidenav = within(container).getByTestId('settings-page-sidenav');
-			const sections = sidenav.querySelectorAll('.settings-nav-section');
-
-			// Should have at least 2 sections (general + identity-access) for cloud admin
-			expect(sections.length).toBeGreaterThanOrEqual(2);
-		});
-
-		it('hides section entirely when all items in it are disabled', () => {
-			// Community user has very limited access — identity section should be hidden
-			render(<SettingsPage />, undefined, {
-				role: USER_ROLES.VIEWER,
-				appContextOverrides: {
-					activeLicense: null,
-				},
-				initialRoute: '/settings',
-			});
-
-			expect(screen.queryByText('IDENTITY & ACCESS')).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/pages/Settings/config.tsx

@@ -26,10 +26,8 @@ import {
 	Plus,
 	Shield,
 	User,
-	Users,
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
-import MembersSettings from 'pages/MembersSettings';
 import Shortcuts from 'pages/Shortcuts';
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
@@ -138,19 +136,6 @@ export const billingSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const membersSettings = (t: TFunction): RouteTabProps['routes'] => [
-	{
-		Component: MembersSettings,
-		name: (
-			<div className="periscope-tab">
-				<Users size={16} /> {t('routes:members').toString()}
-			</div>
-		),
-		route: ROUTES.MEMBERS_SETTINGS,
-		key: ROUTES.MEMBERS_SETTINGS,
-	},
-];
-
 export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: RolesSettings,

frontend/src/pages/Settings/utils.ts

@@ -11,7 +11,6 @@ import {
 	generalSettings,
 	ingestionSettings,
 	keyboardShortcuts,
-	membersSettings,
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
@@ -61,7 +60,7 @@ export const getRoutes = (
 	settings.push(...alertChannels(t));
 
 	if (isAdmin) {
-		settings.push(...apiKeys(t), ...membersSettings(t));
+		settings.push(...apiKeys(t));
 	}
 
 	// todo: Sagar - check the condition for role list and details page, to whom we want to serve