fix: added fix for widget warning/save modal states (#11356 )

feat: field selector migrated to telemetry field key (#11360 )
* feat: field selector migrated to telemetry field key * feat: move floating panel to field selector
2026-05-19 16:30:31 +01:00 · 2026-05-19 13:31:14 +00:00 · 2026-05-19 13:14:44 +00:00 · 2026-05-19 10:49:46 +00:00 · 2026-05-19 06:52:22 +00:00 · 2026-05-19 04:11:57 +00:00
44 changed files with 1017 additions and 639 deletions
--- a/ee/query-service/app/api/featureFlags.go
+++ b/ee/query-service/app/api/featureFlags.go
@@ -80,6 +80,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})

+	fineGrainedAuthz := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseFineGrainedAuthz, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
+		Active:     fineGrainedAuthz,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {
--- a/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx
+++ b/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx
@@ -18,21 +18,22 @@ import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Typography } from '@signozhq/ui/typography';

-import styles from './FieldsSettings.module.scss';
+import styles from './FieldsSelector.module.scss';

 function SortableField({
 	field,
 	onRemove,
 	allowDrag,
 }: {
-	field: BaseAutocompleteData;
-	onRemove: (field: BaseAutocompleteData) => void;
+	field: TelemetryFieldKey;
+	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.key });
+		useSortable({ id: field.name });

 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -50,7 +51,7 @@ function SortableField({
 		>
 			<div {...attributes} {...listeners} className={styles.dragHandle}>
 				{allowDrag && <GripVertical size={14} />}
-				<span className={styles.fieldKey}>{field.key}</span>
+				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
 			<Button
 				className={cx(styles.removeBtn, 'periscope-btn')}
@@ -67,41 +68,52 @@ function SortableField({

 interface AddedFieldsProps {
 	inputValue: string;
-	fields: BaseAutocompleteData[];
-	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
+	fields: TelemetryFieldKey[];
+	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
+	maxFields?: number;
 }

 function AddedFields({
 	inputValue,
 	fields,
 	onFieldsChange,
+	maxFields,
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));

 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.key === active.id);
-			const newIndex = fields.findIndex((f) => f.key === over.id);
+			const oldIndex = fields.findIndex((f) => f.name === active.id);
+			const newIndex = fields.findIndex((f) => f.name === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};

 	const filteredFields = useMemo(
 		() =>
-			fields.filter((f) => f.key.toLowerCase().includes(inputValue.toLowerCase())),
+			fields.filter((f) =>
+				f.name.toLowerCase().includes(inputValue.toLowerCase()),
+			),
 		[fields, inputValue],
 	);

-	const handleRemove = (field: BaseAutocompleteData): void => {
-		onFieldsChange(fields.filter((f) => f.key !== field.key));
+	const handleRemove = (field: TelemetryFieldKey): void => {
+		onFieldsChange(fields.filter((f) => f.name !== field.name));
 	};

 	const allowDrag = inputValue.length === 0;

 	return (
 		<div className={cx(styles.section, styles.sectionAdded)}>
-			<div className={styles.sectionHeader}>ADDED FIELDS</div>
+			<div className={styles.sectionHeader}>
+				<span>ADDED FIELDS</span>
+				{maxFields !== undefined && (
+					<Typography.Text size="sm" weight="medium" color="muted">
+						Max Allowed: {maxFields}
+					</Typography.Text>
+				)}
+			</div>
 			<div className={styles.addedList}>
 				<OverlayScrollbar>
 					<DndContext
@@ -113,13 +125,13 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.key)}
+								items={fields.map((f) => f.name)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.key}
+										key={field.name}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
--- a/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss
+++ b/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss
@@ -56,12 +56,14 @@
 }

 .sectionHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
 	color: var(--muted-foreground);
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 18px;
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
 	padding: 8px 12px;
 }

@@ -89,13 +91,6 @@
 	font-size: 12px;
 }

-.limitHint {
-	padding: 8px 12px;
-	text-align: center;
-	color: var(--muted-foreground);
-	font-size: 11px;
-}
-
 .fieldItem {
 	display: flex;
 	align-items: center;
--- a/frontend/src/components/FieldsSelector/FieldsSelector.tsx
+++ b/frontend/src/components/FieldsSelector/FieldsSelector.tsx
@@ -0,0 +1,176 @@
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Check, TableColumnsSplit, X } from '@signozhq/icons';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import AddedFields from './AddedFields';
+import OtherFields from './OtherFields';
+
+import styles from './FieldsSelector.module.scss';
+
+const DEFAULT_PANEL_WIDTH = 350;
+const DEFAULT_PANEL_HEIGHT_OFFSET = 100;
+const DEFAULT_PANEL_RIGHT_INSET = 100;
+const DEFAULT_PANEL_TOP_INSET = 50;
+
+interface FieldsSelectorProps {
+	isOpen: boolean;
+	title: string;
+	fields: TelemetryFieldKey[];
+	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
+	onClose: () => void;
+	signal: DataSource;
+	maxFields?: number;
+	width?: number;
+	height?: number;
+	defaultPosition?: { x: number; y: number };
+}
+
+function FieldsSelector({
+	isOpen,
+	title,
+	fields,
+	onFieldsChange,
+	onClose,
+	signal,
+	maxFields,
+	width = DEFAULT_PANEL_WIDTH,
+	height,
+	defaultPosition,
+}: FieldsSelectorProps): JSX.Element | null {
+	if (!isOpen) {
+		return null;
+	}
+
+	const resolvedHeight =
+		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
+	const resolvedPosition = defaultPosition ?? {
+		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
+		y: DEFAULT_PANEL_TOP_INSET,
+	};
+	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
+	const [inputValue, setInputValue] = useState('');
+	const [debouncedInputValue, setDebouncedInputValue] = useState('');
+
+	const debouncedUpdate = useDebouncedFn((value) => {
+		setDebouncedInputValue(value as string);
+	}, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setInputValue(value);
+			debouncedUpdate(value);
+		},
+		[debouncedUpdate],
+	);
+
+	const handleAdd = useCallback(
+		(field: TelemetryFieldKey): void => {
+			if (maxFields !== undefined && draftFields.length >= maxFields) {
+				return;
+			}
+			if (draftFields.some((f) => f.name === field.name)) {
+				return;
+			}
+			setDraftFields((prev) => [...prev, field]);
+		},
+		[draftFields, maxFields],
+	);
+
+	const handleSave = useCallback((): void => {
+		onFieldsChange(draftFields);
+		toast.success('Saved successfully', {
+			position: 'top-right',
+		});
+		onClose();
+	}, [draftFields, onFieldsChange, onClose]);
+
+	const handleDiscard = useCallback((): void => {
+		setDraftFields(fields);
+	}, [fields]);
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			!(
+				draftFields.length === fields.length &&
+				draftFields.every((f, i) => f.name === fields[i]?.name)
+			),
+		[draftFields, fields],
+	);
+
+	const isAtLimit = maxFields !== undefined && draftFields.length >= maxFields;
+
+	return (
+		<FloatingPanel
+			isOpen
+			width={width}
+			height={resolvedHeight}
+			defaultPosition={resolvedPosition}
+			enableResizing={false}
+		>
+			<div className={styles.root}>
+				<div className={styles.header}>
+					<div className={styles.title}>
+						<TableColumnsSplit size={16} />
+						{title}
+					</div>
+					<X className={styles.closeIcon} size={16} onClick={onClose} />
+				</div>
+
+				<section>
+					<Input
+						className={styles.searchInput}
+						type="text"
+						value={inputValue}
+						placeholder="Search for a field..."
+						onChange={handleInputChange}
+					/>
+				</section>
+
+				<AddedFields
+					inputValue={inputValue}
+					fields={draftFields}
+					onFieldsChange={setDraftFields}
+					maxFields={maxFields}
+				/>
+
+				<OtherFields
+					signal={signal}
+					debouncedInputValue={debouncedInputValue}
+					addedFields={draftFields}
+					onAdd={handleAdd}
+					isAtLimit={isAtLimit}
+				/>
+
+				{hasUnsavedChanges && (
+					<div className={styles.footer}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={handleDiscard}
+							prefix={<X width={14} height={14} />}
+						>
+							Discard
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={handleSave}
+							prefix={<Check width={14} height={14} />}
+						>
+							Save changes
+						</Button>
+					</div>
+				)}
+			</div>
+		</FloatingPanel>
+	);
+}
+
+export default FieldsSelector;
--- a/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx
+++ b/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx
@@ -4,51 +4,58 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import {
+	FieldContext,
+	FieldDataType,
+	SignalType,
+	TelemetryFieldKey,
+} from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';

-import styles from './FieldsSettings.module.scss';
+import styles from './FieldsSelector.module.scss';

 interface OtherFieldsProps {
-	dataSource: DataSource;
+	signal: DataSource;
 	debouncedInputValue: string;
-	addedFields: BaseAutocompleteData[];
-	onAdd: (field: BaseAutocompleteData) => void;
+	addedFields: TelemetryFieldKey[];
+	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
 }

 function OtherFields({
-	dataSource,
+	signal,
 	debouncedInputValue,
 	addedFields,
 	onAdd,
 	isAtLimit,
 }: OtherFieldsProps): JSX.Element {
-	// API call to get available attribute keys
-	const { data, isFetching } = useGetAggregateKeys(
+	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
+			signal,
 			searchText: debouncedInputValue,
-			dataSource,
-			aggregateOperator: 'noop',
-			aggregateAttribute: '',
-			tagType: '',
 		},
 		{
 			queryKey: [
-				REACT_QUERY_KEY.GET_OTHER_FILTERS,
-				'preview-fields',
+				REACT_QUERY_KEY.GET_FIELDS_SELECTOR_SUGGESTIONS,
+				signal,
 				debouncedInputValue,
 			],
 			enabled: true,
 		},
 	);

