[Fix]: select dropdown for onboarding flow (#3618)

* fix: select dropdown for onboarding flow

* refactor: dropdown scroll issue for widget header

* refactor: dropdown scroll issue for topnav

* refactor: fix the dropdown scroll issue

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -206,6 +206,7 @@ function ExplorerCard({
 								</Button>
 							)}
 							<Popover
+								getPopupContainer={popupContainer}
 								placement="bottomLeft"
 								trigger="click"
 								content={

frontend/src/components/TextToolTip/index.tsx

@@ -7,6 +7,7 @@ import { Tooltip } from 'antd';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { style } from './styles';
 
@@ -61,7 +62,7 @@ function TextToolTip({
 	);
 
 	return (
-		<Tooltip overlay={overlay}>
+		<Tooltip getTooltipContainer={popupContainer} overlay={overlay}>
 			{useFilledIcon ? (
 				<QuestionCircleFilled style={iconStyle} />
 			) : (

frontend/src/container/Controls/index.tsx

@@ -2,6 +2,7 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { memo, useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
@@ -51,6 +52,7 @@ function Controls({
 				loading={isLoading}
 				value={countPerPage}
 				onChange={handleCountItemsPerPageChange}
+				getPopupContainer={popupContainer}
 			>
 				{perPageOptions.map((count) => (
 					<Select.Option

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

@@ -20,6 +20,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import AppReducer from 'types/reducer/app';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import {
 	errorTooltipPosition,
@@ -177,6 +178,7 @@ function WidgetHeader({
 	return (
 		<WidgetHeaderContainer>
 			<Dropdown
+				getPopupContainer={popupContainer}
 				destroyPopupOnHide
 				open={isOpen}
 				onOpenChange={setIsOpen}

frontend/src/container/ListOfDashboard/index.tsx

@@ -34,6 +34,7 @@ import AppActions from 'types/actions';
 import { GET_ALL_DASHBOARD_SUCCESS } from 'types/actions/dashboard';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ImportJSON from './ImportJSON';
 import { ButtonContainer, NewDashboardButton, TableContainer } from './styles';
@@ -280,6 +281,7 @@ function ListOfAllDashboard(): JSX.Element {
 					/>
 					{newDashboard && (
 						<Dropdown
+							getPopupContainer={popupContainer}
 							disabled={isDashboardListLoading}
 							trigger={['click']}
 							menu={menu}

frontend/src/container/LiveLogs/ListViewPanel/index.tsx

@@ -11,6 +11,7 @@ import PopoverContent from 'pages/Logs/PopoverContent';
 import { useEventSource } from 'providers/EventSource';
 import { useCallback } from 'react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { SpinnerWrapper, Wrapper } from './styles';
 
@@ -43,6 +44,7 @@ function ListViewPanel(): JSX.Element {
 	return (
 		<Wrapper>
 			<Select
+				getPopupContainer={popupContainer}
 				style={defaultSelectStyle}
 				value={config.format?.value}
 				onChange={config.format?.onChange}
@@ -53,7 +55,11 @@ function ListViewPanel(): JSX.Element {
 			</Select>
 
 			{isFormatButtonVisible && (
-				<Popover placement="right" content={renderPopoverContent}>
+				<Popover
+					getPopupContainer={popupContainer}
+					placement="right"
+					content={renderPopoverContent}
+				>
 					<Button>Format</Button>
 				</Popover>
 			)}

frontend/src/container/LogLiveTail/index.tsx

@@ -30,6 +30,7 @@ import { TLogsLiveTailState } from 'types/api/logs/liveTail';
 import { ILog } from 'types/api/logs/log';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { TIME_PICKER_OPTIONS } from './config';
 import { StopContainer, TimePickerCard, TimePickerSelect } from './styles';
@@ -165,6 +166,7 @@ function LogLiveTail({ getLogsAggregate }: Props): JSX.Element {
 	const OptionsPopOverContent = useMemo(
 		() => (
 			<TimePickerSelect
+				getPopupContainer={popupContainer}
 				disabled={liveTail === 'PLAYING'}
 				value={liveTailStartRange}
 				onChange={(value): void => {
@@ -236,6 +238,7 @@ function LogLiveTail({ getLogsAggregate }: Props): JSX.Element {
 				)}
 
 				<Popover
+					getPopupContainer={popupContainer}
 					placement="bottomRight"
 					title="Select Live Tail Timing"
 					trigger="click"

frontend/src/container/LogsSearchFilter/index.tsx

@@ -20,6 +20,7 @@ import {
 } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import SearchFields from './SearchFields';
 import { Container, DropDownContainer } from './styles';
@@ -174,6 +175,7 @@ function SearchFilter({
 	return (
 		<Container>
 			<Popover
+				getPopupContainer={popupContainer}
 				placement="bottom"
 				content={
 					<DropDownContainer>

frontend/src/container/OnboardingContainer/APM/Java/Java.tsx

@@ -5,6 +5,7 @@ import { Form, Input, Select } from 'antd';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import JavaDocs from './md-docs/java.md';
@@ -66,6 +67,7 @@ export default function Java({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="spring_boot"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"

frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx

@@ -5,6 +5,7 @@ import { Form, Input, Select } from 'antd';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import ExpressDocs from './md-docs/express.md';
@@ -62,6 +63,7 @@ export default function Javascript({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="express"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"

frontend/src/container/OnboardingContainer/APM/Python/Python.tsx

@@ -5,6 +5,7 @@ import { Form, Input, Select } from 'antd';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import DjangoDocs from './md-docs/django.md';
@@ -70,6 +71,7 @@ export default function Python({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="Django"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"

frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx

@@ -3,6 +3,7 @@ import { Select } from 'antd';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import FluentBit from './md-docs/fluentBit.md';
 import FluentD from './md-docs/fluentD.md';
@@ -51,6 +52,7 @@ export default function ExistingCollectors(): JSX.Element {
 					<div className="label"> Select Framework </div>
 
 					<Select
+						getPopupContainer={popupContainer}
 						defaultValue="fluent_d"
 						style={{ minWidth: 120 }}
 						placeholder="Select Framework"

frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx

@@ -5,6 +5,7 @@ import useResourceAttribute, {
 } from 'hooks/useResourceAttribute';
 import { convertMetricKeyToTrace } from 'hooks/useResourceAttribute/utils';
 import { ReactNode, useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import QueryChip from './components/QueryChip';
@@ -44,6 +45,7 @@ function ResourceAttributesFilter({
 				))}
 			</div>
 			<Select
+				getPopupContainer={popupContainer}
 				placeholder={!isEmpty && 'Search and Filter based on resource attributes.'}
 				onChange={handleChange}
 				bordered={false}

frontend/src/container/TopNav/AutoRefresh/index.tsx

@@ -26,6 +26,7 @@ import {
 	UPDATE_TIME_INTERVAL,
 } from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { getMinMax, options } from './config';
 import { ButtonContainer, Container } from './styles';
@@ -142,6 +143,7 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 
 	return (
 		<Popover
+			getPopupContainer={popupContainer}
 			placement="bottomLeft"
 			trigger={['click']}
 			content={

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -17,6 +17,7 @@ import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import AutoRefresh from '../AutoRefresh';
 import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal';
@@ -271,6 +272,7 @@ function DateTimeSelection({
 			>
 				<FormContainer>
 					<DefaultSelect
+						getPopupContainer={popupContainer}
 						onSelect={(value: unknown): void => onSelectHandler(value as Time)}
 						value={getInputLabel(
 							dayjs(minTime / 1000000),

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { TraceReducer } from 'types/reducer/trace';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { functions } from './config';
 import { SelectComponent } from './styles';
@@ -63,6 +64,7 @@ function TraceGraphFilter(): JSX.Element {
 			<label htmlFor="selectedFunction">Function</label>
 
 			<SelectComponent
+				getPopupContainer={popupContainer}
 				dropdownMatchSelectWidth
 				data-testid="selectedFunction"
 				id="selectedFunction"
@@ -78,6 +80,7 @@ function TraceGraphFilter(): JSX.Element {
 
 			<label htmlFor="selectedGroupBy">Group By</label>
 			<AutoComplete
+				getPopupContainer={popupContainer}
 				dropdownMatchSelectWidth
 				id="selectedGroupBy"
 				data-testid="selectedGroupBy"

frontend/src/pages/Logs/index.tsx

@@ -18,6 +18,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { SET_LOGS_ORDER } from 'types/actions/logs';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import {
 	defaultSelectStyle,
@@ -100,6 +101,7 @@ function Logs(): JSX.Element {
 						<Col flex={1}>
 							<Space align="baseline" direction="horizontal">
 								<Select
+									getPopupContainer={popupContainer}
 									style={defaultSelectStyle}
 									value={selectedViewModeOption}
 									onChange={onChangeVeiwMode}
@@ -110,12 +112,17 @@ function Logs(): JSX.Element {
 								</Select>
 
 								{isFormatButtonVisible && (
-									<Popover placement="right" content={renderPopoverContent}>
+									<Popover
+										getPopupContainer={popupContainer}
+										placement="right"
+										content={renderPopoverContent}
+									>
 										<Button>Format</Button>
 									</Popover>
 								)}
 
 								<Select
+									getPopupContainer={popupContainer}
 									style={defaultSelectStyle}
 									defaultValue={order}
 									onChange={handleChangeOrder}