From 5c437dd8f99a87661253c3a2d7366c888ab29567 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Thu, 21 Sep 2023 19:49:43 +0530
Subject: [PATCH] fix: the scroll issue and name issue in save view (#3604)

---
 .../src/components/ExplorerCard/ExplorerCard.tsx   |  2 ++
 .../components/ExplorerCard/MenuItemGenerator.tsx  | 14 +++++++++++---
 frontend/src/components/ExplorerCard/utils.ts      |  7 +++++++
 .../filters/AggregatorFilter/AggregatorFilter.tsx  |  2 ++
 .../filters/GroupByFilter/GroupByFilter.tsx        |  2 ++
 .../filters/HavingFilter/HavingFilter.tsx          |  2 ++
 .../filters/OrderByFilter/OrderByFilter.tsx        |  2 ++
 .../filters/QueryBuilderSearch/index.tsx           |  2 ++
 frontend/src/utils/selectPopupContainer.ts         |  1 +
 9 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/utils/selectPopupContainer.ts

diff --git a/frontend/src/components/ExplorerCard/ExplorerCard.tsx b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
index 0944023b6c..6a3cd98e56 100644
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -30,6 +30,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
@@ -170,6 +171,7 @@ function ExplorerCard({
 							{viewsData?.data.data && viewsData?.data.data.length && (
 								<Space>
 									<Select
+										getPopupContainer={popupContainer}
 										loading={isLoading || isRefetching}
 										showSearch
 										placeholder="Select a view"
diff --git a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
index 77a143adf9..c908e703dd 100644
--- a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
+++ b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Typography } from 'antd';
+import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -8,7 +8,11 @@ import { MouseEvent, useCallback } from 'react';
 
 import { MenuItemContainer } from './styles';
 import { MenuItemLabelGeneratorProps } from './types';
-import { deleteViewHandler, getViewDetailsUsingViewKey } from './utils';
+import {
+	deleteViewHandler,
+	getViewDetailsUsingViewKey,
+	trimViewName,
+} from './utils';
 
 function MenuItemGenerator({
 	viewName,
@@ -71,12 +75,16 @@ function MenuItemGenerator({
 		});
 	};
 
+	const newViewName = trimViewName(viewName);
+
 	return (
 		<MenuItemContainer onClick={onLabelClickHandler}>
 			<Row justify="space-between">
 				<Col span={22}>
 					<Row>
-						<Typography.Text strong>{viewName}</Typography.Text>
+						<Tooltip title={viewName}>
+							<Typography.Text strong>{newViewName}</Typography.Text>
+						</Tooltip>
 					</Row>
 					<Row>
 						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
diff --git a/frontend/src/components/ExplorerCard/utils.ts b/frontend/src/components/ExplorerCard/utils.ts
index 2fd33b3c7d..8ecef3e44a 100644
--- a/frontend/src/components/ExplorerCard/utils.ts
+++ b/frontend/src/components/ExplorerCard/utils.ts
@@ -174,3 +174,10 @@ export const deleteViewHandler = ({
 		},
 	});
 };
+
+export const trimViewName = (viewName: string): string => {
+	if (viewName.length > 20) {
+		return `${viewName.substring(0, 20)}...`;
+	}
+	return viewName;
+};
diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
index 62c07ae91d..c491e55b54 100644
--- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
@@ -22,6 +22,7 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 import { ExtendedSelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
@@ -172,6 +173,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 
 	return (
 		<AutoComplete
+			getPopupContainer={popupContainer}
 			placeholder={placeholder}
 			style={selectStyle}
 			showArrow={false}
diff --git a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
index 5be89bcf2b..905684de89 100644
--- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
@@ -18,6 +18,7 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { SelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import { GroupByFilterProps } from './GroupByFilter.interfaces';
@@ -169,6 +170,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}
diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
index 7fc298aeb0..5a1856a050 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 // ** Types
 import { HavingFilterProps } from './HavingFilter.interfaces';
@@ -224,6 +225,7 @@ export function HavingFilter({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			autoClearSearchValue={false}
 			mode="multiple"
 			onSearch={handleSearch}
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
index 4c1d42bdbc..3cb5aaa37c 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
@@ -2,6 +2,7 @@ import { Select, Spin } from 'antd';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useMemo } from 'react';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
@@ -66,6 +67,7 @@ export function OrderByFilter({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 4a83f1611f..4b2c4fe6b3 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -23,6 +23,7 @@ import {
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import { selectStyle } from './config';
@@ -185,6 +186,7 @@ function QueryBuilderSearch({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			virtual
 			showSearch
 			tagRender={onTagRender}
diff --git a/frontend/src/utils/selectPopupContainer.ts b/frontend/src/utils/selectPopupContainer.ts
new file mode 100644
index 0000000000..93e7dbbfd7
--- /dev/null
+++ b/frontend/src/utils/selectPopupContainer.ts
@@ -0,0 +1 @@
+export const popupContainer = (trigger: any): HTMLElement => trigger.parentNode;