chore(dashboard-story): answer variable endpoints outside the Data state control (#13000)

#### Description

To try prevent flakyness of
https://github.com/SigNoz/signoz/actions/runs/36460317287/job/109056950899#step:7:9349

cmd/authz.go

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

docs/api/openapi.yml

@@ -21186,9 +21186,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - role:read
       - tokenizer:
-        - ADMIN
+        - role:read
       summary: Get users by role id
       tags:
       - users
@@ -25774,9 +25774,11 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:attach
+        - role:attach
       - tokenizer:
-        - ADMIN
+        - user:attach
+        - role:attach
       summary: Create user role
       tags:
       - users
@@ -25827,9 +25829,11 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:detach
+        - role:detach
       - tokenizer:
-        - ADMIN
+        - user:detach
+        - role:detach
       summary: Delete user role
       tags:
       - users
@@ -25891,9 +25895,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:read
       - tokenizer:
-        - ADMIN
+        - user:read
       summary: Get user role
       tags:
       - users
@@ -25940,9 +25944,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:list
       - tokenizer:
-        - ADMIN
+        - user:list
       summary: List users v2
       tags:
       - users
@@ -26003,9 +26007,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:create
+        - user:attach
+        - role:attach
       - tokenizer:
-        - ADMIN
+        - user:create
+        - user:attach
+        - role:attach
       summary: Create user
       tags:
       - users
@@ -26050,9 +26058,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:delete
       - tokenizer:
-        - ADMIN
+        - user:delete
       summary: Delete user
       tags:
       - users
@@ -26108,9 +26116,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:read
       - tokenizer:
-        - ADMIN
+        - user:read
       summary: Get user by user id
       tags:
       - users
@@ -26165,9 +26173,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:update
       - tokenizer:
-        - ADMIN
+        - user:update
       summary: Update user v2
       tags:
       - users
@@ -26224,9 +26232,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - factor-password:list
       - tokenizer:
-        - ADMIN
+        - factor-password:list
       summary: Get reset password token for a user
       tags:
       - users
@@ -26290,9 +26298,11 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - factor-password:create
+        - user:attach
       - tokenizer:
-        - ADMIN
+        - factor-password:create
+        - user:attach
       summary: Create or regenerate reset password token for a user
       tags:
       - users
@@ -26351,9 +26361,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - user:read
       - tokenizer:
-        - ADMIN
+        - user:read
       summary: Get user roles
       tags:
       - users
@@ -26667,10 +26677,7 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
+      - tokenizer: []
       summary: Updates my password
       tags:
       - users

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

frontend/package.json

@@ -49,7 +49,6 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@grafana/data": "^11.6.15",
-    "@lezer/highlight": "1.2.1",
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",

frontend/pnpm-lock.yaml

@@ -62,9 +62,6 @@ importers:
       '@grafana/data':
         specifier: ^11.6.15
         version: 11.6.15(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@lezer/highlight':
-        specifier: 1.2.1
-        version: 1.2.1
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/src/AppRoutes/index.tsx

@@ -12,13 +12,14 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -58,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,6 +66,8 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
+	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -253,7 +255,9 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
+		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
+			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -263,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
-		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
-		// to something went wrong which would ideally need a reload.
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			const showAddCreditCardModal =
-				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
-
-			if (
-				isLoggedInState &&
-				isChatSupportEnabled &&
-				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				window.signozBootData?.settings?.pylon?.enabled
-			) {
-				const email = user.email || '';
-				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
-				window.pylon = {
-					chat_settings: {
-						app_id: window.signozBootData?.settings?.pylon?.appId,
-						email: user.email,
-						name: user.displayName || user.email,
-						email_hash: emailHash,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		const email = user.email || '';
+		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+		let emailHash = '';
+
+		if (email && secret) {
+			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+		}
+
+		window.pylon = {
+			chat_settings: {
+				app_id: window.signozBootData?.settings?.pylon?.appId,
+				email: user.email,
+				name: user.displayName || user.email,
+				email_hash: emailHash,
+			},
+		};
+	}, [chatSupport, user]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+
+interface AddCreditCardModalProps {
+	open: boolean;
+	onClose: () => void;
+	onAddCreditCard?: () => void;
+}
+
+/**
+ * Shown to trial users who have not added a card, in place of chat support.
+ * Submitting creates the subscription and opens the returned billing URL.
+ */
+function AddCreditCardModal({
+	open,
+	onClose,
+	onAddCreditCard,
+}: AddCreditCardModalProps): JSX.Element {
+	const { notifications } = useNotifications();
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
+	);
+
+	const handleAddCreditCard = (): void => {
+		onAddCreditCard?.();
+		updateCreditCard({ url: getBaseUrl() });
+	};
+
+	return (
+		<Modal
+			className="add-credit-card-modal"
+			title={<span className="title">Add Credit Card for Chat Support</span>}
+			open={open}
+			closable
+			onCancel={onClose}
+			destroyOnClose
+			footer={[
+				<Button
+					key="cancel"
+					onClick={onClose}
+					className="cancel-btn"
+					icon={<X size={16} />}
+				>
+					Cancel
+				</Button>,
+				<AuthZTooltip
+					key="submit"
+					checks={[SubscriptionCreatePermission]}
+					withPortal={false}
+				>
+					<Button
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
+					>
+						Add Credit Card
+					</Button>
+				</AuthZTooltip>,
+			]}
+		>
+			<Typography.Text className="add-credit-card-text">
+				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
+				Add a credit card to access SigNoz chat support to your workspace.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
+
+export default AddCreditCardModal;

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.mocks.tsx

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
+
+export const createSubscriptionHandlers = [
+	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
+	),
+];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
+
+import AddCreditCardModal from '../AddCreditCardModal';
+
+/** Stands in for the surfaces that open it: the strip's Support button, and
+ * `LaunchChatSupport` in the custom domain and onboarding flows. */
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button
+				data-testid="open-add-credit-card"
+				onClick={(): void => setOpen(true)}
+			>
+				Contact support
+			</Button>
+			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Add Credit Card Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+	parameters: {
+		msw: { handlers: createSubscriptionHandlers },
+	},
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** What a trial user without a card sees in place of chat support. */
+export const Default: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('open-add-credit-card'),
+		);
+		await screen.findByRole('dialog', {
+			name: /Add Credit Card for Chat Support/i,
+		});
+	},
+};

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,63 +1,15 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
+import { MessageSquareText } from '@signozhq/icons';
 
 export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
 	const { pathname } = useLocation();
 
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `chat support icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
-	};
-
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,22 +1,14 @@
 import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp, CreditCard, X } from '@signozhq/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -41,7 +33,6 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -119,43 +110,12 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -175,47 +135,11 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={handleAddCreditCard}
+			/>
 		</div>
 	) : null;
 }

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

@@ -12,7 +12,6 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
-		clip-path: inset(0 -100vw 0 0);
 	}
 }
 
@@ -35,7 +34,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--spacing-2) 10.5px;
+		padding: 10.5px;
 		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
@@ -46,9 +45,6 @@
 			justify-content: flex-start;
 
 			.text {
-				padding-left: var(--spacing-4);
-				white-space: nowrap;
-				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -81,8 +77,6 @@
 			}
 
 			.select-box {
-				--combobox-trigger-width: auto;
-
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -100,9 +94,10 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: var(--spacing-1);
-			flex-shrink: 0;
+			gap: 10px;
+			width: 100%;
 			justify-content: flex-end;
+			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;
@@ -110,8 +105,26 @@
 				background: var(--l1-background);
 			}
 
-			.active {
-				background: var(--l2-background);
+			.sync-icon {
+				cursor: pointer;
+			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--l1-background);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--l2-background);
+				}
 			}
 		}
 	}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
+	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -13,9 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -57,7 +57,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
-		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -180,6 +179,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
+			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +216,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<TooltipSimple
+					<Tooltip
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</TooltipSimple>
+					</Tooltip>
 				)
 			)}
 		</section>
@@ -230,54 +230,51 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<TooltipSimple title="Reset All">
+			<Tooltip title="Reset All">
 				<Button
-					variant="ghost"
+					variant="link"
 					color="secondary"
-					size="icon"
 					aria-label="Reset All"
+					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw size={14} />}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
 				/>
-			</TooltipSimple>
-			{showFilterCollapse && handleFilterVisibilityChange && (
-				<TooltipSimple title="Collapse Filters">
+			</Tooltip>
+			{showFilterCollapse && (
+				<Tooltip title="Collapse Filters">
 					<Button
-						variant="ghost"
+						variant="link"
 						color="secondary"
-						size="icon"
 						aria-label="Collapse Filters"
+						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
 					/>
-				</TooltipSimple>
+				</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>
+					}
+				/>
 			)}
-			{isDynamicFilters &&
-				(isSettingsDisabled ? (
-					<AuthZButton
-						checks={QuickFilterManagePermissions}
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						aria-label="Settings"
-						onClick={(): void => setIsSettingsOpen(true)}
-						testId="settings-icon-container"
-						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-					/>
-				) : (
-					<TooltipSimple title="Settings">
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							aria-label="Settings"
-							className={classNames({ active: isSettingsOpen })}
-							onClick={(): void => setIsSettingsOpen(true)}
-							data-testid="settings-icon-container"
-							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-						/>
-					</TooltipSimple>
-				))}
 		</section>
 	);
 
@@ -382,7 +379,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
-				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -8,7 +8,9 @@
 	overflow: hidden;
 }
 
-.sidebar {
+// Positioned so overlays (settings drawer) paint above the content pane
+// without changing this pane's layout width.
+.filters {
 	width: 280px;
 	flex-shrink: 0;
 	display: flex;
@@ -19,44 +21,6 @@
 	z-index: 2;
 }
 
-.savedViews {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	background: var(--l1-background);
-	border-right: 1px solid var(--l1-border);
-}
-
-.quickFilters {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	background: var(--l1-background);
-	transition: transform 0.2s ease-in-out;
-	z-index: 1;
-
-	&.isOpen {
-		transform: translateX(100%);
-	}
-}
-
-// No quick filters: the header sits in flow and the list stays under it
-.isStatic {
-	border-right: 1px solid var(--l1-border);
-
-	.quickFilters {
-		position: static;
-		flex-shrink: 0;
-	}
-
-	.savedViews {
-		border-right: 0;
-	}
-}
-
 // Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
 // `height: 100%`), which owns the scrolling.
 .content {
@@ -67,7 +31,3 @@
 	flex-direction: column;
 	overflow: hidden;
 }
-
-.contentInner {
-	height: 100%;
-}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,36 +1,20 @@
-import { ComponentProps, ReactNode, useState } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import cx from 'classnames';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
-import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
-import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
 
 import styles from './QuickFiltersLayout.module.scss';
 
 // Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = Omit<
-	JSX.LibraryManagedAttributes<
-		typeof QuickFilters,
-		ComponentProps<typeof QuickFilters>
-	>,
-	'handleFilterVisibilityChange'
->;
-
-// What the page configures; the layout adds the open / close wiring.
-type SavedViewsElementProps = Omit<
-	ComponentProps<typeof SavedViewsPanel>,
-	'onClose'
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
 >;
 
 export interface QuickFiltersLayoutProps {
-	quickFilterProps?: QuickFiltersElementProps;
-	savedViewProps?: SavedViewsElementProps;
+	quickFilterProps: QuickFiltersElementProps;
 	showFilters: boolean;
-	onToggleFilters?: () => void;
 	className?: string;
 	contentClassName?: string;
 	testId?: string;
@@ -39,70 +23,20 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
-	savedViewProps,
 	showFilters,
-	onToggleFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
-	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
-	const isSavedViewEnabled = useSavedViewEnabled();
-
-	const hasQuickFilters = !!quickFilterProps;
-	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
-
-	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
-
-	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
-	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
-
-	const isSliding = hasQuickFilters && isViewsListOpen;
-
-	const savedViewsHeader = hasSavedViews ? (
-		<SavedViewsHeader
-			{...savedViewProps}
-			onOpenViews={
-				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
-			}
-			onCollapse={hasQuickFilters ? undefined : onToggleFilters}
-		/>
-	) : undefined;
-
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showSidebar && (
+			{showFilters && (
 				<aside
-					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
+					className={styles.filters}
 					data-testid="quick-filters-layout-filters"
 				>
-					<TooltipProvider delayDuration={SIDEBAR_TOOLTIP_DELAY_MS}>
-						<div
-							className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
-							data-testid="quick-filters-layout-drawer"
-						>
-							{hasQuickFilters ? (
-								<QuickFilters
-									{...quickFilterProps}
-									handleFilterVisibilityChange={onToggleFilters}
-									savedViewsHeader={savedViewsHeader}
-								/>
-							) : (
-								savedViewsHeader
-							)}
-						</div>
-						<div className={styles.savedViews}>
-							{hasSavedViews && isViewsListVisible && (
-								<SavedViewsPanel
-									{...savedViewProps}
-									onClose={
-										isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
-									}
-								/>
-							)}
-						</div>
-					</TooltipProvider>
+					<QuickFilters {...quickFilterProps} />
 				</aside>
 			)}
 			<section
@@ -110,7 +44,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div className={styles.contentInner}>{children}</div>
+					<div>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,6 +1,4 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
 import QuickFiltersLayout from '../QuickFiltersLayout';
@@ -9,59 +7,24 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	__esModule: true,
 	default: {
 		layout: 'layout',
-		sidebar: 'sidebar',
-		isStatic: 'isStatic',
-		savedViews: 'savedViews',
-		quickFilters: 'quickFilters',
-		isOpen: 'isOpen',
+		filters: 'filters',
 		content: 'content',
-		contentInner: 'contentInner',
 	},
 }));
 
-jest.mock('hooks/useSavedViewEnabled', () => ({
-	useSavedViewEnabled: jest.fn(() => true),
-}));
-
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
-	default: ({
-		source,
-		savedViewsHeader,
-		handleFilterVisibilityChange,
-	}: {
-		source: string;
-		savedViewsHeader?: React.ReactNode;
-		handleFilterVisibilityChange?: () => void;
-	}): JSX.Element => (
-		<div data-testid="quick-filters">
-			{savedViewsHeader}
-			{source}
-			{handleFilterVisibilityChange && (
-				<button
-					type="button"
-					aria-label="Collapse Filters"
-					data-testid="quick-filters-collapse"
-					onClick={handleFilterVisibilityChange}
-				/>
-			)}
-		</div>
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="quick-filters">{source}</div>
 	),
 }));
 
 const quickFilterProps = {
 	source: QuickFiltersSource.TRACES_EXPLORER,
+	handleFilterVisibilityChange: jest.fn(),
 };
-const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
-
-const drawer = (): HTMLElement =>
-	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
-	beforeEach(() => {
-		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
-	});
-
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -77,16 +40,11 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
 			'content',
 		);
-		expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
 	});
 
 	it('does not render the filters pane when showFilters is false', () => {
 		render(
-			<QuickFiltersLayout
-				showFilters={false}
-				quickFilterProps={quickFilterProps}
-				savedViewProps={savedViewProps}
-			>
+			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
@@ -98,186 +56,24 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByText('content')).toBeInTheDocument();
 	});
 
-	it('renders no sidebar at all without quick filters or saved views', () => {
-		render(
-			<QuickFiltersLayout showFilters>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.getByText('content')).toBeInTheDocument();
-	});
-
 	it('merges classNames onto the root and content panes', () => {
 		render(
 			<QuickFiltersLayout
 				showFilters
 				quickFilterProps={quickFilterProps}
-				className="root-extra"
-				contentClassName="content-extra"
-				testId="layout"
+				className="page-root"
+				contentClassName="page-content"
+				testId="page"
 			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
 
-		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
+		const root = screen.getByTestId('page');
+		expect(root).toHaveClass('layout', 'page-root');
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
 			'content',
-			'content-extra',
+			'page-content',
 		);
 	});
-
-	describe('saved views', () => {
-		it('ignores savedViewProps while the flag is off', () => {
-			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
-			const { unmount } = render(
-				<QuickFiltersLayout
-					showFilters
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-
-			// Saved views only, so nothing is left to show.
-			unmount();
-			render(
-				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-			expect(
-				screen.queryByTestId('quick-filters-layout-filters'),
-			).not.toBeInTheDocument();
-		});
-
-		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
-			render(
-				<QuickFiltersLayout
-					showFilters
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-			const user = userEvent.setup();
-			const quickFilters = screen.getByTestId('quick-filters');
-
-			expect(quickFilters).toContainElement(
-				screen.getByTestId('saved-views-header'),
-			);
-			expect(drawer()).toContainElement(quickFilters);
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-
-			await user.click(screen.getByTestId('saved-views-open'));
-
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-			expect(drawer()).toHaveClass('isOpen');
-			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
-
-			await user.click(screen.getByTestId('saved-views-close'));
-
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		});
-
-		it('hands the source to the header and the panel', async () => {
-			render(
-				<QuickFiltersLayout
-					showFilters
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			expect(screen.getByTestId('saved-views-header')).toHaveAttribute(
-				'data-source',
-				SavedviewtypesSourceDTO.traces,
-			);
-			await userEvent.setup().click(screen.getByTestId('saved-views-open'));
-			expect(screen.getByTestId('saved-views-panel')).toHaveAttribute(
-				'data-source',
-				SavedviewtypesSourceDTO.traces,
-			);
-		});
-
-		it('without quick filters: static sidebar, header on top, list always on screen with no open or close controls', () => {
-			render(
-				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			const sidebar = screen.getByTestId('quick-filters-layout-filters');
-			expect(sidebar).toHaveClass('isStatic');
-			expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('saved-views-panel-header'),
-			).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-		});
-
-		it('collapses from the quick filters header when they are shown', async () => {
-			const onToggleFilters = jest.fn();
-			render(
-				<QuickFiltersLayout
-					showFilters
-					onToggleFilters={onToggleFilters}
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			expect(screen.queryByTestId('saved-views-collapse')).not.toBeInTheDocument();
-			await userEvent.click(screen.getByTestId('quick-filters-collapse'));
-			expect(onToggleFilters).toHaveBeenCalledTimes(1);
-		});
-
-		it('collapses from the saved views header without quick filters', async () => {
-			const onToggleFilters = jest.fn();
-			render(
-				<QuickFiltersLayout
-					showFilters
-					onToggleFilters={onToggleFilters}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			await userEvent.click(screen.getByTestId('saved-views-collapse'));
-			expect(onToggleFilters).toHaveBeenCalledTimes(1);
-		});
-
-		it('has no collapse without a toggle', () => {
-			render(
-				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-
-			expect(screen.queryByTestId('saved-views-collapse')).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/components/QuickFilters/QuickFiltersLayout/constants.ts

@@ -1 +0,0 @@
-export const SIDEBAR_TOOLTIP_DELAY_MS = 500;

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

@@ -8,34 +8,29 @@
 	width: 342px;
 	height: 100%;
 	background: var(--l1-background);
-	border-right: 1px solid var(--l1-border);
+	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
-	transition:
-		transform 0.2s ease-in-out,
-		visibility 0s;
 
 	&.hidden {
-		transform: translateX(-100%);
-		visibility: hidden;
-		pointer-events: none;
-		transition:
-			transform 0.2s ease-in-out,
-			visibility 0s 0.2s;
+		width: 0;
 	}
 	.qf-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--spacing-2) var(--spacing-5);
-		border-bottom: 1px solid var(--l1-border);
+		padding: 10.5px;
 
 		.qf-title {
 			display: flex;
 			align-items: center;
-			gap: var(--spacing-6);
-			color: var(--l2-foreground);
-			font-size: var(--font-size-sm);
+			gap: 12px;
+		}
+
+		.qf-header-icon {
+			width: 16px;
+			height: 16px;
+			cursor: pointer;
 		}
 	}
 
@@ -52,17 +47,11 @@
 	}
 
 	.search {
-		--input-height: var(--spacing-20);
-		--input-border-radius: 0;
-		--input-border-color: transparent;
-		--input-hover-border-color: transparent;
-		--input-focus-border-color: transparent;
-		--input-focus-outline-width: 0;
-		--input-background: var(--l1-background);
-		--input-hover-background: var(--l1-background);
-		--input-focus-background: var(--l1-background);
-
-		border-bottom: 1px solid var(--l1-border);
+		.ant-input {
+			background-color: var(--l1-background);
+			height: 46px;
+			border-radius: 0;
+		}
 	}
 
 	.qf-other-filters-list {
@@ -128,7 +117,6 @@
 	justify-content: space-between;
 	padding: 8px;
 	border-radius: 4px;
-	color: var(--l2-foreground);
 	user-select: none;
 	transition: background-color 0.2s ease-in-out;
 

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,4 +1,3 @@
-import { Button as SignozButton } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
@@ -44,17 +43,14 @@ function QuickFiltersSettings({
 		<>
 			<div className="qf-header">
 				<div className="qf-title">
-					<TableColumnsSplit size={16} />
+					<TableColumnsSplit width={16} height={16} />
 					Edit quick filters
 				</div>
-				<SignozButton
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					aria-label="Close"
-					prefix={<X size={14} />}
+				<X
+					className="qf-header-icon"
+					width={16}
+					height={16}
 					onClick={handleSettingsClose}
-					data-testid="quick-filters-settings-close"
 				/>
 			</div>
 			<section className="search">

frontend/src/components/QuickFilters/types.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -52,7 +51,7 @@ export interface QuickFilterChangeEventData {
 
 export interface IQuickFiltersProps {
 	config: IQuickFiltersConfig[];
-	handleFilterVisibilityChange?: () => void;
+	handleFilterVisibilityChange: () => void;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
 	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
@@ -62,7 +61,6 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
-	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

frontend/src/constants/shortcutActions.tsx

@@ -15,6 +15,7 @@ import {
 	ListMinus,
 	ScrollText,
 	Settings,
+	TowerControl,
 	Workflow,
 } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -137,6 +138,16 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.LOGS_PIPELINES),
 		},
+		{
+			id: 'logs',
+			name: 'Go to Logs Views',
+			shortcut: [GlobalShortcutsName.NavigateToLogsViews],
+			keywords: 'logs views',
+			section: 'Logs',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS_SAVE_VIEWS),
+		},
 
 		// metrics
 		{
@@ -159,6 +170,16 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_EXPLORER),
 		},
+		{
+			id: 'metrics-views',
+			name: 'Go to Metrics Views',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsViews],
+			keywords: 'metrics views',
+			section: 'Metrics',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_VIEWS),
+		},
 
 		// Traces
 		{

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -10,14 +10,17 @@ export const GlobalShortcuts = {
 	// logs
 	NavigateToLogs: 'shift+l',
 	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
 
 	// traces
 	NavigateToTraces: 'shift+t',
 	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
 
 	// metrics
 	NavigateToMetricsSummary: 'shift+m',
 	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
 
 	// settings
 	NavigateToSettings: 'shift+g',
@@ -39,8 +42,10 @@ export const GlobalShortcutsName = {
 	ToggleSidebar: 'shift+b',
 	NavigateToHome: 'shift+h',
 	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
 	NavigateToMetricsSummary: 'shift+m',
 	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
 	NavigateToSettings: 'shift+g',
 	NavigateToSettingsIngestion: 'shift+g+i',
 	NavigateToSettingsBilling: 'shift+g+b',
@@ -50,6 +55,7 @@ export const GlobalShortcutsName = {
 	NavigateToSettingsMembers: 'shift+g+m',
 	NavigateToLogs: 'shift+l',
 	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
 };
 
 export const GlobalShortcutsDescription = {
@@ -63,14 +69,17 @@ export const GlobalShortcutsDescription = {
 	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
 	ToggleSidebar: 'Toggle sidebar visibility',
 	NavigateToTracesFunnel: 'Navigate to Traces Funnel',
+	NavigateToTracesViews: 'Navigate to Traces Views',
 	NavigateToMetricsSummary: 'Navigate to Metrics Summary',
 	NavigateToMetricsExplorer: 'Navigate to Metrics Explorer',
+	NavigateToMetricsViews: 'Navigate to Metrics Views',
 	NavigateToSettings: 'Navigate to Settings',
 	NavigateToSettingsIngestion: 'Navigate to Ingestion Settings',
 	NavigateToSettingsBilling: 'Navigate to Billing Settings',
 	NavigateToSettingsNotificationChannels:
 		'Navigate to Notification Channels Settings',
 	NavigateToLogsPipelines: 'Navigate to Logs Pipelines',
+	NavigateToLogsViews: 'Navigate to Logs Views',
 	NavigateToSettingsServiceAccounts: 'Navigate to Service Accounts Settings',
 	NavigateToSettingsRoles: 'Navigate to Roles Settings',
 	NavigateToSettingsMembers: 'Navigate to Members Settings',

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -5,10 +5,12 @@ import {
 import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { SavedViewSourcePage } from 'container/SavedViews/types';
-import { findSavedView } from 'container/SavedViews/utils/findSavedView';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
-import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -26,7 +26,9 @@ function Explorer(): JSX.Element {
 					className: 'qf-api-monitoring',
 					source: QuickFiltersSource.API_MONITORING,
 					signal: SignalType.API_MONITORING,
+					showFilterCollapse: false,
 					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {},
 					useFieldApis: quickFilterFieldApis,
 				}}
 			>

frontend/src/container/AppLayout/index.tsx

@@ -35,7 +35,6 @@ import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
@@ -52,6 +51,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
@@ -103,9 +103,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		trialInfo,
 		activeLicense,
 		isFetchingActiveLicense,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
 		userPreferences,
 		isFetchingUserPreferences,
 		updateChangelog,
@@ -492,42 +489,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
-	const showAddCreditCardModal = useMemo(() => {
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			return (
-				isLoggedIn &&
-				!isPremiumSupportEnabled &&
-				isChatSupportEnabled &&
-				!trialInfo?.trialConvertedToSubscription &&
-				isCloudUserVal
-			);
-		}
-		return false;
-	}, [
-		featureFlags,
-		featureFlagsFetchError,
-		isCloudUserVal,
-		isFetchingFeatureFlags,
-		isLoggedIn,
-		activeLicense,
-		trialInfo,
-	]);
+	const chatSupport = useChatSupport();
 
 	// Listen for API warnings
 	const handleWarning = (
@@ -885,7 +847,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && <ChatSupportGateway />}
+				{chatSupport === ChatSupportState.NeedsCard && !isSavedViewEnabled && (
+					<ChatSupportGateway />
+				)}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -0,0 +1,36 @@
+.askNoz {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.badge {
+	flex-shrink: 0;
+	display: inline-flex;
+	line-height: 0;
+	color: var(--accent-primary);
+}
+
+.pulseDot {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 0;
+	animation: askNozDotPulse 1.5s ease-in-out infinite;
+	transform: scale(0.8);
+	margin-right: -12px;
+}
+
+@keyframes askNozDotPulse {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	50% {
+		opacity: 0.35;
+		transform: scale(0.82);
+	}
+}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -0,0 +1,76 @@
+import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
+import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
+import {
+	openAIAssistant,
+	useAIAssistantStore,
+} from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import ROUTES from 'constants/routes';
+import { Dot } from '@signozhq/icons';
+
+import styles from './AskNoz.module.scss';
+
+/**
+ * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
+ * modal instead; this is deliberately the drawer.
+ *
+ * Carries the header's pending badge: when Noz is blocked on the user
+ * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
+ * hiding the header button would remove a notification rather than move it.
+ */
+function AskNoz(): JSX.Element | null {
+	const { pathname } = useLocation();
+	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
+	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
+	const pendingUserInputCount = useAIAssistantStore(
+		selectPendingUserInputStreamCount,
+	);
+
+	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
+	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
+
+	// The drawer does not render on the Noz full page, so the button would be inert.
+	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
+
+	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
+		return null;
+	}
+
+	return (
+		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
+			{showPendingBadge && (
+				<span className={styles.badge} aria-hidden>
+					<span className={styles.pulseDot}>
+						<Dot size={36} />
+					</span>
+				</span>
+			)}
+			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					className="noz-wave"
+					prefix={<Noz size={16} />}
+					onClick={(): void => openAIAssistant()}
+					aria-label={
+						showPendingBadge
+							? `Ask Noz, ${pendingUserInputCount} ${
+									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
+								} your response`
+							: 'Ask Noz'
+					}
+				>
+					Ask Noz
+				</Button>
+			</TooltipSimple>
+		</div>
+	);
+}
+
+export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -0,0 +1,133 @@
+import { fireEvent } from '@testing-library/react';
+import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { render } from 'tests/test-utils';
+
+import AskNoz from '../AskNoz';
+
+jest.mock('hooks/useIsAIAssistantEnabled');
+jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
+	openAIAssistant: jest.fn(),
+	useAIAssistantStore: jest.fn(),
+}));
+
+const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
+	typeof useIsAIAssistantEnabled
+>;
+const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { useAIAssistantStore } = jest.requireMock(
+	'container/AIAssistant/store/useAIAssistantStore',
+) as { useAIAssistantStore: jest.Mock };
+
+/** The component reads the store through three separate selector calls. */
+function mockStore({
+	isDrawerOpen = false,
+	isModalOpen = false,
+	pendingCount = 0,
+}: {
+	isDrawerOpen?: boolean;
+	isModalOpen?: boolean;
+	pendingCount?: number;
+} = {}): void {
+	const state = { isDrawerOpen, isModalOpen, streams: {} };
+	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
+		const picked = selector(state);
+		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
+		// so stand in the count we want to assert against.
+		return typeof picked === 'number' ? pendingCount : picked;
+	});
+}
+
+// `TooltipSimple` replaces its trigger's props, so the testId lives on the
+// wrapper and the button itself is reached by role — there is only ever one.
+const SLOT = 'bottom-strip-ask-noz';
+
+describe('AskNoz', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockEnabled.mockReturnValue(true);
+		mockStore();
+	});
+
+	describe('visibility', () => {
+		it('renders when the assistant is enabled', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toBeInTheDocument();
+		});
+
+		it('renders nothing when the assistant is disabled', () => {
+			mockEnabled.mockReturnValue(false);
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing while the drawer is open', () => {
+			mockStore({ isDrawerOpen: true });
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
+			const { queryByTestId } = render(<AskNoz />, undefined, {
+				initialRoute: '/ai-assistant/some-conversation-id',
+			});
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('what it does', () => {
+		it('opens the drawer on click', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			fireEvent.click(getByRole('button'));
+
+			expect(mockOpen).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('pending badge', () => {
+		it('announces the count when Noz is waiting on the user', () => {
+			mockStore({ pendingCount: 2 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 2 actions need your response',
+			);
+		});
+
+		it('uses the singular for one pending action', () => {
+			mockStore({ pendingCount: 1 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 1 action needs your response',
+			);
+		});
+
+		it('stays quiet when nothing is pending', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+
+		it('stays quiet while the modal is open, Noz is already on screen', () => {
+			mockStore({ isModalOpen: true, pendingCount: 3 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+	});
+});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -11,6 +11,8 @@
 	background: var(--l2-background);
 	border-top: 1px solid var(--l2-border);
 
+	--button-font-size: 12px;
+
 	font-family: var(--font-family-sf-mono, monospace);
 
 	// Above page content, below the body-portalled overlays that are meant to
@@ -23,14 +25,21 @@
 .right {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-6);
+	gap: var(--spacing-4);
 	min-width: 0;
 }
 
-// Temporary placeholder for the left slot. Replaced later.
-.version {
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.left {
+	cursor: default;
+}
+
+// separator b/w strip entities
+.left > *:not(:last-child)::after,
+.right > *:not(:last-child)::after {
+	content: '';
+	flex-shrink: 0;
+	width: 1px;
+	height: 14px;
+	background: var(--l2-border);
+	margin-left: var(--spacing-4);
 }

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -0,0 +1,53 @@
+import * as Sentry from '@sentry/react';
+import { useAppContext } from 'providers/App/App';
+
+import StripKeyValue from '../components/StripKeyValue/StripKeyValue';
+import StripTypography from '../components/StripTypography/StripTypography';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+import { type StripItem, StripItemKind } from '../types';
+
+function renderItem(item: StripItem, index: number): JSX.Element {
+	if (item.kind === StripItemKind.KeyValue) {
+		return (
+			<StripKeyValue
+				key={index}
+				label={item.label}
+				value={item.value}
+				prefix={item.prefix}
+				tone={item.tone}
+			/>
+		);
+	}
+
+	return (
+		// eslint-disable-next-line react/no-array-index-key
+		<StripTypography key={index} prefix={item.prefix}>
+			{item.text}
+		</StripTypography>
+	);
+}
+
+function LeftSlot(): JSX.Element | null {
+	const { versionData } = useAppContext();
+	const left = useBottomStripStore((state) => state.left);
+	const ownerId = useBottomStripStore((state) => state.ownerId);
+
+	const version = versionData?.version?.trim();
+	const versionNode = version ? (
+		<StripTypography>{version}</StripTypography>
+	) : null;
+
+	if (!left?.length) {
+		return versionNode;
+	}
+
+	return (
+		// Keyed so a page whose items throw does not leave the boundary latched on
+		// the fallback for every page after it.
+		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
+			{left.map(renderItem)}
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { MessageSquareText } from '@signozhq/icons';
+
+function SupportButton(): JSX.Element | null {
+	const chatSupport = useChatSupport();
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+
+	if (chatSupport === ChatSupportState.Unavailable) {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		if (chatSupport === ChatSupportState.NeedsCard) {
+			setIsAddCreditCardModalOpen(true);
+			return;
+		}
+		window.Pylon?.('show');
+	};
+
+	return (
+		<>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<MessageSquareText size={16} />}
+				onClick={handleClick}
+				testId="bottom-strip-support"
+			>
+				Support
+			</Button>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+			/>
+		</>
+	);
+}
+
+export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -0,0 +1,81 @@
+import { fireEvent } from '@testing-library/react';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { render } from 'tests/test-utils';
+
+import SupportButton from '../SupportButton';
+
+jest.mock('hooks/useChatSupport', () => ({
+	...jest.requireActual('hooks/useChatSupport'),
+	useChatSupport: jest.fn(),
+}));
+
+const mockChatSupport = useChatSupport as jest.MockedFunction<
+	typeof useChatSupport
+>;
+
+const BUTTON = 'bottom-strip-support';
+const MODAL_TITLE = 'Add Credit Card for Chat Support';
+
+describe('SupportButton', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		window.Pylon = jest.fn() as never;
+	});
+
+	describe('when Pylon is available', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
+
+		it('shows the button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the Pylon widget on click', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(window.Pylon).toHaveBeenCalledWith('show');
+		});
+
+		it('does not open the credit card modal', () => {
+			const { getByTestId, queryByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('when the user needs a card', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
+
+		it('shows the same button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the credit card modal on click, not Pylon', () => {
+			const { getByTestId, getByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
+			expect(window.Pylon).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('when support is unavailable', () => {
+		beforeEach(() =>
+			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
+		);
+
+		it('renders nothing at all', () => {
+			const { queryByTestId } = render(<SupportButton />);
+
+			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
+		});
+	});
+});

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

@@ -1,12 +1,65 @@
+import { useMemo, useState } from 'react';
+import { fireEvent } from '@testing-library/react';
 import { render } from 'tests/test-utils';
+import { Info } from 'types/api/v1/version/get';
 
 import BottomStrip, {
 	BOTTOM_STRIP_HEIGHT,
 	BOTTOM_STRIP_HEIGHT_VAR,
 	BOTTOM_STRIP_ON_CLASS,
 } from '..';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+import { useBottomStrip } from '../useBottomStrip';
+import { StripItemKind } from '../types';
+
+/** Stands in for a page that puts something on the left of the strip. */
+function Page({ text }: { text: string }): null {
+	useBottomStrip(useMemo(() => [{ kind: StripItemKind.Text, text }], [text]));
+	return null;
+}
+
+/**
+ * A page whose icon throws when the strip renders it. `prefix` is the one place
+ * the config still takes a node, so it is the only way a page can break it.
+ */
+function BoomPage(): null {
+	useBottomStrip([{ kind: StripItemKind.Text, text: 'boom', prefix: <Boom /> }]);
+	return null;
+}
+
+/** A page whose value changes without needing `rerender`. */
+function ChangingPage(): JSX.Element {
+	const [count, setCount] = useState(600);
+
+	useBottomStrip(
+		useMemo(
+			() => [{ kind: StripItemKind.Text, text: `${count} traces` }],
+			[count],
+		),
+	);
+
+	return (
+		<button type="button" onClick={(): void => setCount(42)}>
+			change
+		</button>
+	);
+}
+
+/** A page node that blows up while the strip renders it. */
+function Boom(): JSX.Element {
+	throw new Error('bad left node');
+}
+
+const VERSION = 'v0.134.67';
+const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
+const withVersion = { appContextOverrides: { versionData } };
 
 describe('BottomStrip', () => {
+	// The store is module level, so it outlives each test.
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
 	it('publishes the body class and height property while mounted', () => {
 		const { unmount } = render(<BottomStrip />);
 
@@ -28,22 +81,96 @@ describe('BottomStrip', () => {
 	it.each([['v0.134.67'], ['main-64f1c2a']])(
 		'renders the build version %p exactly as given',
 		(version) => {
-			const { getByTestId } = render(<BottomStrip />, undefined, {
+			const { getByText } = render(<BottomStrip />, undefined, {
 				appContextOverrides: {
 					versionData: { version, ee: 'Y', setupCompleted: true },
 				},
 			});
 
-			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+			expect(getByText(version)).toBeInTheDocument();
 		},
 	);
 
 	it('renders the strip without a version when none is available', () => {
-		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+		const { getByTestId } = render(<BottomStrip />, undefined, {
 			appContextOverrides: { versionData: null },
 		});
 
-		expect(getByTestId('bottom-strip')).toBeInTheDocument();
-		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+		const strip = getByTestId('bottom-strip');
+
+		expect(strip).toBeInTheDocument();
+		expect(strip).toHaveTextContent('');
+	});
+
+	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
+	// re-renders the original tree. These drive change through state and through
+	// separate trees instead, which the module-level store lets them share.
+	describe('left slot', () => {
+		it('shows what the page put there instead of the version', () => {
+			render(<Page text="600 traces" />);
+			const { getByText, queryByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+			expect(queryByText(VERSION)).not.toBeInTheDocument();
+		});
+
+		it('falls back to the version once the page is gone', () => {
+			const page = render(<Page text="600 traces" />);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			page.unmount();
+
+			expect(getByText(VERSION)).toBeInTheDocument();
+		});
+
+		it('updates when the page changes what it shows', () => {
+			render(<ChangingPage />);
+			const { getByText, getByRole } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+
+			fireEvent.click(getByRole('button', { name: 'change' }));
+
+			expect(getByText('42 traces')).toBeInTheDocument();
+		});
+
+		it('falls back to the version when the page node throws', () => {
+			// React logs the caught error, which is noise here.
+			const consoleError = jest
+				.spyOn(console, 'error')
+				.mockImplementation(() => {});
+
+			render(<BoomPage />);
+			const { getByTestId, getByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByTestId('bottom-strip')).toBeInTheDocument();
+			expect(getByText(VERSION)).toBeInTheDocument();
+
+			consoleError.mockRestore();
+		});
+
+		it('keeps the new page value when the old page unmounts after it', () => {
+			// Navigation order: the next page mounts before the last one unmounts,
+			// so without the owner guard the outgoing page wipes the incoming value.
+			const pageA = render(<Page text="page A" />);
+			render(<Page text="page B" />);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			pageA.unmount();
+
+			expect(getByText('page B')).toBeInTheDocument();
+		});
 	});
 });

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.module.scss

@@ -0,0 +1,24 @@
+// `:` is spaced like a word, per the Figma, so the gap here is a space width
+// rather than the wider gap between whole items.
+.keyValue {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	color: var(--l2-foreground);
+	white-space: nowrap;
+}
+
+.prefix {
+	display: inline-flex;
+	align-items: center;
+	margin-right: var(--spacing-1);
+}
+
+.warning {
+	color: var(--warning);
+}
+
+.error {
+	color: var(--destructive);
+}

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { StripTone } from '../../types';
+
+import styles from './StripKeyValue.module.scss';
+
+export interface StripKeyValueProps {
+	label: string;
+	value: string | number;
+	/** Leading icon. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+	/** Tints the icon; the text stays neutral at every tone. */
+	tone?: StripTone;
+}
+
+/** A labelled number, rendered `Spans : 31`. */
+function StripKeyValue({
+	label,
+	value,
+	prefix,
+	tone,
+}: StripKeyValueProps): JSX.Element {
+	return (
+		<span className={styles.keyValue}>
+			{prefix && (
+				<span className={cx(styles.prefix, tone && styles[tone])} data-tone={tone}>
+					{prefix}
+				</span>
+			)}
+			<Typography.Text as="span" className={styles.label}>
+				{label}
+			</Typography.Text>
+			<Typography.Text as="span" className={styles.colon}>
+				:
+			</Typography.Text>
+			<Typography.Text as="span" className={styles.value}>
+				{value}
+			</Typography.Text>
+		</span>
+	);
+}
+
+StripKeyValue.defaultProps = { prefix: undefined, tone: StripTone.Default };
+
+export default StripKeyValue;

frontend/src/container/BottomStrip/components/StripKeyValue/__tests__/StripKeyValue.test.tsx

@@ -0,0 +1,46 @@
+import { render } from 'tests/test-utils';
+
+import { StripTone } from '../../../types';
+
+import StripKeyValue from '../StripKeyValue';
+
+describe('StripKeyValue', () => {
+	it('renders the label and the value around a colon it owns', () => {
+		const { getByText, container } = render(
+			<StripKeyValue label="Spans" value={31} />,
+		);
+
+		expect(getByText('Spans')).toBeInTheDocument();
+		expect(getByText('31')).toBeInTheDocument();
+		// The consumer never builds the string, so the spacing cannot drift.
+		expect(container.textContent).toBe('Spans:31');
+	});
+
+	it('tints only the icon when the tone is set', () => {
+		const { container } = render(
+			<StripKeyValue
+				label="Errors"
+				value={4}
+				tone={StripTone.Error}
+				prefix={<svg data-testid="icon" />}
+			/>,
+		);
+
+		// The tone lands on the icon, never on the text.
+		expect(container.querySelector('[data-tone]')).toHaveAttribute(
+			'data-tone',
+			'error',
+		);
+	});
+
+	it('leaves the icon untinted by default', () => {
+		const { container } = render(
+			<StripKeyValue label="Errors" value={0} prefix={<svg />} />,
+		);
+
+		expect(container.querySelector('[data-tone]')).toHaveAttribute(
+			'data-tone',
+			'default',
+		);
+	});
+});

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -0,0 +1,10 @@
+.stripTypography {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './StripTypography.module.scss';
+
+interface StripTypographyProps {
+	children: ReactNode;
+	/** Leading icon. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+}
+
+/** A single phrase. A labelled number belongs in `StripKeyValue`. */
+function StripTypography({
+	children,
+	prefix,
+}: StripTypographyProps): JSX.Element {
+	return (
+		<span className={styles.stripTypography}>
+			{prefix}
+			<Typography.Text as="span">{children}</Typography.Text>
+		</span>
+	);
+}
+
+StripTypography.defaultProps = { prefix: undefined };
+
+export type { StripTypographyProps };
+export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,5 +1,8 @@
 import { useLayoutEffect } from 'react';
-import { useAppContext } from 'providers/App/App';
+
+import AskNoz from './AskNoz/AskNoz';
+import LeftSlot from './LeftSlot/LeftSlot';
+import SupportButton from './SupportButton/SupportButton';
 
 import styles from './BottomStrip.module.scss';
 
@@ -9,9 +12,6 @@ export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
 export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
 
 function BottomStrip(): JSX.Element {
-	const { versionData } = useAppContext();
-	const version = versionData?.version?.trim();
-
 	useLayoutEffect(() => {
 		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
 		document.body.style.setProperty(
@@ -28,13 +28,12 @@ function BottomStrip(): JSX.Element {
 	return (
 		<div className={styles.strip} data-testid="bottom-strip">
 			<div className={styles.left}>
-				{version && (
-					<span className={styles.version} data-testid="bottom-strip-version">
-						{version}
-					</span>
-				)}
+				<LeftSlot />
+			</div>
+			<div className={styles.right}>
+				<AskNoz />
+				<SupportButton />
 			</div>
-			<div className={styles.right} />
 		</div>
 	);
 }

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+import type { StripItem } from '../types';
+
+interface BottomStripState {
+	/** What the strip shows on the left, or null to fall back to the version. */
+	left: StripItem[] | null;
+	/** Which page owns the current value — see `clearLeft`. */
+	ownerId: string | null;
+	setLeft: (ownerId: string, left: StripItem[] | null) => void;
+	clearLeft: (ownerId: string) => void;
+}
+
+export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
+	left: null,
+	ownerId: null,
+	setLeft: (ownerId, left): void => set({ left, ownerId }),
+	// Only the current owner may clear. On a plain route swap React runs the old
+	// page's cleanup before the new page's effect, so this is moot, but two
+	// consumers can be mounted at once (a page under a drawer): the one that set
+	// last owns the slot, and the other unmounting must not wipe it.
+	clearLeft: (ownerId): void => {
+		if (get().ownerId === ownerId) {
+			set({ left: null, ownerId: null });
+		}
+	},
+}));

frontend/src/container/BottomStrip/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export enum StripTone {
+	Default = 'default',
+	Warning = 'warning',
+	Error = 'error',
+}
+
+export enum StripItemKind {
+	/** A phrase in the page's own words, e.g. "18 services". */
+	Text = 'text',
+	/** A labelled number, rendered `label : value`. */
+	KeyValue = 'keyValue',
+}
+
+/** What a page may put on the left of the strip. */
+export type StripItem =
+	| {
+			kind: StripItemKind.Text;
+			text: string;
+			prefix?: ReactNode;
+	  }
+	| {
+			kind: StripItemKind.KeyValue;
+			/** Without a colon; the strip renders the separator. */
+			label: string;
+			value: string | number;
+			prefix?: ReactNode;
+			/** Tints the icon; the text stays neutral at every tone. */
+			tone?: StripTone;
+	  };

frontend/src/container/BottomStrip/useBottomStrip.ts

@@ -0,0 +1,25 @@
+import { useEffect, useId } from 'react';
+
+import { useBottomStripStore } from './store/useBottomStripStore';
+import type { StripItem } from './types';
+
+/**
+ * Puts `items` in the bottom strip for as long as the calling page is mounted.
+ * Pass null to show nothing and let the version through. The left is the only
+ * side a page contributes to; the right is the strip's own.
+ *
+ * There is no refresh API by design: a page that refetches re-renders, which
+ * produces new items, which re-runs this effect. Memoise the array where it is
+ * built, or the store is written on every render.
+ */
+export function useBottomStrip(items: StripItem[] | null): void {
+	const ownerId = useId();
+	const setLeft = useBottomStripStore((state) => state.setLeft);
+	const clearLeft = useBottomStripStore((state) => state.clearLeft);
+
+	useEffect(() => {
+		setLeft(ownerId, items);
+
+		return (): void => clearLeft(ownerId);
+	}, [items, ownerId, setLeft, clearLeft]);
+}

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -8,11 +8,10 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { getSavedViewQuery } from 'container/SavedViews/utils';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
@@ -36,7 +35,6 @@ export default function SavedViews({
 	loadingUserPreferences: boolean;
 }): JSX.Element {
 	const { user } = useAppContext();
-	const isSavedViewEnabled = useSavedViewEnabled();
 	const [selectedEntity, setSelectedEntity] = useState<string>('logs');
 	const [selectedEntityViews, setSelectedEntityViews] = useState<
 		SavedviewtypesSavedViewDTO[]
@@ -353,7 +351,7 @@ export default function SavedViews({
 				{selectedEntityViews.length > 0 ? renderSavedViews() : emptyStateCard()}
 			</Card.Content>
 
-			{!isSavedViewEnabled && selectedEntityViews.length > 0 && (
+			{selectedEntityViews.length > 0 && (
 				<Card.Footer>
 					<div className="services-footer home-data-card-footer">
 						<Link to={footerLink}>

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -190,12 +190,14 @@ function Explorer(): JSX.Element {
 				className="trace-explorer-page"
 				testId="llm-observability-explorer"
 				showFilters={isOpen}
-				onToggleFilters={(): void => setOpen(!isOpen)}
 				quickFilterProps={{
 					className: 'qf-traces-explorer',
 					source: QuickFiltersSource.AI_OBSERVABILITY,
 					signal: SignalType.AI_OBSERVABILITY,
 					useFieldApis: quickFiltersFieldApis,
+					handleFilterVisibilityChange: (): void => {
+						setOpen(!isOpen);
+					},
 				}}
 			>
 				<div className="trace-explorer">

frontend/src/container/LogsExplorerViews/index.tsx

@@ -45,7 +45,6 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
@@ -82,7 +81,6 @@ function LogsExplorerViewsContainer({
 	handleChangeSelectedView: ChangeViewFunctionType;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
-	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 
 	const [showFrequencyChart, setShowFrequencyChart] = useState(
@@ -518,15 +516,13 @@ function LogsExplorerViewsContainer({
 
 			<GoToTop />
 
-			{!isSavedViewEnabled && (
-				<ExplorerOptionWrapper
-					disabled={!stagedQuery}
-					query={exportDefaultQuery}
-					onExport={handleExport}
-					sourcepage={DataSource.LOGS}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
+			<ExplorerOptionWrapper
+				disabled={!stagedQuery}
+				query={exportDefaultQuery}
+				onExport={handleExport}
+				sourcepage={DataSource.LOGS}
+				handleChangeSelectedView={handleChangeSelectedView}
+			/>
 		</div>
 	);
 }

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -4,7 +4,6 @@ import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
@@ -18,7 +17,6 @@ import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashb
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,7 +38,6 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
-	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 	const queryClient = useQueryClient();
 	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
@@ -126,14 +123,15 @@ function Explorer(): JSX.Element {
 			<QuickFiltersLayout
 				className="meter-explorer-container"
 				showFilters={showQuickFilters}
-				onToggleFilters={(): void => setShowQuickFilters(!showQuickFilters)}
-				savedViewProps={{ source: SavedviewtypesSourceDTO.meter }}
 				quickFilterProps={{
 					className: 'qf-meter-explorer',
 					source: QuickFiltersSource.METER_EXPLORER,
 					signal: SignalType.METER_EXPLORER,
 					showFilterCollapse: true,
 					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {
+						setShowQuickFilters(!showQuickFilters);
+					},
 					useFieldApis: quickFilterFieldApis,
 				}}
 			>
@@ -179,17 +177,15 @@ function Explorer(): JSX.Element {
 							/>
 						</div>
 					</div>
-					{!isSavedViewEnabled && (
-						<ExplorerOptionWrapper
-							disabled={!stagedQuery}
-							query={exportDefaultQuery}
-							sourcepage={DataSource.METRICS}
-							signalSource="meter"
-							onExport={handleExport}
-							isOneChartPerQuery={false}
-							splitedQueries={splitedQueries}
-						/>
-					)}
+					<ExplorerOptionWrapper
+						disabled={!stagedQuery}
+						query={exportDefaultQuery}
+						sourcepage={DataSource.METRICS}
+						signalSource="meter"
+						onExport={handleExport}
+						isOneChartPerQuery={false}
+						splitedQueries={splitedQueries}
+					/>
 				</div>
 			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -3,18 +3,13 @@ import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Tooltip } from 'antd';
-import { Filter } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@@ -28,7 +23,6 @@ import {
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import {
@@ -68,12 +62,10 @@ function Explorer(): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
-	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
-	const [showSidebar, setShowSidebar] = useState(true);
 
 	const queryClient = useQueryClient();
 	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
@@ -355,87 +347,66 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				showFilters={showSidebar}
-				onToggleFilters={(): void => setShowSidebar(!showSidebar)}
-				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
-			>
-				<div className="metrics-explorer-explore-container">
-					<div className="explore-header">
-						<div className="explore-header-left-actions">
-							{!showSidebar && (
-								<TooltipSimple title="Show Views">
-									<Button
-										variant="outlined"
-										color="secondary"
-										size="icon"
-										aria-label="Show Views"
-										prefix={<Filter size={16} />}
-										onClick={(): void => setShowSidebar(true)}
-										data-testid="metrics-explorer-show-sidebar"
-									/>
-								</TooltipSimple>
-							)}
-							<span>1 chart/query</span>
-							<Tooltip
-								open={disableOneChartPerQuery ? undefined : false}
-								title={oneChartPerQueryDisabledTooltip}
-							>
-								<Switch
-									value={showOneChartPerQuery}
-									onChange={handleToggleShowOneChartPerQuery}
-									disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
-								/>
-							</Tooltip>
-						</div>
-						<div className="explore-header-right-actions">
-							{!isEmpty(warning) && <WarningPopover warningData={warning} />}
-							<DateTimeSelector showAutoRefresh />
-							<RightToolbarActions
-								onStageRunQuery={(): void => handleRunQuery()}
-								isLoadingQueries={isLoadingQueries}
-								handleCancelQuery={handleCancelQuery}
+			<div className="metrics-explorer-explore-container">
+				<div className="explore-header">
+					<div className="explore-header-left-actions">
+						<span>1 chart/query</span>
+						<Tooltip
+							open={disableOneChartPerQuery ? undefined : false}
+							title={oneChartPerQueryDisabledTooltip}
+						>
+							<Switch
+								value={showOneChartPerQuery}
+								onChange={handleToggleShowOneChartPerQuery}
+								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
 							/>
-						</div>
+						</Tooltip>
 					</div>
-					<QueryBuilderV2
-						config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-						panelType={PANEL_TYPES.TIME_SERIES}
-						showFunctions={false}
-						version="v3"
-					/>
-					<div className="explore-content">
-						<TimeSeries
-							onFetchingStateChange={setIsLoadingQueries}
-							showOneChartPerQuery={showOneChartPerQuery}
-							setWarning={setWarning}
-							areAllMetricUnitsSame={areAllMetricUnitsSame}
-							isMetricUnitsLoading={isMetricUnitsLoading}
-							isMetricUnitsError={isMetricUnitsError}
-							metricUnits={units}
-							metricNames={metricNames}
-							metrics={metrics}
-							handleOpenMetricDetails={handleOpenMetricDetails}
-							yAxisUnit={yAxisUnit}
-							setYAxisUnit={setYAxisUnit}
-							showYAxisUnitSelector={showYAxisUnitSelector}
-							isCancelled={isCancelled}
-							exportDefaultQuery={exportDefaultQuery}
+					<div className="explore-header-right-actions">
+						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+						<DateTimeSelector showAutoRefresh />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</div>
 				</div>
-			</QuickFiltersLayout>
-			{!isSavedViewEnabled && (
-				<ExplorerOptionWrapper
-					disabled={!stagedQuery}
-					query={exportDefaultQuery}
-					sourcepage={DataSource.METRICS}
-					onExport={handleExport}
-					isOneChartPerQuery={showOneChartPerQuery}
-					splitedQueries={splitedQueries}
-					handleChangeSelectedView={handleChangeSelectedView}
+				<QueryBuilderV2
+					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+					panelType={PANEL_TYPES.TIME_SERIES}
+					showFunctions={false}
+					version="v3"
 				/>
-			)}
+				<div className="explore-content">
+					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
+						showOneChartPerQuery={showOneChartPerQuery}
+						setWarning={setWarning}
+						areAllMetricUnitsSame={areAllMetricUnitsSame}
+						isMetricUnitsLoading={isMetricUnitsLoading}
+						isMetricUnitsError={isMetricUnitsError}
+						metricUnits={units}
+						metricNames={metricNames}
+						metrics={metrics}
+						handleOpenMetricDetails={handleOpenMetricDetails}
+						yAxisUnit={yAxisUnit}
+						setYAxisUnit={setYAxisUnit}
+						showYAxisUnitSelector={showYAxisUnitSelector}
+						isCancelled={isCancelled}
+						exportDefaultQuery={exportDefaultQuery}
+					/>
+				</div>
+			</div>
+			<ExplorerOptionWrapper
+				disabled={!stagedQuery}
+				query={exportDefaultQuery}
+				sourcepage={DataSource.METRICS}
+				onExport={handleExport}
+				isOneChartPerQuery={showOneChartPerQuery}
+				splitedQueries={splitedQueries}
+				handleChangeSelectedView={handleChangeSelectedView}
+			/>
 			{isMetricDetailsOpen && selectedMetricName && (
 				<MetricDetails
 					metricName={selectedMetricName}

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -41,7 +41,7 @@ import { buildCompositeKey, getOptionsFromKeys } from './utils';
 interface UseOptionsMenuProps {
 	storageKey?: string;
 	dataSource: DataSource;
-	aggregateOperator?: string;
+	aggregateOperator: string;
 	initialOptions?: InitialOptions;
 }
 

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

@@ -329,7 +329,7 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(12);
+		expect(result).toHaveLength(11);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -339,7 +339,6 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 			'metrics',
 			'quick-filter',
 			'role',
-			'saved-view',
 			'serviceaccount',
 			'subscription',
 			'traces',
@@ -423,7 +422,7 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(12);
+		expect(result).toHaveLength(11);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -433,7 +432,6 @@ describe('createEmptyRolePermissions', () => {
 			'metrics',
 			'quick-filter',
 			'role',
-			'saved-view',
 			'serviceaccount',
 			'subscription',
 			'traces',

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

@@ -10,7 +10,6 @@ import {
 	Logs,
 	Receipt,
 	Shield,
-	TowerControl,
 } from '@signozhq/icons';
 
 import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
@@ -96,14 +95,6 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type quick filter ID, separate multiple with comma or space',
 		docsAnchor: 'quick-filter',
 	},
-	'saved-view': {
-		label: 'Saved Views',
-		description: 'Saved views in the logs, traces, metrics and meter explorers.',
-		icon: TowerControl,
-		selectorPlaceholder:
-			'Type saved view ID, separate multiple with comma or space',
-		docsAnchor: 'saved-view',
-	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/container/SavedViews/DeleteSavedViewDialog.tsx

@@ -1,55 +0,0 @@
-import { Check, Trash2, X } from '@signozhq/icons';
-import { AlertDialog } from '@signozhq/ui/alert-dialog';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-
-import { DeleteSavedViewDialogProps } from './types';
-
-function DeleteSavedViewDialog({
-	isDeleting,
-	onCancel,
-	onConfirm,
-}: DeleteSavedViewDialogProps): JSX.Element {
-	return (
-		<AlertDialog
-			open
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onCancel();
-				}
-			}}
-			width="narrow"
-			title="Delete this view"
-			titleIcon={<Trash2 size={16} />}
-			footer={
-				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						onClick={onCancel}
-						prefix={<X size={12} />}
-						testId="delete-saved-view-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isDeleting}
-						onClick={onConfirm}
-						prefix={<Check size={12} />}
-						testId="delete-saved-view-confirm"
-					>
-						Delete view
-					</Button>
-				</>
-			}
-		>
-			<Typography.Text>
-				Deleting this view is irreversible and cannot be undone.
-			</Typography.Text>
-		</AlertDialog>
-	);
-}
-
-export default DeleteSavedViewDialog;

frontend/src/container/SavedViews/SaveChangesMenu.tsx

@@ -1,70 +0,0 @@
-import { useMemo } from 'react';
-import { Check } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import {
-	buildSavedViewUpdatePermission,
-	SavedViewCreatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-import SavedViewsIconButton from './SavedViewsIconButton';
-import { SaveChangesMenuProps } from './types';
-
-import styles from './SavedViewsMenu.module.scss';
-
-function SaveChangesMenu({
-	viewId,
-	disabled,
-	onSaveAsNew,
-	onUpdate,
-}: SaveChangesMenuProps): JSX.Element {
-	const updatePermission = buildSavedViewUpdatePermission(viewId);
-	const { deniedPermissions } = useAuthZ([
-		SavedViewCreatePermission,
-		updatePermission,
-	]);
-
-	const items = useMemo<MenuItem[]>(() => {
-		const isCreateDenied = deniedPermissions.includes(SavedViewCreatePermission);
-		const isUpdateDenied = deniedPermissions.includes(updatePermission);
-		return [
-			{
-				key: 'save-as-new',
-				label: (
-					<AuthZTooltip checks={[SavedViewCreatePermission]}>
-						<span>Save as new view</span>
-					</AuthZTooltip>
-				),
-				disabled: isCreateDenied,
-				className: isCreateDenied ? styles.deniedItem : undefined,
-				onClick: onSaveAsNew,
-			},
-			{
-				key: 'update',
-				label: (
-					<AuthZTooltip checks={[updatePermission]}>
-						<span>Update selected view</span>
-					</AuthZTooltip>
-				),
-				disabled: isUpdateDenied,
-				className: isUpdateDenied ? styles.deniedItem : undefined,
-				onClick: onUpdate,
-			},
-		];
-	}, [deniedPermissions, updatePermission, onSaveAsNew, onUpdate]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }} align="end" className={styles.menu}>
-			<SavedViewsIconButton
-				title="Save changes"
-				icon={<Check size={14} />}
-				color="warning"
-				disabled={disabled}
-				testId="saved-views-save-changes"
-			/>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SaveChangesMenu;

frontend/src/container/SavedViews/SaveViewModal.module.scss

@@ -1,18 +0,0 @@
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.label {
-	font-size: var(--font-size-xs);
-	color: var(--l1-foreground);
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-4);
-	width: 100%;
-}

frontend/src/container/SavedViews/SaveViewModal.tsx

@@ -1,95 +0,0 @@
-import { FormEvent, useState } from 'react';
-import { Check, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-
-import { SAVE_VIEW_MODAL_TITLE } from './constants';
-import { SaveViewModalProps } from './types';
-
-import styles from './SaveViewModal.module.scss';
-
-const NAME_INPUT_ID = 'save-view-name';
-
-function SaveViewModal({
-	mode,
-	initialName = '',
-	isSaving,
-	onClose,
-	onSave,
-}: SaveViewModalProps): JSX.Element {
-	const [name, setName] = useState(initialName);
-	const displayName = name.trim();
-
-	const handleSave = async (): Promise<void> => {
-		if (!displayName || isSaving) {
-			return;
-		}
-		if (await onSave(displayName)) {
-			onClose();
-		}
-	};
-
-	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-		event.preventDefault();
-		void handleSave();
-	};
-
-	return (
-		<DialogWrapper
-			open
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={SAVE_VIEW_MODAL_TITLE[mode]}
-			testId="save-view-modal"
-			footer={
-				<div className={styles.footer}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						prefix={<X size={14} />}
-						onClick={onClose}
-						testId="save-view-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						color="primary"
-						size="md"
-						prefix={<Check size={14} />}
-						loading={isSaving}
-						disabled={!displayName}
-						onClick={(): void => {
-							void handleSave();
-						}}
-						testId="save-view-submit"
-					>
-						Save view
-					</Button>
-				</div>
-			}
-		>
-			<form className={styles.field} onSubmit={handleSubmit}>
-				<label htmlFor={NAME_INPUT_ID}>
-					<Typography.Text className={styles.label}>Enter view name</Typography.Text>
-				</label>
-				<Input
-					id={NAME_INPUT_ID}
-					placeholder="Eg. payments-view"
-					value={name}
-					onChange={(event): void => setName(event.target.value)}
-					autoFocus
-					autoComplete="off"
-					testId="save-view-name"
-				/>
-			</form>
-		</DialogWrapper>
-	);
-}
-
-export default SaveViewModal;

frontend/src/container/SavedViews/SavedViewHighlightedExpression.tsx

@@ -1,32 +0,0 @@
-import { useMemo } from 'react';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { highlightQueryExpression } from './utils/highlightQueryExpression';
-
-function SavedViewHighlightedExpression({
-	expression,
-}: {
-	expression: string;
-}): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const parts = useMemo(
-		() => highlightQueryExpression(expression, isDarkMode),
-		[expression, isDarkMode],
-	);
-
-	return (
-		<>
-			{parts.map(({ from, text, color }) =>
-				color ? (
-					<span key={from} style={{ color }}>
-						{text}
-					</span>
-				) : (
-					text
-				),
-			)}
-		</>
-	);
-}
-
-export default SavedViewHighlightedExpression;

frontend/src/container/SavedViews/SavedViewHoverCard.module.scss

@@ -1,110 +0,0 @@
-.anchor {
-	position: absolute;
-	left: 100%;
-	width: 1px;
-	pointer-events: none;
-}
-
-.card {
-	--popover-padding: 0;
-	--popover-background: var(--l1-background);
-	--popover-border-color: var(--l2-border);
-	--popover-border-radius: var(--radius-2);
-	--popover-foreground: var(--l1-foreground);
-
-	width: 324px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-6) var(--spacing-8);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-}
-
-.name {
-	min-width: 0;
-	color: var(--l1-foreground);
-	font-size: var(--periscope-font-size-base);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.query {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	padding: var(--spacing-3) var(--spacing-4);
-	border-radius: var(--radius-2);
-	background: var(--l2-background);
-}
-
-.queryItem {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-}
-
-.queryName {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-small);
-}
-
-.metric {
-	color: var(--l2-foreground);
-	font-family: var(--periscope-font-family-mono);
-	font-size: var(--font-size-xs);
-	word-break: break-all;
-}
-
-.expression {
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 4;
-	line-clamp: 4;
-	overflow: hidden;
-	color: var(--l1-foreground);
-	font-family: var(--periscope-font-family-mono);
-	font-size: var(--font-size-xs);
-	word-break: break-all;
-}
-
-.noFilters {
-	color: var(--l3-foreground);
-	font-size: var(--periscope-font-size-base);
-}
-
-.updated {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.sectionTitle {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-small);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-18);
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
-}
-
-.meta {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	color: var(--l2-foreground);
-}
-
-.metaText {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/SavedViews/SavedViewHoverCard.tsx

@@ -1,130 +0,0 @@
-import { CalendarClock } from '@signozhq/icons';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { useMemo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-import { useTimezone } from 'providers/Timezone';
-
-import { SAVED_VIEW_UPDATED_AT_FORMAT } from './constants';
-import SavedViewHighlightedExpression from './SavedViewHighlightedExpression';
-import { getSavedViewQuerySummaries } from './utils/getSavedViewQuerySummaries';
-import { SavedViewHoverCardProps } from './types';
-
-import styles from './SavedViewHoverCard.module.scss';
-
-function SavedViewHoverCard({
-	target,
-	onCardEnter,
-	onCardLeave,
-	onClose,
-}: SavedViewHoverCardProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const view = target?.view;
-	const querySummaries = useMemo(
-		() => (view ? getSavedViewQuerySummaries(view) : []),
-		[view],
-	);
-	const hasQueryNames = querySummaries.length > 1;
-	const copyValue = querySummaries
-		.filter(({ expression }) => expression.length > 0)
-		.map(({ queryName, expression }) =>
-			hasQueryNames ? `${queryName}: ${expression}` : expression,
-		)
-		.join('\n');
-
-	return (
-		<Popover
-			open={!!view}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-		>
-			<PopoverAnchor asChild>
-				<div
-					className={styles.anchor}
-					style={{ top: target?.anchorTop ?? 0, height: target?.anchorHeight ?? 0 }}
-				/>
-			</PopoverAnchor>
-			<PopoverContent
-				side="right"
-				align="start"
-				sideOffset={4}
-				className={styles.card}
-				onOpenAutoFocus={(event): void => event.preventDefault()}
-				onCloseAutoFocus={(event): void => event.preventDefault()}
-			>
-				{view && (
-					<div
-						className={styles.content}
-						onMouseEnter={onCardEnter}
-						onMouseLeave={onCardLeave}
-						data-testid="saved-view-hover-card"
-					>
-						<div className={styles.header}>
-							<Typography.Text className={styles.name}>
-								{view.spec.displayName}
-							</Typography.Text>
-							{copyValue && (
-								<CopyButton
-									value={copyValue}
-									ariaLabel="Copy query"
-									testId="saved-view-hover-card-copy"
-								/>
-							)}
-						</div>
-						<div className={styles.query} data-testid="saved-view-hover-card-query">
-							{querySummaries.length === 0 ? (
-								<Typography.Text className={styles.noFilters}>
-									No filters
-								</Typography.Text>
-							) : (
-								querySummaries.map(({ queryName, expression, metric }) => (
-									<div key={queryName} className={styles.queryItem}>
-										{hasQueryNames && (
-											<Typography.Text className={styles.queryName}>
-												{queryName}
-											</Typography.Text>
-										)}
-										{metric && (
-											<Typography.Text className={styles.metric}>{metric}</Typography.Text>
-										)}
-										{expression && (
-											<Typography.Text className={styles.expression}>
-												<SavedViewHighlightedExpression expression={expression} />
-											</Typography.Text>
-										)}
-									</div>
-								))
-							)}
-						</div>
-						<div className={styles.updated}>
-							<Typography.Text className={styles.sectionTitle}>
-								Last updated
-							</Typography.Text>
-							{view.updatedBy && (
-								<Typography.Text className={styles.metaText}>
-									{view.updatedBy}
-								</Typography.Text>
-							)}
-							{view.updatedAt && (
-								<div className={styles.meta}>
-									<CalendarClock size={14} />
-									<Typography.Text className={styles.metaText}>
-										{formatTimezoneAdjustedTimestamp(
-											view.updatedAt,
-											SAVED_VIEW_UPDATED_AT_FORMAT,
-										)}
-									</Typography.Text>
-								</div>
-							)}
-						</div>
-					</div>
-				)}
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export default SavedViewHoverCard;

frontend/src/container/SavedViews/SavedViewsEmptyState.tsx

@@ -1,58 +0,0 @@
-import { useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { SavedViewCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-
-import SaveViewModal from './SaveViewModal';
-import { SavedViewsEmptyStateProps } from './types';
-
-import styles from './SavedViewsList.module.scss';
-
-function SavedViewsEmptyState({
-	isSearching,
-	isSaving,
-	onSave,
-}: SavedViewsEmptyStateProps): JSX.Element {
-	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	if (isSearching) {
-		return (
-			<div className={styles.state} data-testid="saved-views-list-no-results">
-				<Typography.Text className={styles.stateText}>
-					No views match your search
-				</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.state} data-testid="saved-views-list-empty">
-			<Typography.Text className={styles.stateTitle}>No views yet</Typography.Text>
-			<Typography.Text className={styles.stateText}>
-				Save the current view to open it later.
-			</Typography.Text>
-			<AuthZButton
-				checks={[SavedViewCreatePermission]}
-				variant="outlined"
-				color="secondary"
-				size="sm"
-				prefix={<Plus size={12} />}
-				onClick={(): void => setIsModalOpen(true)}
-				data-testid="saved-views-list-create"
-			>
-				Create view
-			</AuthZButton>
-			{isModalOpen && (
-				<SaveViewModal
-					mode="create"
-					isSaving={isSaving}
-					onClose={(): void => setIsModalOpen(false)}
-					onSave={onSave}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default SavedViewsEmptyState;

frontend/src/container/SavedViews/SavedViewsHeader.module.scss

@@ -1,78 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-2);
-	padding: var(--spacing-2) var(--spacing-5);
-	border-bottom: 1px solid var(--l1-border);
-	color: var(--l1-foreground);
-	flex-shrink: 0;
-
-	&.isDirty {
-		background: linear-gradient(
-			to right,
-			var(--callout-warning-background),
-			transparent
-		);
-	}
-
-	&.isError {
-		background: linear-gradient(
-			to right,
-			var(--callout-error-background),
-			transparent
-		);
-	}
-}
-
-.name {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	min-width: 0;
-	padding: var(--spacing-1) var(--spacing-4);
-	border-radius: var(--spacing-1);
-	background: var(--l3-background);
-	color: var(--l1-foreground);
-	font-size: var(--font-size-sm);
-
-	&.isDirty {
-		background: var(--callout-warning-background);
-		color: var(--callout-warning-title);
-	}
-
-	&.isError {
-		background: var(--callout-error-background);
-		color: var(--callout-error-title);
-	}
-}
-
-.nameText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.dot {
-	width: var(--spacing-3);
-	height: var(--spacing-3);
-	flex-shrink: 0;
-	border-radius: 50%;
-	background: var(--callout-warning-icon);
-}
-
-.skeleton {
-	flex: 1;
-	min-width: 0;
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	gap: var(--spacing-1);
-}
-
-.collapseIcon {
-	rotate: 270deg;
-}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -1,167 +0,0 @@
-import { useCallback, useState } from 'react';
-import cx from 'classnames';
-import { ArrowUpToLine, Menu, Plus, Undo2, X } from '@signozhq/icons';
-import { Skeleton } from '@signozhq/ui/skeleton';
-import { toast } from '@signozhq/ui/sonner';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	MY_VIEW_NAME,
-	SAVED_VIEW_FORBIDDEN_NAME,
-	SAVED_VIEW_LOAD_FAILED_NAME,
-	SAVED_VIEW_TOAST_POSITION,
-} from './constants';
-import {
-	SavedViewCreatePermission,
-	SavedViewListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-
-import { useActiveSavedView } from './hooks/useActiveSavedView';
-import { useRestoreLastUsedView } from './hooks/useRestoreLastUsedView';
-import { useSaveNewView } from './hooks/useSaveNewView';
-import { useSavedViewActions } from './hooks/useSavedViewActions';
-import SaveChangesMenu from './SaveChangesMenu';
-import SavedViewsIconButton from './SavedViewsIconButton';
-import SaveViewModal from './SaveViewModal';
-import { SaveViewModalMode } from './types';
-
-import styles from './SavedViewsHeader.module.scss';
-
-function SavedViewsHeader({
-	source,
-	onOpenViews,
-	onCollapse,
-}: {
-	source: SavedviewtypesSourceDTO;
-	// Absent while the list is on screen.
-	onOpenViews?: () => void;
-	onCollapse?: () => void;
-}): JSX.Element {
-	const { view, isLoading, isError, isForbidden, hasUnsavedChanges } =
-		useActiveSavedView(source);
-	const { selectView, revertView, clearView, createView, updateView, isSaving } =
-		useSavedViewActions(source);
-	useRestoreLastUsedView({ source, selectView });
-
-	const [modalMode, setModalMode] = useState<SaveViewModalMode | null>(null);
-
-	const handleSave = useSaveNewView(createView);
-
-	const handleUpdate = useCallback(async (): Promise<void> => {
-		if (view && (await updateView(view))) {
-			toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
-		}
-	}, [view, updateView]);
-
-	const openSaveAsNew = useCallback((): void => setModalMode('saveAsNew'), []);
-	const closeModal = useCallback((): void => setModalMode(null), []);
-
-	const errorName = isForbidden
-		? SAVED_VIEW_FORBIDDEN_NAME
-		: SAVED_VIEW_LOAD_FAILED_NAME;
-	const name = isError ? errorName : (view?.spec.displayName ?? MY_VIEW_NAME);
-	const isDirty = !isError && !!view && hasUnsavedChanges;
-
-	return (
-		<div
-			className={cx(styles.header, {
-				[styles.isDirty]: isDirty,
-				[styles.isError]: isError,
-			})}
-			data-testid="saved-views-header"
-			data-source={source}
-		>
-			{isLoading ? (
-				<Skeleton.Input
-					active
-					size="small"
-					className={styles.skeleton}
-					testId="saved-views-loading"
-				/>
-			) : (
-				<TooltipSimple title={name}>
-					<span
-						className={cx(styles.name, {
-							[styles.isDirty]: isDirty,
-							[styles.isError]: isError,
-						})}
-						data-testid="saved-views-name"
-					>
-						{isDirty && <span className={styles.dot} />}
-						<span className={styles.nameText}>{name}</span>
-					</span>
-				</TooltipSimple>
-			)}
-
-			<div className={styles.actions}>
-				{!view && !isError && (
-					<SavedViewsIconButton
-						title="Create new view"
-						icon={<Plus size={14} />}
-						disabled={isLoading}
-						checks={[SavedViewCreatePermission]}
-						onClick={(): void => setModalMode('create')}
-						testId="saved-views-create"
-					/>
-				)}
-				{view && !isDirty && !isError && (
-					<SavedViewsIconButton
-						title="Clear view"
-						icon={<Undo2 size={14} />}
-						onClick={clearView}
-						testId="saved-views-clear"
-					/>
-				)}
-				{view && isDirty && (
-					<>
-						<SaveChangesMenu
-							viewId={view.id}
-							disabled={isSaving}
-							onSaveAsNew={openSaveAsNew}
-							onUpdate={(): void => {
-								void handleUpdate();
-							}}
-						/>
-						<SavedViewsIconButton
-							title="Discard changes"
-							icon={<X size={14} />}
-							color="warning"
-							disabled={isSaving}
-							onClick={(): void => revertView(view)}
-							testId="saved-views-discard"
-						/>
-					</>
-				)}
-				{!isDirty && onOpenViews && (
-					<SavedViewsIconButton
-						title="All views"
-						icon={<Menu size={14} />}
-						checks={[SavedViewListPermission]}
-						onClick={onOpenViews}
-						testId="saved-views-open"
-					/>
-				)}
-				{onCollapse && (
-					<SavedViewsIconButton
-						title="Collapse Filters"
-						icon={<ArrowUpToLine size={14} className={styles.collapseIcon} />}
-						onClick={onCollapse}
-						testId="saved-views-collapse"
-					/>
-				)}
-			</div>
-
-			{modalMode && (
-				<SaveViewModal
-					mode={modalMode}
-					isSaving={isSaving}
-					onClose={closeModal}
-					onSave={handleSave}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default SavedViewsHeader;

frontend/src/container/SavedViews/SavedViewsIconButton.tsx

@@ -1,51 +0,0 @@
-import { forwardRef } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-import { SavedViewsIconButtonProps } from './types';
-
-// forwardRef and rest props so a menu can use it as its trigger.
-const SavedViewsIconButton = forwardRef<
-	HTMLButtonElement,
-	SavedViewsIconButtonProps
->(function SavedViewsIconButton(
-	{
-		title,
-		icon,
-		testId,
-		color = 'secondary',
-		disabled,
-		checks,
-		onClick,
-		...triggerProps
-	},
-	ref,
-): JSX.Element {
-	const { deniedPermissions } = useAuthZ(checks ?? [], {
-		enabled: !!checks?.length,
-	});
-
-	const button = (
-		<Button
-			ref={ref}
-			variant="ghost"
-			color={color}
-			size="icon"
-			aria-label={title}
-			prefix={icon}
-			disabled={disabled}
-			onClick={onClick}
-			{...triggerProps}
-			data-testid={testId}
-		/>
-	);
-
-	if (checks && deniedPermissions.length > 0) {
-		return <AuthZTooltip checks={checks}>{button}</AuthZTooltip>;
-	}
-	return <TooltipSimple title={title}>{button}</TooltipSimple>;
-});
-
-export default SavedViewsIconButton;

frontend/src/container/SavedViews/SavedViewsList.module.scss

@@ -1,131 +0,0 @@
-.list {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	margin-bottom: var(--spacing-6);
-
-	&:first-child:not(:last-child) {
-		max-height: 40%;
-	}
-
-	&:last-child {
-		flex: 1;
-	}
-}
-
-.sectionList {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-}
-
-.sectionTitle {
-	padding: var(--spacing-4) var(--spacing-6);
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-small);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-18);
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
-}
-
-.row {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: var(--spacing-16);
-	padding-right: var(--spacing-4);
-	border-radius: var(--radius-2);
-	transition: background-color 0.2s ease-in-out;
-
-	&:hover {
-		background-color: var(--l2-background);
-	}
-
-	&.isActive {
-		background-color: var(--l3-background);
-
-		.rowName {
-			--button-variant-ghost-color: var(--l1-foreground);
-			--button-variant-ghost-hover-color: var(--l1-foreground);
-		}
-	}
-}
-
-.rowMenu {
-	display: flex;
-	width: 0;
-	overflow: hidden;
-	opacity: 0;
-	transition: opacity 0.2s ease-in-out;
-}
-
-.row:hover .rowMenu,
-.row:focus-within .rowMenu,
-.rowMenu:has([data-state='open']) {
-	width: auto;
-	opacity: 1;
-}
-
-.rowButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: var(--spacing-12);
-	height: var(--spacing-12);
-	padding: var(--spacing-1);
-}
-
-.rowName {
-	--button-height: 100%;
-	--button-padding: 0 var(--spacing-6);
-	--button-justify-content: flex-start;
-	--button-font-size: var(--periscope-font-size-base);
-	--button-variant-ghost-color: var(--l2-foreground);
-	--button-variant-ghost-hover-color: var(--l2-foreground);
-	--button-variant-ghost-hover-background-color: transparent;
-
-	flex: 1;
-	min-width: 0;
-}
-
-.rowNameText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.loading {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	padding: var(--spacing-4) var(--spacing-6);
-}
-
-.state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--spacing-4);
-	padding: var(--spacing-8) var(--spacing-6);
-	text-align: center;
-}
-
-.stateTitle {
-	color: var(--l1-foreground);
-	font-size: var(--periscope-font-size-base);
-	font-weight: var(--font-weight-medium);
-}
-
-.stateText {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/SavedViews/SavedViewsList.tsx

@@ -1,208 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Skeleton } from '@signozhq/ui/skeleton';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { SavedViewReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-import { SAVED_VIEWS_LIST_LOADING_ROWS } from './constants';
-import DeleteSavedViewDialog from './DeleteSavedViewDialog';
-import { useSavedViewActions } from './hooks/useSavedViewActions';
-import { useSavedViewHoverCard } from './hooks/useSavedViewHoverCard';
-import { useSavedViewRowActions } from './hooks/useSavedViewRowActions';
-import { useSaveNewView } from './hooks/useSaveNewView';
-import { useSavedViewsList } from './hooks/useSavedViewsList';
-import SavedViewHoverCard from './SavedViewHoverCard';
-import SavedViewsEmptyState from './SavedViewsEmptyState';
-import SavedViewsListSection from './SavedViewsListSection';
-import SaveViewModal from './SaveViewModal';
-import {
-	PendingSavedViewAction,
-	SavedViewRowActionKey,
-	SavedViewsListRowHoverProps,
-} from './types';
-
-import styles from './SavedViewsList.module.scss';
-
-function SavedViewsList({
-	source,
-	search,
-}: {
-	source: SavedviewtypesSourceDTO;
-	search: string;
-}): JSX.Element {
-	const { viewKey } = useGetSavedViewParams();
-	const { selectView, clearView, createView, isSaving } =
-		useSavedViewActions(source);
-	const saveNewView = useSaveNewView(createView);
-	const { createdByMe, createdByOthers, isLoading, isError, refetch } =
-		useSavedViewsList(source, search);
-	const { copyViewLink, renameView, deleteView, isRenaming, isDeleting } =
-		useSavedViewRowActions(source);
-	const [pendingAction, setPendingAction] =
-		useState<PendingSavedViewAction | null>(null);
-	const listRef = useRef<HTMLDivElement>(null);
-	const { deniedPermissions: deniedReadPermissions } = useAuthZ([
-		SavedViewReadPermission,
-	]);
-	const isReadDenied = deniedReadPermissions.length > 0;
-	const hoverCard = useSavedViewHoverCard();
-	const {
-		onRowEnter: onHoverCardRowEnter,
-		onRowLeave: onHoverCardRowLeave,
-		close: closeHoverCard,
-	} = hoverCard;
-
-	useEffect(() => {
-		closeHoverCard();
-	}, [search, closeHoverCard]);
-
-	const rowHover = useMemo<SavedViewsListRowHoverProps>(
-		() => ({
-			onRowEnter: (view, row): void => {
-				const listTop = listRef.current?.getBoundingClientRect().top ?? 0;
-				const rowRect = row.getBoundingClientRect();
-				onHoverCardRowEnter({
-					view,
-					anchorTop: rowRect.top - listTop,
-					anchorHeight: rowRect.height,
-				});
-			},
-			onRowLeave: onHoverCardRowLeave,
-			onMenuOpen: closeHoverCard,
-		}),
-		[onHoverCardRowEnter, onHoverCardRowLeave, closeHoverCard],
-	);
-
-	const handleAction = useCallback(
-		(view: SavedviewtypesSavedViewDTO, key: SavedViewRowActionKey): void => {
-			if (key === 'copyLink') {
-				copyViewLink(view);
-				return;
-			}
-			closeHoverCard();
-			setPendingAction({ key, view });
-		},
-		[copyViewLink, closeHoverCard],
-	);
-
-	const closePendingAction = useCallback((): void => setPendingAction(null), []);
-
-	const handleDelete = useCallback(async (): Promise<void> => {
-		if (!pendingAction || !(await deleteView(pendingAction.view))) {
-			return;
-		}
-		if (pendingAction.view.id === viewKey) {
-			clearView();
-		}
-		setPendingAction(null);
-	}, [pendingAction, deleteView, viewKey, clearView]);
-
-	if (isLoading) {
-		return (
-			<div className={styles.loading} data-testid="saved-views-list-loading">
-				{Array.from({ length: SAVED_VIEWS_LIST_LOADING_ROWS }, (_, index) => (
-					<Skeleton.Input key={index} active size="small" block />
-				))}
-			</div>
-		);
-	}
-
-	if (isError) {
-		return (
-			<div className={styles.state} data-testid="saved-views-list-error">
-				<Typography.Text className={styles.stateText}>
-					Could not load views
-				</Typography.Text>
-				<Button
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					onClick={refetch}
-					data-testid="saved-views-list-retry"
-				>
-					Retry
-				</Button>
-			</div>
-		);
-	}
-
-	if (createdByMe.length === 0 && createdByOthers.length === 0) {
-		return (
-			<SavedViewsEmptyState
-				isSearching={search.trim().length > 0}
-				isSaving={isSaving}
-				onSave={saveNewView}
-			/>
-		);
-	}
-
-	return (
-		<div
-			ref={listRef}
-			className={styles.list}
-			onScrollCapture={closeHoverCard}
-			data-testid="saved-views-list"
-		>
-			{createdByMe.length > 0 && (
-				<SavedViewsListSection
-					title="Created by me"
-					views={createdByMe}
-					activeViewId={viewKey}
-					onSelect={selectView}
-					onClear={clearView}
-					onAction={handleAction}
-					hover={rowHover}
-					isReadDenied={isReadDenied}
-					testId="saved-views-created-by-me"
-				/>
-			)}
-			{createdByOthers.length > 0 && (
-				<SavedViewsListSection
-					title="Created by others"
-					views={createdByOthers}
-					activeViewId={viewKey}
-					onSelect={selectView}
-					onClear={clearView}
-					onAction={handleAction}
-					hover={rowHover}
-					isReadDenied={isReadDenied}
-					testId="saved-views-created-by-others"
-				/>
-			)}
-			<SavedViewHoverCard
-				target={hoverCard.target}
-				onCardEnter={hoverCard.onCardEnter}
-				onCardLeave={hoverCard.onCardLeave}
-				onClose={closeHoverCard}
-			/>
-			{pendingAction?.key === 'editDetails' && (
-				<SaveViewModal
-					mode="edit"
-					initialName={pendingAction.view.spec.displayName}
-					isSaving={isRenaming}
-					onClose={closePendingAction}
-					onSave={(displayName): Promise<boolean> =>
-						renameView(pendingAction.view, displayName)
-					}
-				/>
-			)}
-			{pendingAction?.key === 'delete' && (
-				<DeleteSavedViewDialog
-					isDeleting={isDeleting}
-					onCancel={closePendingAction}
-					onConfirm={(): void => {
-						void handleDelete();
-					}}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default SavedViewsList;

frontend/src/container/SavedViews/SavedViewsListRow.tsx

@@ -1,79 +0,0 @@
-import cx from 'classnames';
-import { Undo2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SavedViewReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-
-import SavedViewsRowButton from './SavedViewsRowButton';
-import SavedViewsRowMenu from './SavedViewsRowMenu';
-import { SavedViewsListRowProps } from './types';
-
-import styles from './SavedViewsList.module.scss';
-
-function SavedViewsListRow({
-	view,
-	isActive,
-	onSelect,
-	onClear,
-	onAction,
-	hover,
-	isReadDenied,
-}: SavedViewsListRowProps): JSX.Element {
-	const name = view.spec.displayName;
-
-	const nameButton = (
-		<Button
-			variant="ghost"
-			color="secondary"
-			className={styles.rowName}
-			onClick={(): void => {
-				if (!isActive) {
-					onSelect(view);
-				}
-			}}
-			data-testid="saved-views-row-name"
-		>
-			<span className={styles.rowNameText}>{name}</span>
-		</Button>
-	);
-
-	return (
-		<div
-			className={cx(styles.row, { [styles.isActive]: isActive })}
-			data-testid="saved-views-row"
-			data-view-id={view.id}
-			onMouseEnter={(event): void => {
-				if (!isReadDenied) {
-					hover.onRowEnter(view, event.currentTarget);
-				}
-			}}
-			onMouseLeave={hover.onRowLeave}
-		>
-			{isReadDenied ? (
-				<AuthZTooltip checks={[SavedViewReadPermission]}>{nameButton}</AuthZTooltip>
-			) : (
-				nameButton
-			)}
-			{isActive && (
-				<SavedViewsRowButton
-					icon={<Undo2 size={14} />}
-					label="Clear view"
-					tooltip="Clear view"
-					onClick={onClear}
-					testId="saved-views-row-clear"
-				/>
-			)}
-			{!isReadDenied && (
-				<span className={styles.rowMenu}>
-					<SavedViewsRowMenu
-						viewId={view.id}
-						onAction={(key): void => onAction(view, key)}
-						onOpen={hover.onMenuOpen}
-					/>
-				</span>
-			)}
-		</div>
-	);
-}
-
-export default SavedViewsListRow;

frontend/src/container/SavedViews/SavedViewsListSection.tsx

@@ -1,45 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import SavedViewsListRow from './SavedViewsListRow';
-import { SavedViewsListSectionProps } from './types';
-
-import styles from './SavedViewsList.module.scss';
-
-function SavedViewsListSection({
-	title,
-	views,
-	activeViewId,
-	onSelect,
-	onClear,
-	onAction,
-	hover,
-	isReadDenied,
-	testId,
-}: SavedViewsListSectionProps): JSX.Element {
-	return (
-		<section className={styles.section} data-testid={testId}>
-			<Typography.Text className={styles.sectionTitle}>{title}</Typography.Text>
-			<div className={styles.sectionList}>
-				<OverlayScrollbar>
-					<div>
-						{views.map((view) => (
-							<SavedViewsListRow
-								key={view.id}
-								view={view}
-								isActive={view.id === activeViewId}
-								onSelect={onSelect}
-								onClear={onClear}
-								onAction={onAction}
-								hover={hover}
-								isReadDenied={isReadDenied}
-							/>
-						))}
-					</div>
-				</OverlayScrollbar>
-			</div>
-		</section>
-	);
-}
-
-export default SavedViewsListSection;

frontend/src/container/SavedViews/SavedViewsMenu.module.scss

@@ -1,5 +0,0 @@
-// A denied item stays disabled but keeps pointer events, so its reason shows on hover.
-.menu .deniedItem[data-disabled] {
-	pointer-events: auto;
-	cursor: not-allowed;
-}

frontend/src/container/SavedViews/SavedViewsPanel.module.scss

@@ -1,43 +0,0 @@
-.panel {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	color: var(--l1-foreground);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--spacing-2) var(--spacing-5);
-	border-bottom: 1px solid var(--l1-border);
-	flex-shrink: 0;
-}
-
-.search {
-	--input-height: var(--spacing-20);
-	--input-border-radius: 0;
-	--input-border-color: transparent;
-	--input-hover-border-color: transparent;
-	--input-focus-border-color: transparent;
-	--input-focus-outline-width: 0;
-	--input-background: var(--l1-background);
-	--input-hover-background: var(--l1-background);
-	--input-focus-background: var(--l1-background);
-
-	border-bottom: 1px solid var(--l1-border);
-	flex-shrink: 0;
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-	color: var(--l2-foreground);
-}
-
-.titleText {
-	color: inherit;
-	font-size: var(--font-size-sm);
-}

frontend/src/container/SavedViews/SavedViewsPanel.tsx

@@ -1,63 +0,0 @@
-import { useState } from 'react';
-import { TowerControl, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
-import { SavedViewListPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-
-import SavedViewsIconButton from './SavedViewsIconButton';
-import SavedViewsList from './SavedViewsList';
-
-import styles from './SavedViewsPanel.module.scss';
-
-function SavedViewsPanel({
-	source,
-	onClose,
-}: {
-	source: SavedviewtypesSourceDTO;
-	// Absent when the list is always on screen.
-	onClose?: () => void;
-}): JSX.Element {
-	const [search, setSearch] = useState('');
-
-	return (
-		<div
-			className={styles.panel}
-			data-testid="saved-views-panel"
-			data-source={source}
-		>
-			{onClose && (
-				<div className={styles.header} data-testid="saved-views-panel-header">
-					<div className={styles.title}>
-						<TowerControl size={16} />
-						<Typography.Text className={styles.titleText}>All views</Typography.Text>
-					</div>
-					<SavedViewsIconButton
-						title="Close"
-						icon={<X size={14} />}
-						onClick={onClose}
-						testId="saved-views-close"
-					/>
-				</div>
-			)}
-			<AuthZGuardContent checks={[SavedViewListPermission]}>
-				<>
-					<div className={styles.search}>
-						<Input
-							value={search}
-							onChange={(event): void => setSearch(event.target.value)}
-							placeholder="Search..."
-							aria-label="Search views"
-							testId="saved-views-search"
-						/>
-					</div>
-					<SavedViewsList source={source} search={search} />
-				</>
-			</AuthZGuardContent>
-		</div>
-	);
-}
-
-export default SavedViewsPanel;

frontend/src/container/SavedViews/SavedViewsRowButton.tsx

@@ -1,40 +0,0 @@
-import { forwardRef } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-import { SavedViewsRowButtonProps } from './types';
-
-import styles from './SavedViewsList.module.scss';
-
-// forwardRef and rest props so a menu can use it as its trigger.
-const SavedViewsRowButton = forwardRef<
-	HTMLButtonElement,
-	SavedViewsRowButtonProps
->(function SavedViewsRowButton(
-	{ icon, label, tooltip, testId, onClick, ...triggerProps },
-	ref,
-): JSX.Element {
-	const button = (
-		<Button
-			ref={ref}
-			variant="link"
-			color="secondary"
-			size="sm"
-			className={styles.rowButton}
-			aria-label={label}
-			onClick={onClick}
-			{...triggerProps}
-			data-testid={testId}
-		>
-			{icon}
-		</Button>
-	);
-
-	return tooltip ? (
-		<TooltipSimple title={tooltip}>{button}</TooltipSimple>
-	) : (
-		button
-	);
-});
-
-export default SavedViewsRowButton;

frontend/src/container/SavedViews/SavedViewsRowMenu.tsx

@@ -1,82 +0,0 @@
-import { useMemo } from 'react';
-import { Ellipsis } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-import { SAVED_VIEW_ROW_ACTIONS } from './constants';
-import SavedViewsRowButton from './SavedViewsRowButton';
-import { SavedViewsRowMenuProps } from './types';
-
-import styles from './SavedViewsMenu.module.scss';
-
-function SavedViewsRowMenu({
-	viewId,
-	onAction,
-	onOpen,
-}: SavedViewsRowMenuProps): JSX.Element {
-	const permissions = useMemo(
-		() =>
-			SAVED_VIEW_ROW_ACTIONS.flatMap(({ buildPermission }) =>
-				buildPermission ? [buildPermission(viewId)] : [],
-			),
-		[viewId],
-	);
-	const { deniedPermissions } = useAuthZ(permissions);
-
-	const items = useMemo<MenuItem[]>(
-		() =>
-			SAVED_VIEW_ROW_ACTIONS.flatMap(
-				({
-					key,
-					label,
-					icon: Icon,
-					danger,
-					hasDividerBefore,
-					buildPermission,
-				}): MenuItem[] => {
-					const permission = buildPermission?.(viewId);
-					const isDenied = !!permission && deniedPermissions.includes(permission);
-					return [
-						...(hasDividerBefore ? [{ type: 'divider' as const }] : []),
-						{
-							key,
-							label: permission ? (
-								<AuthZTooltip checks={[permission]}>
-									<span>{label}</span>
-								</AuthZTooltip>
-							) : (
-								label
-							),
-							icon: <Icon size={14} />,
-							danger,
-							disabled: isDenied,
-							className: isDenied ? styles.deniedItem : undefined,
-							onClick: (): void => onAction(key),
-						},
-					];
-				},
-			),
-		[viewId, deniedPermissions, onAction],
-	);
-
-	return (
-		<DropdownMenuSimple
-			menu={{ items }}
-			side="right"
-			align="start"
-			className={styles.menu}
-		>
-			<SavedViewsRowButton
-				icon={<Ellipsis size={14} />}
-				label="More options"
-				tooltip="More options"
-				testId="saved-views-row-menu"
-				onPointerDown={onOpen}
-				onKeyDown={onOpen}
-			/>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SavedViewsRowMenu;

frontend/src/container/SavedViews/__tests__/SavedViewHoverCard.test.tsx

@@ -1,263 +0,0 @@
-import { act, fireEvent, screen, within } from '@testing-library/react';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
-	SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS,
-} from '../constants';
-import SavedViewsPanel from '../SavedViewsPanel';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	explorerUrl,
-	makeView,
-	queryWith,
-	renderWithExplorerProviders,
-} from './savedViewsTestUtils';
-
-const mockCopy = jest.fn();
-
-// copy-to-clipboard falls back to window.prompt in jsdom.
-jest.mock('react-use', () => ({
-	...jest.requireActual('react-use'),
-	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopy],
-}));
-
-function twoQueries(): Query {
-	const base = queryWith(DataSource.TRACES, 'has_error = true');
-	const [first] = base.builder.queryData;
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				first,
-				{
-					...first,
-					queryName: 'B',
-					expression: 'B',
-					filter: { expression: 'duration_nano > 1000' },
-				},
-			],
-		},
-	};
-}
-
-function metricsQuery(): Query {
-	const base = initialQueriesMap[DataSource.METRICS];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression: '' },
-					aggregations: [
-						{
-							metricName: 'app.requests',
-							temporality: '',
-							timeAggregation: 'rate',
-							spaceAggregation: 'sum',
-						},
-					],
-				},
-			],
-		},
-	} as Query;
-}
-
-const errors = makeView({
-	id: 'view-1',
-	displayName: 'Errors',
-	updatedBy: 'editor@signoz.io',
-	updatedAt: '2026-09-28T12:00:00Z',
-});
-const slow = makeView({
-	id: 'view-2',
-	displayName: 'Slow spans',
-	expression: 'duration_nano > 1000',
-});
-const unfiltered = makeView({
-	id: 'view-3',
-	displayName: 'Everything',
-	expression: '',
-});
-const combined = makeView({
-	id: 'view-4',
-	displayName: 'Errors and slow',
-	query: twoQueries(),
-});
-const requestsMetric = makeView({
-	id: 'view-5',
-	displayName: 'Request rate',
-	source: SavedviewtypesSourceDTO.metrics,
-	dataSource: DataSource.METRICS,
-	query: metricsQuery(),
-	panelType: PANEL_TYPES.TIME_SERIES,
-});
-
-async function renderPanel(
-	source: SavedviewtypesSourceDTO = SavedviewtypesSourceDTO.traces,
-	dataSource: DataSource = DataSource.TRACES,
-): Promise<void> {
-	renderWithExplorerProviders(
-		<SavedViewsPanel source={source} onClose={jest.fn()} />,
-		explorerUrl(ROUTES.TRACES_EXPLORER, {}),
-		dataSource,
-	);
-	await screen.findByTestId('saved-views-list');
-	jest.useFakeTimers();
-}
-
-const row = (name: string): HTMLElement =>
-	screen
-		.getAllByTestId('saved-views-row')
-		.find((element) => element.textContent?.includes(name)) as HTMLElement;
-
-const card = (): HTMLElement | null =>
-	screen.queryByTestId('saved-view-hover-card');
-
-function advance(ms: number): void {
-	act(() => {
-		jest.advanceTimersByTime(ms);
-	});
-}
-
-function openCard(name: string): void {
-	fireEvent.mouseEnter(row(name));
-	advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
-}
-
-describe('SavedViewHoverCard', () => {
-	beforeEach(() => {
-		localStorage.clear();
-		mockCopy.mockClear();
-		mockSavedViewsApi([errors, slow, unfiltered, combined, requestsMetric]);
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	describe('opening and closing', () => {
-		it('opens for a row after the delay, not before', async () => {
-			await renderPanel();
-
-			fireEvent.mouseEnter(row('Errors'));
-			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS - 1);
-			expect(card()).toBeNull();
-
-			advance(1);
-			expect(card()).toHaveTextContent('Errors');
-		});
-
-		it('does not open when the pointer leaves before the delay', async () => {
-			await renderPanel();
-
-			fireEvent.mouseEnter(row('Errors'));
-			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS / 2);
-			fireEvent.mouseLeave(row('Errors'));
-			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
-
-			expect(card()).toBeNull();
-		});
-
-		it('stays open while the pointer moves into the card', async () => {
-			await renderPanel();
-			openCard('Errors');
-
-			fireEvent.mouseLeave(row('Errors'));
-			fireEvent.mouseEnter(card() as HTMLElement);
-			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS * 2);
-			expect(card()).toBeInTheDocument();
-
-			fireEvent.mouseLeave(card() as HTMLElement);
-			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS);
-			expect(card()).toBeNull();
-		});
-
-		it('closes on leaving the row and reopens for the next row after the delay', async () => {
-			await renderPanel();
-			openCard('Errors');
-
-			fireEvent.mouseLeave(row('Errors'));
-			fireEvent.mouseEnter(row('Slow spans'));
-			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS);
-			expect(card()).toBeNull();
-
-			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
-			expect(card()).toHaveTextContent('Slow spans');
-		});
-
-		it('closes when the row menu is pressed', async () => {
-			await renderPanel();
-			openCard('Errors');
-
-			fireEvent.pointerDown(
-				within(row('Errors')).getByTestId('saved-views-row-menu'),
-			);
-
-			expect(card()).toBeNull();
-		});
-	});
-
-	describe('content', () => {
-		it('shows the filter, the updater and the update time', async () => {
-			await renderPanel();
-			openCard('Errors');
-
-			const content = card() as HTMLElement;
-			expect(
-				within(content).getByTestId('saved-view-hover-card-query'),
-			).toHaveTextContent('has_error = true');
-			expect(content).toHaveTextContent('editor@signoz.io');
-			expect(content).toHaveTextContent('Sep 28, 2026');
-		});
-
-		it('copies the filter expression', async () => {
-			await renderPanel();
-			openCard('Errors');
-
-			fireEvent.click(screen.getByTestId('saved-view-hover-card-copy'));
-
-			expect(mockCopy).toHaveBeenCalledWith('has_error = true');
-		});
-
-		it('names each query when there are several, and copies them per line', async () => {
-			await renderPanel();
-			openCard('Errors and slow');
-
-			const query = screen.getByTestId('saved-view-hover-card-query');
-			expect(query).toHaveTextContent('A');
-			expect(query).toHaveTextContent('B');
-			fireEvent.click(screen.getByTestId('saved-view-hover-card-copy'));
-
-			expect(mockCopy).toHaveBeenCalledWith(
-				'A: has_error = true\nB: duration_nano > 1000',
-			);
-		});
-
-		it('says there are no filters, with nothing to copy', async () => {
-			await renderPanel();
-			openCard('Everything');
-
-			expect(screen.getByTestId('saved-view-hover-card-query')).toHaveTextContent(
-				'No filters',
-			);
-			expect(screen.queryByTestId('saved-view-hover-card-copy')).toBeNull();
-		});
-
-		it('shows the metric of a metrics query', async () => {
-			await renderPanel(SavedviewtypesSourceDTO.metrics, DataSource.METRICS);
-			openCard('Request rate');
-
-			const query = screen.getByTestId('saved-view-hover-card-query');
-			expect(query).toHaveTextContent('app.requests · rate · sum');
-			expect(query).not.toHaveTextContent('No filters');
-		});
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViews.authz.test.tsx

@@ -1,177 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import {
-	buildSavedViewDeletePermission,
-	buildSavedViewUpdatePermission,
-	SavedViewCreatePermission,
-	SavedViewListPermission,
-	SavedViewReadPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { setupAuthzDeny } from 'lib/authz/utils/authz-test-utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import SavedViewsPanel from '../SavedViewsPanel';
-import { API, mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	explorerUrl,
-	makeView,
-	queryWith,
-	renderWithExplorerProviders,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-
-function renderPanel(url = explorerUrl(PATH, {})): void {
-	renderWithExplorerProviders(
-		<SavedViewsPanel
-			source={SavedviewtypesSourceDTO.traces}
-			onClose={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-function renderHeader(
-	url: string,
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-async function openRowMenu(): Promise<void> {
-	const row = await screen.findByTestId('saved-views-row');
-	await userEvent.click(within(row).getByTestId('saved-views-row-menu'));
-}
-
-const menuItem = (name: string): Promise<HTMLElement> =>
-	screen.findByRole('menuitem', { name });
-
-describe('SavedViews - AuthZ', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('shows the denied callout instead of the list without list', async () => {
-		mockSavedViewsApi([errors]);
-		server.use(setupAuthzDeny(SavedViewListPermission));
-		renderPanel();
-
-		await expect(
-			screen.findByText(/not authorized/i),
-		).resolves.toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-list')).toBeNull();
-		expect(screen.queryByTestId('saved-views-search')).toBeNull();
-	});
-
-	it('lists views it cannot read but disables them, with no row menu', async () => {
-		mockSavedViewsApi([errors]);
-		server.use(setupAuthzDeny(SavedViewReadPermission));
-		renderPanel();
-
-		const row = await screen.findByTestId('saved-views-row');
-		await waitFor(() =>
-			expect(within(row).getByTestId('saved-views-row-name')).toBeDisabled(),
-		);
-		expect(within(row).queryByTestId('saved-views-row-menu')).toBeNull();
-	});
-
-	it('disables creating without create', async () => {
-		mockSavedViewsApi([]);
-		server.use(setupAuthzDeny(SavedViewCreatePermission));
-		renderPanel();
-		renderHeader(explorerUrl(PATH, {}));
-
-		await waitFor(() =>
-			expect(screen.getByTestId('saved-views-list-create')).toBeDisabled(),
-		);
-		await waitFor(() =>
-			expect(screen.getByTestId('saved-views-create')).toBeDisabled(),
-		);
-	});
-
-	it('disables edit details without update and delete without delete', async () => {
-		mockSavedViewsApi([errors]);
-		server.use(
-			setupAuthzDeny(
-				buildSavedViewUpdatePermission(errors.id),
-				buildSavedViewDeletePermission(errors.id),
-			),
-		);
-		renderPanel();
-
-		await openRowMenu();
-
-		await waitFor(
-			async () =>
-				await expect(menuItem('Edit details')).resolves.toHaveAttribute(
-					'data-disabled',
-				),
-		);
-		await expect(menuItem('Delete')).resolves.toHaveAttribute('data-disabled');
-		await expect(menuItem('Copy link')).resolves.not.toHaveAttribute(
-			'data-disabled',
-		);
-	});
-
-	it('disables updating the open view without update, keeping save as new', async () => {
-		mockSavedViewsApi([errors]);
-		server.use(setupAuthzDeny(buildSavedViewUpdatePermission(errors.id)));
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitFor(() =>
-			expect(screen.getByTestId('saved-views-name')).toHaveTextContent('Errors'),
-		);
-
-		history.push(
-			explorerUrl(PATH, {
-				query: queryWith(DataSource.TRACES, 'has_error = false'),
-				panelType: PANEL_TYPES.LIST,
-				viewKey: errors.id,
-			}),
-		);
-		await userEvent.click(await screen.findByTestId('saved-views-save-changes'));
-
-		await waitFor(
-			async () =>
-				await expect(menuItem('Update selected view')).resolves.toHaveAttribute(
-					'data-disabled',
-				),
-		);
-		await expect(menuItem('Save as new view')).resolves.not.toHaveAttribute(
-			'data-disabled',
-		);
-	});
-
-	it('says so when the open view cannot be read', async () => {
-		mockSavedViewsApi([errors]);
-		server.use(
-			rest.get(`${API}/:id`, (_req, res, ctx) =>
-				res(ctx.status(403), ctx.json({ status: 'error' })),
-			),
-		);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitFor(() =>
-			expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-				'No access to this view',
-			),
-		);
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.lastUsed.test.tsx

@@ -1,74 +0,0 @@
-import { act, screen, waitFor } from '@testing-library/react';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	explorerUrl,
-	makeView,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-} from './savedViewsTestUtils';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-
-function renderHeader(
-	url: string,
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-
-async function waitForView(name: string): Promise<void> {
-	await waitFor(() => expect(chip()).toHaveTextContent(name));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-}
-
-describe('SavedViewsHeader last used view', () => {
-	beforeEach(() => {
-		localStorage.clear();
-		localStorage.setItem(
-			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-		);
-	});
-
-	it('reopens on a bare explorer', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(explorerUrl(PATH, {}));
-
-		await waitForView('Errors');
-		expect(urlParam(history, QueryParams.viewKey)).toBe(
-			JSON.stringify(errors.id),
-		);
-	});
-
-	it('leaves a url with its own query alone', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(
-			explorerUrl(PATH, {
-				query: queryWith(DataSource.TRACES, 'service.name = "cart"'),
-			}),
-		);
-
-		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
-		expect(chip()).toHaveTextContent('My view');
-		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.loadFailure.test.tsx

@@ -1,65 +0,0 @@
-import { screen, waitFor } from '@testing-library/react';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import ROUTES from 'constants/routes';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	makeView,
-	renderWithExplorerProviders,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const baseView = makeView({ id: 'view-1', displayName: 'Errors' });
-const withColumns = {
-	...baseView,
-	spec: {
-		...baseView.spec,
-		selectedFields: [{ name: 'service.name' }, { name: 'duration_nano' }],
-	},
-};
-
-function renderHeader(url: string): void {
-	renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
-
-describe('SavedViewsHeader when loading fails', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('shows the load failed state when the view in the url does not load', async () => {
-		mockSavedViewsApi([]);
-		renderHeader(viewUrl(PATH, withColumns));
-
-		await waitFor(() =>
-			expect(chip()).toHaveTextContent('Saved view failed to load'),
-		);
-		expect(isDirty()).toBe(false);
-		expect(screen.queryByTestId('saved-views-create')).toBeNull();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-	});
-
-	it('keeps the view clean when only the views list fails', async () => {
-		mockSavedViewsApi([withColumns], { listFailures: Number.POSITIVE_INFINITY });
-		renderHeader(viewUrl(PATH, withColumns));
-
-		await waitFor(() =>
-			expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-		);
-		expect(chip()).toHaveTextContent('Errors');
-		expect(isDirty()).toBe(false);
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.save.test.tsx

@@ -1,211 +0,0 @@
-import { act, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import {
-	explorerUrl,
-	makeView,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-function renderHeader(
-	url: string,
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
-const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
-
-async function openDirtyView(
-	view: ReturnType<typeof makeView>,
-): Promise<ReturnType<typeof renderWithExplorerProviders>> {
-	const rendered = renderHeader(viewUrl(PATH, view));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-			view.spec.displayName,
-		),
-	);
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-	act(() => {
-		rendered.history.push(
-			explorerUrl(PATH, {
-				query: queryWith(DataSource.TRACES, 'has_error = false'),
-				panelType: PANEL_TYPES.LIST,
-				viewKey: view.id,
-			}),
-		);
-	});
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-discard')).toBeInTheDocument(),
-	);
-	return rendered;
-}
-
-async function chooseFromSaveMenu(item: string): Promise<void> {
-	await userEvent.click(screen.getByTestId('saved-views-save-changes'));
-	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
-}
-
-async function submitName(name: string): Promise<void> {
-	await userEvent.type(screen.getByTestId('save-view-name'), name);
-	await userEvent.click(screen.getByTestId('save-view-submit'));
-}
-
-describe('SavedViewsHeader saving', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	describe('create', () => {
-		it('saves the current state under a generated name and opens it', async () => {
-			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-
-			expect(within(modal()).getByText('Create new view')).toBeInTheDocument();
-			expect(screen.getByTestId('save-view-submit')).toBeDisabled();
-
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(requests.created).toHaveLength(1));
-			expect(requests.created[0]).toStrictEqual(
-				expect.objectContaining({
-					generateName: true,
-					source: SavedviewtypesSourceDTO.traces,
-					schemaVersion: 'v2',
-					spec: expect.objectContaining({
-						displayName: 'Slow checkout',
-						panelType: 'list',
-					}),
-				}),
-			);
-			await waitFor(() =>
-				expect(urlParam(history, QueryParams.viewKey)).toBe(
-					JSON.stringify('view-new'),
-				),
-			);
-			expect(toast.success).toHaveBeenCalledWith(
-				'View created',
-				expect.objectContaining({ position: 'top-right' }),
-			);
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			await waitFor(() =>
-				expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-					'Slow checkout',
-				),
-			);
-		});
-
-		it('keeps the modal open and reports a failed save', async () => {
-			const requests = mockSavedViewsApi([], { createStatus: 500 });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(toast.error).toHaveBeenCalled());
-			expect(requests.created).toHaveLength(1);
-			expect(isModalOpen()).toBe(true);
-			expect(screen.getByTestId('save-view-name')).toHaveValue('Slow checkout');
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-			expect(toast.success).not.toHaveBeenCalled();
-		});
-
-		it('cancel closes the modal without saving', async () => {
-			const requests = mockSavedViewsApi([]);
-			renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await userEvent.type(screen.getByTestId('save-view-name'), 'Draft');
-			await userEvent.click(screen.getByTestId('save-view-cancel'));
-
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			expect(requests.created).toHaveLength(0);
-		});
-	});
-
-	it('save as new creates another view from the changed state', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors], { createdId: 'view-copy' });
-		const { history } = await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Save as new view');
-
-		expect(within(modal()).getByText('Save as new view')).toBeInTheDocument();
-		await submitName('Errors copy');
-
-		await waitFor(() => expect(requests.created).toHaveLength(1));
-		const body = requests.created[0] as {
-			spec: {
-				displayName: string;
-				queries: { spec: { filter: { expression: string } } }[];
-			};
-		};
-		expect(body.spec.displayName).toBe('Errors copy');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		expect(requests.updated).toHaveLength(0);
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify('view-copy'),
-			),
-		);
-	});
-
-	it('update stores the changed state on the open view, keeping its name', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors]);
-		await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Update selected view');
-
-		await waitFor(() => expect(requests.updated).toHaveLength(1));
-		const { id, body } = requests.updated[0] as {
-			id: string;
-			body: {
-				source: string;
-				spec: {
-					displayName: string;
-					queries: { spec: { filter: { expression: string } } }[];
-				};
-			};
-		};
-		expect(id).toBe('view-1');
-		expect(body.source).toBe(SavedviewtypesSourceDTO.traces);
-		expect(body.spec.displayName).toBe('Errors');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		await waitFor(() =>
-			expect(toast.success).toHaveBeenCalledWith(
-				'View updated',
-				expect.objectContaining({ position: 'top-right' }),
-			),
-		);
-		expect(requests.created).toHaveLength(0);
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.test.tsx

@@ -1,283 +0,0 @@
-import { act, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { useActiveSavedView } from '../hooks/useActiveSavedView';
-import SavedViewsHeader from '../SavedViewsHeader';
-import {
-	explorerUrl,
-	makeView,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-const slow = makeView({
-	id: 'view-2',
-	displayName: 'Slow spans',
-	expression: 'duration_nano > 1000',
-	panelType: PANEL_TYPES.TIME_SERIES,
-});
-
-function renderHeader(
-	url: string,
-	onOpenViews: (() => void) | undefined = jest.fn(),
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<>
-			<SavedViewsHeader
-				source={SavedviewtypesSourceDTO.traces}
-				onOpenViews={onOpenViews}
-			/>
-			<RenderRecorder />
-		</>,
-		url,
-	);
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
-const saveChanges = (): HTMLElement =>
-	screen.getByTestId('saved-views-save-changes');
-
-async function waitForView(name: string): Promise<void> {
-	await waitFor(() => expect(chip()).toHaveTextContent(name));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-}
-
-// Each render's answer from the hook the header reads, so a state that lasts a
-// single render is seen too.
-interface RenderRecord {
-	viewId?: string;
-	dirty: boolean;
-	// The staged query had not caught up with the url yet.
-	isStaging: boolean;
-}
-let renders: RenderRecord[] = [];
-function RenderRecorder(): null {
-	const { view, hasUnsavedChanges } = useActiveSavedView(
-		SavedviewtypesSourceDTO.traces,
-	);
-	const { stagedQuery } = useQueryBuilder();
-	const compositeQuery = useGetCompositeQueryParam();
-	renders.push({
-		viewId: view?.id,
-		dirty: hasUnsavedChanges,
-		isStaging: stagedQuery?.id !== compositeQuery?.id,
-	});
-	return null;
-}
-
-async function recordRenders(change: () => void): Promise<RenderRecord[]> {
-	renders = [];
-	act(change);
-	await waitFor(() =>
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
-	);
-	await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
-	return renders;
-}
-
-describe('SavedViewsHeader', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('shows My view with create and all views when no view is open', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(explorerUrl(PATH, {}));
-
-		expect(chip()).toHaveTextContent('My view');
-		expect(screen.getByTestId('saved-views-create')).toBeInTheDocument();
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-save-changes')).toBeNull();
-		expect(screen.queryByTestId('saved-views-discard')).toBeNull();
-	});
-
-	it('shows a skeleton while the view in the url loads', async () => {
-		mockSavedViewsApi([errors], { getDelay: 150 });
-		renderHeader(viewUrl(PATH, errors));
-
-		expect(screen.getByTestId('saved-views-loading')).toBeInTheDocument();
-		await waitForView('Errors');
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull();
-	});
-
-	it('shows the open view clean, with clear and all views', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitForView('Errors');
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-create')).toBeNull();
-		expect(isDirty()).toBe(false);
-	});
-
-	it('marks the view dirty once the query changes, swapping in save and discard', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = false'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: errors.id,
-				}),
-			);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-		expect(saveChanges()).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-
-	it('marks the view dirty when only the tab changes', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			const params = new URLSearchParams(history.location.search);
-			params.set(QueryParams.panelTypes, JSON.stringify(PANEL_TYPES.TABLE));
-			history.push(`${PATH}?${params.toString()}`);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-	});
-
-	it('discard puts the saved query and tab back', async () => {
-		mockSavedViewsApi([slow]);
-		const { history } = renderHeader(viewUrl(PATH, slow));
-		await waitForView('Slow spans');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = true'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: slow.id,
-				}),
-			);
-		});
-		await waitFor(() => expect(isDirty()).toBe(true));
-
-		await userEvent.click(screen.getByTestId('saved-views-discard'));
-
-		await waitFor(() => expect(isDirty()).toBe(false));
-		expect(urlParam(history, QueryParams.panelTypes)).toBe(
-			JSON.stringify(PANEL_TYPES.TIME_SERIES),
-		);
-		expect(urlParam(history, QueryParams.viewKey)).toBe(JSON.stringify(slow.id));
-		expect(urlParam(history, QueryParams.viewName)).toBeNull();
-		const query = JSON.parse(
-			decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
-		);
-		expect(query.builder.queryData[0].filter.expression).toBe(
-			'duration_nano > 1000',
-		);
-	});
-
-	it('clear drops the view from the url but keeps the time range', async () => {
-		localStorage.setItem(
-			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-		);
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors, '1h'));
-		await waitForView('Errors');
-
-		await userEvent.click(screen.getByTestId('saved-views-clear'));
-
-		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
-		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-		expect(urlParam(history, QueryParams.panelTypes)).toBeNull();
-		expect(urlParam(history, QueryParams.relativeTime)).toBe('1h');
-		expect(
-			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}'),
-		).toStrictEqual({});
-	});
-
-	describe('unsaved changes indicator', () => {
-		it('never flashes while switching between views already loaded', async () => {
-			mockSavedViewsApi([errors, slow]);
-			const { history } = renderHeader(viewUrl(PATH, slow));
-			await waitForView('Slow spans');
-			act(() => history.push(viewUrl(PATH, errors)));
-			await waitForView('Errors');
-
-			const states = await recordRenders(() => history.push(viewUrl(PATH, slow)));
-
-			expect(chip()).toHaveTextContent('Slow spans');
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => render.dirty)).toStrictEqual([]);
-		});
-
-		it('holds while the query keeps changing on a dirty view', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(viewUrl(PATH, errors));
-			await waitForView('Errors');
-			act(() => {
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'has_error = false'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				);
-			});
-			await waitFor(() => expect(isDirty()).toBe(true));
-
-			const states = await recordRenders(() =>
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'duration_nano > 5'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				),
-			);
-
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => !render.dirty)).toStrictEqual([]);
-		});
-	});
-
-	it('on metrics compares no columns and has no all views button', async () => {
-		const cpu = makeView({
-			id: 'view-3',
-			displayName: 'CPU',
-			source: SavedviewtypesSourceDTO.metrics,
-			dataSource: DataSource.METRICS,
-			expression: '',
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-		mockSavedViewsApi([cpu]);
-		renderWithExplorerProviders(
-			<SavedViewsHeader source={SavedviewtypesSourceDTO.metrics} />,
-			viewUrl(ROUTES.METRICS_EXPLORER_EXPLORER, cpu),
-			DataSource.METRICS,
-		);
-
-		await waitForView('CPU');
-		expect(isDirty()).toBe(false);
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.list.test.tsx

@@ -1,192 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-
-import SavedViewsPanel from '../SavedViewsPanel';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	explorerUrl,
-	makeView,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const mine = makeView({ id: 'view-1', displayName: 'Errors' });
-const alsoMine = makeView({ id: 'view-2', displayName: 'Slow spans' });
-const theirs = makeView({
-	id: 'view-3',
-	displayName: 'Checkout errors',
-	createdBy: 'someone@signoz.io',
-});
-
-function renderPanel(
-	url = explorerUrl(PATH, {}),
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsPanel
-			source={SavedviewtypesSourceDTO.traces}
-			onClose={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const rowNames = (sectionTestId: string): string[] =>
-	within(screen.getByTestId(sectionTestId))
-		.getAllByTestId('saved-views-row-name')
-		.map((row) => row.textContent ?? '');
-
-const row = (name: string): HTMLElement =>
-	screen
-		.getAllByTestId('saved-views-row')
-		.find((element) => element.textContent?.includes(name)) as HTMLElement;
-
-describe('SavedViewsPanel list', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('splits the views into created by me and created by others', async () => {
-		mockSavedViewsApi([mine, alsoMine, theirs]);
-		renderPanel();
-
-		await screen.findByTestId('saved-views-list');
-		expect(rowNames('saved-views-created-by-me')).toStrictEqual([
-			'Errors',
-			'Slow spans',
-		]);
-		expect(rowNames('saved-views-created-by-others')).toStrictEqual([
-			'Checkout errors',
-		]);
-	});
-
-	it('hides a section with no views', async () => {
-		mockSavedViewsApi([mine]);
-		renderPanel();
-
-		await screen.findByTestId('saved-views-created-by-me');
-		expect(screen.queryByTestId('saved-views-created-by-others')).toBeNull();
-	});
-
-	it('opens a view from its row', async () => {
-		mockSavedViewsApi([mine, alsoMine]);
-		const { history } = renderPanel();
-
-		await screen.findByTestId('saved-views-list');
-		await userEvent.click(
-			within(row('Slow spans')).getByTestId('saved-views-row-name'),
-		);
-
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify(alsoMine.id),
-			),
-		);
-	});
-
-	it('marks the open view and clears it from its row', async () => {
-		mockSavedViewsApi([mine, alsoMine]);
-		const { history } = renderPanel(viewUrl(PATH, mine));
-
-		await screen.findByTestId('saved-views-list');
-		const activeRow = row('Errors');
-		expect(within(activeRow).getByTestId('saved-views-row-clear')).toBeVisible();
-		expect(
-			within(row('Slow spans')).queryByTestId('saved-views-row-clear'),
-		).toBeNull();
-
-		await userEvent.click(within(activeRow).getByTestId('saved-views-row-clear'));
-
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull(),
-		);
-	});
-
-	it('leaves the url alone when the open view is clicked again', async () => {
-		mockSavedViewsApi([mine]);
-		const { history } = renderPanel(viewUrl(PATH, mine));
-		await screen.findByTestId('saved-views-list');
-		const before = history.location.search;
-
-		await userEvent.click(
-			within(row('Errors')).getByTestId('saved-views-row-name'),
-		);
-
-		expect(history.location.search).toBe(before);
-	});
-
-	describe('search', () => {
-		it('filters both sections by name, ignoring case', async () => {
-			mockSavedViewsApi([mine, alsoMine, theirs]);
-			renderPanel();
-			await screen.findByTestId('saved-views-list');
-
-			await userEvent.type(screen.getByTestId('saved-views-search'), 'ERRORS');
-
-			expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
-			expect(rowNames('saved-views-created-by-others')).toStrictEqual([
-				'Checkout errors',
-			]);
-		});
-
-		it('says so when nothing matches, and recovers when cleared', async () => {
-			mockSavedViewsApi([mine]);
-			renderPanel();
-			await screen.findByTestId('saved-views-list');
-			const search = screen.getByTestId('saved-views-search');
-
-			await userEvent.type(search, 'nothing like this');
-			expect(
-				screen.getByTestId('saved-views-list-no-results'),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-list-create')).toBeNull();
-
-			await userEvent.clear(search);
-			expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
-		});
-	});
-
-	it('offers to create a view when there are none, and opens it', async () => {
-		const requests = mockSavedViewsApi([], { createdId: 'view-new' });
-		const { history } = renderPanel();
-
-		const create = await screen.findByTestId('saved-views-list-create');
-		await waitFor(() => expect(create).toBeEnabled());
-		await userEvent.click(create);
-		await userEvent.type(screen.getByTestId('save-view-name'), 'First view');
-		await userEvent.click(screen.getByTestId('save-view-submit'));
-
-		await waitFor(() => expect(requests.created).toHaveLength(1));
-		expect(toast.success).toHaveBeenCalledWith('View created', expect.anything());
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify('view-new'),
-			),
-		);
-		await expect(
-			screen.findByTestId('saved-views-created-by-me'),
-		).resolves.toHaveTextContent('First view');
-	});
-
-	it('shows the list error and loads the list on retry', async () => {
-		mockSavedViewsApi([mine], { listFailures: 1 });
-		renderPanel();
-
-		await userEvent.click(await screen.findByTestId('saved-views-list-retry'));
-
-		await expect(
-			screen.findByTestId('saved-views-created-by-me'),
-		).resolves.toHaveTextContent('Errors');
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.rowMenu.test.tsx

@@ -1,195 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import SavedViewsPanel from '../SavedViewsPanel';
-import { mockSavedViewsApi } from './savedViewsApiMock';
-import {
-	explorerUrl,
-	makeView,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-const mockCopy = jest.fn();
-
-// copy-to-clipboard falls back to window.prompt in jsdom.
-jest.mock('react-use', () => ({
-	...jest.requireActual('react-use'),
-	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopy],
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-const slow = makeView({
-	id: 'view-2',
-	displayName: 'Slow spans',
-	expression: 'duration_nano > 1000',
-});
-
-function renderPanelWithHeader(
-	url = explorerUrl(PATH, {}),
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<>
-			<SavedViewsHeader source={SavedviewtypesSourceDTO.traces} />
-			<SavedViewsPanel
-				source={SavedviewtypesSourceDTO.traces}
-				onClose={jest.fn()}
-			/>
-		</>,
-		url,
-	);
-}
-
-const row = (name: string): HTMLElement =>
-	screen
-		.getAllByTestId('saved-views-row')
-		.find((element) => element.textContent?.includes(name)) as HTMLElement;
-
-async function chooseFromRowMenu(
-	viewName: string,
-	item: string,
-): Promise<void> {
-	await screen.findByTestId('saved-views-list');
-	await userEvent.click(
-		within(row(viewName)).getByTestId('saved-views-row-menu'),
-	);
-	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-
-describe('SavedViewsPanel row menu', () => {
-	beforeEach(() => {
-		localStorage.clear();
-		mockCopy.mockClear();
-		jest.mocked(toast.success).mockClear();
-	});
-
-	it('offers copy link, edit details and delete', async () => {
-		mockSavedViewsApi([errors]);
-		renderPanelWithHeader();
-		await screen.findByTestId('saved-views-list');
-
-		await userEvent.click(
-			within(row('Errors')).getByTestId('saved-views-row-menu'),
-		);
-
-		const items = await screen.findAllByRole('menuitem');
-		expect(items.map((item) => item.textContent)).toStrictEqual([
-			'Copy link',
-			'Edit details',
-			'Delete',
-		]);
-	});
-
-	it('copies a link that opens the view with its query and tab', async () => {
-		mockSavedViewsApi([errors, slow]);
-		renderPanelWithHeader();
-
-		await chooseFromRowMenu('Slow spans', 'Copy link');
-
-		expect(mockCopy).toHaveBeenCalledTimes(1);
-		const link = new URL(mockCopy.mock.calls[0][0]);
-		expect(link.pathname).toBe(PATH);
-		expect(link.searchParams.get(QueryParams.viewKey)).toBe(
-			JSON.stringify(slow.id),
-		);
-		expect(link.searchParams.get(QueryParams.panelTypes)).toBe(
-			JSON.stringify(slow.spec.panelType),
-		);
-		expect(
-			decodeURIComponent(link.searchParams.get(QueryParams.compositeQuery) ?? ''),
-		).toContain('duration_nano > 1000');
-		expect(toast.success).toHaveBeenCalledWith('Link copied', expect.anything());
-	});
-
-	it('renames a view without touching its query', async () => {
-		const requests = mockSavedViewsApi([errors, slow]);
-		renderPanelWithHeader();
-
-		await chooseFromRowMenu('Slow spans', 'Edit details');
-		const name = screen.getByTestId('save-view-name');
-		expect(name).toHaveValue('Slow spans');
-		await userEvent.clear(name);
-		await userEvent.type(name, 'Slow checkout spans');
-		await userEvent.click(screen.getByTestId('save-view-submit'));
-
-		await waitFor(() => expect(requests.updated).toHaveLength(1));
-		const [update] = requests.updated;
-		expect(update.id).toBe(slow.id);
-		expect(update.body).toMatchObject({
-			spec: { ...slow.spec, displayName: 'Slow checkout spans' },
-		});
-		expect(toast.success).toHaveBeenCalledWith('View updated', expect.anything());
-		await waitFor(() => expect(row('Slow checkout spans')).toBeInTheDocument());
-	});
-
-	it('shows the new name in the header when the open view is renamed', async () => {
-		mockSavedViewsApi([errors]);
-		renderPanelWithHeader(viewUrl(PATH, errors));
-		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
-
-		await chooseFromRowMenu('Errors', 'Edit details');
-		const name = screen.getByTestId('save-view-name');
-		await userEvent.clear(name);
-		await userEvent.type(name, 'All errors');
-		await userEvent.click(screen.getByTestId('save-view-submit'));
-
-		await waitFor(() => expect(chip()).toHaveTextContent('All errors'));
-	});
-
-	it('asks before deleting and keeps the view on cancel', async () => {
-		const requests = mockSavedViewsApi([errors, slow]);
-		renderPanelWithHeader();
-
-		await chooseFromRowMenu('Slow spans', 'Delete');
-
-		expect(screen.getByText('Delete this view')).toBeInTheDocument();
-		expect(
-			screen.getByText('Deleting this view is irreversible and cannot be undone.'),
-		).toBeInTheDocument();
-		await userEvent.click(screen.getByTestId('delete-saved-view-cancel'));
-
-		expect(requests.deleted).toHaveLength(0);
-		expect(row('Slow spans')).toBeInTheDocument();
-	});
-
-	it('deletes a view on confirm', async () => {
-		const requests = mockSavedViewsApi([errors, slow]);
-		renderPanelWithHeader();
-
-		await chooseFromRowMenu('Slow spans', 'Delete');
-		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
-
-		await waitFor(() => expect(requests.deleted).toStrictEqual([slow.id]));
-		expect(toast.success).toHaveBeenCalledWith('View deleted', expect.anything());
-		await waitFor(() => expect(row('Slow spans')).toBeUndefined());
-	});
-
-	it('clears the open view when it is deleted', async () => {
-		mockSavedViewsApi([errors, slow]);
-		const { history } = renderPanelWithHeader(viewUrl(PATH, errors));
-		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
-
-		await chooseFromRowMenu('Errors', 'Delete');
-		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
-
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull(),
-		);
-		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
-	});
-});

frontend/src/container/SavedViews/__tests__/savedViewsApiMock.ts

@@ -1,102 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-
-export const API = 'http://localhost/api/v2/saved_views';
-
-export const TEST_USER_EMAIL = 'test@signoz.io';
-
-export interface Requests {
-	created: unknown[];
-	updated: { id: string; body: unknown }[];
-	deleted: string[];
-}
-
-// Mutates `views` on create, update and delete, so a refetch sees the change.
-export function mockSavedViewsApi(
-	views: SavedviewtypesSavedViewDTO[],
-	{
-		createStatus = 201,
-		createdId = 'view-new',
-		getDelay = 0,
-		listFailures = 0,
-	}: {
-		createStatus?: number;
-		createdId?: string;
-		getDelay?: number;
-		listFailures?: number;
-	} = {},
-): Requests {
-	const requests: Requests = { created: [], updated: [], deleted: [] };
-	let failedLists = 0;
-	server.use(
-		rest.get(API, (req, res, ctx) => {
-			if (failedLists < listFailures) {
-				failedLists += 1;
-				return res(ctx.status(500), ctx.json({ status: 'error' }));
-			}
-			const source = req.url.searchParams.get('source');
-			return res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: views.filter((view) => !source || view.source === source),
-				}),
-			);
-		}),
-		rest.get(`${API}/:id`, (req, res, ctx) => {
-			const view = views.find((v) => v.id === req.params.id);
-			if (!view) {
-				return res(ctx.status(404), ctx.json({ status: 'error' }));
-			}
-			return res(
-				ctx.delay(getDelay),
-				ctx.status(200),
-				ctx.json({ status: 'success', data: view }),
-			);
-		}),
-		rest.post(API, async (req, res, ctx) => {
-			const body = await req.json();
-			requests.created.push(body);
-			if (createStatus >= 400) {
-				return res(
-					ctx.status(createStatus),
-					ctx.json({
-						status: 'error',
-						error: { code: 'internal', message: 'boom' },
-					}),
-				);
-			}
-			views.push({
-				...body,
-				id: createdId,
-				createdBy: TEST_USER_EMAIL,
-				updatedBy: TEST_USER_EMAIL,
-			} as SavedviewtypesSavedViewDTO);
-			return res(
-				ctx.status(createStatus),
-				ctx.json({ status: 'success', data: { id: createdId } }),
-			);
-		}),
-		rest.put(`${API}/:id`, async (req, res, ctx) => {
-			const body = await req.json();
-			const id = String(req.params.id);
-			requests.updated.push({ id, body });
-			const index = views.findIndex((v) => v.id === id);
-			if (index >= 0) {
-				views[index] = { ...views[index], spec: body.spec };
-			}
-			return res(ctx.status(204));
-		}),
-		rest.delete(`${API}/:id`, (req, res, ctx) => {
-			const id = String(req.params.id);
-			requests.deleted.push(id);
-			const index = views.findIndex((v) => v.id === id);
-			if (index >= 0) {
-				views.splice(index, 1);
-			}
-			return res(ctx.status(204));
-		}),
-	);
-	return requests;
-}

frontend/src/container/SavedViews/__tests__/savedViewsTestUtils.tsx

@@ -1,256 +0,0 @@
-import { ReactElement, useEffect, useMemo } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
-import { render, RenderResult } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { NuqsAdapter } from 'nuqs/adapters/react';
-import { AppContext } from 'providers/App/App';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import TimezoneProvider from 'providers/Timezone';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import store from 'store';
-import { getAppContextMock } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { __setSearchParamsGetterForTest } from 'utils/getUnstableCurrentSearchParams';
-
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-import { TEST_USER_EMAIL } from './savedViewsApiMock';
-
-// The server stores queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		return Object.fromEntries(
-			Object.entries(value)
-				.map(([key, v]) => [key, asStoredByServer(v)] as const)
-				.filter(([, v]) => v !== undefined),
-		);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-export function queryWith(dataSource: DataSource, expression: string): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					aggregations: [{ expression: 'count()' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-export function makeView({
-	id,
-	displayName,
-	source = SavedviewtypesSourceDTO.traces,
-	dataSource = DataSource.TRACES,
-	expression = 'has_error = true',
-	query = queryWith(dataSource, expression),
-	panelType = PANEL_TYPES.LIST,
-	createdBy = TEST_USER_EMAIL,
-	updatedBy = createdBy,
-	updatedAt,
-}: {
-	id: string;
-	displayName: string;
-	source?: SavedviewtypesSourceDTO;
-	dataSource?: DataSource;
-	expression?: string;
-	query?: Query;
-	panelType?: PANEL_TYPES;
-	createdBy?: string;
-	updatedBy?: string;
-	updatedAt?: string;
-}): SavedviewtypesSavedViewDTO {
-	const spec = toSavedViewSpec({
-		query,
-		panelType,
-		displayName,
-	});
-	return {
-		id,
-		name: `${displayName.toLowerCase()}-abc`,
-		source,
-		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
-		createdBy,
-		updatedBy,
-		updatedAt,
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// Params written the way the query builder redirect writes them.
-export function explorerUrl(
-	path: string,
-	{
-		query,
-		panelType,
-		viewKey,
-		relativeTime = '15m',
-	}: {
-		query?: Query;
-		panelType?: PANEL_TYPES;
-		viewKey?: string;
-		relativeTime?: string;
-	},
-): string {
-	const params = new URLSearchParams();
-	if (query) {
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify({ ...query, id: `url-${Math.random()}` })),
-		);
-	}
-	if (panelType) {
-		params.set(QueryParams.panelTypes, JSON.stringify(panelType));
-	}
-	if (viewKey) {
-		params.set(QueryParams.viewKey, JSON.stringify(viewKey));
-	}
-	params.set(QueryParams.relativeTime, relativeTime);
-	return `${path}?${params.toString()}`;
-}
-
-export function viewUrl(
-	path: string,
-	view: SavedviewtypesSavedViewDTO,
-	relativeTime?: string,
-): string {
-	return explorerUrl(path, {
-		query: getSavedViewQuery(view),
-		panelType: view.spec.panelType as unknown as PANEL_TYPES,
-		viewKey: view.id,
-		relativeTime,
-	});
-}
-
-const mockStore = configureStore([thunk]);
-
-// What the explorer page does around the header: writes its default query to a
-// bare url, and sets the provider's tab from the url (the provider alone seeds
-// it from the raw, still JSON-quoted param).
-function ExplorerShell({ dataSource }: { dataSource: DataSource }): null {
-	const panelType = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-	const { handleSetConfig, updateAllQueriesOperators } = useQueryBuilder();
-	const defaultQuery = useMemo(
-		() =>
-			updateAllQueriesOperators(
-				initialQueriesMap[dataSource],
-				PANEL_TYPES.LIST,
-				dataSource,
-			),
-		[updateAllQueriesOperators, dataSource],
-	);
-	useShareBuilderUrl({ defaultValue: defaultQuery });
-	useEffect(() => {
-		handleSetConfig(panelType, dataSource);
-	}, [panelType, dataSource, handleSetConfig]);
-	return null;
-}
-
-export function renderWithExplorerProviders(
-	ui: ReactElement,
-	initialUrl: string,
-	dataSource: DataSource = DataSource.TRACES,
-): RenderResult & { history: MemoryHistory } {
-	const history = createMemoryHistory({ initialEntries: [initialUrl] });
-	// Parts of the explorer read window.location directly, so it follows the
-	// router's history.
-	const syncWindowLocation = (): void =>
-		window.history.replaceState(
-			null,
-			'',
-			`${history.location.pathname}${history.location.search}`,
-		);
-	syncWindowLocation();
-	history.listen(syncWindowLocation);
-	__setSearchParamsGetterForTest(
-		() => new URLSearchParams(history.location.search),
-	);
-	safeNavigateMock.mockImplementation((to) => {
-		history.push(
-			typeof to === 'string'
-				? to
-				: `${to.pathname ?? history.location.pathname}${to.search ?? ''}`,
-		);
-	});
-
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: false },
-			mutations: { retry: false },
-		},
-	});
-
-	const defaultAppContext = getAppContextMock('ADMIN');
-	const appContext = {
-		...defaultAppContext,
-		user: { ...defaultAppContext.user, email: TEST_USER_EMAIL },
-	};
-
-	const result = render(
-		<Router history={history}>
-			<CompatRouter>
-				<NuqsAdapter>
-					<QueryClientProvider client={queryClient}>
-						<Provider store={mockStore(store.getState())}>
-							<AppContext.Provider value={appContext}>
-								<TimezoneProvider>
-									<TooltipProvider>
-										<PreferenceContextProvider>
-											<QueryBuilderProvider>
-												<ExplorerShell dataSource={dataSource} />
-												{ui}
-											</QueryBuilderProvider>
-										</PreferenceContextProvider>
-									</TooltipProvider>
-								</TimezoneProvider>
-							</AppContext.Provider>
-						</Provider>
-					</QueryClientProvider>
-				</NuqsAdapter>
-			</CompatRouter>
-		</Router>,
-	);
-	return { ...result, history };
-}
-
-export function urlParam(history: MemoryHistory, key: string): string | null {
-	return new URLSearchParams(history.location.search).get(key);
-}

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

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getSavedViewQuery } from '../getSavedViewQuery';
+import { findSavedView, getSavedViewQuery, toSavedViewSource } from '../utils';
 
 jest.mock('uuid', () => ({
 	v4: (): string => 'test-id',
@@ -91,3 +91,36 @@ describe('getSavedViewQuery', () => {
 		expect(query).not.toHaveProperty('panelType', PANEL_TYPES.TIME_SERIES);
 	});
 });
+
+describe('toSavedViewSource', () => {
+	it('maps every explorer source page to the v2 source', () => {
+		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
+		expect(toSavedViewSource(DataSource.TRACES)).toBe(
+			SavedviewtypesSourceDTO.traces,
+		);
+		expect(toSavedViewSource(DataSource.METRICS)).toBe(
+			SavedviewtypesSourceDTO.metrics,
+		);
+		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
+	});
+});
+
+describe('findSavedView', () => {
+	const views = [
+		{ ...makeView(), id: 'a' },
+		{ ...makeView(), id: 'b' },
+	];
+
+	it('returns the view with the matching id', () => {
+		expect(findSavedView(views, 'b')?.id).toBe('b');
+	});
+
+	it('returns undefined when the id is not in the list', () => {
+		expect(findSavedView(views, 'c')).toBeUndefined();
+	});
+
+	it('returns undefined for a null or not yet loaded list', () => {
+		expect(findSavedView(null, 'a')).toBeUndefined();
+		expect(findSavedView(undefined, 'a')).toBeUndefined();
+	});
+});

frontend/src/container/SavedViews/constants.ts

@@ -1,72 +0,0 @@
-import { Link, PenLine, Trash2 } from '@signozhq/icons';
-import {
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import {
-	buildSavedViewDeletePermission,
-	buildSavedViewUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SavedViewRowActionConfig, SaveViewModalMode } from './types';
-
-export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
-
-// Only the logs and traces explorers have columns and formatting to save.
-export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
-	Record<SavedviewtypesSourceDTO, DataSource>
-> = {
-	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
-	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
-};
-
-// What selecting a view writes to the url, so clearing it removes exactly these.
-export const SAVED_VIEW_URL_PARAMS = [
-	QueryParams.viewKey,
-	QueryParams.viewName,
-	QueryParams.compositeQuery,
-	QueryParams.panelTypes,
-];
-
-export const MY_VIEW_NAME = 'My view';
-
-export const SAVED_VIEW_LOAD_FAILED_NAME = 'Saved view failed to load';
-
-export const SAVED_VIEW_FORBIDDEN_NAME = 'No access to this view';
-
-export const SAVED_VIEWS_LIST_LOADING_ROWS = 4;
-
-export const SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS = 1000;
-
-// Long enough for the pointer to cross from the row into the card.
-export const SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS = 150;
-
-export const SAVED_VIEW_UPDATED_AT_FORMAT = 'HH:mm:ss — MMM D, YYYY';
-
-export const SAVE_VIEW_MODAL_TITLE: Record<SaveViewModalMode, string> = {
-	create: 'Create new view',
-	saveAsNew: 'Save as new view',
-	edit: 'Edit view details',
-};
-
-export const SAVED_VIEW_ROW_ACTIONS: SavedViewRowActionConfig[] = [
-	{ key: 'copyLink', label: 'Copy link', icon: Link },
-	{
-		key: 'editDetails',
-		label: 'Edit details',
-		icon: PenLine,
-		buildPermission: buildSavedViewUpdatePermission,
-	},
-	{
-		key: 'delete',
-		label: 'Delete',
-		icon: Trash2,
-		danger: true,
-		hasDividerBefore: true,
-		buildPermission: buildSavedViewDeletePermission,
-	},
-];
-
-export const SAVED_VIEW_TOAST_POSITION = 'top-right' as const;

frontend/src/container/SavedViews/hooks/useActiveSavedView.ts

@@ -1,78 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SAVED_VIEW_OPTIONS_DATA_SOURCE } from '../constants';
-import { UseActiveSavedViewResult } from '../types';
-import { hasUnsavedViewChanges } from '../utils/hasUnsavedViewChanges';
-
-export function useActiveSavedView(
-	source: SavedviewtypesSourceDTO,
-): UseActiveSavedViewResult {
-	const { viewKey } = useGetSavedViewParams();
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { data, isLoading, isError, error } = useGetSavedView(
-		{ id: viewKey },
-		{ query: { enabled: !!viewKey } },
-	);
-	const view = viewKey ? data?.data : undefined;
-
-	// The query builder stages the url query a render later. Until the ids
-	// match, keep the last answer for this view; another view starts clean.
-	const compositeQuery = useGetCompositeQueryParam();
-	const isStagedQueryCurrent =
-		!!stagedQuery && stagedQuery.id === compositeQuery?.id;
-	const lastResult = useRef<{ viewId?: string; hasUnsavedChanges: boolean }>({
-		hasUnsavedChanges: false,
-	});
-
-	const hasUnsavedChanges = useMemo((): boolean => {
-		if (!view || isError) {
-			return false;
-		}
-		if (!isStagedQueryCurrent) {
-			return (
-				lastResult.current.viewId === view.id &&
-				lastResult.current.hasUnsavedChanges
-			);
-		}
-		return hasUnsavedViewChanges({
-			view,
-			stagedQuery,
-			panelType: panelType ?? PANEL_TYPES.LIST,
-			options: optionsDataSource ? options : undefined,
-		});
-	}, [
-		view,
-		isError,
-		isStagedQueryCurrent,
-		stagedQuery,
-		panelType,
-		optionsDataSource,
-		options,
-	]);
-
-	useEffect(() => {
-		lastResult.current = { viewId: view?.id, hasUnsavedChanges };
-	}, [view?.id, hasUnsavedChanges]);
-
-	return {
-		view,
-		isLoading: !!viewKey && isLoading,
-		isError: !!viewKey && isError,
-		isForbidden: !!viewKey && error?.response?.status === 403,
-		hasUnsavedChanges,
-	};
-}

frontend/src/container/SavedViews/hooks/useLastUsedView.ts

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import {
-	PreservedViewsInLocalStorage,
-	PreservedViewType,
-} from 'container/ExplorerOptions/types';
-
-import { UseLastUsedViewResult } from '../types';
-
-function readLastUsedViews(): PreservedViewsInLocalStorage {
-	try {
-		return JSON.parse(
-			getLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) || '{}',
-		) as PreservedViewsInLocalStorage;
-	} catch {
-		return {};
-	}
-}
-
-// Read at call time, not held in state: the hook is used from more than one
-// place and a cached copy would bring back a view another caller just cleared.
-export function useLastUsedView(
-	savedViewSource: SavedviewtypesSourceDTO,
-): UseLastUsedViewResult {
-	// The bar's enum carries the same four values as the v2 source.
-	const source = savedViewSource as unknown as PreservedViewType;
-
-	const getLastUsedViewKey = useCallback(
-		(): string | undefined => readLastUsedViews()[source]?.key,
-		[source],
-	);
-
-	const setLastUsedView = useCallback(
-		(id: string, displayName: string): void => {
-			setLocalStorageKey(
-				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-				JSON.stringify({
-					...readLastUsedViews(),
-					[source]: { key: id, value: displayName },
-				}),
-			);
-		},
-		[source],
-	);
-
-	const clearLastUsedView = useCallback((): void => {
-		const { [source]: _removed, ...rest } = readLastUsedViews();
-		setLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, JSON.stringify(rest));
-	}, [source]);
-
-	return { getLastUsedViewKey, setLastUsedView, clearLastUsedView };
-}

frontend/src/container/SavedViews/hooks/useRestoreLastUsedView.ts

@@ -1,56 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { QueryParams } from 'constants/query';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import { UseRestoreLastUsedViewArgs } from '../types';
-import { useLastUsedView } from './useLastUsedView';
-
-export function useRestoreLastUsedView({
-	source,
-	selectView,
-}: UseRestoreLastUsedViewArgs): void {
-	const { viewKey } = useGetSavedViewParams();
-	const { getLastUsedViewKey, clearLastUsedView } = useLastUsedView(source);
-
-	// Decided on the first render, before the explorer writes its default query
-	// to the url; later an empty url means the view was cleared.
-	const [lastUsedViewKey] = useState(() => {
-		const params = getUnstableCurrentSearchParams();
-		const isBare =
-			!params.get(QueryParams.viewKey) && !params.get(QueryParams.compositeQuery);
-		return isBare ? getLastUsedViewKey() : undefined;
-	});
-	const hasRestored = useRef(false);
-
-	const shouldRestore = !!lastUsedViewKey && !viewKey && !hasRestored.current;
-
-	const { data, isError } = useGetSavedView(
-		{ id: lastUsedViewKey ?? '' },
-		{ query: { enabled: shouldRestore } },
-	);
-	const view = data?.data;
-
-	useEffect(() => {
-		if (!shouldRestore) {
-			return undefined;
-		}
-		if (isError) {
-			hasRestored.current = true;
-			clearLastUsedView();
-			return undefined;
-		}
-		if (!view) {
-			return undefined;
-		}
-
-		// Deferred like the bar's restore, so it lands after the explorer has
-		// written its default query to the url.
-		const timeoutId = setTimeout(() => {
-			hasRestored.current = true;
-			selectView(view);
-		}, 0);
-		return (): void => clearTimeout(timeoutId);
-	}, [shouldRestore, isError, view, clearLastUsedView, selectView]);
-}

frontend/src/container/SavedViews/hooks/useSaveNewView.ts

@@ -1,22 +0,0 @@
-import { useCallback } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-
-import { SAVED_VIEW_TOAST_POSITION } from '../constants';
-import { UseSavedViewActionsResult } from '../types';
-
-export function useSaveNewView(
-	createView: UseSavedViewActionsResult['createView'],
-): (displayName: string) => Promise<boolean> {
-	return useCallback(
-		async (displayName: string): Promise<boolean> => {
-			if (!(await createView(displayName))) {
-				return false;
-			}
-			toast.success('View created', {
-				position: SAVED_VIEW_TOAST_POSITION,
-			});
-			return true;
-		},
-		[createView],
-	);
-}

frontend/src/container/SavedViews/hooks/useSavedViewActions.ts

@@ -1,186 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	invalidateGetSavedView,
-	useCreateSavedView,
-	useUpdateSavedView,
-} from 'api/generated/services/saved-view';
-import {
-	RenderErrorResponseDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { DataSource } from 'types/common/queryBuilder';
-import { toAPIError } from 'utils/errorUtils';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import {
-	SAVED_VIEW_OPTIONS_DATA_SOURCE,
-	SAVED_VIEW_SCHEMA_VERSION,
-	SAVED_VIEW_TOAST_POSITION,
-	SAVED_VIEW_URL_PARAMS,
-} from '../constants';
-import { UseSavedViewActionsResult } from '../types';
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { invalidateSavedViews } from '../utils/invalidateSavedViews';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-import { useLastUsedView } from './useLastUsedView';
-
-// Columns and formatting need no handling here: with a viewKey in the url the
-// preference provider reads them from the view, and without one it falls back
-// to the user's own.
-export function useSavedViewActions(
-	source: SavedviewtypesSourceDTO,
-): UseSavedViewActionsResult {
-	const queryClient = useQueryClient();
-	const { pathname } = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-	const { currentQuery, stagedQuery, panelType, redirectWithQueryBuilderData } =
-		useQueryBuilder();
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { setLastUsedView, clearLastUsedView } = useLastUsedView(source);
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { mutateAsync: createSavedView, isLoading: isCreating } =
-		useCreateSavedView();
-	const { mutateAsync: updateSavedView, isLoading: isUpdating } =
-		useUpdateSavedView();
-
-	const invalidateViews = useCallback(
-		(id?: string): Promise<void> => invalidateSavedViews(queryClient, source, id),
-		[queryClient, source],
-	);
-
-	const toCurrentSpec = useCallback(
-		(displayName: string, color?: string): SavedviewtypesSavedViewSpecDTO =>
-			toSavedViewSpec({
-				query: stagedQuery ?? currentQuery,
-				panelType: panelType ?? PANEL_TYPES.LIST,
-				displayName,
-				options: optionsDataSource ? options : undefined,
-				color,
-			}),
-		[stagedQuery, currentQuery, panelType, optionsDataSource, options],
-	);
-
-	const selectView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			handleExplorerTabChange(view.spec.panelType, {
-				query: getSavedViewQuery(view),
-				viewKey: view.id,
-			});
-			setLastUsedView(view.id, view.spec.displayName);
-		},
-		[handleExplorerTabChange, setLastUsedView],
-	);
-
-	// The preference provider re-reads a view's columns only when the view is
-	// fetched, so it is refetched as the view is applied again.
-	const revertView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			void invalidateGetSavedView(queryClient, { id: view.id });
-			selectView(view);
-		},
-		[queryClient, selectView],
-	);
-
-	// The query builder redirects only ever add params, so the url is rebuilt
-	// here; the time range and everything else a view does not set stays.
-	const clearView = useCallback((): void => {
-		clearLastUsedView();
-
-		const params = getUnstableCurrentSearchParams();
-		SAVED_VIEW_URL_PARAMS.forEach((param) => params.delete(param));
-		safeNavigate(`${pathname}?${params.toString()}`);
-	}, [clearLastUsedView, pathname, safeNavigate]);
-
-	const createView = useCallback(
-		async (displayName: string): Promise<string | undefined> => {
-			try {
-				const { data } = await createSavedView({
-					data: {
-						generateName: true,
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(displayName),
-					},
-				});
-				await invalidateViews();
-				redirectWithQueryBuilderData(stagedQuery ?? currentQuery, {
-					[QueryParams.viewKey]: data.id,
-				});
-				setLastUsedView(data.id, displayName);
-				return data.id;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not save the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return undefined;
-			}
-		},
-		[
-			createSavedView,
-			source,
-			toCurrentSpec,
-			invalidateViews,
-			redirectWithQueryBuilderData,
-			stagedQuery,
-			currentQuery,
-			setLastUsedView,
-		],
-	);
-
-	const updateView = useCallback(
-		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
-			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(view.spec.displayName, view.spec.display?.color),
-					},
-				});
-				await invalidateViews(view.id);
-				return true;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not update the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return false;
-			}
-		},
-		[updateSavedView, source, toCurrentSpec, invalidateViews],
-	);
-
-	return {
-		selectView,
-		revertView,
-		clearView,
-		createView,
-		updateView,
-		isSaving: isCreating || isUpdating,
-	};
-}

frontend/src/container/SavedViews/hooks/useSavedViewHoverCard.ts

@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import {
-	SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
-	SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS,
-} from '../constants';
-import {
-	SavedViewHoverCardTarget,
-	UseSavedViewHoverCardResult,
-} from '../types';
-
-export function useSavedViewHoverCard(): UseSavedViewHoverCardResult {
-	const [target, setTarget] = useState<SavedViewHoverCardTarget | null>(null);
-	const openTimer = useRef<ReturnType<typeof setTimeout>>();
-	const closeTimer = useRef<ReturnType<typeof setTimeout>>();
-
-	const cancelOpen = useCallback(
-		(): void => clearTimeout(openTimer.current),
-		[],
-	);
-	const cancelClose = useCallback(
-		(): void => clearTimeout(closeTimer.current),
-		[],
-	);
-
-	const scheduleClose = useCallback((): void => {
-		cancelClose();
-		closeTimer.current = setTimeout(
-			() => setTarget(null),
-			SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
-		);
-	}, [cancelClose]);
-
-	const onRowEnter = useCallback(
-		(next: SavedViewHoverCardTarget): void => {
-			cancelOpen();
-			openTimer.current = setTimeout(() => {
-				cancelClose();
-				setTarget(next);
-			}, SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
-		},
-		[cancelOpen, cancelClose],
-	);
-
-	const onRowLeave = useCallback((): void => {
-		cancelOpen();
-		scheduleClose();
-	}, [cancelOpen, scheduleClose]);
-
-	const close = useCallback((): void => {
-		cancelOpen();
-		cancelClose();
-		setTarget(null);
-	}, [cancelOpen, cancelClose]);
-
-	useEffect(
-		() => (): void => {
-			cancelOpen();
-			cancelClose();
-		},
-		[cancelOpen, cancelClose],
-	);
-
-	return {
-		target,
-		onRowEnter,
-		onRowLeave,
-		onCardEnter: cancelClose,
-		onCardLeave: scheduleClose,
-		close,
-	};
-}

frontend/src/container/SavedViews/hooks/useSavedViewRowActions.ts

@@ -1,105 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	useDeleteSavedView,
-	useUpdateSavedView,
-} from 'api/generated/services/saved-view';
-import {
-	RenderErrorResponseDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import { QueryParams } from 'constants/query';
-import { buildExplorerNavigationUrl } from 'container/AIAssistant/components/ActionsSection/utils/openSavedView';
-import { getAbsoluteUrl } from 'utils/basePath';
-import { toAPIError } from 'utils/errorUtils';
-
-import {
-	SAVED_VIEW_SCHEMA_VERSION,
-	SAVED_VIEW_TOAST_POSITION,
-} from '../constants';
-import { UseSavedViewRowActionsResult } from '../types';
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { invalidateSavedViews } from '../utils/invalidateSavedViews';
-
-function showErrorToast(error: unknown, fallback: string): void {
-	toast.error(
-		toAPIError(
-			error as ErrorType<RenderErrorResponseDTO>,
-			fallback,
-		).getErrorMessage(),
-		{ position: SAVED_VIEW_TOAST_POSITION },
-	);
-}
-
-export function useSavedViewRowActions(
-	source: SavedviewtypesSourceDTO,
-): UseSavedViewRowActionsResult {
-	const queryClient = useQueryClient();
-	const { pathname } = useLocation();
-	const [, copyToClipboard] = useCopyToClipboard();
-	const { mutateAsync: updateSavedView, isLoading: isRenaming } =
-		useUpdateSavedView();
-	const { mutateAsync: deleteSavedView, isLoading: isDeleting } =
-		useDeleteSavedView();
-
-	const copyViewLink = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			const path = buildExplorerNavigationUrl(pathname, getSavedViewQuery(view), {
-				[QueryParams.panelTypes]: view.spec.panelType,
-				[QueryParams.viewKey]: view.id,
-			});
-			copyToClipboard(getAbsoluteUrl(path));
-			toast.success('Link copied', { position: SAVED_VIEW_TOAST_POSITION });
-		},
-		[pathname, copyToClipboard],
-	);
-
-	const renameView = useCallback(
-		async (
-			view: SavedviewtypesSavedViewDTO,
-			displayName: string,
-		): Promise<boolean> => {
-			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: { ...view.spec, displayName },
-					},
-				});
-				await invalidateSavedViews(queryClient, source, view.id);
-				toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
-				return true;
-			} catch (error) {
-				showErrorToast(error, 'Could not update the view');
-				return false;
-			}
-		},
-		[updateSavedView, source, queryClient],
-	);
-
-	// The deleted view's own query is left alone: refetching it would fail
-	// while the header still has it selected.
-	const deleteView = useCallback(
-		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
-			try {
-				await deleteSavedView({ pathParams: { id: view.id } });
-				await invalidateSavedViews(queryClient, source);
-				toast.success('View deleted', { position: SAVED_VIEW_TOAST_POSITION });
-				return true;
-			} catch (error) {
-				showErrorToast(error, 'Could not delete the view');
-				return false;
-			}
-		},
-		[deleteSavedView, source, queryClient],
-	);
-
-	return { copyViewLink, renameView, deleteView, isRenaming, isDeleting };
-}

frontend/src/container/SavedViews/hooks/useSavedViewsList.ts

@@ -1,35 +0,0 @@
-import { useMemo } from 'react';
-import { useListSavedViews } from 'api/generated/services/saved-view';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { useAppContext } from 'providers/App/App';
-
-import { UseSavedViewsListResult } from '../types';
-
-export function useSavedViewsList(
-	source: SavedviewtypesSourceDTO,
-	search: string,
-): UseSavedViewsListResult {
-	const { user } = useAppContext();
-	const { data, isLoading, isError, refetch } = useListSavedViews({ source });
-
-	const { createdByMe, createdByOthers } = useMemo(() => {
-		const term = search.trim().toLowerCase();
-		const views = (data?.data ?? []).filter((view) =>
-			view.spec.displayName.toLowerCase().includes(term),
-		);
-		return {
-			createdByMe: views.filter((view) => view.createdBy === user.email),
-			createdByOthers: views.filter((view) => view.createdBy !== user.email),
-		};
-	}, [data, search, user.email]);
-
-	return {
-		createdByMe,
-		createdByOthers,
-		isLoading,
-		isError,
-		refetch: (): void => {
-			void refetch();
-		},
-	};
-}

frontend/src/container/SavedViews/types.ts

@@ -1,217 +0,0 @@
-import { ReactElement } from 'react';
-import type { Link } from '@signozhq/icons';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export type SavedViewSourcePage = DataSource | 'meter';
-
-export type SavedViewOptions = Pick<
-	OptionsQuery,
-	'selectColumns' | 'format' | 'maxLines' | 'fontSize'
->;
-
-export interface ToSavedViewSpecArgs {
-	query: Query;
-	panelType: PANEL_TYPES;
-	displayName: string;
-	options?: SavedViewOptions;
-	color?: string;
-}
-
-export interface HasUnsavedViewChangesArgs {
-	view: SavedviewtypesSavedViewDTO;
-	stagedQuery: Query | null;
-	panelType: PANEL_TYPES;
-	options?: SavedViewOptions;
-}
-
-export interface UseLastUsedViewResult {
-	getLastUsedViewKey: () => string | undefined;
-	setLastUsedView: (id: string, displayName: string) => void;
-	clearLastUsedView: () => void;
-}
-
-export interface UseActiveSavedViewResult {
-	view: SavedviewtypesSavedViewDTO | undefined;
-	isLoading: boolean;
-	isError: boolean;
-	isForbidden: boolean;
-	hasUnsavedChanges: boolean;
-}
-
-export interface UseSavedViewActionsResult {
-	selectView: (view: SavedviewtypesSavedViewDTO) => void;
-	revertView: (view: SavedviewtypesSavedViewDTO) => void;
-	clearView: () => void;
-	createView: (displayName: string) => Promise<string | undefined>;
-	updateView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-export interface UseRestoreLastUsedViewArgs {
-	source: SavedviewtypesSourceDTO;
-	selectView: UseSavedViewActionsResult['selectView'];
-}
-
-export type SaveViewModalMode = 'create' | 'saveAsNew' | 'edit';
-
-export interface SaveViewModalProps {
-	mode: SaveViewModalMode;
-	initialName?: string;
-	isSaving: boolean;
-	onClose: () => void;
-	// Resolves true when saved; the modal stays open otherwise.
-	onSave: (displayName: string) => Promise<boolean>;
-}
-
-export interface SaveChangesMenuProps {
-	viewId: string;
-	disabled: boolean;
-	onSaveAsNew: () => void;
-	onUpdate: () => void;
-}
-
-export interface SavedViewsIconButtonProps {
-	title: string;
-	icon: ReactElement;
-	testId: string;
-	color?: 'secondary' | 'warning';
-	disabled?: boolean;
-	checks?: BrandedPermission[];
-	onClick?: () => void;
-}
-
-export interface UseSavedViewsListResult {
-	createdByMe: SavedviewtypesSavedViewDTO[];
-	createdByOthers: SavedviewtypesSavedViewDTO[];
-	isLoading: boolean;
-	isError: boolean;
-	refetch: () => void;
-}
-
-export interface SavedViewsListSectionProps {
-	title: string;
-	views: SavedviewtypesSavedViewDTO[];
-	activeViewId?: string;
-	onSelect: (view: SavedviewtypesSavedViewDTO) => void;
-	onClear: () => void;
-	onAction: SavedViewsListRowProps['onAction'];
-	hover: SavedViewsListRowHoverProps;
-	isReadDenied: boolean;
-	testId: string;
-}
-
-export interface SavedViewsListRowProps {
-	view: SavedviewtypesSavedViewDTO;
-	isActive: boolean;
-	onSelect: (view: SavedviewtypesSavedViewDTO) => void;
-	onClear: () => void;
-	onAction: (
-		view: SavedviewtypesSavedViewDTO,
-		key: SavedViewRowActionKey,
-	) => void;
-	hover: SavedViewsListRowHoverProps;
-	isReadDenied: boolean;
-}
-
-export type SavedViewRowActionKey = 'copyLink' | 'editDetails' | 'delete';
-
-export interface SavedViewRowActionConfig {
-	key: SavedViewRowActionKey;
-	label: string;
-	icon: typeof Link;
-	danger?: boolean;
-	hasDividerBefore?: boolean;
-	buildPermission?: (id: string) => BrandedPermission;
-}
-
-export interface PendingSavedViewAction {
-	key: Exclude<SavedViewRowActionKey, 'copyLink'>;
-	view: SavedviewtypesSavedViewDTO;
-}
-
-export interface SavedViewsRowButtonProps {
-	icon: ReactElement;
-	label: string;
-	tooltip?: string;
-	testId: string;
-	onClick?: () => void;
-	onPointerDown?: () => void;
-	onKeyDown?: () => void;
-}
-
-export interface SavedViewsRowMenuProps {
-	viewId: string;
-	onAction: (key: SavedViewRowActionKey) => void;
-	onOpen: () => void;
-}
-
-export interface DeleteSavedViewDialogProps {
-	isDeleting: boolean;
-	onCancel: () => void;
-	onConfirm: () => void;
-}
-
-export interface UseSavedViewRowActionsResult {
-	copyViewLink: (view: SavedviewtypesSavedViewDTO) => void;
-	renameView: (
-		view: SavedviewtypesSavedViewDTO,
-		displayName: string,
-	) => Promise<boolean>;
-	deleteView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
-	isRenaming: boolean;
-	isDeleting: boolean;
-}
-
-export interface SavedViewHoverCardTarget {
-	view: SavedviewtypesSavedViewDTO;
-	anchorTop: number;
-	anchorHeight: number;
-}
-
-export interface UseSavedViewHoverCardResult {
-	target: SavedViewHoverCardTarget | null;
-	onRowEnter: (target: SavedViewHoverCardTarget) => void;
-	onRowLeave: () => void;
-	onCardEnter: () => void;
-	onCardLeave: () => void;
-	close: () => void;
-}
-
-export interface SavedViewHoverCardProps {
-	target: SavedViewHoverCardTarget | null;
-	onCardEnter: () => void;
-	onCardLeave: () => void;
-	onClose: () => void;
-}
-
-export interface SavedViewsListRowHoverProps {
-	onRowEnter: (view: SavedviewtypesSavedViewDTO, row: HTMLElement) => void;
-	onRowLeave: () => void;
-	onMenuOpen: () => void;
-}
-
-export interface SavedViewQuerySummary {
-	queryName: string;
-	expression: string;
-	metric?: string;
-}
-
-export interface HighlightedQueryPart {
-	from: number;
-	text: string;
-	color?: string;
-}
-
-export interface SavedViewsEmptyStateProps {
-	isSearching: boolean;
-	isSaving: boolean;
-	onSave: (displayName: string) => Promise<boolean>;
-}

frontend/src/container/SavedViews/utils.ts

@@ -0,0 +1,49 @@
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryEnvelope } from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type SavedViewSourcePage = DataSource | 'meter';
+
+// Explorers and the preferences module are keyed by DataSource (the signal),
+// the api keys views by source page. Same values today, so this is the one
+// place they meet. AI observability views will come with their own source and
+// DataSource cannot tell them apart from traces, so preferences should move to
+// source page at that point and this map goes with it.
+const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
+	{
+		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
+		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
+		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
+		meter: SavedviewtypesSourceDTO.meter,
+	};
+
+export function toSavedViewSource(
+	sourcePage: SavedViewSourcePage,
+): SavedviewtypesSourceDTO {
+	return SAVED_VIEW_SOURCE[sourcePage];
+}
+
+// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
+export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
+	const { queries, panelType } = view.spec;
+	return mapQueryDataFromApi({
+		queries: queries as QueryEnvelope[],
+		panelType: panelType as unknown as PANEL_TYPES,
+		queryType: EQueryType.QUERY_BUILDER,
+		unit: undefined,
+	});
+}
+
+export function findSavedView(
+	views: SavedviewtypesSavedViewDTO[] | null | undefined,
+	id: string,
+): SavedviewtypesSavedViewDTO | undefined {
+	return views?.find((view) => view.id === id);
+}

frontend/src/container/SavedViews/utils/__tests__/findSavedView.test.ts

@@ -1,20 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { findSavedView } from '../findSavedView';
-
-describe('findSavedView', () => {
-	const views = [{ id: 'a' }, { id: 'b' }] as SavedviewtypesSavedViewDTO[];
-
-	it('returns the view with the matching id', () => {
-		expect(findSavedView(views, 'b')?.id).toBe('b');
-	});
-
-	it('returns undefined when the id is not in the list', () => {
-		expect(findSavedView(views, 'c')).toBeUndefined();
-	});
-
-	it('returns undefined for a null or not yet loaded list', () => {
-		expect(findSavedView(null, 'a')).toBeUndefined();
-		expect(findSavedView(undefined, 'a')).toBeUndefined();
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/hasUnsavedViewChanges.test.ts

@@ -1,300 +0,0 @@
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	initialQueriesMap,
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { getSavedViewQuery } from '../getSavedViewQuery';
-import { hasUnsavedViewChanges } from '../hasUnsavedViewChanges';
-import { toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function query(dataSource: DataSource, expression = 'has_error = true'): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-// The server stores the queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		const entries = Object.entries(value)
-			.map(([key, v]) => [key, asStoredByServer(v)] as const)
-			.filter(([, v]) => v !== undefined);
-		return Object.fromEntries(entries);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-function viewFrom(
-	spec: SavedviewtypesSavedViewSpecDTO,
-): SavedviewtypesSavedViewDTO {
-	return {
-		id: 'view-1',
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// What the query builder stages after the view is opened: the stored query,
-// with its defaults filled in.
-function stagedFrom(
-	view: SavedviewtypesSavedViewDTO,
-	dataSource: DataSource,
-): Query {
-	const saved = getSavedViewQuery(view);
-	return {
-		...saved,
-		builder: {
-			...saved.builder,
-			queryData: saved.builder.queryData.map((queryData) => ({
-				...initialQueryBuilderFormValuesMap[dataSource],
-				...queryData,
-			})),
-		},
-	};
-}
-
-const columns = [
-	{ name: 'service.name', key: 'service.name' },
-	{ name: 'name', key: 'name' },
-] as TelemetryFieldKey[];
-
-const formatting = {
-	format: 'raw' as LogViewMode,
-	maxLines: 2,
-	fontSize: FontSize.SMALL,
-};
-
-describe('hasUnsavedViewChanges', () => {
-	const options = { selectColumns: columns, ...formatting };
-	const view = viewFrom(
-		toSavedViewSpec({
-			query: query(DataSource.TRACES),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options,
-		}),
-	);
-	const staged = stagedFrom(view, DataSource.TRACES);
-
-	it('is dirty when the columns change', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: [columns[0]] },
-			}),
-		).toBe(true);
-	});
-
-	it('reads a traces view without columns as the default columns', () => {
-		const bare = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-			}),
-		);
-
-		expect(
-			hasUnsavedViewChanges({
-				view: bare,
-				stagedQuery: stagedFrom(bare, DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: defaultTraceSelectedColumns },
-			}),
-		).toBe(false);
-	});
-
-	describe('on logs', () => {
-		const logsView = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.LOGS),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-				options: { selectColumns: columns, ...formatting },
-			}),
-		);
-		const logsStaged = stagedFrom(logsView, DataSource.LOGS);
-		// The explorer always adds the required logs columns.
-		const shownColumns = ensureLogsRequiredColumns(columns);
-
-		it('is clean with the required columns the explorer adds', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting },
-				}),
-			).toBe(false);
-		});
-
-		it('is dirty when the formatting changes', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting, maxLines: 5 },
-				}),
-			).toBe(true);
-		});
-
-		it('reads a view without formatting as the default formatting', () => {
-			const bare = viewFrom(
-				toSavedViewSpec({
-					query: query(DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					displayName: 'Errors',
-				}),
-			);
-
-			expect(
-				hasUnsavedViewChanges({
-					view: bare,
-					stagedQuery: stagedFrom(bare, DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					options: {
-						selectColumns: defaultLogsSelectedColumns,
-						format: 'table',
-						maxLines: 1,
-						fontSize: FontSize.SMALL,
-					},
-				}),
-			).toBe(false);
-		});
-	});
-
-	it('ignores fields the save path never writes, kept by older views', () => {
-		const metricsView = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.METRICS, ''),
-				panelType: PANEL_TYPES.TIME_SERIES,
-				displayName: 'Old metrics view',
-			}),
-		);
-		const [storedQuery] = metricsView.spec.queries;
-		const olderView = {
-			...metricsView,
-			spec: {
-				...metricsView.spec,
-				queries: [
-					{
-						...storedQuery,
-						spec: {
-							...storedQuery.spec,
-							aggregations: [
-								{ metricName: 'erlang_vm_msacc_sleep_seconds_total', reduceTo: 'avg' },
-							],
-						},
-					},
-				],
-			},
-		} as SavedviewtypesSavedViewDTO;
-
-		expect(
-			hasUnsavedViewChanges({
-				view: olderView,
-				stagedQuery: stagedFrom(olderView, DataSource.METRICS),
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		).toBe(false);
-	});
-
-	it('reads a group-by stored as attribute and staged as tag as the same field', () => {
-		const attributeView = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.METRICS, ''),
-				panelType: PANEL_TYPES.TIME_SERIES,
-				displayName: 'By os',
-			}),
-		);
-		const [storedQuery] = attributeView.spec.queries;
-		const storedView = {
-			...attributeView,
-			spec: {
-				...attributeView.spec,
-				queries: [
-					{
-						...storedQuery,
-						spec: {
-							...storedQuery.spec,
-							groupBy: [
-								{ name: 'os.type', fieldContext: 'attribute', fieldDataType: 'string' },
-							],
-						},
-					},
-				],
-			},
-		} as SavedviewtypesSavedViewDTO;
-		const opened = stagedFrom(storedView, DataSource.METRICS);
-		const stagedWithTag: Query = {
-			...opened,
-			builder: {
-				...opened.builder,
-				queryData: opened.builder.queryData.map((queryData) => ({
-					...queryData,
-					groupBy: [{ key: 'os.type', dataType: 'string', type: 'tag' }],
-				})),
-			},
-		} as Query;
-
-		expect(
-			hasUnsavedViewChanges({
-				view: storedView,
-				stagedQuery: stagedWithTag,
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		).toBe(false);
-	});
-
-	it('ignores formatting on traces', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, ...formatting, maxLines: 5 },
-			}),
-		).toBe(false);
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/highlightQueryExpression.test.ts

@@ -1,43 +0,0 @@
-import { tags } from '@lezer/highlight';
-import { copilotDarkStyle } from '@uiw/codemirror-theme-copilot';
-import { githubLightStyle } from '@uiw/codemirror-theme-github';
-
-import { highlightQueryExpression } from '../highlightQueryExpression';
-
-const EXPRESSION =
-	"service.name = 'frontend' AND duration_nano > 100 AND status IN ['ok', 'error']";
-
-function stringColor(styles: typeof copilotDarkStyle): string | undefined {
-	return (styles ?? []).find(({ tag }) =>
-		(Array.isArray(tag) ? tag : [tag]).includes(tags.string),
-	)?.color;
-}
-
-describe('highlightQueryExpression', () => {
-	it.each([
-		['dark', true],
-		['light', false],
-	])('keeps every character of the expression in %s mode', (_, isDarkMode) => {
-		const parts = highlightQueryExpression(EXPRESSION, isDarkMode);
-
-		expect(parts.map(({ text }) => text).join('')).toBe(EXPRESSION);
-	});
-
-	it.each([
-		['dark', true, copilotDarkStyle],
-		['light', false, githubLightStyle],
-	])(
-		'colours string values like the %s query search theme',
-		(_, isDarkMode, styles) => {
-			const parts = highlightQueryExpression(EXPRESSION, isDarkMode);
-
-			expect(parts.find(({ text }) => text === "'frontend'")?.color).toBe(
-				stringColor(styles),
-			);
-		},
-	);
-
-	it('returns nothing for an empty expression', () => {
-		expect(highlightQueryExpression('', true)).toStrictEqual([]);
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/toSavedViewSource.test.ts

@@ -1,17 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { toSavedViewSource } from '../toSavedViewSource';
-
-describe('toSavedViewSource', () => {
-	it('maps every explorer source page to the v2 source', () => {
-		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
-		expect(toSavedViewSource(DataSource.TRACES)).toBe(
-			SavedviewtypesSourceDTO.traces,
-		);
-		expect(toSavedViewSource(DataSource.METRICS)).toBe(
-			SavedviewtypesSourceDTO.metrics,
-		);
-		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/toSavedViewSpec.test.ts

@@ -1,95 +0,0 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	SavedviewtypesPanelTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-
-import { toSavedViewPanelType, toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function tracesQuery(): Query {
-	const base = initialQueriesMap.traces;
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression: 'has_error = true' },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-const columns = [
-	{
-		name: 'service.name',
-		key: 'service.name',
-		signal: 'traces',
-		fieldContext: 'resource',
-		fieldDataType: 'string',
-		isIndexed: true,
-	},
-	{ key: 'name' },
-] as unknown as TelemetryFieldKey[];
-
-describe('toSavedViewPanelType', () => {
-	it('folds a dashboard only panel type to graph', () => {
-		expect(toSavedViewPanelType(PANEL_TYPES.PIE)).toBe(
-			SavedviewtypesPanelTypeDTO.graph,
-		);
-	});
-});
-
-describe('toSavedViewSpec', () => {
-	it('stores only the field identity of the columns, naming key only ones', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options: {
-				selectColumns: columns,
-				format: 'raw' as LogViewMode,
-				maxLines: 2,
-				fontSize: FontSize.SMALL,
-			},
-		});
-
-		expect(spec.selectedFields).toStrictEqual([
-			{
-				name: 'service.name',
-				signal: 'traces',
-				fieldContext: 'resource',
-				fieldDataType: 'string',
-			},
-			{ name: 'name' },
-		]);
-		expect(spec.display).toStrictEqual({
-			format: 'raw',
-			maxLines: 2,
-			fontSize: FontSize.SMALL,
-		});
-	});
-
-	it('keeps the colour in display', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.TIME_SERIES,
-			displayName: 'Errors',
-			color: 'red',
-		});
-
-		expect(spec.panelType).toBe(SavedviewtypesPanelTypeDTO.graph);
-		expect(spec.requestType).toBe(Querybuildertypesv5RequestTypeDTO.time_series);
-		expect(spec.display).toStrictEqual({ color: 'red' });
-	});
-});

frontend/src/container/SavedViews/utils/findSavedView.ts

@@ -1,8 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-export function findSavedView(
-	views: SavedviewtypesSavedViewDTO[] | null | undefined,
-	id: string,
-): SavedviewtypesSavedViewDTO | undefined {
-	return views?.find((view) => view.id === id);
-}

frontend/src/container/SavedViews/utils/getSavedViewQuery.ts

@@ -1,17 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryEnvelope } from 'types/api/v5/queryRange';
-import { EQueryType } from 'types/common/dashboard';
-
-// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
-export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
-	const { queries, panelType } = view.spec;
-	return mapQueryDataFromApi({
-		queries: queries as QueryEnvelope[],
-		panelType: panelType as unknown as PANEL_TYPES,
-		queryType: EQueryType.QUERY_BUILDER,
-		unit: undefined,
-	});
-}

frontend/src/container/SavedViews/utils/getSavedViewQuerySummaries.ts

@@ -1,34 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
-import { MetricAggregation } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SavedViewQuerySummary } from '../types';
-import { getSavedViewQuery } from './getSavedViewQuery';
-
-export function getSavedViewQuerySummaries(
-	view: SavedviewtypesSavedViewDTO,
-): SavedViewQuerySummary[] {
-	return getSavedViewQuery(view)
-		.builder.queryData.map((query): SavedViewQuerySummary => {
-			const aggregation = query.aggregations?.[0] as MetricAggregation | undefined;
-			return {
-				queryName: query.queryName,
-				expression: convertFiltersToExpressionWithExistingQuery(
-					query.filters ?? { items: [], op: 'AND' },
-					query.filter?.expression,
-				).filter.expression.trim(),
-				metric:
-					query.dataSource === DataSource.METRICS && aggregation?.metricName
-						? [
-								aggregation.metricName,
-								aggregation.timeAggregation,
-								aggregation.spaceAggregation,
-							]
-								.filter(Boolean)
-								.join(' · ')
-						: undefined,
-			};
-		})
-		.filter(({ expression, metric }) => expression.length > 0 || !!metric);
-}