-	// Filter out already-added fields, match on .key from API response objects
-	const otherFields = useMemo(() => {
-		const attributes = data?.payload?.attributeKeys || [];
-		const addedKeys = new Set(addedFields.map((f) => f.key));
-		return attributes.filter((attr) => !addedKeys.has(attr.key));
+	const otherFields: TelemetryFieldKey[] = useMemo(() => {
+		const suggestions = Object.values(data?.data.data.keys || {}).flat();
+		const addedNames = new Set(addedFields.map((f) => f.name));
+		return suggestions
+			.filter((attr) => !addedNames.has(attr.name))
+			.map((attr) => ({
+				...attr,
+				signal: attr.signal as SignalType,
+				fieldContext: attr.fieldContext as FieldContext,
+				fieldDataType: attr.fieldDataType as FieldDataType,
+			}));
 	}, [data, addedFields]);

 	if (isFetching) {
@@ -76,10 +83,10 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.key}
+									key={attr.name}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
-									<span className={styles.fieldKey}>{attr.key}</span>
+									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
 											className={cx(styles.addBtn, 'periscope-btn')}
@@ -94,7 +101,6 @@ function OtherFields({
 								</div>
 							))
 						)}
-						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>
--- a/frontend/src/components/FieldsSelector/index.ts
+++ b/frontend/src/components/FieldsSelector/index.ts
@@ -0,0 +1 @@
+export { default } from './FieldsSelector';
--- a/frontend/src/components/RolesSelect/RolesSelect.tsx
+++ b/frontend/src/components/RolesSelect/RolesSelect.tsx
@@ -144,6 +144,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				loading={loading}
 				notFoundContent={notFoundContent}
 				options={options}
+				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
 					<Checkbox
 						checked={value.includes(option.value as string)}
@@ -162,6 +163,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	return (
 		<Select
 			id={id}
+			showSearch
 			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
@@ -170,6 +172,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}
+			optionFilterProp="label"
 			getPopupContainer={getPopupContainer}
 			disabled={disabled}
 		/>
--- a/frontend/src/constants/features.ts
+++ b/frontend/src/constants/features.ts
@@ -10,4 +10,5 @@ export enum FeatureKeys {
 	ONBOARDING_V3 = 'onboarding_v3',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
+	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 }
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -108,4 +108,7 @@ export const REACT_QUERY_KEY = {

 	// Dashboard Grid Card Query Keys
 	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
+
+	// Fields Selector Query Keys
+	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
 } as const;
--- a/frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss
@@ -186,77 +186,40 @@
 		display: flex;
 		flex-direction: column;

-		.section-1 {
+		section {
 			display: flex;
 			flex-direction: column;
 			align-items: start;
-			border-bottom: 1px solid var(--l1-border);

 			.ant-btn {
 				display: flex;
 				width: 100%;
-				height: 20px;
-				padding: 16px 18px 18px 14px;
+				height: unset;
+				padding: 8px;
 				align-items: center;
-				gap: 6px;
+				gap: 12px;
 				color: var(--l2-foreground);
 				font-family: Inter;
-				font-size: 14px;
+				font-size: 13px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: normal;
 				letter-spacing: 0.14px;
+				border-top: none;
+
 				.ant-btn-icon {
 					margin-inline-end: 0px;
 				}
 			}
 		}
+
+		.section-1,
 		.section-2 {
-			display: flex;
-			flex-direction: column;
-			align-items: start;
 			border-bottom: 1px solid var(--l1-border);
-
-			.ant-btn {
-				display: flex;
-				width: 100%;
-				height: 20px;
-				padding: 16px 18px 18px 14px;
-				align-items: center;
-				gap: 6px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-
-				.ant-btn-icon {
-					margin-inline-end: 0px;
-				}
-			}
 		}
-		.delete-dashboard {
-			display: flex;
-			flex-direction: column;
-			align-items: start;

-			.ant-typography {
-				display: flex;
-				width: 100%;
-				height: 20px;
-				padding: 16px 18px 18px 14px;
-				align-items: center;
-				gap: 6px;
-				color: var(--bg-cherry-400) !important;
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-			}
+		.delete-dashboard .ant-btn {
+			color: var(--bg-cherry-400) !important;
 		}
 	}
 }
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
@@ -211,7 +211,12 @@
 			display: grid;
 			grid-template-columns: max-content 1fr;

