feat: add tooltip for disabled tab (#3071)

frontend/src/components/TabLabel/TabLabel.interfaces.ts

@@ -0,0 +1,5 @@
+export type TabLabelProps = {
+	isDisabled: boolean;
+	label: string;
+	tooltipText?: string;
+};

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);

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} />

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} />,
 	},