refactor(quick-filters): use AuthZButton for the settings gear

Filters content is behind read, settings gear behind read + update,
replacing the admin role check. Header actions moved to the ui Button so
AuthZTooltip can actually disable the gear. Dropped the old quick filters
settings announcement from the gear.

cmd/authz.go

@@ -102,6 +102,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
 	}
 
 	allowedTypes := map[string]bool{}

frontend/src/api/utils.ts

@@ -20,7 +20,6 @@ export const Logout = async (): Promise<void> => {
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
-	deleteLocalStorageKey(LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 	history.push(ROUTES.LOGIN);
 };

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

@@ -95,6 +95,7 @@
 			gap: 10px;
 			width: 100%;
 			justify-content: flex-end;
+			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -15,28 +15,30 @@ import {
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
 import { Skeleton, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isFunction, isNull } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	QuickFilterManagePermissions,
+	QuickFilterReadPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions';
+import { isFunction } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { USER_ROLES } from 'types/roles';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
 import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
 import useFilterConfig from './hooks/useFilterConfig';
-import AnnouncementTooltip from './QuickFiltersSettings/AnnouncementTooltip';
 import QuickFiltersSettings from './QuickFiltersSettings/QuickFiltersSettings';
 import { FiltersType, IQuickFiltersProps, QuickFiltersSource } from './types';
 
@@ -55,9 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showQueryName = true,
 		useFieldApis,
 	} = props;
-	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const [params, setParams] = useApiMonitoringParams();
 	const showIP = params.showIP ?? true;
 
@@ -68,6 +68,12 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		refetchCustomFilters,
 		isCustomFiltersLoading,
 	} = useFilterConfig({ signal, config });