+			.typography-variables {
+				display: block;
+			}
+
 			.default-value-description {
+				display: block;
 				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
@@ -11,7 +11,7 @@ import {
 	SyncTooltipFilterMode,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, Info, X } from '@signozhq/icons';
+import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';

 import styles from './GeneralSettings.module.scss';
@@ -201,7 +201,7 @@ function GeneralDashboardSettings(): JSX.Element {
 						placement="top"
 						mouseEnterDelay={0.5}
 					>
-						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
+						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
 					</Tooltip>
 				</div>
 				<div className={styles.crossPanelSyncRow}>
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -5,7 +5,8 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { BellDot, CircleAlert, ExternalLink, Save } from '@signozhq/icons';
-import { Button, FormInstance, Modal, SelectProps } from 'antd';
+import { Button, FormInstance, SelectProps } from 'antd';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -162,6 +163,7 @@ function FormAlertRules({
 	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);

 	const [detectionMethod, setDetectionMethod] = useState<string | null>(null);
+	const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);

 	useEffect(() => {
 		if (!isEqual(currentQuery.unit, yAxisUnit)) {
@@ -577,19 +579,16 @@ function FormAlertRules({
 			});

 			// invalidate rule in cache
-			ruleCache.invalidateQueries([
+			await ruleCache.invalidateQueries([
 				REACT_QUERY_KEY.ALERT_RULE_DETAILS,
 				`${ruleId}`,
 			]);

-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setTimeout(() => {
-				urlQuery.delete(QueryParams.compositeQuery);
-				urlQuery.delete(QueryParams.panelTypes);
-				urlQuery.delete(QueryParams.ruleId);
-				urlQuery.delete(QueryParams.relativeTime);
-				safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
-			}, 2000);
+			urlQuery.delete(QueryParams.compositeQuery);
+			urlQuery.delete(QueryParams.panelTypes);
+			urlQuery.delete(QueryParams.ruleId);
+			urlQuery.delete(QueryParams.relativeTime);
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
 		} catch (e) {
 			const apiError = convertToApiError(e as AxiosError<RenderErrorResponseDTO>);
 			logData = {
@@ -625,24 +624,9 @@ function FormAlertRules({
 		urlQuery,
 	]);

-	const onSaveHandler = useCallback(async () => {
-		const content = (
-			<Typography.Text>
-				{' '}
-				{t('confirm_save_content_part1')}{' '}
-				<QueryTypeTag queryType={currentQuery.queryType} />{' '}
-				{t('confirm_save_content_part2')}
-			</Typography.Text>
-		);
-		Modal.confirm({
-			icon: <CircleAlert size="md" />,
-			title: t('confirm_save_title'),
-			centered: true,
-			content,
-			onOk: saveRule,
-			className: 'create-alert-modal',
-		});
-	}, [t, saveRule, currentQuery]);
+	const onSaveHandler = useCallback(() => {
+		setIsConfirmSaveOpen(true);
+	}, []);

 	const onTestRuleHandler = useCallback(async () => {
 		if (!isFormValid()) {
@@ -988,6 +972,27 @@ function FormAlertRules({
 					</ButtonContainer>
 				</MainFormContainer>
 			</div>
+
+			<ConfirmDialog
+				open={isConfirmSaveOpen}
+				onOpenChange={setIsConfirmSaveOpen}
+				title={t('confirm_save_title')}
+				titleIcon={<CircleAlert size={14} />}
+				confirmText="OK"
+				confirmColor="primary"
+				onConfirm={async (): Promise<boolean> => {
+					await saveRule();
+					return true;
+				}}
+				onCancel={() => setIsConfirmSaveOpen(false)}
+				width="narrow"
+			>
+				<Typography.Text>
+					{t('confirm_save_content_part1')}{' '}
+					<QueryTypeTag queryType={currentQuery.queryType} />{' '}
+					{t('confirm_save_content_part2')}
+				</Typography.Text>
+			</ConfirmDialog>
 		</>
 	);
 }
--- a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
@@ -26,10 +26,13 @@
 	gap: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	flex: 1;
+	min-width: 0;
 }

 .widget-header-title {
 	max-width: 80%;
+	min-width: 0;
 }

 .widget-header-actions {
--- a/frontend/src/container/ListOfDashboard/DashboardActions.module.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardActions.module.scss
@@ -0,0 +1,36 @@
+.actionContent {
+	display: flex;
+	flex-direction: column;
+}
+
+.actionBtn {
+	display: flex;
+	padding: 8px;
+	height: unset;
+	align-items: center;
+	gap: 6px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: normal;
+	letter-spacing: 0.14px;
+
+	:global(.ant-icon-btn) {
+		margin-inline-end: 0px;
+	}
+}
+
+.deleteBtn {
+	composes: actionBtn;
+	color: var(--danger-background) !important;
+	border-top: 1px solid var(--l1-border);
+}
+
+.deleteBtn:hover {
+	background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+}
+
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
+}
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -745,52 +745,6 @@
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0px;
-
-		.dashboard-action-content {
-			.section-1 {
-				display: flex;
-				flex-direction: column;
-
-				.action-btn {
-					display: flex;
-					padding: 8px;
-					height: unset;
-					align-items: center;
-					gap: 6px;
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal;
-					letter-spacing: 0.14px;
-
-					.ant-icon-btn {
-						margin-inline-end: 0px;
-					}
-				}
-			}
-
-			.section-2 {
-				display: flex;
-				flex-direction: column;
-				border-top: 1px solid var(--l1-border);
-
-				.ant-typography {
-					display: flex;
-					padding: 12px 8px;
-					align-items: center;
-					gap: 6px;
-					color: var(--bg-cherry-400) !important;
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal;
-					letter-spacing: 0.14px;
-				}
-			}
-		}
 	}
 }

--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -102,6 +102,7 @@ import {
 	filterDashboards,
 } from './utils';

+import styles from './DashboardActions.module.scss';
 import './DashboardList.styles.scss';

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -436,57 +437,53 @@ function DashboardsList(): JSX.Element {
 							{action && (
 								<Popover
 									content={
-										<div className="dashboard-action-content">
-											<section className="section-1">
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Expand size={12} />}
-													onClick={onClickHandler}
-												>
-													View
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<SquareArrowOutUpRight size={12} />}
-													onClick={(e): void => {
-														e.stopPropagation();
-														e.preventDefault();
-														openInNewTab(getLink());
-													}}
-												>
-													Open in New Tab
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Link2 size={12} />}
-													onClick={(e): void => {
-														e.stopPropagation();
-														e.preventDefault();
-														setCopy(getAbsoluteUrl(getLink()));
-													}}
-												>
-													Copy Link
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<FileJson size={12} />}
-													onClick={handleJsonExport}
-												>
-													Export JSON
-												</Button>
-											</section>
-											<section className="section-2">
-												<DeleteButton
-													name={dashboard.name}
-													id={dashboard.id}
-													isLocked={dashboard.isLocked}
-													createdBy={dashboard.createdBy}
-												/>
-											</section>
+										<div className={styles.actionContent}>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<Expand size={12} />}
+												onClick={onClickHandler}
+											>
+												View
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<SquareArrowOutUpRight size={12} />}
+												onClick={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													openInNewTab(getLink());
+												}}
+											>
+												Open in New Tab
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<Link2 size={12} />}
+												onClick={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													setCopy(getAbsoluteUrl(getLink()));
+												}}
+											>
+												Copy Link
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<FileJson size={12} />}
+												onClick={handleJsonExport}
+											>
+												Export JSON
+											</Button>
+											<DeleteButton
+												name={dashboard.name}
+												id={dashboard.id}
+												isLocked={dashboard.isLocked}
+												createdBy={dashboard.createdBy}
+											/>
 										</div>
 									}
 									placement="bottomRight"
--- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.styles.scss
+++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.styles.scss
@@ -1,9 +0,0 @@
-.delete-modal {
-	.ant-modal-confirm-body {
-		align-items: center;
-	}
-}
-
-.delete-btn:hover {
-	background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
-}
--- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { CircleAlert, Trash2 } from '@signozhq/icons';
-import { Flex, Modal, Tooltip } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
@@ -12,10 +12,8 @@ import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

+import styles from '../DashboardActions.module.scss';
 import { Data } from '../DashboardsList';
-import { TableLinkText } from './styles';
-
-import './DeleteButton.styles.scss';

 interface DeleteButtonProps {
 	createdBy: string;
@@ -85,7 +83,7 @@ export function DeleteButton({
 				},
 			},
 			centered: true,
-			className: 'delete-modal',
+			className: styles.deleteModal,
 		});
 	}, [
 		modal,
@@ -109,10 +107,16 @@ export function DeleteButton({
 		return '';
 	};

+	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
+
 	return (
 		<>
 			<Tooltip placement="left" title={getDeleteTooltipContent()}>
-				<TableLinkText
+				<Button
+					type="text"
+					className={styles.deleteBtn}
+					icon={<Trash2 size={12} />}
+					disabled={isDisabled}
 					onClick={(e): void => {
 						e.preventDefault();
 						e.stopPropagation();
@@ -120,13 +124,9 @@ export function DeleteButton({
 							openConfirmationDialog();
 						}
 					}}
-					className="delete-btn"
-					disabled={isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor)}
 				>
-					<Flex align="center" justify="center" gap={4}>
-						<Trash2 size={14} /> Delete dashboard
-					</Flex>
-				</TableLinkText>
+					Delete Dashboard
+				</Button>
 			</Tooltip>

 			{contextHolder}
--- a/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
+++ b/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const TableLinkText = styled.span<{ disabled: boolean }>`
-	color: var(--destructive);
-	cursor: ${({ disabled }): string => (disabled ? 'not-allowed' : 'pointer')};
-	${({ disabled }): string => (disabled ? 'opacity: 0.5;' : '')}
-	padding: var(--spacing-3) var(--spacing-4);
-`;
--- a/frontend/src/container/NewWidget/WidgetModals/DiscardChangesModal.tsx
+++ b/frontend/src/container/NewWidget/WidgetModals/DiscardChangesModal.tsx
@@ -0,0 +1,53 @@
+import { SolidAlertTriangle } from '@signozhq/icons';
+import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { Typography } from '@signozhq/ui/typography';
+
+export interface DiscardChangesModalProps {
+	open: boolean;
+	isNewPanel: boolean;
+	panelTitle?: string;
+	dashboardTitle?: string;
+	onDiscard: () => void;
+	onClose: () => void;
+}
+
+export default function DiscardChangesModal({
+	open,
+	isNewPanel,
+	panelTitle,
+	dashboardTitle,
+	onDiscard,
+	onClose,
+}: DiscardChangesModalProps): JSX.Element {
+	const dashboardName = dashboardTitle ? (
+		<>
+			{' '}
+			to <strong>{dashboardTitle}</strong>
+		</>
+	) : null;
+	const panelLabel = panelTitle ? <strong>{panelTitle}</strong> : 'this panel';
+
+	return (
+		<ConfirmDialog
+			open={open}
+			onOpenChange={(next): void => {
+				if (!next) {
+					onClose();
+				}
+			}}
+			title="Discard changes?"
+			titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
+			confirmText="Discard"
+			confirmColor="destructive"
+			cancelText="Keep editing"
+			onConfirm={onDiscard}
+			onCancel={onClose}
+		>
+			{isNewPanel ? (
+				<Typography>This new panel won&apos;t be added{dashboardName}.</Typography>
+			) : (
+				<Typography>Your unsaved edits to {panelLabel} will be lost.</Typography>
+			)}
+		</ConfirmDialog>
+	);
+}
--- a/frontend/src/container/NewWidget/test/utils.test.ts
+++ b/frontend/src/container/NewWidget/test/utils.test.ts
@@ -1,13 +1,17 @@
 import {
+	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
+import { cloneDeep } from 'lodash-es';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { MetricAggregation } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';

 import type { PartialPanelTypes } from '../utils';
-import { handleQueryChange } from '../utils';
+import { getIsQueryModified, handleQueryChange } from '../utils';

 const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	queryType: EQueryType.QUERY_BUILDER,
@@ -37,6 +41,128 @@ const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	},
 });

+const buildMetricsQuery = (
+	overrides?: Partial<{
+		metricName: string;
+		aggregateAttributeKey: string;
+		legend: string;
+		groupByKey: string;
+	}>,
+): Query => ({
+	queryType: EQueryType.QUERY_BUILDER,
+	promql: [],
+	clickhouse_sql: [],
+	id: 'query-id',
+	unit: '',
+	builder: {
+		queryFormulas: [],
+		queryData: [
+			{
+				...initialQueryBuilderFormValuesMap[DataSource.METRICS],
+				queryName: 'A',
+				aggregateAttribute: overrides?.aggregateAttributeKey
+					? {
+							...initialAutocompleteData,
+							key: overrides.aggregateAttributeKey,
+							type: 'tag',
+							dataType: DataTypes.Float64,
+						}
+					: cloneDeep(initialAutocompleteData),
+				aggregations: [
+					{
+						metricName: overrides?.metricName ?? 'system.cpu.load',
+						temporality: '',
+						timeAggregation: 'rate',
+						spaceAggregation: 'sum',
+						reduceTo: 'avg',
+					} as MetricAggregation,
+				],
+				legend: overrides?.legend ?? '',
+				groupBy: overrides?.groupByKey
+					? [
+							{
+								...initialAutocompleteData,
+								key: overrides.groupByKey,
+								type: 'tag',
+								dataType: DataTypes.String,
+							},
+						]
+					: [],
+			},
+		],
+		queryTraceOperator: [],
+	},
+});
+
+describe('getIsQueryModified', () => {
+	it('returns false when baseline is null (new unsaved panel with no edits anchor)', () => {
+		const current = buildMetricsQuery();
+		expect(getIsQueryModified(current, null)).toBe(false);
+	});
+
+	it('returns false when baseline is undefined', () => {
+		const current = buildMetricsQuery();
+		expect(getIsQueryModified(current, undefined)).toBe(false);
+	});
+
+	it('returns false when current only differs by auto-backfilled aggregateAttribute', () => {
+		// saved widget query: aggregateAttribute is the v5-style empty initial value
+		// (stripped from persisted spec; spread back in as initialAutocompleteData on load)
+		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
+		// after MetricNameSelector edit-mode backfill, currentQuery has the populated
+		// aggregateAttribute while the rest of the query is identical
+		const currentQuery = buildMetricsQuery({
+			metricName: 'system.cpu.load',
+			aggregateAttributeKey: 'system.cpu.load',
+		});
+		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(false);
+	});
+
+	it('returns true when the user edits the legend', () => {
+		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
+		const edited = buildMetricsQuery({
+			metricName: 'system.cpu.load',
+			legend: 'cpu-load',
+		});
+		expect(getIsQueryModified(edited, baseline)).toBe(true);
+	});
+
+	it('returns true when the user picks a different metric (aggregations diverges)', () => {
+		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
+		const edited = buildMetricsQuery({ metricName: 'system.memory.usage' });
+		expect(getIsQueryModified(edited, baseline)).toBe(true);
+	});
+
+	it('returns true when the user adds a groupBy', () => {
+		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
+		const edited = buildMetricsQuery({
+			metricName: 'system.cpu.load',
+			groupByKey: 'host.name',
+		});
+		expect(getIsQueryModified(edited, baseline)).toBe(true);
+	});
+
+	it('returns true on existing widget when current diverges from saved (Stage-and-Run silent-loss flow)', () => {
+		// After Edit → Stage and Run, stagedQuery is reset to match currentQuery.
+		// The dirty check must compare against the SAVED widget query, not stagedQuery.
+		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
+		const currentQuery = buildMetricsQuery({ metricName: 'system.memory.usage' });
+		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(true);
+	});
+
+	it('returns false for a new panel where currentQuery still matches stagedQuery baseline', () => {
+		const stagedQuery = buildMetricsQuery();
+		const currentQuery = buildMetricsQuery();
+		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(false);
+	});
+
+	it('returns true for a new panel where currentQuery has been edited away from stagedQuery', () => {
+		const stagedQuery = buildMetricsQuery();
+		const currentQuery = buildMetricsQuery({ legend: 'custom' });
+		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(true);
+	});
+});
+
 describe('handleQueryChange', () => {
 	it('sets list-specific fields when switching to LIST', () => {
 		const superset = buildSupersetQuery();
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -1,18 +1,17 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
-import { Check, SolidAlertTriangle, X } from '@signozhq/icons';
+import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/ui/resizable';
-import { Flex, Modal, Space } from 'antd';
+import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -69,7 +68,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType, getGraphTypeForFormat } from 'utils/getGraphType';

 import LeftContainer from './LeftContainer';
-import QueryTypeTag from './LeftContainer/QueryTypeTag';
 import RightContainer from './RightContainer';
 import { ThresholdProps } from './RightContainer/Threshold/types';
 import TimeItems, { timePreferance } from './RightContainer/timeItems';
@@ -82,6 +80,7 @@ import {
 	placeWidgetAtBottom,
 	placeWidgetBetweenRows,
 } from './utils';
+import DiscardChangesModal from './WidgetModals/DiscardChangesModal';

 import './NewWidget.styles.scss';

@@ -98,8 +97,6 @@ function NewWidget({

 	const { dashboardVariables } = useDashboardVariables();

-	const { t } = useTranslation(['dashboard']);
-
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();

 	const {
@@ -110,11 +107,6 @@ function NewWidget({
 		setSupersetQuery,
 	} = useQueryBuilder();

-	const isQueryModified = useMemo(
-		() => getIsQueryModified(currentQuery, stagedQuery),
-		[currentQuery, stagedQuery],
-	);
-
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -139,6 +131,23 @@ function NewWidget({

 	const query = useUrlQuery();

+	// For existing widgets, compare currentQuery against the saved widget query
+	// (stable across Stage-and-Run cycles). For new panels with no saved baseline,
+	// fall back to stagedQuery so initial edits still trigger the warning.
+	const savedWidgetQuery = useMemo(() => {
+		const widgetId = query.get('widgetId');
+		const match = widgets?.find((w) => w.id === widgetId);
+		if (!match || match.panelTypes === PANEL_GROUP_TYPES.ROW) {
+			return null;
+		}
+		return (match as Widgets).query ?? null;
+	}, [widgets, query]);
+
+	const isQueryModified = useMemo(
+		() => getIsQueryModified(currentQuery, savedWidgetQuery ?? stagedQuery),
+		[currentQuery, savedWidgetQuery, stagedQuery],
+	);
+
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);

 	const logEventCalledRef = useRef(false);
@@ -228,7 +237,6 @@ function NewWidget({
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});

-	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);

 	const [bucketWidth, setBucketWidth] = useState<number>(
@@ -340,7 +348,6 @@ function NewWidget({
 	]);

 	const closeModal = (): void => {
-		setSaveModal(false);
 		setDiscardModal(false);
 	};

@@ -593,7 +600,7 @@ function NewWidget({
 			},
 		};

-		updateDashboardMutation.mutateAsync(dashboard, {
+		return updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				navigateToDashboardPage();
@@ -688,9 +695,9 @@ function NewWidget({
 				})),
 			}),
 		});
-		setSaveModal(true);
+		onClickSaveHandler();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel]);
+	}, [onClickSaveHandler]);

 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -951,57 +958,14 @@ function NewWidget({
 					</ResizablePanel>
 				</ResizablePanelGroup>
 			</PanelContainer>
-			<Modal
-				title={
-					isQueryModified ? (
-						<Space>
-							<SolidAlertTriangle size={16} color="#fdd600" />
-							Unsaved Changes
-						</Space>
-					) : (
-						'Save Widget'
-					)
-				}
-				focusTriggerAfterClose
-				forceRender
-				destroyOnClose
-				closable
-				onCancel={closeModal}
-				onOk={onClickSaveHandler}
-				confirmLoading={updateDashboardMutation.isLoading}
-				centered
-				open={saveModal}
-				width={600}
-			>
-				{!isQueryModified ? (
-					<Typography>
-						{t('your_graph_build_with')}{' '}
-						<QueryTypeTag queryType={currentQuery.queryType} />{' '}
-						{t('dashboard_ok_confirm')}
-					</Typography>
-				) : (
-					<Typography>{t('dashboard_unsave_changes')} </Typography>
-				)}
-			</Modal>
-			<Modal
-				title={
-					<Space>
-						<SolidAlertTriangle size={16} color="#fdd600" />
-						Unsaved Changes
-					</Space>
-				}
-				focusTriggerAfterClose
-				forceRender
-				destroyOnClose
-				closable
-				onCancel={closeModal}
-				onOk={discardChanges}
-				centered
+			<DiscardChangesModal
 				open={discardModal}
-				width={600}
-			>
-				<Typography>{t('dashboard_unsave_changes')}</Typography>
-			</Modal>
+				isNewPanel={isNewPanel}
+				panelTitle={title}
+				dashboardTitle={dashboardData?.data?.title}
+				onDiscard={discardChanges}
+				onClose={closeModal}
+			/>
 		</Container>
 	);
 }
--- a/frontend/src/container/NewWidget/utils.ts
+++ b/frontend/src/container/NewWidget/utils.ts
@@ -1,5 +1,4 @@
 import { Layout } from 'react-grid-layout';
-import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 import {
@@ -26,16 +25,84 @@ import { DataSource } from 'types/common/queryBuilder';

 import { getCategoryName } from './RightContainer/dataFormatCategories';

+// Asks "would saving the current panel change the persisted widget spec?".
+//
+// `adjustQueryForV5` is deliberately not reused here: in addition to stripping
+// the legacy v4 fields, it also resurrects them onto each metric
+// `aggregations[i]`. That migration step is correct on save but bleeds
+// asymmetrically across a comparator — the live query still carries the
+// legacy defaults from `initialQueryBuilderFormValuesMap` while a previously
+// saved widget had them stripped.
+const stripQueryDataForCompare = (
+	queryData: IBuilderQuery,
+): Record<string, unknown> => {
+	const {
+		aggregateAttribute: _aggregateAttribute,
+		aggregateOperator: _aggregateOperator,
+		timeAggregation: _timeAggregation,
+		spaceAggregation: _spaceAggregation,
+		reduceTo: _reduceTo,
+		filters: _filters,
+		...retained
+	} = queryData ?? ({} as IBuilderQuery);
+
+	const groupBy = (retained.groupBy ?? []).map((entry) => {
+		const { id: _id, ...rest } = entry;
+		return rest;
+	});
+
+	return {
+		...retained,
+		groupBy,
+		source: retained.source || '',
+	};
+};
+
+const normalizeForDirtyCheck = (query: Query): Record<string, unknown> => {
+	const { id: _id, unit, builder, ...rest } = query;
+	return {
+		...rest,
+		// `id` is regenerated on every Stage and Run; `unit` flips between ''
+		// and undefined depending on whether the user has touched the selector.
+		unit: unit || '',
+		builder: {
+			...builder,
+			queryData: (builder?.queryData ?? []).map(stripQueryDataForCompare),
+		},
+	};
+};
+
+// `lodash.isEqual` distinguishes `{a: undefined}` from `{}`; for the dirty
+// check those are the same. Initial-values spreads on the live query
+// frequently leave such explicit-undefined keys.
+const stripUndefined = (value: unknown): unknown => {
+	if (Array.isArray(value)) {
+		return value.map(stripUndefined);
+	}
+	if (value && typeof value === 'object') {
+		const out: Record<string, unknown> = {};
+		Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
+			if (v === undefined) {
+				return;
+			}
+			out[k] = stripUndefined(v);
+		});
+		return out;
+	}
+	return value;
+};
+
 export const getIsQueryModified = (
 	currentQuery: Query,
-	stagedQuery: Query | null,
+	baselineQuery: Query | null | undefined,
 ): boolean => {
-	if (!stagedQuery) {
+	if (!baselineQuery) {
 		return false;
 	}
-	const omitIdFromStageQuery = omitIdFromQuery(stagedQuery);
-	const omitIdFromCurrentQuery = omitIdFromQuery(currentQuery);
-	return !isEqual(omitIdFromStageQuery, omitIdFromCurrentQuery);
+	return !isEqual(
+		stripUndefined(normalizeForDirtyCheck(baselineQuery)),
+		stripUndefined(normalizeForDirtyCheck(currentQuery)),
+	);
 };

 export type PartialPanelTypes = {
--- a/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
@@ -21,14 +21,13 @@ import {
 	buildRoleUpdatePermission,
 } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';

 import type { AuthzResources } from '../utils';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ROUTES from 'constants/routes';
 import { capitalize } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { handleApiError, toAPIError } from 'utils/errorUtils';

@@ -54,7 +53,8 @@ function RoleDetailsPage(): JSX.Element {

 	const queryClient = useQueryClient();
 	const { showErrorModal } = useErrorModal();
-	const { activeLicense, isFetchingActiveLicense } = useAppContext();
+	const { isRolesEnabled, isLoading: isRolesGateLoading } =
+		useRolesFeatureGate();

 	const authzResources: AuthzResources = permissionsType.data;

@@ -161,7 +161,7 @@ function RoleDetailsPage(): JSX.Element {
 		},
 	});

-	if (isFetchingActiveLicense) {
+	if (isRolesGateLoading) {
 		return (
 			<div className="role-details-page">
 				<Skeleton
@@ -173,7 +173,7 @@ function RoleDetailsPage(): JSX.Element {
 		);
 	}

-	if (activeLicense?.status !== LicenseStatus.VALID) {
+	if (!isRolesEnabled) {
 		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
 	}

--- a/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
@@ -7,6 +7,7 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { Route, Switch } from 'react-router-dom';
 import {
+	defaultFeatureFlags,
 	fireEvent,
 	render,
 	screen,
@@ -14,6 +15,7 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import { FeatureKeys } from 'constants/features';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	invalidLicense,
@@ -254,6 +256,34 @@ describe('RoleDetailsPage', () => {
 		).resolves.toBeInTheDocument();
 	});

+	it('redirects to the roles list when fine-grained authz flag is inactive', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: {
+					featureFlags: defaultFeatureFlags.map((f) =>
+						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+							? { ...f, active: false }
+							: f,
+					),
+				},
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
 	describe('permission side panel', () => {
 		beforeEach(() => {
 			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
--- a/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
+++ b/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
@@ -9,11 +9,10 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';

@@ -32,8 +31,7 @@ interface RolesListingTableProps {
 function RolesListingTable({
 	searchQuery,
 }: RolesListingTableProps): JSX.Element {
-	const { activeLicense } = useAppContext();
-	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const { isRolesEnabled } = useRolesFeatureGate();

 	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
 		RoleListPermission,
@@ -208,11 +206,11 @@ function RolesListingTable({
 	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
-			className={`roles-table-row${isValidLicense ? ' roles-table-row--clickable' : ''}`}
-			role={isValidLicense ? 'button' : undefined}
-			tabIndex={isValidLicense ? 0 : undefined}
+			className={`roles-table-row${isRolesEnabled ? ' roles-table-row--clickable' : ''}`}
+			role={isRolesEnabled ? 'button' : undefined}
+			tabIndex={isRolesEnabled ? 0 : undefined}
 			onClick={
-				isValidLicense
+				isRolesEnabled
 					? (): void => {
 							if (role.id) {
 								navigateToRole(role.id, role.name);
@@ -221,7 +219,7 @@ function RolesListingTable({
 					: undefined
 			}
 			onKeyDown={
-				isValidLicense
+				isRolesEnabled
 					? (e): void => {
 							if ((e.key === 'Enter' || e.key === ' ') && role.id) {
 								navigateToRole(role.id, role.name);
--- a/frontend/src/container/RolesSettings/RolesSettings.tsx
+++ b/frontend/src/container/RolesSettings/RolesSettings.tsx
@@ -4,8 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAppContext } from 'providers/App/App';
-import { LicenseStatus } from 'types/api/licensesV3/getActive';
+import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';

 import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -15,8 +14,7 @@ import './RolesSettings.styles.scss';
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-	const { activeLicense } = useAppContext();
-	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const { isRolesEnabled } = useRolesFeatureGate();

 	return (
 		<div className="roles-settings" data-testid="roles-settings">
@@ -42,7 +40,7 @@ function RolesSettings(): JSX.Element {
 						value={searchQuery}
 						onChange={(e): void => setSearchQuery(e.target.value)}
 					/>
-					{isValidLicense && (
+					{isRolesEnabled && (
 						<AuthZTooltip checks={[RoleCreatePermission]}>
 							<Button
 								variant="solid"
--- a/frontend/src/container/RolesSettings/tests/RolesSettings.test.tsx
+++ b/frontend/src/container/RolesSettings/tests/RolesSettings.test.tsx
@@ -4,7 +4,13 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { fireEvent, render, screen } from 'tests/test-utils';
+import {
+	defaultFeatureFlags,
+	fireEvent,
+	render,
+	screen,
+} from 'tests/test-utils';
+import { FeatureKeys } from 'constants/features';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';

@@ -176,6 +182,30 @@ describe('RolesSettings', () => {
 		}
 	});

+	it('hides the create button and disables row clicks when fine-grained authz flag is inactive', async () => {
+		render(<RolesSettings />, undefined, {
+			appContextOverrides: {
+				featureFlags: defaultFeatureFlags.map((f) =>
+					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
+						? { ...f, active: false }
+						: f,
+				),
+			},
+		});
+
+		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
+
+		expect(
+			screen.queryByRole('button', { name: /custom role/i }),
+		).not.toBeInTheDocument();
+
+		const rows = document.querySelectorAll('.roles-table-row');
+		rows.forEach((row) => {
+			expect(row).not.toHaveClass('roles-table-row--clickable');
+			expect(row.getAttribute('role')).not.toBe('button');
+		});
+	});
+
 	it('hides the create button and disables row clicks when license is not valid', async () => {
 		render(<RolesSettings />, undefined, {
 			appContextOverrides: { activeLicense: invalidLicense },
--- a/frontend/src/hooks/useRolesFeatureGate.ts
+++ b/frontend/src/hooks/useRolesFeatureGate.ts
@@ -0,0 +1,27 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
+
+export const useRolesFeatureGate = (): {
+	isRolesEnabled: boolean;
+	isLoading: boolean;
+} => {
+	const {
+		activeLicense,
+		featureFlags,
+		isFetchingActiveLicense,
+		isFetchingFeatureFlags,
+	} = useAppContext();
+
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+	const isFineGrainedAuthzEnabled =
+		featureFlags?.find((f) => f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ)
+			?.active ?? false;
+
+	return {
+		isRolesEnabled: isValidLicense && isFineGrainedAuthzEnabled,
+		isLoading:
+			(isFetchingActiveLicense && !activeLicense) ||
+			(isFetchingFeatureFlags && !featureFlags),
+	};
+};
--- a/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx
@@ -112,11 +112,11 @@ export function SpanHoverCard({
 		}
 		const span = spans[idx];
 		const previewRows: SpanPreviewRow[] = previewFields
-			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.key))
+			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.name))
 			.map((f) => {
-				const value = getSpanAttribute(span, f.key);
+				const value = getSpanAttribute(span, f.name);
 				return value !== undefined && value !== ''
-					? { key: f.key, value: String(value) }
+					? { key: f.name, value: String(value) }
 					: null;
 			})
 			.filter((r): r is SpanPreviewRow => r !== null);
--- a/frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx
@@ -10,6 +10,7 @@ import {
 import { Skeleton } from 'antd';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import cx from 'classnames';
+import FieldsSelector from 'components/FieldsSelector';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -23,12 +24,10 @@ import {
 	Server,
 	Timer,
 } from '@signozhq/icons';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 import { DataSource } from 'types/common/queryBuilder';

-import FieldsSettings from '../components/FieldsSettings/FieldsSettings';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
@@ -226,26 +225,15 @@ function TraceDetailsHeader({
 				</div>
 			)}

-			{isPreviewFieldsOpen && (
-				<FloatingPanel
-					isOpen
-					width={350}
-					height={window.innerHeight - 100}
-					defaultPosition={{
-						x: window.innerWidth - 350 - 100,
-						y: 50,
-					}}
-					enableResizing={false}
-				>
-					<FieldsSettings
-						title="Preview fields"
-						fields={previewFields}
-						onFieldsChange={setPreviewFields}
-						onClose={(): void => setIsPreviewFieldsOpen(false)}
-						dataSource={DataSource.TRACES}
-					/>
-				</FloatingPanel>
-			)}
+			<FieldsSelector
+				isOpen={isPreviewFieldsOpen}
+				title="Preview fields"
+				fields={previewFields}
+				onFieldsChange={setPreviewFields}
+				onClose={(): void => setIsPreviewFieldsOpen(false)}
+				signal={DataSource.TRACES}
+				maxFields={10}
+			/>

 			<AnalyticsPanel
 				isOpen={isAnalyticsOpen}
--- a/frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx
@@ -9,10 +9,7 @@ import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { COLOR_BY_FIELDS } from '../constants';
 import { useTraceStore } from '../stores/traceStore';
 import Error from '../TraceWaterfall/TraceWaterfallStates/Error/Error';
-import {
-	mergeTelemetryFieldKeys,
-	toTelemetryFieldKey,
-} from '../utils/previewFields';
+import { mergeTelemetryFieldKeys } from '../utils/previewFields';
 import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
 import FlamegraphCanvas from './FlamegraphCanvas';
 import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
@@ -60,11 +57,7 @@ function TraceFlamegraph({
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
 	const flamegraphSelectFields = useMemo(
-		() =>
-			mergeTelemetryFieldKeys(
-				COLOR_BY_FIELDS,
-				previewFields.map(toTelemetryFieldKey),
-			),
+		() => mergeTelemetryFieldKeys(COLOR_BY_FIELDS, previewFields),
 		[previewFields],
 	);

--- a/frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts
+++ b/frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts
@@ -144,14 +144,14 @@ export function useFlamegraphHover(
 	const buildPreviewRows = useCallback(
 		(span: FlamegraphSpan): SpanPreviewRowData[] =>
 			previewFields
-				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.key))
+				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.name))
 				.map((field) => {
 					const value = getSpanAttribute(
 						{ resource: span.resource, attributes: span.attributes },
-						field.key,
+						field.name,
 					);
 					return value !== undefined && value !== ''
-						? { key: field.key, value: String(value) }
+						? { key: field.name, value: String(value) }
 						: null;
 				})
 				.filter((r): r is SpanPreviewRowData => r !== null),
--- a/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx
+++ b/frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx
@@ -1,149 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddedFields from './AddedFields';
-import OtherFields from './OtherFields';
-
-import styles from './FieldsSettings.module.scss';
-
-const MAX_FIELDS_DEFAULT = 10;
-
-interface FieldsSettingsProps {
-	title: string;
-	// Picker's native shape (`BaseAutocompleteData`) is preserved end-to-end so
-	// downstream consumers (flamegraph `selectFields`, hover popovers) get full
-	// field metadata without a lossy conversion at add-time.
-	fields: BaseAutocompleteData[];
-	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
-	onClose: () => void;
-	dataSource: DataSource;
-	maxFields?: number;
-}
-
-function FieldsSettings({
-	title,
-	fields,
-	onFieldsChange,
-	onClose,
-	dataSource,
-	maxFields = MAX_FIELDS_DEFAULT,
-}: FieldsSettingsProps): JSX.Element {
-	// Local draft state — changes here don't persist until Save
-	const [draftFields, setDraftFields] = useState<BaseAutocompleteData[]>(fields);
-	const [inputValue, setInputValue] = useState('');
-	const [debouncedInputValue, setDebouncedInputValue] = useState('');
-
-	const debouncedUpdate = useDebouncedFn((value) => {
-		setDebouncedInputValue(value as string);
-	}, 400);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
-			setInputValue(value);
-			debouncedUpdate(value);
-		},
-		[debouncedUpdate],
-	);
-
-	const handleAdd = useCallback(
-		(field: BaseAutocompleteData): void => {
-			if (draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.key === field.key)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
-		},
-		[draftFields, maxFields],
-	);
-
-	const handleSave = useCallback((): void => {
-		onFieldsChange(draftFields);
-		toast.success('Saved successfully', {
-			position: 'top-right',
-		});
-		onClose();
-	}, [draftFields, onFieldsChange, onClose]);
-
-	const handleDiscard = useCallback((): void => {
-		setDraftFields(fields);
-	}, [fields]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.key === fields[i]?.key)
-			),
-		[draftFields, fields],
-	);
-
-	const isAtLimit = draftFields.length >= maxFields;
-
-	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
-				<div className={styles.title}>
-					<TableColumnsSplit size={16} />
-					{title}
-				</div>
-				<X className={styles.closeIcon} size={16} onClick={onClose} />
-			</div>
-
-			<section>
-				<Input
-					className={styles.searchInput}
-					type="text"
-					value={inputValue}
-					placeholder="Search for a field..."
-					onChange={handleInputChange}
-				/>
-			</section>
-
-			<AddedFields
-				inputValue={inputValue}
-				fields={draftFields}
-				onFieldsChange={setDraftFields}
-			/>
-
-			<OtherFields
-				dataSource={dataSource}
-				debouncedInputValue={debouncedInputValue}
-				addedFields={draftFields}
-				onAdd={handleAdd}
-				isAtLimit={isAtLimit}
-			/>
-
-			{hasUnsavedChanges && (
-				<div className={styles.footer}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={handleDiscard}
-						prefix={<X width={14} height={14} />}
-					>
-						Discard
-					</Button>
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={handleSave}
-						prefix={<Check width={14} height={14} />}
-					>
-						Save changes
-					</Button>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default FieldsSettings;
--- a/frontend/src/pages/TraceDetailsV3/stores/traceStore.ts
+++ b/frontend/src/pages/TraceDetailsV3/stores/traceStore.ts
@@ -15,6 +15,7 @@ import {
 	AGGREGATIONS,
 	getAggregationMap as findAggregationMap,
 } from '../utils/aggregations';
+import { toTelemetryFieldKey } from '../utils/previewFields';

 interface MutateOptions {
 	onSuccess?: () => void;
@@ -37,7 +38,7 @@ interface TraceStoreState {
 	// --- Derived state (cached for reference stability) ---
 	colorByField: TelemetryFieldKey;
 	availableColorByOptions: ColorByOption[];
-	previewFields: BaseAutocompleteData[];
+	previewFields: TelemetryFieldKey[];

 	// --- Setters used only by TraceStoreSync ---
 	setAggregations: (
@@ -51,7 +52,7 @@ interface TraceStoreState {

 	// --- Public actions (called from components) ---
 	setColorByField: (field: TelemetryFieldKey) => void;
-	setPreviewFields: (next: BaseAutocompleteData[]) => void;
+	setPreviewFields: (next: TelemetryFieldKey[]) => void;
 }

 /**
@@ -105,21 +106,31 @@ function deriveColorState(
 }

 /**
- * Reads preview fields from user preferences and filters out malformed entries.
+ * Reads preview fields from user preferences and normalizes them to
+ * `TelemetryFieldKey`. Legacy entries persisted as `BaseAutocompleteData` (with
+ * a `.key` instead of `.name`) are upgraded in-place so existing users don't
+ * lose their saved preview-field selection.
 */
 function derivePreviewFields(
 	userPreferences: UserPreference[] | null,
-): BaseAutocompleteData[] {
+): TelemetryFieldKey[] {
 	const pref = userPreferences?.find(
 		(p) => p.name === USER_PREFERENCES.SPAN_DETAILS_PREVIEW_ATTRIBUTES,
 	);
-	const raw = (pref?.value as BaseAutocompleteData[] | undefined) ?? [];
-	return raw.filter(
-		(f): f is BaseAutocompleteData =>
-			typeof f === 'object' &&
-			f !== null &&
-			typeof (f as { key?: unknown }).key === 'string',
-	);
+	const raw = (pref?.value as unknown[] | undefined) ?? [];
+	const result: TelemetryFieldKey[] = [];
+	for (const entry of raw) {
+		if (typeof entry !== 'object' || entry === null) {
+			continue;
+		}
+		const candidate = entry as { name?: unknown; key?: unknown };
+		if (typeof candidate.name === 'string') {
+			result.push(entry as TelemetryFieldKey);
+		} else if (typeof candidate.key === 'string') {
+			result.push(toTelemetryFieldKey(entry as BaseAutocompleteData));
+		}
+	}
+	return result;
 }

 export const useTraceStore = create<TraceStoreState>()((set, get) => ({
--- a/frontend/src/pages/TraceDetailsV3/utils/previewFields.ts
+++ b/frontend/src/pages/TraceDetailsV3/utils/previewFields.ts
@@ -41,8 +41,9 @@ function mapFieldDataType(
 }

 /**
- * Convert a picker-shaped field to the API's `TelemetryFieldKey` shape used
- * for `selectFields` on the flamegraph request.
+ * Upgrades a legacy `BaseAutocompleteData`-shaped preview field (persisted by
+ * pre-migration clients) to the current `TelemetryFieldKey` shape. Kept around
+ * for the read-side compatibility shim in `traceStore.derivePreviewFields`.
 */
 export function toTelemetryFieldKey(
 	field: BaseAutocompleteData,
@@ -51,6 +52,7 @@ export function toTelemetryFieldKey(
 		name: field.key,
 		fieldContext: mapFieldContext(field.type),
 		fieldDataType: mapFieldDataType(field.dataType),
+		isIndexed: field.isIndexed,
 	};
 }

--- a/frontend/src/tests/test-utils.tsx
+++ b/frontend/src/tests/test-utils.tsx
@@ -105,6 +105,59 @@ jest.mock('react-i18next', () => ({
 	}),
 }));

+export const defaultFeatureFlags = [
+	{ name: FeatureKeys.SSO, active: true, usage: 0, usage_limit: -1, route: '' },
+	{
+		name: FeatureKeys.USE_SPAN_METRICS,
+		active: false,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.GATEWAY,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.PREMIUM_SUPPORT,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.ANOMALY_DETECTION,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.ONBOARDING,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.CHAT_SUPPORT,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+	{
+		name: FeatureKeys.USE_FINE_GRAINED_AUTHZ,
+		active: true,
+		usage: 0,
+		usage_limit: -1,
+		route: '',
+	},
+];
+
 export function getAppContextMock(
 	role: string,
 	appContextOverrides?: Partial<IAppContext>,
@@ -168,57 +221,7 @@ export function getAppContextMock(
 		hasEditPermission: role === USER_ROLES.ADMIN || role === USER_ROLES.EDITOR,
 		isFetchingUser: false,
 		userFetchError: null,
-		featureFlags: [
-			{
-				name: FeatureKeys.SSO,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.USE_SPAN_METRICS,
-				active: false,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.GATEWAY,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.PREMIUM_SUPPORT,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.ANOMALY_DETECTION,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.ONBOARDING,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-			{
-				name: FeatureKeys.CHAT_SUPPORT,
-				active: true,
-				usage: 0,
-				usage_limit: -1,
-				route: '',
-			},
-		],
+		featureFlags: defaultFeatureFlags,
 		isFetchingFeatureFlags: false,
 		featureFlagsFetchError: null,
 		hostsData: null,
--- a/pkg/flagger/registry.go
+++ b/pkg/flagger/registry.go
@@ -9,7 +9,8 @@ var (
 	FeatureGetMetersFromZeus = featuretypes.MustNewName("get_meters_from_zeus")
 	FeaturePutMetersInZeus   = featuretypes.MustNewName("put_meters_in_zeus")
 	FeatureUseMeterReporter  = featuretypes.MustNewName("use_meter_reporter")
-	FeatureUseJSONBody       = featuretypes.MustNewName("use_json_body")
+	FeatureUseJSONBody            = featuretypes.MustNewName("use_json_body")
+	FeatureUseFineGrainedAuthz    = featuretypes.MustNewName("use_fine_grained_authz")
 )

 func MustNewRegistry() featuretypes.Registry {
@@ -70,6 +71,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeatureUseFineGrainedAuthz,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageExperimental,
+			Description:    "Controls whether fine-grained authorization is enabled",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)
--- a/pkg/query-service/app/http_handler.go
+++ b/pkg/query-service/app/http_handler.go
@@ -1784,6 +1784,15 @@ func (aH *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})

+	fineGrainedAuthz := aH.Signoz.Flagger.BooleanOrEmpty(r.Context(), flagger.FeatureUseFineGrainedAuthz, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
+		Active:     fineGrainedAuthz,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {
--- a/pkg/ruler/rulestore/sqlrulestore/maintenance.go
+++ b/pkg/ruler/rulestore/sqlrulestore/maintenance.go
@@ -2,9 +2,11 @@ package sqlrulestore

 import (
 	"context"
+	"log/slog"
 	"time"

 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -14,10 +16,14 @@ import (

 type maintenance struct {
 	sqlstore sqlstore.SQLStore
+	logger   *slog.Logger
 }

-func NewMaintenanceStore(store sqlstore.SQLStore) ruletypes.MaintenanceStore {
-	return &maintenance{sqlstore: store}
+func NewMaintenanceStore(store sqlstore.SQLStore, providerSettings factory.ProviderSettings) ruletypes.MaintenanceStore {
+	return &maintenance{
+		sqlstore: store,
+		logger:   providerSettings.Logger,
+	}
 }

 func (r *maintenance) ListPlannedMaintenance(ctx context.Context, orgID string) ([]*ruletypes.PlannedMaintenance, error) {
@@ -35,7 +41,11 @@ func (r *maintenance) ListPlannedMaintenance(ctx context.Context, orgID string)

 	gettablePlannedMaintenance := make([]*ruletypes.PlannedMaintenance, 0)
 	for _, gettableMaintenancesRule := range gettableMaintenancesRules {
-		gettablePlannedMaintenance = append(gettablePlannedMaintenance, gettableMaintenancesRule.ToPlannedMaintenance())
+		m := gettableMaintenancesRule.ToPlannedMaintenance()
+		gettablePlannedMaintenance = append(gettablePlannedMaintenance, m)
+		if m.HasScheduleRecurrenceBoundsMismatch() {
+			r.logger.WarnContext(ctx, "planned_downtime_recurrence_schedule_mismatch", slog.String("maintenance_id", m.ID.StringValue()))
+		}
 	}

 	return gettablePlannedMaintenance, nil
--- a/pkg/ruler/signozruler/provider.go
+++ b/pkg/ruler/signozruler/provider.go
@@ -44,7 +44,7 @@ func NewFactory(
 ) factory.ProviderFactory[ruler.Ruler, ruler.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config ruler.Config) (ruler.Ruler, error) {
 		ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
-		maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
+		maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore, providerSettings)

 		managerOpts := &rules.ManagerOptions{
 			TelemetryStore:         telemetryStore,
--- a/pkg/types/ruletypes/maintenance.go
+++ b/pkg/types/ruletypes/maintenance.go
@@ -11,9 +11,7 @@ import (
 	"github.com/uptrace/bun"
 )

-var (
-	ErrCodeInvalidPlannedMaintenancePayload = errors.MustNewCode("invalid_planned_maintenance_payload")
-)
+var ErrCodeInvalidPlannedMaintenancePayload = errors.MustNewCode("invalid_planned_maintenance_payload")

 type MaintenanceStatus struct {
 	valuer.String
@@ -133,6 +131,26 @@ type PlannedMaintenanceWithRules struct {
 	Rules                       []*StorablePlannedMaintenanceRule `bun:"rel:has-many,join:id=planned_maintenance_id"`
 }

+// HasScheduleRecurrenceBoundsMismatch reports whether a recurring maintenance
+// has different start/end bounds in Schedule and Schedule.Recurrence.
+//
+// This is used to detect if there are any entries with recurrence that don't
+// have the same timestamps stored at the schedule-level.
+// UI payloads duplicated those values in both places, but direct API users may
+// have stored bounds that are missing from, or different than, the schedule-level bounds.
+// We need to observe these before we can safely drop Recurrence.StartTime and
+// Recurrence.EndTime.
+func (m *PlannedMaintenance) HasScheduleRecurrenceBoundsMismatch() bool {
+	recurrence := m.Schedule.Recurrence
+	if recurrence == nil {
+		return false
+	}
+
+	return !recurrence.StartTime.Equal(m.Schedule.StartTime) ||
+		(recurrence.EndTime == nil && !m.Schedule.EndTime.IsZero()) ||
+		(recurrence.EndTime != nil && !recurrence.EndTime.Equal(m.Schedule.EndTime))
+}
+
 func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time) bool {
 	// Check if the alert ID is in the maintenance window
 	found := false
@@ -159,42 +177,43 @@ func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time) bool {
 		return false
 	}

-	currentTime := now.In(loc)
+	startTime := m.Schedule.StartTime
+	endTime := m.Schedule.EndTime
+	recurrence := m.Schedule.Recurrence

-	// fixed schedule
-	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() {
-		startTime := m.Schedule.StartTime.In(loc)
-		endTime := m.Schedule.EndTime.In(loc)
-		if currentTime.Equal(startTime) || currentTime.Equal(endTime) ||
-			(currentTime.After(startTime) && currentTime.Before(endTime)) {
+	// fixed schedule — only when no recurrence is configured.
+	// When recurrence is set, the recurring check below handles everything;
+	// falling through here would cause the window to match the absolute
+	// StartTime–EndTime range instead of the daily/weekly/monthly pattern.
+	if recurrence == nil && !startTime.IsZero() && !endTime.IsZero() {
+		if now.Equal(startTime) || now.Equal(endTime) ||
+			(now.After(startTime) && now.Before(endTime)) {
 			return true
 		}
 	}

 	// recurring schedule
-	if m.Schedule.Recurrence != nil {
-		start := m.Schedule.Recurrence.StartTime
-
+	if recurrence != nil {
 		// Make sure the recurrence has started
-		if currentTime.Before(start.In(loc)) {
+		if now.Before(recurrence.StartTime) {
 			return false
 		}

 		// Check if recurrence has expired
-		if m.Schedule.Recurrence.EndTime != nil {
-			endTime := *m.Schedule.Recurrence.EndTime
-			if !endTime.IsZero() && currentTime.After(endTime.In(loc)) {
+		if recurrence.EndTime != nil {
+			if !recurrence.EndTime.IsZero() && now.After(*recurrence.EndTime) {
 				return false
 			}
 		}

-		switch m.Schedule.Recurrence.RepeatType {
+		currentTime := now.In(loc)
+		switch recurrence.RepeatType {
 		case RepeatTypeDaily:
-			return m.checkDaily(currentTime, m.Schedule.Recurrence, loc)
+			return m.checkDaily(currentTime, recurrence, loc)
 		case RepeatTypeWeekly:
-			return m.checkWeekly(currentTime, m.Schedule.Recurrence, loc)
+			return m.checkWeekly(currentTime, recurrence, loc)
 		case RepeatTypeMonthly:
-			return m.checkMonthly(currentTime, m.Schedule.Recurrence, loc)
+			return m.checkMonthly(currentTime, recurrence, loc)
 		}
 	}

--- a/pkg/types/ruletypes/maintenance_test.go
+++ b/pkg/types/ruletypes/maintenance_test.go
@@ -13,7 +13,6 @@ func timePtr(t time.Time) *time.Time {
 }

 func TestShouldSkipMaintenance(t *testing.T) {
-
 	cases := []struct {
 		name        string
 		maintenance *PlannedMaintenance
@@ -499,7 +498,7 @@ func TestShouldSkipMaintenance(t *testing.T) {
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 1, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 4, 1, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
@@ -508,14 +507,14 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 01, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 15, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 4, 15, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
@@ -524,14 +523,14 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 01, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 14, 12, 10, 0, 0, time.UTC), // 14th 04 is sunday
+			ts:   time.Date(2024, 4, 14, 12, 10, 0, 0, time.UTC), // 14th 04 is sunday
 			skip: false,
 		},
 		{
@@ -540,14 +539,14 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 01, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 16, 12, 10, 0, 0, time.UTC), // 16th 04 is tuesday
+			ts:   time.Date(2024, 4, 16, 12, 10, 0, 0, time.UTC), // 16th 04 is tuesday
 			skip: false,
 		},
 		{
@@ -556,14 +555,14 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 01, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
 					},
 				},
 			},
-			ts:   time.Date(2024, 05, 06, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 5, 6, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
@@ -572,14 +571,14 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 01, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
 					},
 				},
 			},
-			ts:   time.Date(2024, 05, 06, 14, 00, 0, 0, time.UTC),
+			ts:   time.Date(2024, 5, 6, 14, 0, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
@@ -588,13 +587,13 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 04, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 04, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 4, 4, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
@@ -603,13 +602,13 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 04, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
 				},
 			},
-			ts:   time.Date(2024, 04, 04, 14, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 4, 4, 14, 10, 0, 0, time.UTC),
 			skip: false,
 		},
 		{
@@ -618,13 +617,52 @@ func TestShouldSkipMaintenance(t *testing.T) {
 				Schedule: &Schedule{
 					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 04, 04, 12, 0, 0, 0, time.UTC),
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
 				},
 			},
-			ts:   time.Date(2024, 05, 04, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 5, 4, 12, 10, 0, 0, time.UTC),
+			skip: true,
+		},
+		// The recurrence should govern, when set. Not the fixed range.
+		{
+			name: "recurring-daily-with-fixed-times-outside-daily-window",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone: "UTC",
+					// These fixed fields should be ignored when Recurrence is set.
+					StartTime: time.Date(2026, 4, 1, 10, 0, 0, 0, time.UTC),
+					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
+					Recurrence: &Recurrence{
+						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC), // daily at 14:00
+						Duration:   valuer.MustParseTextDuration("2h"),           // until 16:00
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			// 11:00 is inside the fixed range but outside the daily 14:00-16:00 window.
+			// Before the fix this returned true (bug); after fix it returns false.
+			ts:   time.Date(2026, 4, 15, 11, 0, 0, 0, time.UTC),
+			skip: false,
+		},
+		{
+			name: "recurring-daily-with-fixed-times-inside-daily-window",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone:  "UTC",
+					StartTime: time.Date(2026, 4, 1, 10, 0, 0, 0, time.UTC),
+					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
+					Recurrence: &Recurrence{
+						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
+						Duration:   valuer.MustParseTextDuration("2h"),
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			// 15:00 is inside the daily 14:00-16:00 window — should skip.
+			ts:   time.Date(2026, 4, 15, 15, 0, 0, 0, time.UTC),
 			skip: true,
 		},
 	}
Author	SHA1	Message	Date
Abhi kumar	5bd4cabbca	fix: added fix for widget warning/save modal states (#11356 ) Some checks are pending build-staging / prepare (push) Waiting to run Details build-staging / js-build (push) Blocked by required conditions Details build-staging / go-build (push) Blocked by required conditions Details build-staging / staging (push) Blocked by required conditions Details Release Drafter / update_release_draft (push) Waiting to run Details	2026-05-19 13:31:14 +00:00
Aditya Singh	f9e21cecd8	feat: field selector migrated to telemetry field key (#11360 ) * feat: field selector migrated to telemetry field key * feat: move floating panel to field selector	2026-05-19 13:14:44 +00:00
Ashwin Bhatkal	4b98b0bb27	fix(dashboard): component UX updates in widget header and settings panel (#11357 ) Bundles four small UX fixes — three regressions from the typography (#11199) and icons (#11222) migrations, plus the DashboardDescription fallout from #11352: - Widget panel title truncates to "Title..." even when the panel has plenty of horizontal space. The title container had no `flex: 1` / `min-width: 0`, so it collapsed to content width and the 80% cap triggered early truncation. Make the title row a real flex item. - Variable editor "Default Value" label and helper text run together on one line. `Typography` from `@signozhq/ui` defaults to `display: inline`, so the helper text sat next to the label. Force block layout in the default-value-section. - Cross-Panel Sync info icon was the outline `Info`, inconsistent with the `SolidInfoCircle` used everywhere else (widget header, threshold, status message). Swap to the standard icon at size "md". - After #11352, DeleteButton renders as an antd `<Button>`, but the DashboardDescription action menu still targeted `.ant-typography` for the delete entry, so it picked up the list-page module's 8px / 12px styling and went out of sync with its peers. Consolidate the three near-duplicate `section-1` / `section-2` / `delete-dashboard` blocks into a single `section .ant-btn` rule, with section dividers and the danger color as the only per-section overrides.	2026-05-19 10:49:46 +00:00
Jatinderjit Singh	b48851e487	fix: maintenance ignores recurrence when fixed times also set (#11121 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix: maintenance ignores recurrence when fixed times also set * send empty start/end dates in frontend for recurring windows * handle zero start and end times in schedule * Revert "send empty start/end dates in frontend for recurring windows" This reverts commit 87bc3fae274ccfd9ce98aeae5ac379fadf657df3. * Remove start and end time from recurrence * fix display timezone * remove redundant param `shouldKeepLocalTime` * handle empty initial start time * fix CI issues * Revert "fix CI issues" This reverts commit 772e6486bb03ec836ebdce436e820aa0d1defdda. * Revert "handle empty initial start time" This reverts commit 82e7c72a338b019dea57def1c61795ca749aacc0. * Revert "remove redundant param `shouldKeepLocalTime`" This reverts commit ed942426745b8b534cdc47dc8b885beef0d6c2f1. * Revert "fix display timezone" This reverts commit 9b2a61674e883f2b47f5bd52413e257ef6f861d3. * Revert "Remove start and end time from recurrence" This reverts commit ab0df8e22d6099772eec79af11d2453a9d95e157. * Revert "Revert "send empty start/end dates in frontend for recurring windows"" This reverts commit 15a4166d3740877b601f16ba208dd3c291b387f2. * Revert "handle zero start and end times in schedule" This reverts commit 58a5aecb82f1aa4f8d5549e391f1f2c5c7574be2. * Revert "send empty start/end dates in frontend for recurring windows" This reverts commit 0470cc7a84f6e9f91cccd73d7841b884342031d4. * log maintenance window for schedule-recurrence timestamp mismatch --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-05-19 06:52:22 +00:00
Ashwin Bhatkal	279a71c5b3	fix(dashboard): align Delete dashboard with other action menu items (#11352 ) The Delete dashboard entry in the dashboards action menu was rendered with a `<Flex justify="center">` and a custom `TableLinkText` span. This caused the icon and label to be center-aligned, sized differently, and spaced differently from the four sibling entries (View, Open in New Tab, Copy Link, Export JSON) which use an antd `<Button>` with `.action-btn` styling. Switch the Delete entry to the same antd `<Button>` structure as the rest of the menu so the icon size, icon-to-text spacing, and left alignment all match. While here, collapse the `section-1` / `section-2` wrappers into a single `.actionContent` and move the action-menu styles into a co-located CSS module (`DashboardActions.module.scss`) with a `deleteBtn` modifier that carries the divider and the danger color via the `--danger-background` semantic token.	2026-05-19 04:11:57 +00:00
Vinicius Lourenço	7e63e35113	fix(form-alert-rules): confirm modal broken (#11347 ) Some checks failed build-staging / js-build (push) Has been cancelled Details build-staging / prepare (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details	2026-05-18 22:53:47 +00:00
SagarRajput-7	d5a50fe456	feat(role-fga): added feature flag gate on roles fga - create and details page (#11350 ) * feat(role-fga): added feature flag gate on roles fga - create and details page * feat(role-fga): updated tests * feat(role-fga): added is role gate fetching logic including feature flag loading * feat(role-fga): fix the rolesselect search not working for the dropdown options * feat(role-fga): updated tests and refactor	2026-05-18 20:56:39 +00:00
Vikrant Gupta	885b41356a	chore(authz): add authz feature flag (#11341 )	2026-05-18 15:29:05 +00:00
				`@@ -0,0 +1 @@`
				`export { default } from './FieldsSelector';`