fix: hide PromQL from table panel type (#6117)

* fix: hide PromQL from table panel type

* fix: handled switch back to query tab if promql was selected earlier

* fix: made a constant for panel-type to query-type

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,14 +1,17 @@
 import './QuerySection.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import { getDefaultWidgetData } from 'container/NewWidget/utils';
+import {
+	getDefaultWidgetData,
+	PANEL_TYPE_TO_QUERY_TYPES,
+} from 'container/NewWidget/utils';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -112,16 +115,18 @@ function QuerySection({
 		],
 	);
 
-	const handleQueryCategoryChange = (qCategory: string): void => {
+	const handleQueryCategoryChange = useCallback(
+		(qCategory: string): void => {
 			const currentQueryType = qCategory;
-
 			featureResponse.refetch().then(() => {
 				handleStageQuery({
 					...currentQuery,
 					queryType: currentQueryType as EQueryType,
 				});
 			});
-	};
+		},
+		[currentQuery, featureResponse, handleStageQuery],
+	);
 
 	const handleRunQuery = (): void => {
 		const widgetId = urlQuery.get('widgetId');
@@ -147,72 +152,55 @@ function QuerySection({
 		return config;
 	}, []);
 
-	const listItems = [
+	const items = useMemo(() => {
-		{
+		const supportedQueryTypes = PANEL_TYPE_TO_QUERY_TYPES[selectedGraph] || [];
-			key: EQueryType.QUERY_BUILDER,
-			label: (
-				<Button className="nav-btns">
-					<Atom size={14} />
-					<Typography>Query Builder</Typography>
-				</Button>
-			),
-			tab: <Typography>Query Builder</Typography>,
-			children: (
-				<QueryBuilder
-					panelType={PANEL_TYPES.LIST}
-					filterConfigs={filterConfigs}
-					version={selectedDashboard?.data?.version || 'v3'}
-					isListViewPanel
-				/>
-			),
-		},
-	];
 
-	const items = [
+		const queryTypeComponents = {
-		{
+			[EQueryType.QUERY_BUILDER]: {
-			key: EQueryType.QUERY_BUILDER,
+				icon: <Atom size={14} />,
-			label: (
+				label: 'Query Builder',
-				<Button className="nav-btns">
+				component: (
-					<Atom size={14} />
-					<Typography>Query Builder</Typography>
-				</Button>
-			),
-			tab: <Typography>Query Builder</Typography>,
-			children: (
 					<QueryBuilder
 						panelType={selectedGraph}
 						filterConfigs={filterConfigs}
 						version={selectedDashboard?.data?.version || 'v3'}
+						isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
 					/>
 				),
 			},
-		{
+			[EQueryType.CLICKHOUSE]: {
-			key: EQueryType.CLICKHOUSE,
+				icon: <Terminal size={14} />,
-			label: (
+				label: 'ClickHouse Query',
-				<Button className="nav-btns">
+				component: <ClickHouseQueryContainer />,
-					<Terminal size={14} />
-					<Typography>ClickHouse Query</Typography>
-				</Button>
-			),
-			tab: <Typography>ClickHouse Query</Typography>,
-			children: <ClickHouseQueryContainer />,
 			},
-		{
+			[EQueryType.PROM]: {
-			key: EQueryType.PROM,
+				icon: (
-			label: (
-				<Tooltip title="PromQL">
-					<Button className="nav-btns">
 					<PromQLIcon
 						fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 					/>
-						<Typography>PromQL</Typography>
-					</Button>
-				</Tooltip>
 				),
-			tab: <Typography>PromQL</Typography>,
+				label: 'PromQL',
-			children: <PromQLQueryContainer />,
+				component: <PromQLQueryContainer />,
 			},
-	];
+		};
+
+		return supportedQueryTypes.map((queryType) => ({
+			key: queryType,
+			label: (
+				<Button className="nav-btns">
+					{queryTypeComponents[queryType].icon}
+					<Typography>{queryTypeComponents[queryType].label}</Typography>
+				</Button>
+			),
+			tab: <Typography>{queryTypeComponents[queryType].label}</Typography>,
+			children: queryTypeComponents[queryType].component,
+		}));
+	}, [
+		selectedGraph,
+		filterConfigs,
+		selectedDashboard?.data?.version,
+		isDarkMode,
+	]);
 
 	useEffect(() => {
 		registerShortcut(QBShortcuts.StageAndRunQuery, handleRunQuery);
@@ -223,6 +211,16 @@ function QuerySection({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [handleRunQuery]);
 
+	useEffect(() => {
+		// switch to query builder if query type is not supported
+		if (
+			selectedGraph === PANEL_TYPES.TABLE &&
+			currentQuery.queryType === EQueryType.PROM
+		) {
+			handleQueryCategoryChange(EQueryType.QUERY_BUILDER);
+		}
+	}, [currentQuery, handleQueryCategoryChange, selectedGraph]);
+
 	return (
 		<div className="dashboard-navigation">
 			<Tabs
@@ -267,7 +265,7 @@ function QuerySection({
 						</Button>
 					</span>
 				}
-				items={selectedGraph === PANEL_TYPES.LIST ? listItems : items}
+				items={items}
 			/>
 		</div>
 	);

frontend/src/container/NewWidget/utils.ts

@@ -11,6 +11,7 @@ import {
 import { cloneDeep, isEqual, set, unset } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const getIsQueryModified = (
@@ -492,3 +493,43 @@ export const getDefaultWidgetData = (
 		...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
 	],
 });
+
+export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
+	[PANEL_TYPES.TIME_SERIES]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.TABLE]: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
+	[PANEL_TYPES.VALUE]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.LIST]: [EQueryType.QUERY_BUILDER],
+	[PANEL_TYPES.TRACE]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.BAR]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.PIE]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.HISTOGRAM]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	[PANEL_TYPES.EMPTY_WIDGET]: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+};