From cbd2f4c6430250d204189c047040ee1e09246326 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Mon, 25 Sep 2023 19:39:10 +0530
Subject: [PATCH] [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    | 1 +
 frontend/src/components/TextToolTip/index.tsx            | 3 ++-
 frontend/src/container/Controls/index.tsx                | 2 ++
 .../src/container/GridGraphLayout/WidgetHeader/index.tsx | 2 ++
 frontend/src/container/ListOfDashboard/index.tsx         | 2 ++
 frontend/src/container/LiveLogs/ListViewPanel/index.tsx  | 8 +++++++-
 frontend/src/container/LogLiveTail/index.tsx             | 3 +++
 frontend/src/container/LogsSearchFilter/index.tsx        | 2 ++
 .../src/container/OnboardingContainer/APM/Java/Java.tsx  | 2 ++
 .../OnboardingContainer/APM/Javascript/Javascript.tsx    | 2 ++
 .../container/OnboardingContainer/APM/Python/Python.tsx  | 2 ++
 .../ExistingCollectors/ExistingCollectors.tsx            | 2 ++
 .../ResourceAttributesFilter.tsx                         | 2 ++
 frontend/src/container/TopNav/AutoRefresh/index.tsx      | 2 ++
 .../src/container/TopNav/DateTimeSelection/index.tsx     | 2 ++
 frontend/src/container/Trace/TraceGraphFilter/index.tsx  | 3 +++
 frontend/src/pages/Logs/index.tsx                        | 9 ++++++++-
 17 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ExplorerCard/ExplorerCard.tsx b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
index 6a3cd98e56..b49cfaa2d6 100644
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -206,6 +206,7 @@ function ExplorerCard({
 								</Button>
 							)}
 							<Popover
+								getPopupContainer={popupContainer}
 								placement="bottomLeft"
 								trigger="click"
 								content={
diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx
index 70e5c04685..72f631a872 100644
--- a/frontend/src/components/TextToolTip/index.tsx
+++ b/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} />
 			) : (
diff --git a/frontend/src/container/Controls/index.tsx b/frontend/src/container/Controls/index.tsx
index 8971214a05..5618a7344a 100644
--- a/frontend/src/container/Controls/index.tsx
+++ b/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
diff --git a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
index b5c4b3ffbf..20ad222e55 100644
--- a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
+++ b/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}
diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
index 669ee75942..6041b8baf4 100644
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/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}
diff --git a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx b/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
index 12b4266490..f517241cdd 100644
--- a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
+++ b/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>
 			)}
diff --git a/frontend/src/container/LogLiveTail/index.tsx b/frontend/src/container/LogLiveTail/index.tsx
index 08faeda94c..070423229f 100644
--- a/frontend/src/container/LogLiveTail/index.tsx
+++ b/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"
diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx
index 4b857aa83b..733bf0f306 100644
--- a/frontend/src/container/LogsSearchFilter/index.tsx
+++ b/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>
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
index 97fd2f907a..205d68d4c0 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
+++ b/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"
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
index bff9406f13..197c9f62d6 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
+++ b/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"
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
index 31d28db700..526b566124 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
+++ b/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"
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
index a0ccead4a8..6ad936134b 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
+++ b/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"
diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
index 1be1dd3486..a61a0ce0ee 100644
--- a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
+++ b/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}
diff --git a/frontend/src/container/TopNav/AutoRefresh/index.tsx b/frontend/src/container/TopNav/AutoRefresh/index.tsx
index e83276e983..11a22e700f 100644
--- a/frontend/src/container/TopNav/AutoRefresh/index.tsx
+++ b/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={
diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
index 2fc05ecca4..742409e455 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx
+++ b/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),
diff --git a/frontend/src/container/Trace/TraceGraphFilter/index.tsx b/frontend/src/container/Trace/TraceGraphFilter/index.tsx
index bc13641d02..950a993e66 100644
--- a/frontend/src/container/Trace/TraceGraphFilter/index.tsx
+++ b/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"
diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx
index edae696519..d690f40f9c 100644
--- a/frontend/src/pages/Logs/index.tsx
+++ b/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}