From ca1bbc8901df4a9b6ddb4b175d2a40641ba3c5ef Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Fri, 15 Nov 2024 17:42:27 +0530
Subject: [PATCH 1/8] chore: add home page automation tests (#370)

---
 .env.example                                  |   3 +
 .github/workflows/playwright.yml              |   5 -
 playwright.config.ts                          |  40 ++++---
 .../Stream/components/EventTimeLineGraph.tsx  |   2 +-
 .../Stream/components/PrimaryToolbar.tsx      |   2 +-
 src/pages/Stream/components/Sidebar.tsx       |   3 +-
 tests/home.spec.ts                            | 110 ++++++++++++++++++
 7 files changed, 140 insertions(+), 25 deletions(-)
 create mode 100644 tests/home.spec.ts

diff --git a/.env.example b/.env.example
index 7663c9be..1725b318 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,4 @@
 VITE_PARSEABLE_URL="https://demo.parseable.com"
+VITE_USE_BASIC_AUTH=true
+VITE_USERNAME=admin
+VITE_PASSWORD=admin
\ No newline at end of file
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index e6e1d02f..96eb75f9 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -17,11 +17,6 @@ jobs:
         run: npm install -g pnpm && pnpm install
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
-      - name: Start the development server
-        run: pnpm run dev &
-        env:
-          PORT: 3001
-          VITE_PARSEABLE_URL: 'https://demo.parseable.com'
       - name: Run Playwright tests
         run: pnpm exec playwright test
       - uses: actions/upload-artifact@v4
diff --git a/playwright.config.ts b/playwright.config.ts
index c607f68f..5c90d80b 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,8 +2,9 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
 	testDir: './tests',
+	testIgnore: '**/login.spec.ts',
 	/* Run tests in files in parallel */
-	fullyParallel: true,
+	fullyParallel: true, // Set this to false to ensure sequential execution of files
 	/* Fail the build on CI if you accidentally left test.only in the source code. */
 	forbidOnly: !!process.env.CI,
 	/* Retry on CI only */
@@ -11,7 +12,7 @@ export default defineConfig({
 	/* Opt out of parallel tests on CI. */
 	workers: process.env.CI ? 1 : undefined,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
-	reporter: 'html',
+	reporter: 'line',
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Base URL to use in actions like `await page.goto('/')`. */
@@ -27,22 +28,27 @@ export default defineConfig({
 			name: 'chromium',
 			use: { ...devices['Desktop Chrome'] },
 		},
-
-		{
-			name: 'firefox',
-			use: { ...devices['Desktop Firefox'] },
-		},
-
-		{
-			name: 'webkit',
-			use: { ...devices['Desktop Safari'] },
-		},
+		// {
+		// 	name: 'Firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+		// {
+		// 	name: 'Safari',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
 	],
 
 	/* Run your local dev server before starting the tests */
-	// webServer: {
-	//   command: 'npm run start',
-	//   url: 'http://127.0.0.1:3000',
-	//   reuseExistingServer: !process.env.CI,
-	// },
+	webServer: {
+		command: 'pnpm run dev',
+		url: 'http://localhost:3001',
+		reuseExistingServer: false,
+		env: {
+			PORT: '3001',
+			VITE_PARSEABLE_URL: 'https://demo.parseable.com',
+			VITE_USE_BASIC_AUTH: 'true',
+			VITE_USERNAME: 'admin',
+			VITE_PASSWORD: 'admin',
+		},
+	},
 });
diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx
index aafc6fe1..51d56b0c 100644
--- a/src/pages/Stream/components/EventTimeLineGraph.tsx
+++ b/src/pages/Stream/components/EventTimeLineGraph.tsx
@@ -20,7 +20,7 @@ const { makeTimeRangeLabel } = timeRangeUtils;
 type CompactInterval = 'minute' | 'day' | 'hour' | 'quarter-hour' | 'half-hour' | 'month';
 
 function extractWhereClause(sql: string) {
-	const whereClauseRegex = /WHERE\s+(.*?)(?=\s*(ORDER\s+BY|GROUP\s+BY|LIMIT|$))/i;
+	const whereClauseRegex = /WHERE\s+(.*?)(?=\s*(ORDER\s+BY|GROUP\s+BY|OFFSET|LIMIT|$))/i;
 	const match = sql.match(whereClauseRegex);
 	if (match) {
 		return match[1].trim();
diff --git a/src/pages/Stream/components/PrimaryToolbar.tsx b/src/pages/Stream/components/PrimaryToolbar.tsx
index 3e67bb07..16e41568 100644
--- a/src/pages/Stream/components/PrimaryToolbar.tsx
+++ b/src/pages/Stream/components/PrimaryToolbar.tsx
@@ -21,7 +21,7 @@ import classes from './styles/PrimaryToolbar.module.css';
 const { toggleDeleteModal, onToggleView } = logsStoreReducers;
 const { toggleSavedFiltersModal } = filterStoreReducers;
 const renderMaximizeIcon = () => <IconMaximize size={px('1rem')} stroke={1.5} />;
-const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
+const renderDeleteIcon = () => <IconTrash data-id="delete-stream-btn" size={px('1rem')} stroke={1.5} />;
 
 const MaximizeButton = () => {
 	const [_appStore, setAppStore] = useAppStore((_store) => null);
diff --git a/src/pages/Stream/components/Sidebar.tsx b/src/pages/Stream/components/Sidebar.tsx
index 7fdf1ca9..c94ab723 100644
--- a/src/pages/Stream/components/Sidebar.tsx
+++ b/src/pages/Stream/components/Sidebar.tsx
@@ -43,7 +43,8 @@ const ConfigButton = (props: MenuItemProps) => {
 		<Stack
 			onClick={() => props.setCurrentView(viewName)}
 			style={{ padding: '4px 0', alignItems: 'center' }}
-			className={classes.menuItemContainer}>
+			className={classes.menuItemContainer}
+			data-id="manage-stream-btn">
 			<Tooltip label="Manage" position="right">
 				<Stack className={additionalClassNames} style={{ padding: '4px 4px' }}>
 					<IconSettings2
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
new file mode 100644
index 00000000..a9b38ea8
--- /dev/null
+++ b/tests/home.spec.ts
@@ -0,0 +1,110 @@
+import { test, expect } from '@playwright/test';
+
+const TEST_URL = 'http://localhost:3001';
+
+test.describe('Home Page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto(`${TEST_URL}`);
+	});
+	test('should render the component correctly with default state', async ({ page }) => {
+		await expect(page.locator('text=All Streams')).toBeVisible();
+		await expect(page.locator('input[placeholder="Search Stream"]')).toBeVisible();
+	});
+
+	test('should render the component correctly with streams data', async ({ page }) => {
+		// Check that the streams are displayed
+		await expect(page.locator('text=backend')).toBeVisible();
+		await expect(page.locator('text=frontend')).toBeVisible();
+	});
+
+	test('should filter streams based on search input', async ({ page }) => {
+		const searchInput = page.locator('input[placeholder="Search Stream"]');
+		await searchInput.fill('backend');
+		await expect(page.locator('text=backend')).toBeVisible();
+
+		// Clear the search and check if both streams are visible
+		await searchInput.fill('');
+		await expect(page.locator('text=backend')).toBeVisible();
+		await expect(page.locator('text=frontend')).toBeVisible();
+	});
+
+	test('should display empty state if no streams are available', async ({ page }) => {
+		const searchInput = page.locator('input[placeholder="Search Stream"]');
+		await searchInput.fill(Math.random().toString());
+
+		// Expect empty state view to be visible
+		await expect(page.locator('text=No Stream found on this account')).toBeVisible();
+		await expect(page.locator('text=All Streams (0)')).toBeVisible();
+	});
+
+	test('should display the create stream button', async ({ page }) => {
+		const createButton = page.locator('text=Create Stream');
+		await expect(createButton).toBeVisible();
+	});
+
+	test('should display the create stream modal on click', async ({ page }) => {
+		const createButton = page.locator('text=Create Stream');
+		await expect(createButton).toBeVisible();
+		await createButton.click();
+		await expect(page.locator('text=Create Stream').nth(1)).toBeVisible();
+	});
+
+	test.describe('Create Stream Modal', () => {
+		test.beforeEach(async ({ page }) => {
+			const createButton = page.locator('text=Create Stream');
+			await createButton.click();
+		});
+
+		test('should render the form correctly', async ({ page }) => {
+			// Check if essential elements are present in the form
+			await expect(page.locator('input[placeholder="Name"]')).toBeVisible();
+			await expect(page.locator('text=Schema Type')).toBeVisible();
+			await expect(page.locator('button:has-text("Create")').nth(1)).toBeVisible();
+		});
+
+		test('should enable the submit button when form is valid', async ({ page }) => {
+			// Fill in the form with valid values
+			await page.fill('input[placeholder="Name"]', 'PlaywrightStream');
+
+			await page.locator('button:has-text("Create")').nth(1).click();
+			await page.waitForTimeout(1000);
+		});
+
+		test.describe('Delete Stream', () => {
+			test('search, navigate, and delete demo stream', async ({ page }) => {
+				// Step 1: Search for the demo stream
+				await page.goto(`${TEST_URL}`);
+				const searchInput = page.locator('input[placeholder="Search Stream"]');
+				await searchInput.fill('PlaywrightStream');
+				await expect(page.locator('text=PlaywrightStream')).toBeVisible();
+
+				// Step 2: Navigate to the demo stream
+				await page.locator('text=PlaywrightStream').click();
+				const manageBtn = page.locator('[data-id="manage-stream-btn"]');
+				await expect(manageBtn).toBeVisible();
+				await manageBtn.click();
+
+				await page.waitForTimeout(1000);
+
+				// Step 3: Delete the demo stream
+				const deleteBtn = page.locator('[data-id="delete-stream-btn"]');
+				await expect(deleteBtn).toBeVisible();
+				await deleteBtn.click();
+				await expect(page.locator('text=Delete Stream')).toBeVisible();
+				await page.fill('input[placeholder*="Type the name of the stream to confirm. i.e."]', 'PlaywrightStream');
+				const confirmDeleteBtn = page.getByRole('button', { name: 'Delete' });
+				await expect(confirmDeleteBtn).toBeEnabled();
+				await confirmDeleteBtn.click();
+
+				await page.waitForTimeout(1000);
+
+				// Step 4: Check if stream is deleted
+				await page.goto(`${TEST_URL}`);
+				await expect(searchInput).toBeVisible();
+				await searchInput.fill('PlaywrightStream');
+				await expect(page.locator('text=No Stream found on this account')).toBeVisible();
+				await expect(page.locator('text=All Streams (0)')).toBeVisible();
+			});
+		});
+	});
+});

From 72976160a9c0cc3db93b7a6bae02929c877fdcb5 Mon Sep 17 00:00:00 2001
From: Pranav Goel <48860494+pranavgoel29@users.noreply.github.com>
Date: Sat, 16 Nov 2024 16:47:53 +0530
Subject: [PATCH 2/8] chore: add users roles pages tests automation (#373)

---
 package.json                                  |   4 +-
 src/components/Button/IconButton.tsx          |   3 +
 src/hooks/useGetStreamMetadata.ts             |   4 +-
 src/pages/AccessManagement/PrivilegeTR.tsx    |   2 +-
 src/pages/AccessManagement/Roles.tsx          |  16 +-
 src/pages/Dashboards/CreateTileForm.tsx       |   6 +-
 src/pages/Dashboards/assets/templates.tsx     |  12 +-
 .../Stream/Views/Explore/StaticLogTable.tsx   |   2 +-
 src/pages/Stream/Views/Manage/Alerts.tsx      |   4 +-
 src/pages/Stream/providers/LogsProvider.tsx   |  17 +-
 src/pages/Stream/providers/StreamProvider.tsx |   2 +-
 src/pages/Systems/ServerList.tsx              |   4 +-
 tests/helpers/users_roles.ts                  |  75 +++++++
 tests/users_roles.spec.ts                     | 185 ++++++++++++++++++
 tsconfig.json                                 |  25 ++-
 15 files changed, 323 insertions(+), 38 deletions(-)
 create mode 100644 tests/helpers/users_roles.ts
 create mode 100644 tests/users_roles.spec.ts

diff --git a/package.json b/package.json
index 161efca0..17a973a6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
 		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"start": "vite preview --host --port 3002",
 		"tsCheck": "tsc --noEmit",
-		"pq": "pretty-quick"
+		"pq": "pretty-quick",
+		"test": "playwright test",
+		"test-ui": "playwright test --ui"
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^14.0.2",
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
index ef64bdb3..26d5292d 100644
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -5,6 +5,7 @@ import classes from './Button.module.css';
 type IconButtonProps = {
 	onClick?: () => void;
 	renderIcon: () => ReactNode;
+	data_id?: string;
 	icon?: ReactNode;
 	active?: boolean;
 	tooltipLabel?: string;
@@ -17,6 +18,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 		return (
 			<Tooltip label={tooltipLabel}>
 				<ActionIcon
+					data-testId={props.data_id}
 					size={props.size ? props.size : 'xl'}
 					className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 					onClick={props.onClick && props.onClick}>
@@ -27,6 +29,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 	} else {
 		return (
 			<ActionIcon
+				data-testId={props.data_id}
 				size={props.size ? props.size : 'xl'}
 				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 				onClick={props.onClick && props.onClick}>
diff --git a/src/hooks/useGetStreamMetadata.ts b/src/hooks/useGetStreamMetadata.ts
index bb2c3da7..7619b89f 100644
--- a/src/hooks/useGetStreamMetadata.ts
+++ b/src/hooks/useGetStreamMetadata.ts
@@ -15,8 +15,8 @@ export type MetaData = {
 
 // until dedicated endpoint been provided - fetch one by one
 export const useGetStreamMetadata = () => {
-	const [isLoading, setLoading] = useState<Boolean>(true);
-	const [error, setError] = useState<Boolean>(false);
+	const [isLoading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<boolean>(false);
 	const [metaData, setMetadata] = useState<MetaData | null>(null);
 	const [userRoles] = useAppStore((store) => store.userRoles);
 
diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx
index d20b77c1..e91d75c4 100644
--- a/src/pages/AccessManagement/PrivilegeTR.tsx
+++ b/src/pages/AccessManagement/PrivilegeTR.tsx
@@ -274,7 +274,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 							<Button
 								variant="default"
 								className={classes.actionBtn}
-								aria-label="Delete user"
+								aria-label="Delete Role"
 								onClick={() => {
 									openDeleteRole();
 								}}>
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index edc88d2b..02bf09b8 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -167,10 +167,13 @@ const Roles: FC = () => {
 	return (
 		<Box className={classes.container}>
 			<Stack className={classes.header} gap={0}>
-				<Text style={{ fontWeight: 600 }}>Roles</Text>
+				<Text component="h2" style={{ fontWeight: 600 }}>
+					Roles
+				</Text>
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
+						data-testId="create-role-button"
 						rightSection={<IconUserPlus size={px('1rem')} stroke={1.5} />}
 						onClick={() => {
 							setModalOpen(true);
@@ -187,7 +190,7 @@ const Roles: FC = () => {
 							Set Default OIDC Role{' '}
 						</Button>
 					)}
-					<IconButton renderIcon={renderDocsIcon} onClick={navigateToDocs} tooltipLabel="Docs" />
+					<IconButton renderIcon={renderDocsIcon} onClick={navigateToDocs} tooltipLabel="Docs" data_id="roles-docs" />
 				</Stack>
 			</Stack>
 			<ScrollArea className={classes.tableContainer} type="always">
@@ -207,6 +210,7 @@ const Roles: FC = () => {
 				onClose={handleDefaultRoleModalClose}
 				title="Set default oidc role"
 				centered
+				styles={{ title: { fontWeight: 500 } }}
 				className={classes.modalStyle}>
 				<Stack>
 					<Select
@@ -310,12 +314,18 @@ const Roles: FC = () => {
 					<Button
 						variant="filled"
 						color="gray"
+						data-testId="create-role-modal-button"
 						className={classes.modalActionBtn}
 						disabled={createVaildtion()}
 						onClick={handleCreateRole}>
 						Create
 					</Button>
-					<Button onClick={handleClose} variant="outline" color="gray" className={classes.modalCancelBtn}>
+					<Button
+						onClick={handleClose}
+						variant="outline"
+						color="gray"
+						data-testId="cancel-role-modal-button"
+						className={classes.modalCancelBtn}>
 						Cancel
 					</Button>
 				</Group>
diff --git a/src/pages/Dashboards/CreateTileForm.tsx b/src/pages/Dashboards/CreateTileForm.tsx
index 5100633d..37bca145 100644
--- a/src/pages/Dashboards/CreateTileForm.tsx
+++ b/src/pages/Dashboards/CreateTileForm.tsx
@@ -527,14 +527,14 @@ const sanitizeFormValues = (form: TileFormType, type: 'create' | 'update'): Edit
 };
 
 const defaultVizOpts = {
-	visualization_type: 'donut-chart' as 'donut-chart',
+	visualization_type: 'donut-chart' as const,
 	size: 'sm',
 	color_config: [],
 	tick_config: [],
 	circular_chart_config: {},
 	graph_config: { x_key: '', y_keys: [] },
-	orientation: 'horizontal' as 'horizontal',
-	graph_type: 'default' as 'default',
+	orientation: 'horizontal' as const,
+	graph_type: 'default' as const,
 };
 
 const defaultFormOpts = {
diff --git a/src/pages/Dashboards/assets/templates.tsx b/src/pages/Dashboards/assets/templates.tsx
index 1d9c30b1..ba1d28e9 100644
--- a/src/pages/Dashboards/assets/templates.tsx
+++ b/src/pages/Dashboards/assets/templates.tsx
@@ -12,7 +12,7 @@ const pmetaConfig = {
 			query: 'select MAX(parseable_events_ingested), address from pmeta GROUP BY address LIMIT 100',
 			order: 1,
 			visualization: {
-				visualization_type: 'donut-chart' as 'donut-chart',
+				visualization_type: 'donut-chart' as const,
 				circular_chart_config: {
 					name_key: 'address',
 					value_key: 'MAX(pmeta.parseable_events_ingested)',
@@ -30,7 +30,7 @@ const pmetaConfig = {
 				"select a.time,SUM(a.current_events) as current_events, SUM(a.lifetime_events) as lifetime_events, SUM(a.deleted_events) as deleted_events from (select MAX(parseable_events_ingested) as current_events, MAX(parseable_lifetime_events_ingested) as lifetime_events, MAX(parseable_deleted_events_ingested) as deleted_events, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
 			order: 2,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
@@ -67,7 +67,7 @@ const pmetaConfig = {
 			query: 'SELECT MAX(process_resident_memory_bytes) as memory_usage, address FROM pmeta GROUP BY address LIMIT 100',
 			order: 3,
 			visualization: {
-				visualization_type: 'pie-chart' as 'pie-chart',
+				visualization_type: 'pie-chart' as const,
 				circular_chart_config: {
 					name_key: 'address',
 					value_key: 'memory_usage',
@@ -85,7 +85,7 @@ const pmetaConfig = {
 				"select a.time, SUM(a.current_events_size) as current_events_size, SUM(a.lifetime_events_size) as lifetime_events_size, SUM(a.deleted_events_size) as deleted_events_size from (select MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_lifetime_events_ingested_size) as lifetime_events_size, MAX(parseable_deleted_events_ingested_size) as deleted_events_size, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
 			order: 4,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
@@ -135,7 +135,7 @@ const pmetaConfig = {
 				"SELECT MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_storage_size_data) as current_data_size FROM pmeta where address='http://ec2-3-15-172-147.us-east-2.compute.amazonaws.com:443/' LIMIT 100",
 			order: 5,
 			visualization: {
-				visualization_type: 'table' as 'table',
+				visualization_type: 'table' as const,
 				circular_chart_config: null,
 				graph_config: null,
 				size: 'sm',
@@ -159,7 +159,7 @@ const pmetaConfig = {
 				"select DATE_BIN('10 minutes', p_timestamp, NOW()) AS time, MAX(process_resident_memory_bytes) as process_resident_memory_bytes from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time LIMIT 100",
 			order: 6,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
index b3964013..e9b638da 100644
--- a/src/pages/Stream/Views/Explore/StaticLogTable.tsx
+++ b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
@@ -120,7 +120,7 @@ const Table = (props: { primaryHeaderHeight: number }) => {
 					overflow: 'hidden',
 					textOverflow: 'ellipsis',
 					display: 'table-cell',
-					...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as 'nowrap' } : {}),
+					...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as const } : {}),
 				},
 			};
 		},
diff --git a/src/pages/Stream/Views/Manage/Alerts.tsx b/src/pages/Stream/Views/Manage/Alerts.tsx
index d65173b7..503ea51d 100644
--- a/src/pages/Stream/Views/Manage/Alerts.tsx
+++ b/src/pages/Stream/Views/Manage/Alerts.tsx
@@ -22,7 +22,7 @@ import ErrorView from './ErrorView';
 import RestrictedView from '@/components/Misc/RestrictedView';
 
 const defaultColumnTypeConfig = { column: '', operator: '=', value: '', repeats: 1, ignoreCase: false };
-const defaultColumnTypeRule = { type: 'column' as 'column', config: defaultColumnTypeConfig };
+const defaultColumnTypeRule = { type: 'column' as const, config: defaultColumnTypeConfig };
 const { transformAlerts } = streamStoreReducers;
 
 const stringOperators = [
@@ -574,7 +574,7 @@ const AlertsModal = (props: {
 	);
 };
 
-const Header = (props: { selectAlert: selectAlert; isLoading: boolean, showCreateBtn: boolean }) => {
+const Header = (props: { selectAlert: selectAlert; isLoading: boolean; showCreateBtn: boolean }) => {
 	return (
 		<Stack className={classes.headerContainer} style={{ minHeight: '3rem', maxHeight: '3rem' }}>
 			<Text className={classes.title}>Alerts</Text>
diff --git a/src/pages/Stream/providers/LogsProvider.tsx b/src/pages/Stream/providers/LogsProvider.tsx
index 684e8d42..ddad7682 100644
--- a/src/pages/Stream/providers/LogsProvider.tsx
+++ b/src/pages/Stream/providers/LogsProvider.tsx
@@ -135,7 +135,7 @@ const getDefaultTimeRange = (duration: FixedDuration = DEFAULT_FIXED_DURATIONS)
 	return {
 		startTime: startTime.toDate(),
 		endTime: now.toDate(),
-		type: 'fixed' as 'fixed',
+		type: 'fixed' as const,
 		label,
 		interval: milliseconds,
 		shiftInterval: 1,
@@ -152,7 +152,7 @@ const defaultQuickFilters = {
 };
 
 const defaultLiveTailConfig = {
-	liveTailStatus: '' as '',
+	liveTailStatus: '' as const,
 	liveTailSchemaData: [],
 	liveTailSearchValue: '',
 	liveTailSearchField: '',
@@ -298,7 +298,7 @@ type LogsStoreReducers = {
 };
 
 const defaultSortKey = 'p_timestamp';
-const defaultSortOrder = 'desc' as 'desc';
+const defaultSortOrder = 'desc' as const;
 
 const initialState: LogsStore = {
 	timeRange: getDefaultTimeRange(),
@@ -464,7 +464,7 @@ const setCustQuerySearchState = (store: LogsStore, query: string, viewMode: stri
 			isQuerySearchActive: true,
 			custSearchQuery: query,
 			viewMode,
-			activeMode: viewMode === 'filters' ? ('filters' as 'filters') : ('sql' as 'sql'),
+			activeMode: viewMode === 'filters' ? ('filters' as const) : ('sql' as const),
 		},
 		...getCleanStoreForRefetch(store),
 		timeRange,
@@ -757,7 +757,7 @@ const applyCustomQuery = (
 					endTime: endTime.toDate(),
 					label,
 					interval,
-					type: 'custom' as 'custom', // always
+					type: 'custom' as const, // always
 				},
 			};
 		}
@@ -810,7 +810,7 @@ const setAndSortData = (store: LogsStore, sortKey: string, sortOrder: 'asc' | 'd
 	};
 };
 
-const setAndFilterData = (store: LogsStore, filterKey: string, filterValues: string[], remove: boolean = false) => {
+const setAndFilterData = (store: LogsStore, filterKey: string, filterValues: string[], remove = false) => {
 	const { data, tableOpts } = store;
 	const { sortKey, sortOrder, filters } = tableOpts;
 	const updatedFilters = remove ? _.omit(filters, filterKey) : { ...filters, [filterKey]: filterValues };
@@ -903,7 +903,7 @@ const setRetention = (_store: LogsStore, retention: { duration?: string; descrip
 		retention: {
 			duration: durationInNumber,
 			description: retention.description || '',
-			action: 'delete' as 'delete',
+			action: 'delete' as const,
 		},
 	};
 };
@@ -941,8 +941,7 @@ const onToggleView = (store: LogsStore, viewMode: 'json' | 'table') => {
 };
 
 const toggleConfigViewType = (store: LogsStore) => {
-	const configViewType =
-		store.tableOpts.configViewType === 'schema' ? ('columns' as 'columns') : ('schema' as 'schema');
+	const configViewType: 'columns' | 'schema' = store.tableOpts.configViewType === 'schema' ? 'columns' : 'schema';
 
 	return {
 		tableOpts: {
diff --git a/src/pages/Stream/providers/StreamProvider.tsx b/src/pages/Stream/providers/StreamProvider.tsx
index daf5637d..4be24140 100644
--- a/src/pages/Stream/providers/StreamProvider.tsx
+++ b/src/pages/Stream/providers/StreamProvider.tsx
@@ -208,7 +208,7 @@ const setRetention = (_store: StreamStore, retention: { duration?: string; descr
 		retention: {
 			duration: durationInNumber,
 			description: retention.description || '',
-			action: 'delete' as 'delete',
+			action: 'delete' as const,
 		},
 	};
 };
diff --git a/src/pages/Systems/ServerList.tsx b/src/pages/Systems/ServerList.tsx
index e292639d..27149d04 100644
--- a/src/pages/Systems/ServerList.tsx
+++ b/src/pages/Systems/ServerList.tsx
@@ -56,8 +56,8 @@ const List = () => {
 	const { getClusterInfoSuccess, getClusterInfoRefetch } = useClusterInfo();
 	const [clusterStore] = useClusterStore((store) => store);
 	const { ingestorMachines: ingestorsInStore, querierMachine } = clusterStore;
-	const querier = { ...querierMachine, type: 'querier' as 'querier' };
-	const ingestors = _.map(ingestorsInStore, (ingestors) => ({ ...ingestors, type: 'ingestor' as 'ingestor' }));
+	const querier = { ...querierMachine, type: 'querier' as const };
+	const ingestors = _.map(ingestorsInStore, (ingestors) => ({ ...ingestors, type: 'ingestor' as const }));
 
 	useEffect(() => {
 		getClusterInfoRefetch();
diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts
new file mode 100644
index 00000000..0ecbe84b
--- /dev/null
+++ b/tests/helpers/users_roles.ts
@@ -0,0 +1,75 @@
+import { Page, expect } from '@playwright/test';
+
+/**
+ * Creates a new role in the application.
+ *
+ * @param page - The Playwright Page object representing the browser page.
+ * @param ROLE_NAME - The name of the role to be created.
+ * @param ACCESS - The access level to be assigned to the role.
+ *
+ * @returns A promise that resolves when the role creation process is complete.
+ */
+const createNewRole = async (page: Page, ROLE_NAME: string, ACCESS: string) => {
+	const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+	await createRoleButton.click();
+	const roleNameInputCreate = page.getByPlaceholder('Type the name of the Role to create');
+	await roleNameInputCreate.fill(ROLE_NAME);
+
+	const accessLevelDropdown = page.getByPlaceholder('Select privilege');
+	await accessLevelDropdown.click();
+	await page
+		.locator('.mantine-Select-option')
+		.filter({ hasText: `${ACCESS}` })
+		.click();
+
+	// Wait for one second
+	await page.waitForTimeout(1000);
+	// Check if the Create button is enabled
+	const createButton = page.getByTestId('create-role-modal-button');
+	await expect(createButton).toBeEnabled();
+	await createButton.click();
+};
+
+/**
+ * Deletes a role if it exists in the roles table on the given page.
+ *
+ * @param page - The Playwright Page object representing the browser page.
+ * @param ROLE_NAME - The name of the role to be deleted.
+ *
+ * @remarks
+ * This function locates the roles table on the page, checks if the specified role exists,
+ * and if it does, clicks the delete button, confirms the deletion, and verifies that the role
+ * is no longer visible in the table.
+ */
+const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
+	const rolesTable = page.locator('table').filter({
+		has: page
+			.locator('thead tr')
+			.filter({
+				has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+			})
+			.filter({
+				has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+			}),
+	});
+
+	const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+	const roleRowCount = await roleRow.count();
+
+	if (roleRowCount !== 0) {
+		const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
+		await deleteButton.click();
+
+		await page.waitForSelector('text=Are you sure you want to delete this role?');
+		const roleNameInput = page.getByPlaceholder('Please enter the Role');
+		await roleNameInput.fill(ROLE_NAME);
+
+		const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
+		await expect(confirmDeleteButton).toBeEnabled();
+		await confirmDeleteButton.click();
+
+		await expect(roleRow).not.toBeVisible();
+	}
+};
+
+export { createNewRole, deleteIfRoleExists };
diff --git a/tests/users_roles.spec.ts b/tests/users_roles.spec.ts
new file mode 100644
index 00000000..33a47c4d
--- /dev/null
+++ b/tests/users_roles.spec.ts
@@ -0,0 +1,185 @@
+import { test, expect, BrowserContext } from '@playwright/test';
+import { createNewRole, deleteIfRoleExists } from './helpers/users_roles';
+
+const TEST_URL = 'http://localhost:3001/users';
+const ROLE_NAME = 'playwright-test-role';
+
+test.describe('users_roles section', () => {
+	let context: BrowserContext;
+	test.beforeEach(async ({ browser }) => {
+		context = await browser.newContext();
+		await context.newPage();
+	});
+
+	test.afterEach(async () => {
+		await context.close();
+	});
+
+	// Check if the page title is correct i.e. Parseable | Users
+	test('has title', async ({ page }) => {
+		await page.goto(TEST_URL);
+		await expect(page).toHaveTitle(/Parseable | Users/);
+	});
+
+	test('should have a table with Roles', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Roles heading is visible
+		await expect(page.getByRole('heading', { name: 'Roles' })).toBeVisible();
+
+		// Check if the table with the correct headers is visible
+		const rolesTable = page.locator('table').filter({
+			// Check if the table has thead with Role and Access columns
+			has: page
+				.locator('thead tr')
+				.filter({
+					has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+				})
+				.filter({
+					has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+				}),
+		});
+
+		await expect(rolesTable).toBeVisible();
+
+		// Check if the table has rows (excluding the header row)
+		const rows = rolesTable.locator('tbody tr');
+		const rowCount = await rows.count(); // Get the number of rows in the table
+		expect(rowCount).toBeGreaterThan(0);
+	});
+
+	test('should have a button to create a new Role', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Create Role button is visible
+		const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+		await expect(createRoleButton).toBeVisible();
+	});
+
+	test('should open the Create Role Modal when the Create Role button is clicked', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Click on the Create Role button
+		const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+		await createRoleButton.click();
+
+		// Check if the Create Role Modal is visible
+		await expect(page.locator('text=Enter the name of the Role')).toBeVisible();
+	});
+
+	test.describe('Create Role Modal', () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto(TEST_URL);
+
+			// const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+			// await createRoleButton.click();
+		});
+
+		test('create role modal should have the required elements', async ({ page }) => {
+			const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+			await createRoleButton.click();
+
+			await expect(page.getByPlaceholder('Type the name of the Role to create')).toBeVisible();
+			await expect(page.getByPlaceholder('Select privilege')).toBeVisible();
+			await expect(page.getByTestId('create-role-modal-button')).toBeDisabled();
+			await expect(page.getByTestId('cancel-role-modal-button')).toBeVisible();
+			// close the modal
+			await page.getByTestId('cancel-role-modal-button').click();
+			await expect(page.locator('text=Enter the name of the Role')).not.toBeVisible();
+		});
+
+		test('create a new Role', async ({ page }) => {
+			// Wait for one second
+			await page.waitForTimeout(1000);
+
+			// check if loading text is not visible on the roles section
+			await expect(
+				page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td'),
+			).not.toBeVisible();
+
+			// Delete the 'playwright-test-role' if it already exists
+			await deleteIfRoleExists(page, ROLE_NAME);
+
+			// Create a new Role
+			await createNewRole(page, ROLE_NAME, 'admin');
+
+			// wait for the modal to close, and the new Role to be added to the table
+			await page.waitForSelector('text=Enter the name of the Role', { state: 'detached' });
+			const newRoleRow = page.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			await expect(newRoleRow).toBeVisible();
+			const newRoleAccess = newRoleRow.locator('td').nth(1);
+			// check if new role has admin access
+			await expect(newRoleAccess).toHaveText('admin');
+		});
+
+		test('delete the newly created Role', async ({ page }) => {
+			// Wait for one second
+			await page.waitForTimeout(1000);
+
+			// check if loading text is not visible on the roles section
+			await expect(
+				page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td'),
+			).not.toBeVisible();
+
+			const rolesTable = page.locator('table').filter({
+				has: page
+					.locator('thead tr')
+					.filter({
+						has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+					})
+					.filter({
+						has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+					}),
+			});
+
+			const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			const roleRowCount = await roleRow.count();
+
+			if (roleRowCount === 0) {
+				// Create a new Role
+				await createNewRole(page, ROLE_NAME, 'admin');
+			} else {
+				// Delete the newly created Role
+				await deleteIfRoleExists(page, ROLE_NAME);
+			}
+
+			await page.waitForSelector('text=Are you sure you want to delete this role', { state: 'detached' });
+			await expect(rolesTable).toBeVisible();
+
+			const deletedRoleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			await expect(deletedRoleRow).not.toBeVisible();
+		});
+	});
+
+	test('should have a button to set the default OIDC Role', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Set Default OIDC Role button is visible
+		const setDefaultRoleButton = page.getByRole('button', { name: 'Set Default OIDC Role' });
+		await expect(setDefaultRoleButton).toBeVisible();
+	});
+
+	test('should have a button to navigate to the Docs', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Docs button is visible
+		const docsButton = page.getByTestId('roles-docs');
+		await expect(docsButton).toBeVisible();
+	});
+
+	test('Should navigate to the Docs page when the Docs button is clicked', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Click on the Docs button and wait for a new page to open
+		const [newPage] = await Promise.all([
+			page.waitForEvent('popup'), // Wait for a new tab (popup) to open
+			page.getByTestId('roles-docs').click(),
+		]);
+
+		// Verify that the new page's URL matches the expected URL
+		await newPage.waitForLoadState();
+		// Wait for the page to load and check if the heading is present
+		const heading = newPage.locator('h1', { hasText: 'Role Based Access Control' });
+		await expect(heading).toBeVisible();
+	});
+});
diff --git a/tsconfig.json b/tsconfig.json
index ce947166..add17ee2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,19 @@
 {
 	"compilerOptions": {
 		"target": "ESNext",
-		"lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"lib": [
+			"DOM",
+			"DOM.Iterable",
+			"ESNext"
+		],
 		"module": "ESNext",
 		"skipLibCheck": true,
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["src/*"]
+			"@/*": [
+				"src/*"
+			]
 		},
-
 		/* Bundler mode */
 		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
@@ -16,13 +21,19 @@
 		"isolatedModules": true,
 		"noEmit": true,
 		"jsx": "react-jsx",
-
 		/* Linting */
 		"strict": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noFallthroughCasesInSwitch": true
 	},
-	"include": ["src"],
-	"references": [{ "path": "./tsconfig.node.json" }]
-}
+	"include": [
+		"src/**/*",
+		"tests/**/*"
+	],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}
\ No newline at end of file

From dce6ffdbf14a43c7f01de108930fcdfb2a5944d3 Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:06:01 +0530
Subject: [PATCH 3/8] fix: header and NoStreamView on empty stream case (#379)

---
 src/hooks/useGetStreamMetadata.ts    | 2 +-
 src/pages/AccessManagement/Roles.tsx | 2 +-
 src/pages/Home/index.tsx             | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useGetStreamMetadata.ts b/src/hooks/useGetStreamMetadata.ts
index 7619b89f..0cdc9712 100644
--- a/src/hooks/useGetStreamMetadata.ts
+++ b/src/hooks/useGetStreamMetadata.ts
@@ -15,7 +15,7 @@ export type MetaData = {
 
 // until dedicated endpoint been provided - fetch one by one
 export const useGetStreamMetadata = () => {
-	const [isLoading, setLoading] = useState<boolean>(true);
+	const [isLoading, setLoading] = useState<boolean>(false);
 	const [error, setError] = useState<boolean>(false);
 	const [metaData, setMetadata] = useState<MetaData | null>(null);
 	const [userRoles] = useAppStore((store) => store.userRoles);
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 02bf09b8..43073c48 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -10,7 +10,7 @@ import IconButton from '@/components/Button/IconButton';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
 const navigateToDocs = () => {
-	return window.open('https://www.parseable.io/docs/rbac', '_blank');
+	return window.open('https://www.parseable.com/docs/server/api/rbac', '_blank');
 };
 
 const renderDocsIcon = () => <IconBook2 stroke={1.5} size="1rem" />;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d47707e8..b46c3e3a 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -126,7 +126,7 @@ const Home: FC = () => {
 
 	return (
 		<>
-			{!shouldDisplayEmptyPlaceholder && (
+			{((Array.isArray(userSpecificStreams) && userSpecificStreams.length > 0) || searchTerm) && (
 				<Stack
 					style={{
 						padding: '1rem',
@@ -187,7 +187,7 @@ const Home: FC = () => {
 								<NoStreamsView
 									hasCreateStreamAccess={hasCreateStreamAccess}
 									openCreateStreamModal={openCreateStreamModal}
-									shouldHideFooter
+									shouldHideFooter={Array.isArray(userSpecificStreams) && userSpecificStreams.length > 0}
 								/>
 							) : (
 								<Group style={{ margin: '0 1rem', gap: '1rem' }}>

From 3b98fc12f565125a614fad317f6311a788b4d7c5 Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:06:43 +0530
Subject: [PATCH 4/8] feat: add saved filters SQL query to the dashboard tile
 editor (#361)

---
 src/pages/Dashboards/CreateTileForm.tsx       | 23 ++++++++--
 src/pages/Dashboards/index.tsx                | 46 ++++++++++---------
 .../components/Querier/SavedFiltersModal.tsx  | 34 +++++++++-----
 src/pages/Stream/providers/FilterProvider.tsx | 11 +++++
 src/routes/elements.tsx                       |  4 +-
 5 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/src/pages/Dashboards/CreateTileForm.tsx b/src/pages/Dashboards/CreateTileForm.tsx
index 37bca145..e0eab6bd 100644
--- a/src/pages/Dashboards/CreateTileForm.tsx
+++ b/src/pages/Dashboards/CreateTileForm.tsx
@@ -3,7 +3,7 @@ import classes from './styles/Form.module.css';
 import { useForm } from '@mantine/form';
 import { useDashboardsStore, dashboardsStoreReducers } from './providers/DashboardsProvider';
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import _ from 'lodash';
 import { getLogStreamSchema } from '@/api/logStream';
 import { Field } from '@/@types/parseable/dataType';
@@ -29,6 +29,7 @@ import TimeRange from '@/components/Header/TimeRange';
 import { colors, isCircularChart, isGraph, normalizeGraphColorConfig } from './Charts';
 import { usePostLLM } from '@/hooks/usePostLLM';
 import { notify } from '@/utils/notification';
+import { filterStoreReducers, useFilterStore } from '../Stream/providers/FilterProvider';
 
 const selectDashboardWarningText = 'Select a dashboard to continue';
 const validateQueryWarningText = 'Validate query to continue';
@@ -37,6 +38,8 @@ const noDataWarning = 'No data available for the query';
 const invalidVizConfig = 'Invalid visualization config';
 
 const { toggleVizEditorModal, toggleCreateTileModal } = dashboardsStoreReducers;
+const { toggleSavedFiltersModal, setAppliedFilterQuery } = filterStoreReducers;
+const { changeStream } = appStoreReducers;
 
 const getErrorMsg = (form: TileFormType, configType: 'basic' | 'data' | 'viz'): string | null => {
 	const { dashboardId, isQueryValidated, data, visualization } = form.values;
@@ -289,14 +292,20 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 	const [initialHeight, setInitialHeight] = useState(0);
 	const [dashboards] = useDashboardsStore((store) => store.dashboards);
 	const [timeRange] = useLogsStore((store) => store.timeRange);
+	const [appliedFilterQuery, setLogsStore] = useFilterStore((store) => store.appliedFilterQuery);
 	const [aiQuery, setAiQuery] = useState('');
 	const [userSpecificStreams] = useAppStore((store) => store.userSpecificStreams);
+	const [, setAppStore] = useAppStore((store) => store.maximized);
 	const allStreams = useMemo(
 		() => _.map(userSpecificStreams, (stream) => ({ label: stream.name, value: stream.name })),
 		[userSpecificStreams],
 	);
 	const { data: resAIQuery, postLLMQuery } = usePostLLM();
 
+	useEffect(() => {
+		onEditorChange(appliedFilterQuery);
+	}, [appliedFilterQuery]);
+
 	const onEditorChange = useCallback((query: string | undefined) => {
 		onChangeValue('query', query || '');
 		onChangeValue('isQueryValidated', false);
@@ -348,10 +357,15 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 		});
 	}, [query, dashboardId, dashboards, timeRange]);
 
-	const onStreamSelect = useCallback((val: string | null) => {
-		setLocalStream(val || '');
+	const onStreamSelect = useCallback((stream: string | null) => {
+		if (stream) {
+			setAppStore((store) => changeStream(store, stream));
+			setLogsStore((store) => setAppliedFilterQuery(store, ''));
+		}
+		setLocalStream(stream || '');
 	}, []);
 
+	const onClick = useCallback(() => setLogsStore((store) => toggleSavedFiltersModal(store, true)), []);
 	const isValidStream = !_.isEmpty(localStream);
 	const handleAIGenerate = useCallback(() => {
 		if (!aiQuery?.length) {
@@ -375,6 +389,9 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 						key="stream"
 						placeholder="Select Stream"
 					/>
+					<Button disabled={!localStream} className={classes.savedFiltersBtn} h="100%" onClick={onClick}>
+						Saved Filters
+					</Button>
 				</Stack>
 			</Stack>
 			{errorMsg && <Text className={classes.warningText}>{errorMsg}</Text>}
diff --git a/src/pages/Dashboards/index.tsx b/src/pages/Dashboards/index.tsx
index d9304fa5..07c497d6 100644
--- a/src/pages/Dashboards/index.tsx
+++ b/src/pages/Dashboards/index.tsx
@@ -12,6 +12,7 @@ import { useSyncTimeRange } from './hooks';
 import _ from 'lodash';
 import useParamsController from './hooks/useParamsController';
 import { useDocumentTitle } from '@mantine/hooks';
+import SavedFiltersModal from '../Stream/components/Querier/SavedFiltersModal';
 
 const LoadingView = () => {
 	return (
@@ -35,27 +36,30 @@ const Dashboards = () => {
 	}, [isStoreSynced]);
 
 	return (
-		<Box
-			style={{
-				flex: 1,
-				display: 'flex',
-				position: 'relative',
-				flexDirection: 'row',
-				width: '100%',
-				overflow: 'hidden',
-			}}>
-			{dashboards === null || !isStoreSynced ? (
-				<LoadingView />
-			) : createTileFormOpen ? (
-				<CreateTileForm />
-			) : (
-				<>
-					<SideBar updateTimeRange={updateTimeRange} />
-					<CreateDashboardModal />
-					<Dashboard />
-				</>
-			)}
-		</Box>
+		<>
+			<SavedFiltersModal />
+			<Box
+				style={{
+					flex: 1,
+					display: 'flex',
+					position: 'relative',
+					flexDirection: 'row',
+					width: '100%',
+					overflow: 'hidden',
+				}}>
+				{dashboards === null || !isStoreSynced ? (
+					<LoadingView />
+				) : createTileFormOpen ? (
+					<CreateTileForm />
+				) : (
+					<>
+						<SideBar updateTimeRange={updateTimeRange} />
+						<CreateDashboardModal />
+						<Dashboard />
+					</>
+				)}
+			</Box>
+		</>
 	);
 };
 
diff --git a/src/pages/Stream/components/Querier/SavedFiltersModal.tsx b/src/pages/Stream/components/Querier/SavedFiltersModal.tsx
index c06cabb7..edd63abd 100644
--- a/src/pages/Stream/components/Querier/SavedFiltersModal.tsx
+++ b/src/pages/Stream/components/Querier/SavedFiltersModal.tsx
@@ -13,8 +13,10 @@ import { EmptySimple } from '@/components/Empty';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import useSavedFiltersQuery from '@/hooks/useSavedFilters';
 import { generateQueryBuilderASTFromSQL } from '../../utils';
+import { useLocation } from 'react-router-dom';
 
-const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters } = filterStoreReducers;
+const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters, setAppliedFilterQuery } =
+	filterStoreReducers;
 const { applyCustomQuery, updateSavedFilterId, getCleanStoreForRefetch, setTimeRange } = logsStoreReducers;
 
 const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
@@ -58,6 +60,9 @@ const SavedFilterItem = (props: {
 	const [showDeletePropmt, setShowDeletePrompt] = useState<boolean>(false);
 	const { deleteSavedFilterMutation, isDeleting, isRefetching } = useSavedFiltersQuery();
 
+	const location = useLocation();
+	const [, setFilterStore] = useFilterStore((_store) => null);
+
 	const toggleShowQuery = useCallback(() => {
 		return setShowQuery((prev) => !prev);
 	}, []);
@@ -78,22 +83,27 @@ const SavedFilterItem = (props: {
 	}, [time_filter, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);
 
 	const onApplyFilters = useCallback(() => {
-		if (query.filter_query) {
-			if (query.filter_type === 'sql') {
-				props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
-			} else {
+		if (location.pathname.includes('dashboard')) {
+			setFilterStore((store) => setAppliedFilterQuery(store, query.filter_query));
+			setFilterStore((store) => toggleSavedFiltersModal(store, false));
+		} else {
+			if (query.filter_query) {
+				if (query.filter_type === 'sql') {
+					props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
+				} else {
+					if (filter_id !== savedFilterId) {
+						props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
+					} else {
+						handleTimeFilter();
+					}
+				}
+			} else if (query.filter_builder) {
 				if (filter_id !== savedFilterId) {
-					props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
+					props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
 				} else {
 					handleTimeFilter();
 				}
 			}
-		} else if (query.filter_builder) {
-			if (filter_id !== savedFilterId) {
-				props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
-			} else {
-				handleTimeFilter();
-			}
 		}
 	}, [savedFilterId, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);
 
diff --git a/src/pages/Stream/providers/FilterProvider.tsx b/src/pages/Stream/providers/FilterProvider.tsx
index f5eb1df3..c44c1b8a 100644
--- a/src/pages/Stream/providers/FilterProvider.tsx
+++ b/src/pages/Stream/providers/FilterProvider.tsx
@@ -65,6 +65,7 @@ type UpdateRuleType = {
 type FilterStore = {
 	fields: Field[];
 	query: QueryType;
+	appliedFilterQuery: string;
 	fieldTypeMap: FieldTypeMap;
 	fieldNames: string[];
 	isSumbitDisabled: boolean;
@@ -88,6 +89,7 @@ const defaultQuery = {
 const initialState: FilterStore = {
 	fields: [],
 	query: defaultQuery,
+	appliedFilterQuery: '',
 	fieldTypeMap: {},
 	fieldNames: [],
 	isSumbitDisabled: true,
@@ -139,6 +141,7 @@ type FilterStoreReducers = {
 	toggleSaveFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
 	toggleSavedFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
 	applySavedFilters: (store: FilterStore, query: QueryType) => ReducerOutput;
+	setAppliedFilterQuery: (store: FilterStore, query: string | undefined) => ReducerOutput;
 };
 
 const { Provider: FilterProvider, useStore: useFilterStore } = initContext(initialState);
@@ -234,6 +237,13 @@ const updateParentCombinator = (store: FilterStore, combinator: Combinator) => {
 	return { query: { ...query, combinator: combinator } };
 };
 
+const setAppliedFilterQuery = (_store: FilterStore, query: string | undefined) => {
+	return {
+		..._store,
+		appliedFilterQuery: query ?? '',
+	};
+};
+
 export const noValueOperators = ['null', 'notNull'];
 
 const toggleSubmitBtn = (_store: FilterStore, val: boolean) => {
@@ -354,6 +364,7 @@ const filterStoreReducers: FilterStoreReducers = {
 	toggleSaveFiltersModal,
 	toggleSavedFiltersModal,
 	applySavedFilters,
+	setAppliedFilterQuery,
 };
 
 export { FilterProvider, useFilterStore, filterStoreReducers };
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
index 573281bb..57101afd 100644
--- a/src/routes/elements.tsx
+++ b/src/routes/elements.tsx
@@ -24,7 +24,9 @@ export const DashboardsElement: FC = () => {
 		<SuspensePage>
 			<LogsProvider>
 				<DashbaordsProvider>
-					<Dashboards />
+					<FilterProvider>
+						<Dashboards />
+					</FilterProvider>
 				</DashbaordsProvider>
 			</LogsProvider>
 		</SuspensePage>

From f71d99a142065aa5e88caa68e849597b06586838 Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:30:39 +0530
Subject: [PATCH 5/8] fix: remove unused variables from login.spec.ts (#380)

---
 .github/workflows/playwright.yml | 2 ++
 tests/login.spec.ts              | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 96eb75f9..2ea4c04e 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -15,6 +15,8 @@ jobs:
           node-version: lts/*
       - name: Install dependencies
         run: npm install -g pnpm && pnpm install
+      - name: Build Console
+        run: pnpm run build
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
       - name: Run Playwright tests
diff --git a/tests/login.spec.ts b/tests/login.spec.ts
index c4a45784..d1507996 100644
--- a/tests/login.spec.ts
+++ b/tests/login.spec.ts
@@ -1,14 +1,13 @@
-import { test, expect, BrowserContext, Page } from '@playwright/test';
+import { test, expect, BrowserContext } from '@playwright/test';
 
 const TEST_URL = 'http://localhost:3001';
 
 test.describe('Login Page', () => {
 	let context: BrowserContext;
-	let page: Page;
 
 	test.beforeEach(async ({ browser }) => {
 		context = await browser.newContext();
-		page = await context.newPage();
+		await context.newPage();
 	});
 
 	test.afterEach(async () => {

From 7b3c654a9862cabe827e0fa4eef9b9b2be3fcecb Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:15:57 +0530
Subject: [PATCH 6/8] fix: Add or update OFFSET clause in query (#376)

---
 src/hooks/useQueryLogs.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts
index a931c84b..7812f2ae 100644
--- a/src/hooks/useQueryLogs.ts
+++ b/src/hooks/useQueryLogs.ts
@@ -17,8 +17,16 @@ const { setLogData } = logsStoreReducers;
 const { parseQuery } = filterStoreReducers;
 
 const appendOffsetToQuery = (query: string, offset: number) => {
-	const hasOffset = query.toLowerCase().includes('offset');
-	return !hasOffset ? query.replace(/offset\s+\d+/i, `OFFSET ${offset}`) : `${query}`;
+	const offsetRegex = /offset\s+\d+/i;
+	const limitRegex = /limit\s+\d+/i;
+
+	if (offsetRegex.test(query)) {
+		// Replace the existing OFFSET with the new one
+		return query.replace(offsetRegex, `OFFSET ${offset}`);
+	} else {
+		// Insert OFFSET before LIMIT if OFFSET is not present
+		return query.replace(limitRegex, `OFFSET ${offset} $&`);
+	}
 };
 
 export const useQueryLogs = () => {

From 0f41f2d273d16e76a128ceddfb23b45c0fda304c Mon Sep 17 00:00:00 2001
From: Praveen K B <30530587+praveen5959@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:16:11 +0530
Subject: [PATCH 7/8] fix: handle null userRoles in stream metadata fetching
 logic (#383)

---
 src/hooks/useGetStreamMetadata.ts | 62 ++++++++++++++++---------------
 src/pages/Home/index.tsx          |  4 +-
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/hooks/useGetStreamMetadata.ts b/src/hooks/useGetStreamMetadata.ts
index 0cdc9712..d2ab4cc0 100644
--- a/src/hooks/useGetStreamMetadata.ts
+++ b/src/hooks/useGetStreamMetadata.ts
@@ -20,37 +20,41 @@ export const useGetStreamMetadata = () => {
 	const [metaData, setMetadata] = useState<MetaData | null>(null);
 	const [userRoles] = useAppStore((store) => store.userRoles);
 
-	const getStreamMetadata = useCallback(async (streams: string[]) => {
-		setLoading(true);
-		try {
-			// stats
-			const allStatsReqs = streams.map((stream) => getLogStreamStats(stream));
-			const allStatsRes = await Promise.all(allStatsReqs);
+	const getStreamMetadata = useCallback(
+		async (streams: string[]) => {
+			if (!userRoles) return;
+			setLoading(true);
+			try {
+				// stats
+				const allStatsReqs = streams.map((stream) => getLogStreamStats(stream));
+				const allStatsRes = await Promise.all(allStatsReqs);
 
-			// retention
-			const streamsWithSettingsAccess = _.filter(streams, (stream) =>
-				_.includes(getStreamsSepcificAccess(userRoles, stream), 'StreamSettings'),
-			);
-			const allretentionReqs = streamsWithSettingsAccess.map((stream) => getLogStreamRetention(stream));
-			const allretentionRes = await Promise.all(allretentionReqs);
+				// retention
+				const streamsWithSettingsAccess = _.filter(streams, (stream) =>
+					_.includes(getStreamsSepcificAccess(userRoles, stream), 'StreamSettings'),
+				);
+				const allretentionReqs = streamsWithSettingsAccess.map((stream) => getLogStreamRetention(stream));
+				const allretentionRes = await Promise.all(allretentionReqs);
 
-			const metadata = streams.reduce((acc, stream, index) => {
-				return {
-					...acc,
-					[stream]: { stats: allStatsRes[index]?.data || {}, retention: allretentionRes[index]?.data || [] },
-				};
-			}, {});
-			setMetadata(metadata);
-		} catch {
-			setError(true);
-			setMetadata(null);
-			notifyError({
-				message: 'Unable to fetch stream data',
-			});
-		} finally {
-			setLoading(false);
-		}
-	}, []);
+				const metadata = streams.reduce((acc, stream, index) => {
+					return {
+						...acc,
+						[stream]: { stats: allStatsRes[index]?.data || {}, retention: allretentionRes[index]?.data || [] },
+					};
+				}, {});
+				setMetadata(metadata);
+			} catch {
+				setError(true);
+				setMetadata(null);
+				notifyError({
+					message: 'Unable to fetch stream data',
+				});
+			} finally {
+				setLoading(false);
+			}
+		},
+		[userRoles],
+	);
 
 	return {
 		isLoading,
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b46c3e3a..a4b22d33 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -88,9 +88,9 @@ const Home: FC = () => {
 	const [searchTerm, setSearchTerm] = useState('');
 
 	useEffect(() => {
-		if (!Array.isArray(userSpecificStreams) || userSpecificStreams.length === 0) return;
+		if (!Array.isArray(userSpecificStreams) || userSpecificStreams.length === 0 || !userRoles) return;
 		getStreamMetadata(userSpecificStreams.map((stream) => stream.name));
-	}, [userSpecificStreams]);
+	}, [userSpecificStreams, userRoles]);
 
 	const filteredMetaData = useMemo(() => {
 		if (!searchTerm || !metaData) return metaData || {};

From e6d532f918f9b8534dd1667b74e88d54ead0ee42 Mon Sep 17 00:00:00 2001
From: Pranav Goel <48860494+pranavgoel29@users.noreply.github.com>
Date: Thu, 28 Nov 2024 01:45:58 -0800
Subject: [PATCH 8/8] feat: improve UX and DX in delete and reset modals (#382)

---
 src/components/Button/IconButton.tsx          |   4 +-
 src/components/Misc/DeleteOrResetModal.tsx    | 130 ++++++++++++
 .../Misc/styles/DeleteOrResetModal.module.css |  37 ++++
 src/pages/AccessManagement/PrivilegeTR.tsx    | 123 ++++--------
 src/pages/AccessManagement/RoleTR.tsx         | 190 +++++-------------
 src/pages/AccessManagement/Roles.tsx          |   6 +-
 src/pages/Dashboards/Dashboard.tsx            |  36 +---
 src/pages/Dashboards/Toolbar.tsx              |  68 ++-----
 .../Stream/components/DeleteStreamModal.tsx   |  48 ++---
 src/pages/Stream/styles/Logs.module.css       |   6 +-
 src/pages/Systems/DeleteIngestorModal.tsx     |   6 +-
 tests/helpers/users_roles.ts                  |   2 +-
 tests/home.spec.ts                            |   2 +-
 13 files changed, 305 insertions(+), 353 deletions(-)
 create mode 100644 src/components/Misc/DeleteOrResetModal.tsx
 create mode 100644 src/components/Misc/styles/DeleteOrResetModal.module.css

diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
index 26d5292d..18b8ea38 100644
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -18,7 +18,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 		return (
 			<Tooltip label={tooltipLabel}>
 				<ActionIcon
-					data-testId={props.data_id}
+					data-testid={props.data_id}
 					size={props.size ? props.size : 'xl'}
 					className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 					onClick={props.onClick && props.onClick}>
@@ -29,7 +29,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 	} else {
 		return (
 			<ActionIcon
-				data-testId={props.data_id}
+				data-testid={props.data_id}
 				size={props.size ? props.size : 'xl'}
 				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 				onClick={props.onClick && props.onClick}>
diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx
new file mode 100644
index 00000000..686f0def
--- /dev/null
+++ b/src/components/Misc/DeleteOrResetModal.tsx
@@ -0,0 +1,130 @@
+import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core';
+import classes from './styles/DeleteOrResetModal.module.css';
+import { ChangeEvent, useCallback, useState } from 'react';
+
+type BaseProps = {
+	isModalOpen: boolean;
+	onClose: () => void;
+	modalHeader: string;
+	specialContent?: React.ReactNode;
+	modalContent: string;
+	actionProcessingContent?: React.ReactNode;
+	isActionInProgress?: boolean;
+	onConfirm: () => void;
+};
+
+// Note: The `confirmationText` and `placeholder` props are required for 'delete' and 'reset' types, but not for 'simple' type.
+type DeleteOrResetModalProps =
+	| (BaseProps & {
+			type: 'simple';
+			confirmationText?: never; // Will throw an error if `confirmationText` is passed
+			placeholder?: never;
+	  })
+	| (BaseProps & {
+			type: 'delete' | 'reset';
+			confirmationText: string;
+			placeholder: string;
+	  });
+
+/**
+ * Confirmation modal for deleting or resetting an item.
+ * @param type - Specifies the type of modal ('simple', 'delete', or 'reset').
+ * @param isModalOpen - Controls whether the modal is visible.
+ * @param onClose - Callback to close the modal and reset the state.
+ * @param modalHeader - Header text displayed in the modal title.
+ * @param specialContent - Optional content for additional context or customization.
+ * @param modalContent - Main descriptive content of the modal.
+ * @param placeholder - Input placeholder for confirmation text (applicable to 'delete' and 'reset').
+ * @param confirmationText - Text required to confirm the action (applicable to 'delete' and 'reset').
+ * @param actionProcessingContent - Optional content below text input for showing progress status or related information.
+ * @param isActionInProgress - Disables the confirm button when action is in progress.
+ * @param onConfirm - Callback function to be executed when the confirm button is clicked.
+ */
+const DeleteOrResetModal = ({
+	type,
+	isModalOpen,
+	onClose,
+	modalHeader,
+	specialContent,
+	modalContent,
+	placeholder,
+	confirmationText,
+	actionProcessingContent,
+	isActionInProgress,
+	onConfirm,
+}: DeleteOrResetModalProps) => {
+	const [confirmText, setConfirmText] = useState<string>('');
+
+	// Handler for the confirmation input field
+	const onChangeHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		setConfirmText(e.target.value);
+	}, []);
+
+	// Function to validate and trigger confirmation logic
+	const tryConfirm = useCallback(() => {
+		if (type === 'simple' || confirmationText === confirmText) {
+			setConfirmText('');
+			onConfirm();
+		}
+	}, [type, confirmationText, confirmText, onConfirm]);
+
+	// Function to close the modal and reset the confirmation text state.
+	const closeModal = useCallback(() => {
+		setConfirmText('');
+		onClose();
+	}, [onClose]);
+
+	return (
+		<Modal
+			withinPortal
+			opened={isModalOpen}
+			onClose={closeModal}
+			size="auto"
+			centered
+			classNames={{
+				body: classes.modalBody,
+				header: classes.modalHeader,
+			}}
+			title={<Text className={classes.headerText}>{modalHeader}</Text>}>
+			<Stack>
+				<Stack gap={8}>
+					{specialContent}
+					<Text className={classes.warningText}>{modalContent}</Text>
+
+					{/* Render confirmation field for 'delete' or 'reset' types */}
+					{type !== 'simple' && (
+						<>
+							<Text className={classes.confirmationText}>
+								Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
+								confirm {type === 'delete' ? 'deletion' : 'reset'}.
+							</Text>
+							<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+						</>
+					)}
+
+					{/* Renders the action processing content if provided */}
+					{actionProcessingContent}
+				</Stack>
+
+				{/* Action buttons */}
+				<Stack className={classes.actionButtonsContainer}>
+					<Box>
+						<Button variant="outline" onClick={closeModal}>
+							Cancel
+						</Button>
+					</Box>
+					<Box>
+						{/* Disable the button if the confirmation text is not correct or the action is processing. */}
+						<Button
+							disabled={(type !== 'simple' && confirmationText !== confirmText) || isActionInProgress}
+							onClick={tryConfirm}>
+							{type === 'reset' ? 'Reset' : 'Delete'}
+						</Button>
+					</Box>
+				</Stack>
+			</Stack>
+		</Modal>
+	);
+};
+
+export default DeleteOrResetModal;
diff --git a/src/components/Misc/styles/DeleteOrResetModal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css
new file mode 100644
index 00000000..d50dc802
--- /dev/null
+++ b/src/components/Misc/styles/DeleteOrResetModal.module.css
@@ -0,0 +1,37 @@
+.modalBody {
+	padding: 0 1rem 1rem 1rem;
+	width: 400px;
+}
+
+.modalHeader {
+	padding: 1rem;
+	padding-bottom: 0.4rem;
+}
+
+.headerText {
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+.warningText {
+	margin-top: 0.4rem;
+	font-size: 0.7rem;
+	font-weight: 500;
+	color: var(--mantine-color-gray-8);
+}
+
+.confirmationText {
+	font-size: 0.7rem;
+	color: var(--mantine-color-gray-7);
+}
+
+.confirmationTextHighlight {
+	font-weight: 500;
+}
+
+.actionButtonsContainer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx
index e91d75c4..7934c442 100644
--- a/src/pages/AccessManagement/PrivilegeTR.tsx
+++ b/src/pages/AccessManagement/PrivilegeTR.tsx
@@ -19,6 +19,7 @@ import { FC, useEffect, useState } from 'react';
 import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
 import { useRole } from '@/hooks/useRole';
 import styles from './styles/AccessManagement.module.css';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 interface PrivilegeTRProps {
 	roleName: string;
@@ -32,8 +33,6 @@ interface PrivilegeTRProps {
 const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 	const { roleName, defaultRole, deleteRoleMutation, getRoleIsLoading, getRoleIsError } = props;
 
-	const [UserInput, setUserInput] = useState<string>('');
-
 	// Delete Privilege Modal Constants  : Starts
 	const [deletePrivilegeIndex, setDeletePrivilegeIndex] = useState<number>(0);
 	const [isDeletedPrivilegeOpen, { open: openDeletePrivilege, close: closeDeletePrivilege }] = useDisclosure();
@@ -46,7 +45,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 	// Update Role Modal Constants  : Starts
 	const [isUpdatedRoleOpen, { open: openUpdateRole, close: closeUpdateRole }] = useDisclosure();
 	const [selectedPrivilege, setSelectedPrivilege] = useState<string>('');
-	const [SelectedStream, setSelectedStream] = useState<string>('');
+	const [selectedStream, setSelectedStream] = useState<string>('');
 	const [streamSearchValue, setStreamSearchValue] = useState<string>('');
 	const [tagInput, setTagInput] = useState<string>('');
 	const { getLogStreamListData } = useGetLogStreamList();
@@ -104,7 +103,6 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 
 	const handleClosePrivilegeDelete = () => {
 		closeDeletePrivilege();
-		setUserInput('');
 	};
 
 	const handlePrivilegeDelete = () => {
@@ -140,7 +138,6 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 
 	const handleCloseDelete = () => {
 		closeDeleteRole();
-		setUserInput('');
 	};
 
 	const handleCloseUpdateRole = () => {
@@ -158,12 +155,12 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 			});
 		}
 		if (selectedPrivilege === 'reader' || selectedPrivilege === 'writer' || selectedPrivilege === 'ingestor') {
-			if (getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream)) {
+			if (getLogStreamListData?.data?.find((stream) => stream.name === selectedStream)) {
 				if (tagInput !== '' && tagInput !== undefined && selectedPrivilege === 'reader') {
 					getRoleData?.data?.push({
 						privilege: selectedPrivilege,
 						resource: {
-							stream: SelectedStream,
+							stream: selectedStream,
 							tag: tagInput,
 						},
 					});
@@ -171,7 +168,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 					getRoleData?.data?.push({
 						privilege: selectedPrivilege,
 						resource: {
-							stream: SelectedStream,
+							stream: selectedStream,
 						},
 					});
 				}
@@ -193,7 +190,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 				getRoleData?.data?.find(
 					(role: any) =>
 						role.privilege === selectedPrivilege &&
-						role.resource?.stream === SelectedStream &&
+						role.resource?.stream === selectedStream &&
 						(tagInput
 							? role.resource?.tag === tagInput
 							: role.resource?.tag === null || role.resource?.tag === undefined),
@@ -202,9 +199,9 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 				return true;
 			}
 			if (
-				getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) &&
-				SelectedStream !== '' &&
-				SelectedStream !== undefined
+				getLogStreamListData?.data?.find((stream) => stream.name === selectedStream) &&
+				selectedStream !== '' &&
+				selectedStream !== undefined
 			) {
 				return false;
 			}
@@ -213,15 +210,15 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 		if (selectedPrivilege === 'writer' || selectedPrivilege === 'ingestor') {
 			if (
 				getRoleData?.data?.find(
-					(role: any) => role.privilege === selectedPrivilege && role.resource?.stream === SelectedStream,
+					(role: any) => role.privilege === selectedPrivilege && role.resource?.stream === selectedStream,
 				)
 			) {
 				return true;
 			}
 			if (
-				getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) &&
-				SelectedStream !== '' &&
-				SelectedStream !== undefined
+				getLogStreamListData?.data?.find((stream) => stream.name === selectedStream) &&
+				selectedStream !== '' &&
+				selectedStream !== undefined
 			) {
 				return false;
 			}
@@ -284,79 +281,29 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 					</Box>
 				</td>
 			</tr>
-			<Modal
-				withinPortal
-				size="md"
-				opened={isDeletedRoleOpen}
-				onClose={handleCloseDelete}
-				title={'Delete Role'}
-				className={classes.modalStyle}
-				centered>
-				<TextInput
-					label="Are you sure you want to delete this Role?"
-					type="text"
-					onChange={(e) => {
-						setUserInput(e.target.value);
-					}}
-					placeholder={`Please enter the Role to confirm, i.e. ${roleName}`}
-					required
-					mb={20}
-				/>
 
-				<Group justify="right" mt={10}>
-					<Button
-						variant="filled"
-						color="gray"
-						className={classes.modalActionBtn}
-						disabled={UserInput === roleName ? false : true}
-						onClick={handleDelete}>
-						Delete
-					</Button>
-					<Button onClick={handleCloseDelete} variant="outline" color="gray" className={classes.modalCancelBtn}>
-						Cancel
-					</Button>
-				</Group>
-			</Modal>
+			<DeleteOrResetModal
+				type="delete"
+				isModalOpen={isDeletedRoleOpen}
+				onClose={handleCloseDelete}
+				modalHeader="Delete Role"
+				modalContent="Are you sure you want to delete this Role?"
+				placeholder="Type the role name to confirm"
+				confirmationText={roleName}
+				onConfirm={handleDelete}
+			/>
 			{getRoleData?.data?.[deletePrivilegeIndex] ? (
-				<Modal
-					withinPortal
-					size="md"
-					opened={isDeletedPrivilegeOpen}
+				<DeleteOrResetModal
+					type="delete"
+					isModalOpen={isDeletedPrivilegeOpen}
 					onClose={handleClosePrivilegeDelete}
-					title={'Delete Privilege'}
-					centered
-					className={classes.modalStyle}>
-					<Stack>
-						<Text>{getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}</Text>
-						<TextInput
-							label="Are you sure you want to delete this role privilege?"
-							type="text"
-							onChange={(e) => {
-								setUserInput(e.target.value);
-							}}
-							placeholder={`Please enter the role to confirm, i.e. ${roleName}`}
-							required
-						/>
-					</Stack>
-
-					<Group justify="right" mt={10}>
-						<Button
-							variant="filled"
-							color="gray"
-							className={classes.modalActionBtn}
-							disabled={UserInput === roleName ? false : true}
-							onClick={handlePrivilegeDelete}>
-							Delete
-						</Button>
-						<Button
-							onClick={handleClosePrivilegeDelete}
-							variant="outline"
-							color="gray"
-							className={classes.modalCancelBtn}>
-							Cancel
-						</Button>
-					</Group>
-				</Modal>
+					modalHeader="Delete Privilege"
+					specialContent={<Text>{getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}</Text>}
+					modalContent="Are you sure you want to delete this role privilege?"
+					placeholder="Type name of the role to confirm."
+					confirmationText={roleName}
+					onConfirm={handlePrivilegeDelete}
+				/>
 			) : (
 				''
 			)}
@@ -386,10 +333,10 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 									setSelectedStream(value ?? '');
 								}}
 								nothingFoundMessage="No options"
-								value={SelectedStream}
+								value={selectedStream}
 								searchValue={streamSearchValue}
 								onSearchChange={(value) => setStreamSearchValue(value)}
-								onDropdownClose={() => setStreamSearchValue(SelectedStream)}
+								onDropdownClose={() => setStreamSearchValue(selectedStream)}
 								onDropdownOpen={() => setStreamSearchValue('')}
 								data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []}
 								searchable
diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx
index 75161d92..b1b19fb7 100644
--- a/src/pages/AccessManagement/RoleTR.tsx
+++ b/src/pages/AccessManagement/RoleTR.tsx
@@ -1,18 +1,4 @@
-import {
-	ActionIcon,
-	Badge,
-	Box,
-	Button,
-	Group,
-	Modal,
-	Select,
-	Stack,
-	Text,
-	TextInput,
-	Tooltip,
-	px,
-	rem,
-} from '@mantine/core';
+import { ActionIcon, Badge, Box, Button, Group, Modal, Select, Stack, Text, Tooltip, px, rem } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconPlus, IconTransform, IconTrash, IconX } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
@@ -21,6 +7,7 @@ import { useUser } from '@/hooks/useUser';
 import { useRole } from '@/hooks/useRole';
 import styles from './styles/AccessManagement.module.css';
 import { CodeHighlight } from '@mantine/code-highlight';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 interface RoleTRProps {
 	user: {
@@ -56,8 +43,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 
 	const [deleteRole, setDeleteRole] = useState<string | null>(null);
 	const [opened, { open, close }] = useDisclosure(false);
-	const [UserInput, setUserInput] = useState<string>('');
-	const [SelectedRole, setSelectedRole] = useState<string>('');
+	const [selectedRole, setSelectedRole] = useState<string>('');
 	const [roleSearchValue, setRoleSearchValue] = useState<string>('');
 
 	const { getUserRolesData, getUserRolesMutation, updateUserMutation, updateUserIsSuccess } = useUser();
@@ -114,18 +100,16 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 	// For Delete User
 	const handleCloseDelete = () => {
 		closeDelete();
-		setUserInput('');
 	};
 
 	const handleDelete = () => {
 		deleteUserMutation({ userName: user.id, onSuccess: props.getUserRefetch });
 		closeDelete();
-		setUserInput('');
 	};
 
 	// For Delete Role
 	const handleRoleDelete = () => {
-		let filtered = Object.keys(getUserRolesData?.data).filter((role) => role !== deleteRole);
+		const filtered = Object.keys(getUserRolesData?.data).filter((role) => role !== deleteRole);
 		updateUserMutation({ userName: user.id, roles: filtered });
 		closeDeleteRole();
 		setDeleteRole(null);
@@ -133,7 +117,6 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 	};
 	const handleCloseRoleDelete = () => {
 		closeDeleteRole();
-		setUserInput('');
 	};
 
 	// For Edit Role
@@ -144,11 +127,11 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 	};
 
 	const handleEditUserRole = () => {
-		let userRoleArray: any = Object.keys(getUserRolesData?.data);
-		if (userRoleArray.includes(SelectedRole) || SelectedRole === '') {
+		const userRoleArray = Object.keys(getUserRolesData?.data);
+		if (userRoleArray.includes(selectedRole) || selectedRole === '') {
 			return;
 		}
-		userRoleArray.push(SelectedRole);
+		userRoleArray.push(selectedRole);
 
 		updateUserMutation({ userName: user.id, roles: userRoleArray });
 		handleCloseRoleEdit();
@@ -157,11 +140,10 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 	// for reset password
 	const handleCloseResetPassword = () => {
 		close();
-		setUserInput('');
 	};
 
-	const handleResetPassword = () => {
-		updateUserPasswordMutation({ userName: UserInput });
+	const handleResetPassword = (userName: string) => {
+		updateUserPasswordMutation({ userName });
 	};
 
 	const classes = styles;
@@ -225,106 +207,52 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 					</Tooltip>
 				</Box>
 			</td>
-			<Modal
-				withinPortal
-				size="md"
-				opened={openedDelete}
+			<DeleteOrResetModal
+				type="delete"
+				isModalOpen={openedDelete}
 				onClose={handleCloseDelete}
-				title={'Delete user'}
-				className={classes.modalStyle}
-				centered
-				styles={{ title: { fontWeight: 700 } }}>
-				<TextInput
-					label="Are you sure you want to delete this user?"
-					type="text"
-					onChange={(e) => {
-						setUserInput(e.target.value);
-					}}
-					placeholder={`Please enter the user to confirm, i.e. ${user.id}`}
-					required
-				/>
-
-				<Group justify="right" mt={10}>
-					<Button
-						variant="filled"
-						color="gray"
-						className={classes.modalActionBtn}
-						disabled={UserInput === user.id ? false : true}
-						onClick={handleDelete}>
-						Delete
-					</Button>
-					<Button onClick={handleCloseDelete} variant="outline" color="gray" className={classes.modalCancelBtn}>
-						Cancel
-					</Button>
-				</Group>
-			</Modal>
+				modalHeader="Delete user"
+				modalContent="Are you sure you want to delete this user?"
+				placeholder="Type the name of the user"
+				confirmationText={user.id}
+				onConfirm={handleDelete}
+			/>
 			{getUserRolesData?.data && deleteRole && getUserRolesData?.data[deleteRole] ? (
-				<Modal
-					withinPortal
-					size="md"
-					opened={openedDeleteRole}
+				<DeleteOrResetModal
+					type="delete"
+					isModalOpen={openedDeleteRole}
 					onClose={handleCloseRoleDelete}
-					title={'Delete user role'}
-					centered
-					className={classes.modalStyle}>
-					<Stack>
-						<Text>{getBadge(deleteRole, false)}</Text>
-						<TextInput
-							label="Are you sure you want to delete this user role?"
-							type="text"
-							onChange={(e) => {
-								setUserInput(e.target.value);
-							}}
-							placeholder={`Please enter the user to confirm, i.e. ${user.id}`}
-							required
-						/>
-					</Stack>
-
-					<Group justify="right" mt={10}>
-						<Button
-							variant="filled"
-							color="gray"
-							className={classes.modalActionBtn}
-							disabled={UserInput === user.id ? false : true}
-							onClick={handleRoleDelete}>
-							Delete
-						</Button>
-						<Button onClick={handleCloseRoleDelete} variant="outline" color="gray" className={classes.modalCancelBtn}>
-							Cancel
-						</Button>
-					</Group>
-				</Modal>
+					modalHeader="Delete user role"
+					specialContent={<Text>{getBadge(deleteRole, false)}</Text>}
+					modalContent="Are you sure you want to delete this user role?"
+					placeholder="Type the name of the user"
+					confirmationText={user.id}
+					onConfirm={handleRoleDelete}
+				/>
 			) : (
 				''
 			)}
 
-			<Modal
-				opened={opened}
+			<DeleteOrResetModal
+				type="reset"
+				isModalOpen={opened}
 				onClose={handleCloseResetPassword}
-				title="Change user password"
-				centered
-				className={classes.modalStyle}
-				styles={{ title: { fontWeight: 500 } }}>
-				<Stack>
-					<TextInput
-						label={"Are you sure you want to reset this user's password?"}
-						type="text"
-						placeholder={`Please enter the user to confirm, i.e. ${user.id}`}
-						onChange={(e) => {
-							setUserInput(e.target.value);
-						}}
-						required
-						mb={4}
-					/>
-
-					{updateUserPasswordIsError ? (
-						<Text className={classes.passwordText} color="red">
+				modalHeader="Change user password"
+				modalContent="Are you sure you want to reset this user's password?"
+				placeholder="Type the name of the user"
+				confirmationText={user.id}
+				onConfirm={() => handleResetPassword(user.id)}
+				actionProcessingContent={
+					updateUserPasswordIsError ? (
+						<Text className={classes.passwordText} mt={4} c="red">
 							{resetPasswordError}
 						</Text>
 					) : updateUserPasswordIsLoading ? (
-						<Text className={classes.passwordText}>loading</Text>
+						<Text mt={4} className={classes.passwordText}>
+							loading...
+						</Text>
 					) : udpateUserPasswordData?.data ? (
-						<Box>
+						<Box mt={4}>
 							<Text className={classes.passwordText}>Password</Text>
 							<CodeHighlight
 								className={classes.passwordPrims}
@@ -333,32 +261,16 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 								code={udpateUserPasswordData?.data}
 								copiedLabel="Password copied to clipboard"
 							/>
-							<Text className={classes.passwordText} color="red">
+							<Text className={classes.passwordText} c="red">
 								Warning this is the only time you are able to see Password
 							</Text>
 						</Box>
 					) : (
 						''
-					)}
-				</Stack>
-				<Group justify="right" mt={10}>
-					{user.method === 'native' ? (
-						<Button
-							variant="filled"
-							color="gray"
-							className={classes.modalActionBtn}
-							onClick={handleResetPassword}
-							disabled={UserInput === user.id ? false : true}>
-							Reset Password
-						</Button>
-					) : (
-						<Text>Cannot reset password for this user</Text>
-					)}
-					<Button onClick={handleCloseResetPassword} variant="outline" color="gray" className={classes.modalCancelBtn}>
-						Cancel
-					</Button>
-				</Group>
-			</Modal>
+					)
+				}
+				isActionInProgress={updateUserPasswordIsLoading}
+			/>
 			<Modal
 				opened={openedEditModal}
 				onClose={handleCloseRoleEdit}
@@ -372,10 +284,10 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 							setSelectedRole(value ?? '');
 						}}
 						nothingFoundMessage="No roles found"
-						value={SelectedRole}
+						value={selectedRole}
 						searchValue={roleSearchValue}
 						onSearchChange={(value) => setRoleSearchValue(value)}
-						onDropdownClose={() => setRoleSearchValue(SelectedRole)}
+						onDropdownClose={() => setRoleSearchValue(selectedRole)}
 						onDropdownOpen={() => setRoleSearchValue('')}
 						data={getRolesData?.data}
 						searchable
@@ -393,7 +305,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 						// if role is already assigned or no role is selected then disable the button
 						disabled={
 							getUserRolesData?.data &&
-							(Object.keys(getUserRolesData?.data).includes(SelectedRole) || SelectedRole === '')
+							(Object.keys(getUserRolesData?.data).includes(selectedRole) || selectedRole === '')
 								? true
 								: false
 						}>
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 43073c48..127c2b67 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -173,7 +173,7 @@ const Roles: FC = () => {
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
-						data-testId="create-role-button"
+						data-testid="create-role-button"
 						rightSection={<IconUserPlus size={px('1rem')} stroke={1.5} />}
 						onClick={() => {
 							setModalOpen(true);
@@ -314,7 +314,7 @@ const Roles: FC = () => {
 					<Button
 						variant="filled"
 						color="gray"
-						data-testId="create-role-modal-button"
+						data-testid="create-role-modal-button"
 						className={classes.modalActionBtn}
 						disabled={createVaildtion()}
 						onClick={handleCreateRole}>
@@ -324,7 +324,7 @@ const Roles: FC = () => {
 						onClick={handleClose}
 						variant="outline"
 						color="gray"
-						data-testId="cancel-role-modal-button"
+						data-testid="cancel-role-modal-button"
 						className={classes.modalCancelBtn}>
 						Cancel
 					</Button>
diff --git a/src/pages/Dashboards/Dashboard.tsx b/src/pages/Dashboards/Dashboard.tsx
index b5609408..ec614ce6 100644
--- a/src/pages/Dashboards/Dashboard.tsx
+++ b/src/pages/Dashboards/Dashboard.tsx
@@ -22,6 +22,7 @@ import { Layout } from 'react-grid-layout';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { EditTileType, ImportDashboardType, Tile as TileType } from '@/@types/parseable/api/dashboards';
 import { templates } from './assets/templates';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 const {
 	toggleCreateDashboardModal,
@@ -126,34 +127,15 @@ const DeleteTileModal = () => {
 	if (!activeDashboard?.dashboard_id || !deleteTileId || !selectedTile) return null;
 
 	return (
-		<Modal
-			opened={deleteTileModalOpen}
+		<DeleteOrResetModal
+			type="simple"
+			isModalOpen={deleteTileModalOpen}
 			onClose={onClose}
-			size="auto"
-			centered
-			styles={{
-				body: { padding: '0 1rem 1rem 1rem', width: 400 },
-				header: { padding: '1rem', paddingBottom: '0.4rem' },
-			}}
-			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Delete Tile</Text>}>
-			<Stack>
-				<Stack gap={12}>
-					<Text className={classes.deleteWarningText}>Are you sure want to delete this tile ?</Text>
-				</Stack>
-				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
-					<Box>
-						<Button onClick={onClose} variant="outline">
-							Cancel
-						</Button>
-					</Box>
-					<Box>
-						<Button loading={isUpdatingDashboard} onClick={onConfirm}>
-							Delete
-						</Button>
-					</Box>
-				</Stack>
-			</Stack>
-		</Modal>
+			modalHeader="Delete Tile"
+			modalContent="Are you sure you want to delete this tile?"
+			onConfirm={onConfirm}
+			isActionInProgress={isUpdatingDashboard}
+		/>
 	);
 };
 
diff --git a/src/pages/Dashboards/Toolbar.tsx b/src/pages/Dashboards/Toolbar.tsx
index 0b85b510..f8bffb00 100644
--- a/src/pages/Dashboards/Toolbar.tsx
+++ b/src/pages/Dashboards/Toolbar.tsx
@@ -1,5 +1,5 @@
 import TimeRange from '@/components/Header/TimeRange';
-import { Box, Button, FileInput, Modal, px, Stack, Text, Menu, TextInput } from '@mantine/core';
+import { Box, Button, FileInput, Modal, px, Stack, Text, Menu } from '@mantine/core';
 import {
 	IconCheck,
 	IconCopy,
@@ -12,7 +12,7 @@ import {
 } from '@tabler/icons-react';
 import classes from './styles/toolbar.module.css';
 import { useDashboardsStore, dashboardsStoreReducers, sortTilesByOrder } from './providers/DashboardsProvider';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import IconButton from '@/components/Button/IconButton';
 import { useDashboardsQuery } from '@/hooks/useDashboards';
 import _ from 'lodash';
@@ -21,6 +21,7 @@ import { Dashboard } from '@/@types/parseable/api/dashboards';
 import { exportJson } from '@/utils/exportHelpers';
 import { copyTextToClipboard } from '@/utils';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 const {
 	toggleEditDashboardModal,
@@ -118,23 +119,18 @@ const ImportTileButton = () => {
 const DeleteDashboardModal = () => {
 	const [activeDashboard, setDashbaordsStore] = useDashboardsStore((store) => store.activeDashboard);
 	const [deleteDashboardModalOpen] = useDashboardsStore((store) => store.deleteDashboardModalOpen);
-	const [confirmText, setConfirmText] = useState<string>('');
+
 	const { isDeleting, deleteDashboard } = useDashboardsQuery({});
 	const closeModal = useCallback(() => {
 		setDashbaordsStore((store) => toggleDeleteDashboardModal(store, false));
 	}, []);
 
-	const onChangeHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-		setConfirmText(e.target.value);
-	}, []);
-
 	const onDelete = useCallback(() => {
 		if (activeDashboard?.dashboard_id) {
 			deleteDashboard({
 				dashboardId: activeDashboard?.dashboard_id,
 				onSuccess: () => {
 					closeModal();
-					setConfirmText('');
 				},
 			});
 		}
@@ -143,49 +139,17 @@ const DeleteDashboardModal = () => {
 	if (!activeDashboard?.dashboard_id) return null;
 
 	return (
-		<Modal
-			opened={deleteDashboardModalOpen}
+		<DeleteOrResetModal
+			type="delete"
+			modalHeader="Delete Dashboard"
+			modalContent="Are you sure want to delete this dashboard and its contents ?"
+			placeholder="Type the dashboard name to confirm deletion"
+			isModalOpen={deleteDashboardModalOpen}
 			onClose={closeModal}
-			size="auto"
-			centered
-			styles={{
-				body: { padding: '0 1rem 1rem 1rem', width: 400 },
-				header: { padding: '1rem', paddingBottom: '0.4rem' },
-			}}
-			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Delete Dashboard</Text>}>
-			<Stack>
-				<Stack gap={8}>
-					<Text className={classes.deleteWarningText}>
-						Are you sure want to delete this dashboard and its contents ?
-					</Text>
-					<Text className={classes.deleteConfirmationText}>
-						Please type <span className={classes.deleteConfirmationTextHighlight}>{`"${activeDashboard.name}"`}</span>{' '}
-						to confirm deletion.
-					</Text>
-
-					<TextInput
-						value={confirmText}
-						onChange={onChangeHandler}
-						placeholder={'Type the dashboard name to confirm.'}
-					/>
-				</Stack>
-				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
-					<Box>
-						<Button variant="outline" onClick={closeModal}>
-							Cancel
-						</Button>
-					</Box>
-					<Box>
-						<Button
-							disabled={confirmText !== activeDashboard.name || isDeleting}
-							onClick={onDelete}
-							loading={isDeleting}>
-							Delete
-						</Button>
-					</Box>
-				</Stack>
-			</Stack>
-		</Modal>
+			confirmationText={activeDashboard.name}
+			isActionInProgress={isDeleting}
+			onConfirm={onDelete}
+		/>
 	);
 };
 
@@ -264,7 +228,9 @@ const ImportTileModal = () => {
 							setFile(null);
 						},
 					});
-				} catch (error) {}
+				} catch (error) {
+					console.error('Error importing tile:', error);
+				}
 			};
 			reader.readAsText(file);
 		} else {
diff --git a/src/pages/Stream/components/DeleteStreamModal.tsx b/src/pages/Stream/components/DeleteStreamModal.tsx
index 7c4b0003..83a5100d 100644
--- a/src/pages/Stream/components/DeleteStreamModal.tsx
+++ b/src/pages/Stream/components/DeleteStreamModal.tsx
@@ -1,22 +1,19 @@
-import { Button, Group, Modal, TextInput } from '@mantine/core';
-import styles from '../styles/Logs.module.css';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useLogStream } from '@/hooks/useLogStream';
 import { useLogsStore, logsStoreReducers } from '../providers/LogsProvider';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { useNavigate } from 'react-router-dom';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 const { toggleDeleteModal } = logsStoreReducers;
 
 const DeleteStreamModal = () => {
 	const [deleteModalOpen, setLogsStore] = useLogsStore((store) => store.modalOpts.deleteModalOpen);
-	const [confirmInputValue, setConfirmInputValue] = useState<string>('');
-	const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-		setConfirmInputValue(e.target.value);
-	}, []);
+
 	const onCloseModal = useCallback(() => {
 		setLogsStore((store) => toggleDeleteModal(store, false));
 	}, []);
+
 	const { deleteLogStreamMutation } = useLogStream();
 	const navigate = useNavigate();
 
@@ -33,35 +30,16 @@ const DeleteStreamModal = () => {
 	}, [currentStream]);
 
 	return (
-		<Modal
-			withinPortal
-			size="md"
-			opened={deleteModalOpen}
+		<DeleteOrResetModal
+			isModalOpen={deleteModalOpen}
 			onClose={onCloseModal}
-			title={'Delete Stream'}
-			centered
-			className={styles.modalStyle}
-			styles={{ title: { fontWeight: 700 } }}>
-			<TextInput
-				type="text"
-				label="Are you sure you want to delete this stream?"
-				onChange={handleInputChange}
-				placeholder={`Type the name of the stream to confirm. i.e. ${currentStream}`}
-				required
-				value={confirmInputValue}
-			/>
-			<Group mt={10} justify="right">
-				<Button onClick={onCloseModal} className={styles.modalCancelBtn}>
-					Cancel
-				</Button>
-				<Button
-					className={styles.modalActionBtn}
-					disabled={confirmInputValue === currentStream ? false : true}
-					onClick={handleDeleteStream}>
-					Delete
-				</Button>
-			</Group>
-		</Modal>
+			modalHeader="Delete Stream"
+			modalContent="Are you sure you want to delete this stream?"
+			confirmationText={`${currentStream}`}
+			type="delete"
+			placeholder="Type the name of the stream"
+			onConfirm={handleDeleteStream}
+		/>
 	);
 };
 
diff --git a/src/pages/Stream/styles/Logs.module.css b/src/pages/Stream/styles/Logs.module.css
index 0ab4c807..cd2308d8 100644
--- a/src/pages/Stream/styles/Logs.module.css
+++ b/src/pages/Stream/styles/Logs.module.css
@@ -250,10 +250,10 @@
 .copyIcon {
 	color: #211f1f;
 }
-.copyIcon:hover {background-color: #f1f3f5;
+.copyIcon:hover {
+	background-color: #f1f3f5;
 }
 
-
 .customCell {
 	position: relative;
 
@@ -273,4 +273,4 @@
 			display: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/pages/Systems/DeleteIngestorModal.tsx b/src/pages/Systems/DeleteIngestorModal.tsx
index 285b6136..5a42a6e8 100644
--- a/src/pages/Systems/DeleteIngestorModal.tsx
+++ b/src/pages/Systems/DeleteIngestorModal.tsx
@@ -59,6 +59,9 @@ export default function DeleteIngestorModal(props: { modalOpened: boolean; close
 						<Text style={{ fontSize: '0.8rem' }}>Do you want to delete {currentMachineAddress} ? </Text>
 					</Stack>
 					<Group justify="flex-end">
+						<Button onClick={props.closeModal} variant="default">
+							Cancel
+						</Button>
 						<Button
 							className={classes.deleteBtn}
 							loading={deleteIngestorIsLoading}
@@ -66,9 +69,6 @@ export default function DeleteIngestorModal(props: { modalOpened: boolean; close
 							variant="filled">
 							Delete
 						</Button>
-						<Button onClick={props.closeModal} variant="default">
-							Cancel
-						</Button>
 					</Group>
 				</Stack>
 			) : (
diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts
index 0ecbe84b..f665d830 100644
--- a/tests/helpers/users_roles.ts
+++ b/tests/helpers/users_roles.ts
@@ -61,7 +61,7 @@ const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
 		await deleteButton.click();
 
 		await page.waitForSelector('text=Are you sure you want to delete this role?');
-		const roleNameInput = page.getByPlaceholder('Please enter the Role');
+		const roleNameInput = page.getByPlaceholder('Type the role name');
 		await roleNameInput.fill(ROLE_NAME);
 
 		const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
index a9b38ea8..ff4856b4 100644
--- a/tests/home.spec.ts
+++ b/tests/home.spec.ts
@@ -91,7 +91,7 @@ test.describe('Home Page', () => {
 				await expect(deleteBtn).toBeVisible();
 				await deleteBtn.click();
 				await expect(page.locator('text=Delete Stream')).toBeVisible();
-				await page.fill('input[placeholder*="Type the name of the stream to confirm. i.e."]', 'PlaywrightStream');
+				await page.fill('input[placeholder*="Type the name of the stream"]', 'PlaywrightStream');
 				const confirmDeleteBtn = page.getByRole('button', { name: 'Delete' });
 				await expect(confirmDeleteBtn).toBeEnabled();
 				await confirmDeleteBtn.click();