chore: helpers required for dashboards e2e test cases (#5496)

* chore: helpers required for dashboards e2e test cases

* chore: helpers required for dashboards e2e test cases

* chore: helpers required for dashboards e2e test cases

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -234,6 +234,7 @@ function WidgetHeader({
 				)}
 				<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
 					<MoreOutlined
+						data-testid="widget-header-options"
 						className={`widget-header-more-options ${
 							parentHover ? 'widget-header-hover' : ''
 						}`}

frontend/src/container/NewDashboard/DashboardDescription/index.tsx

@@ -411,7 +411,12 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						trigger="click"
 						placement="bottomRight"
 					>
-						<Button icon={<Ellipsis size={14} />} type="text" className="icons" />
+						<Button
+							icon={<Ellipsis size={14} />}
+							type="text"
+							className="icons"
+							data-testid="options"
+						/>
 					</Popover>
 					{!isDashboardLocked && editDashboard && (
 						<SettingsDrawer drawerTitle="Dashboard Configuration" />
@@ -422,7 +427,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 							onClick={onEmptyWidgetHandler}
 							icon={<PlusOutlined />}
 							type="primary"
-							data-testid="add-panel"
+							data-testid="add-panel-header"
 						>
 							New Panel
 						</Button>

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -163,6 +163,7 @@ function RightContainer({
 					value={selectedGraph}
 					style={{ width: '100%' }}
 					className="panel-type-select"
+					data-testid="panel-change-select"
 				>
 					{graphTypes.map((item) => (
 						<Option key={item.name} value={item.name}>

frontend/src/container/NewWidget/index.tsx

@@ -563,7 +563,12 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		<Container>
 			<div className="edit-header">
 				<div className="left-header">
-					<X size={14} onClick={onClickDiscardHandler} className="discard-icon" />
+					<X
+						size={14}
+						onClick={onClickDiscardHandler}
+						className="discard-icon"
+						data-testid="discard-button"
+					/>
 					<Flex align="center" gap={24}>
 						<Typography.Text className="configure-panel">
 							Configure panel

frontend/src/container/NewWidget/utils.ts

@@ -216,6 +216,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 					'queryName',
 					'expression',
 					'disabled',
+					'reduceTo',
 					'legend',
 				],
 			},
@@ -235,6 +236,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 					'queryName',
 					'expression',
 					'disabled',
+					'reduceTo',
 					'legend',
 				],
 			},
@@ -252,6 +254,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 					'queryName',
 					'expression',
 					'disabled',
+					'reduceTo',
 					'legend',
 				],
 			},

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -191,6 +191,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 			labelInValue
 			notFoundContent={isFetching ? <Spin size="small" /> : null}
 			onChange={handleChange}
+			data-testid="group-by"
 		/>
 	);
 });

frontend/src/container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter.tsx

@@ -27,6 +27,7 @@ export const ReduceToFilter = memo(function ReduceToFilter({
 			style={{ width: '100%' }}
 			options={REDUCE_TO_VALUES}
 			value={currentValue}
+			data-testid="reduce-to"
 			labelInValue
 			onChange={handleChange}
 		/>