+	const {
+		deniedPermissions: deniedSettingsPermissions,
+		isLoading: isSettingsChecking,
+	} = useAuthZ(QuickFilterManagePermissions, { enabled: isDynamicFilters });
+	const isSettingsDisabled =
+		isSettingsChecking || deniedSettingsPermissions.length > 0;
 
 	const {
 		currentQuery,
@@ -107,16 +113,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const shouldShowDropdownInListView =
 		isListView && source === QuickFiltersSource.TRACES_EXPLORER;
 
-	const showAnnouncementTooltip = useMemo(() => {
-		const localStorageValue = getLocalStorageKey(
-			LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
-		);
-		if (!isNull(localStorageValue)) {
-			return !(localStorageValue === 'false');
-		}
-		return true;
-	}, []);
-
 	const activeQueryIndex = useMemo(() => {
 		if (isListView) {
 			return source === QuickFiltersSource.TRACES_EXPLORER
@@ -232,49 +228,49 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
 			<Tooltip title="Reset All">
-				<div className="right-action-icon-container">
-					<RefreshCw className="sync-icon" size="md" onClick={handleReset} />
-				</div>
+				<Button
+					variant="link"
+					color="secondary"
+					aria-label="Reset All"
+					className="right-action-icon-container"
+					onClick={handleReset}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
+				/>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
-					<div className="right-action-icon-container">
-						<ArrowUpToLine
-							style={{ rotate: '270deg', cursor: 'pointer' }}
-							size="md"
-							onClick={handleFilterVisibilityChange}
-						/>
-					</div>
+					<Button
+						variant="link"
+						color="secondary"
+						aria-label="Collapse Filters"
+						className="right-action-icon-container"
+						onClick={handleFilterVisibilityChange}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+					/>
 				</Tooltip>
 			)}
-			{isDynamicFilters && isAdmin && (
-				<Tooltip title="Settings">
-					<div
-						className={classNames('right-action-icon-container', {
-							active: isSettingsOpen,
-						})}
-					>
-						<SettingsIcon
-							className="settings-icon"
-							data-testid="settings-icon"
-							width={14}
-							height={14}
-							onClick={(): void => setIsSettingsOpen(true)}
-						/>
-						<AnnouncementTooltip
-							show={showAnnouncementTooltip}
-							position={{ top: -5, left: 15 }}
-							title="Edit your quick filters"
-							message="You can now customize and re-arrange your quick filters panel. Select the quick filters you’d need and hide away the rest for faster exploration."
-							onClose={(): void => {
-								setLocalStorageKey(
-									LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
-									'false',
-								);
-							}}
-						/>
-					</div>
-				</Tooltip>
+			{isDynamicFilters && (
+				<AuthZButton
+					checks={QuickFilterManagePermissions}
+					variant="link"
+					color="secondary"
+					aria-label="Settings"
+					className={classNames('right-action-icon-container', {
+						active: isSettingsOpen,
+					})}
+					onClick={(): void => setIsSettingsOpen(true)}
+					testId="settings-icon-container"
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
 		</section>
 	);
@@ -361,6 +357,21 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		</>
 	);
 
+	const filtersSkeleton = (
+		<div className="quick-filters-skeleton">
+			{Array.from({ length: 5 }).map((_, index) => (
+				// eslint-disable-next-line react/no-array-index-key
+				<Skeleton.Input active size="small" key={index} />
+			))}
+		</div>
+	);
+
+	const filtersContent = isCustomFiltersLoading ? (
+		filtersSkeleton
+	) : (
+		<OverlayScrollbar>{renderContent()}</OverlayScrollbar>
+	);
+
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
@@ -371,15 +382,15 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 					</section>
 				)}
 
-				{isCustomFiltersLoading ? (
-					<div className="quick-filters-skeleton">
-						{Array.from({ length: 5 }).map((_, index) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<Skeleton.Input active size="small" key={index} />
-						))}
-					</div>
+				{signal ? (
+					<AuthZGuardContent
+						checks={[QuickFilterReadPermission]}
+						fallbackOnLoading={filtersSkeleton}
+					>
+						{filtersContent}
+					</AuthZGuardContent>
 				) : (
-					<OverlayScrollbar>{renderContent()}</OverlayScrollbar>
+					filtersContent
 				)}
 			</div>
 			<div className="quick-filters-settings-container">

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -35,10 +35,7 @@ const useFilterConfig = ({
 		[data],
 	);
 
-	const isDynamicFilters = useMemo(
-		() => customFilters.length > 0,
-		[customFilters],
-	);
+	const isDynamicFilters = !!signal;
 
 	const filterConfig = useMemo(
 		() => getFilterConfig(signal, customFilters, config),

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

@@ -0,0 +1,212 @@
+import { ENVIRONMENT } from 'constants/env';
+import {
+	ApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import {
+	QuickFilterReadPermission,
+	QuickFilterUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions';
+import {
+	AUTHZ_CHECK_URL,
+	setupAuthzAdmin,
+	setupAuthzDeny,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
+import {
+	otherFiltersResponse,
+	quickFiltersAttributeValuesResponse,
+	quickFiltersListResponse,
+} from 'mocks-server/__mockdata__/customQuickFilters';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import QuickFilters from '../QuickFilters';
+import { QuickFiltersSource, SignalType } from '../types';
+import { QuickFiltersConfig } from './constants';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('container/ApiMonitoring/queryParams');
+
+const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const SIGNAL = SignalType.LOGS;
+const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
+const fieldsKeysURL = `${BASE_URL}/api/v1/fields/keys`;
+const attributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
+const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
+
+const NOT_AUTHORIZED_TEXT = /is not authorized to perform/i;
+const FILTER_SERVICE_NAME = 'Service Name';
+const SETTINGS_CONTAINER_TEST_ID = 'settings-icon-container';
+
+beforeEach(() => {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						queryName: 'Test Query',
+						filters: { items: [] },
+					},
+				],
+			},
+		},
+		lastUsedQuery: 0,
+		redirectWithQueryBuilderData: jest.fn(),
+	});
+	mockUseApiMonitoringParams.mockReturnValue([
+		{ showIP: true } as ApiMonitoringParams,
+		jest.fn(),
+	]);
+	server.use(
+		rest.get(quickFiltersListURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersListResponse)),
+		),
+		rest.get(fieldsKeysURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(otherFiltersResponse)),
+		),
+		rest.get(attributeValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+	);
+});
+
+afterEach(() => {
+	server.resetHandlers();
+	jest.clearAllMocks();
+});
+
+function renderWithSignal(): void {
+	render(
+		<QuickFilters
+			source={QuickFiltersSource.LOGS_EXPLORER}
+			signal={SIGNAL}
+			handleFilterVisibilityChange={jest.fn()}
+		/>,
+	);
+}
+
+function renderStaticConfig(): void {
+	render(
+		<QuickFilters
+			source={QuickFiltersSource.EXCEPTIONS}
+			config={QuickFiltersConfig}
+			handleFilterVisibilityChange={jest.fn()}
+		/>,
+	);
+}
+
+describe('QuickFilters - AuthZ', () => {
+	describe('read denied', () => {
+		it('shows the inline denial instead of the filters, header stays', async () => {
+			server.use(setupAuthzDeny(QuickFilterReadPermission));
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(NOT_AUTHORIZED_TEXT),
+			).resolves.toBeInTheDocument();
+
+			expect(screen.queryByText(FILTER_SERVICE_NAME)).not.toBeInTheDocument();
+			expect(screen.getByText('Filters for')).toBeInTheDocument();
+
+			const settingsTrigger = await screen.findByTestId(
+				SETTINGS_CONTAINER_TEST_ID,
+			);
+			await waitFor(() =>
+				expect(settingsTrigger).toHaveAttribute(
+					'data-denied-permissions',
+					expect.stringContaining('read'),
+				),
+			);
+		});
+	});
+
+	describe('update denied', () => {
+		it('renders the filters but disables the settings trigger', async () => {
+			server.use(setupAuthzDeny(QuickFilterUpdatePermission));
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+
+			const settingsTrigger = await screen.findByTestId(
+				SETTINGS_CONTAINER_TEST_ID,
+			);
+			await waitFor(() =>
+				expect(settingsTrigger).toHaveAttribute(
+					'data-denied-permissions',
+					expect.stringContaining('update'),
+				),
+			);
+
+			await userEvent.click(settingsTrigger);
+			expect(screen.queryByText(/ADDED FILTERS/i)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('all permissions granted', () => {
+		it('renders the filters and opens settings from the trigger', async () => {
+			server.use(setupAuthzAdmin());
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+
+			const settingsTrigger = await screen.findByTestId(
+				SETTINGS_CONTAINER_TEST_ID,
+			);
+			expect(settingsTrigger).not.toHaveAttribute('data-denied-permissions');
+
+			await userEvent.click(settingsTrigger);
+			await expect(
+				screen.findByText(/ADDED FILTERS/i),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('static config pages (no signal)', () => {
+		it('is not gated even when every permission is denied', async () => {
+			server.use(setupAuthzDenyAll());
+
+			renderStaticConfig();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+			expect(screen.queryByText(NOT_AUTHORIZED_TEXT)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('permission check loading', () => {
+		it('shows the skeleton, not the filters or a denial', async () => {
+			server.use(
+				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
+			);
+
+			renderWithSignal();
+
+			await waitFor(() =>
+				// eslint-disable-next-line testing-library/no-node-access
+				expect(
+					document.querySelector('.quick-filters-skeleton'),
+				).toBeInTheDocument(),
+			);
+			expect(screen.queryByText(NOT_AUTHORIZED_TEXT)).not.toBeInTheDocument();
+			expect(screen.queryByText(FILTER_SERVICE_NAME)).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/types.ts

@@ -54,6 +54,7 @@ export interface IQuickFiltersProps {
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
 	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
+	/** Pass to fetch quick filters for this signal; omit to use `config` as-is */
 	signal?: SignalType;
 	className?: string;
 	showFilterCollapse?: boolean;

frontend/src/constants/localStorage.ts

@@ -31,7 +31,6 @@ export enum LOCALSTORAGE {
 	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
-	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,13 +329,14 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(9);
+		expect(result).toHaveLength(10);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'license',
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'quick-filter',
 			'role',
 			'serviceaccount',
 			'subscription',
@@ -420,13 +421,14 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(9);
+		expect(result).toHaveLength(10);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'license',
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'quick-filter',
 			'role',
 			'serviceaccount',
 			'subscription',

frontend/src/container/RolesSettings/permissions.config.ts

@@ -5,6 +5,7 @@ import {
 	FileKey,
 	Gauge,
 	Key,
+	ListFilter,
 	Logs,
 	Receipt,
 	Shield,
@@ -77,6 +78,14 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 		selectorPlaceholder: 'Type * to cover the workspace subscription',
 		docsAnchor: 'subscription',
 	},
+	'quick-filter': {
+		label: 'Quick Filters',
+		description: 'Quick filters shown in the logs, traces, and other explorers.',
+		icon: ListFilter,
+		selectorPlaceholder:
+			'Type quick filter ID, separate multiple with comma or space',
+		docsAnchor: 'quick-filter',
+	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -13,6 +13,11 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
 			},
+			{
+				kind: 'quick-filter',
+				type: 'metaresource',
+				allowedVerbs: ['list', 'read', 'update'],
+			},
 			{
 				kind: 'subscription',
 				type: 'metaresource',

frontend/src/lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions.ts

@@ -0,0 +1,16 @@
+import { buildPermission } from '../utils';
+
+export const QuickFilterReadPermission = buildPermission(
+	'read',
+	'quick-filter:*',
+);
+export const QuickFilterUpdatePermission = buildPermission(
+	'update',
+	'quick-filter:*',
+);
+
+// Editing quick filters needs read as well as update
+export const QuickFilterManagePermissions = [
+	QuickFilterReadPermission,
+	QuickFilterUpdatePermission,
+];