From 84c81b054cbab01510b811929fd00a793e0e4998 Mon Sep 17 00:00:00 2001
From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com>
Date: Fri, 7 Jul 2023 15:35:42 +0300
Subject: [PATCH] feat: add tooltip for disabled tab (#3071)

---
 .../TabLabel/TabLabel.interfaces.ts           |  5 ++++
 frontend/src/components/TabLabel/index.tsx    | 29 +++++++++++++++++++
 .../src/container/LogsExplorerViews/index.tsx | 11 +++++--
 frontend/src/pages/TracesExplorer/utils.tsx   | 19 ++++++++++--
 4 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/TabLabel/TabLabel.interfaces.ts
 create mode 100644 frontend/src/components/TabLabel/index.tsx

diff --git a/frontend/src/components/TabLabel/TabLabel.interfaces.ts b/frontend/src/components/TabLabel/TabLabel.interfaces.ts
new file mode 100644
index 0000000000..5e8762e82e
--- /dev/null
+++ b/frontend/src/components/TabLabel/TabLabel.interfaces.ts
@@ -0,0 +1,5 @@
+export type TabLabelProps = {
+	isDisabled: boolean;
+	label: string;
+	tooltipText?: string;
+};
diff --git a/frontend/src/components/TabLabel/index.tsx b/frontend/src/components/TabLabel/index.tsx
new file mode 100644
index 0000000000..ec92505689
--- /dev/null
+++ b/frontend/src/components/TabLabel/index.tsx
@@ -0,0 +1,29 @@
+import { Tooltip } from 'antd';
+import { memo } from 'react';
+
+import { TabLabelProps } from './TabLabel.interfaces';
+
+function TabLabel({
+	label,
+	isDisabled,
+	tooltipText,
+}: TabLabelProps): JSX.Element {
+	const currentLabel = <span>{label}</span>;
+
+	if (isDisabled) {
+		return (
+			<Tooltip
+				trigger="hover"
+				autoAdjustOverflow
+				placement="top"
+				title={tooltipText}
+			>
+				{currentLabel}
+			</Tooltip>
+		);
+	}
+
+	return currentLabel;
+}
+
+export default memo(TabLabel);
diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx
index 8b5eecb869..560c498b3f 100644
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -1,4 +1,5 @@
 import { TabsProps } from 'antd';
+import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { queryParamNamesMap } from 'constants/queryBuilderQueryNames';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
@@ -252,7 +253,13 @@ function LogsExplorerViews(): JSX.Element {
 	const tabsItems: TabsProps['items'] = useMemo(
 		() => [
 			{
-				label: 'List View',
+				label: (
+					<TabLabel
+						label="List View"
+						tooltipText="Please remove attributes from Group By filter to switch to List View tab"
+						isDisabled={isMultipleQueries || isGroupByExist}
+					/>
+				),
 				key: PANEL_TYPES.LIST,
 				disabled: isMultipleQueries || isGroupByExist,
 				children: (
@@ -267,7 +274,7 @@ function LogsExplorerViews(): JSX.Element {
 				),
 			},
 			{
-				label: 'TimeSeries',
+				label: <TabLabel label="Time Series" isDisabled={false} />,
 				key: PANEL_TYPES.TIME_SERIES,
 				children: (
 					<TimeSeriesView isLoading={isFetching} data={data} isError={isError} />
diff --git a/frontend/src/pages/TracesExplorer/utils.tsx b/frontend/src/pages/TracesExplorer/utils.tsx
index 2c0143dadc..c2aa7b58ce 100644
--- a/frontend/src/pages/TracesExplorer/utils.tsx
+++ b/frontend/src/pages/TracesExplorer/utils.tsx
@@ -1,4 +1,5 @@
 import { TabsProps } from 'antd';
+import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeriesView from 'container/TimeSeriesView';
 import ListView from 'container/TracesExplorer/ListView';
@@ -13,19 +14,31 @@ export const getTabsItems = ({
 	isListViewDisabled,
 }: GetTabsItemsProps): TabsProps['items'] => [
 	{
-		label: 'List View',
+		label: (
+			<TabLabel
+				label="List View"
+				isDisabled={isListViewDisabled}
+				tooltipText="Please remove attributes from Group By filter to switch to List View tab"
+			/>
+		),
 		key: PANEL_TYPES.LIST,
 		children: <ListView />,
 		disabled: isListViewDisabled,
 	},
 	{
-		label: 'Traces',
+		label: (
+			<TabLabel
+				label="Traces"
+				isDisabled={isListViewDisabled}
+				tooltipText="Please remove attributes from Group By filter to switch to Traces tab"
+			/>
+		),
 		key: PANEL_TYPES.TRACE,
 		children: <TracesView />,
 		disabled: isListViewDisabled,
 	},
 	{
-		label: 'Time Series',
+		label: <TabLabel label="Time Series" isDisabled={false} />,
 		key: PANEL_TYPES.TIME_SERIES,
 		children: <TimeSeriesView dataSource={DataSource.TRACES} />,
 	},