From 81afa641a2ebb9376d3aba2cecdfd49ba3efcfac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Louren=C3=A7o?= <vinicius@signoz.io>
Date: Tue, 8 Sep 2026 12:39:21 -0300
Subject: [PATCH] feat(components): add storybook story for the modal

---
 .../stories/SignozModal.stories.tsx           | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 frontend/src/components/SignozModal/stories/SignozModal.stories.tsx

diff --git a/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
new file mode 100644
index 0000000000..8b18b8c510
--- /dev/null
+++ b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { CustomSelect } from '../../NewSelect';
+import SignozModal from '../SignozModal';
+
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
+				Open modal
+			</Button>
+			<SignozModal
+				footer={null}
+				open={open}
+				onCancel={(): void => setOpen(false)}
+				title="Create saved view"
+			>
+				<CustomSelect
+					aria-label="View scope"
+					options={[
+						{ label: 'This workspace', value: 'workspace' },
+						{ label: 'My views', value: 'personal' },
+					]}
+					placeholder="Select a scope"
+				/>
+			</SignozModal>
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Signoz Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Interaction: the modal and its nested body-portal select are both genuinely open. */
+export const OpenWithNestedSelect: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const trigger = within(canvasElement).getByTestId('open-signoz-modal');
+
+		await userEvent.click(trigger);
+		await screen.findByRole('dialog', { name: 'Create saved view' });
+		await userEvent.keyboard('{Escape}');
+		await waitFor(() => expect(trigger).toHaveFocus());
+		await userEvent.click(trigger);
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'View scope' }),
+		);
+		await screen.findByRole('listbox');
+	},
+};