From 3f4cd130ed63f9838e11ede2e9a41526879b95ca Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Wed, 21 Jun 2023 16:46:11 +0530
Subject: [PATCH] fix: feature flag is added when we are switching the tab
 (#2930)

---
 .../src/container/FormAlertRules/QuerySection.tsx     | 11 ++++++++++-
 .../NewWidget/LeftContainer/QuerySection/index.tsx    |  8 +++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx
index b8c88ab683..4ccac39fc4 100644
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -4,8 +4,11 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { EQueryType } from 'types/common/dashboard';
+import AppReducer from 'types/reducer/app';
 
 import ChQuerySection from './ChQuerySection';
 import PromqlSection from './PromqlSection';
@@ -20,8 +23,14 @@ function QuerySection({
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
 
+	const { featureResponse } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
+
 	const handleQueryCategoryChange = (queryType: string): void => {
-		setQueryCategory(queryType as EQueryType);
+		featureResponse.refetch().then(() => {
+			setQueryCategory(queryType as EQueryType);
+		});
 	};
 
 	const renderPromqlUI = (): JSX.Element => <PromqlSection />;
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 655ecaaee7..d3e52120b3 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -20,6 +20,7 @@ import AppActions from 'types/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
+import AppReducer from 'types/reducer/app';
 import DashboardReducer from 'types/reducer/dashboards';
 
 import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
@@ -32,6 +33,9 @@ function QuerySection({
 }: QueryProps): JSX.Element {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const urlQuery = useUrlQuery();
+	const { featureResponse } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
 
 	const { dashboards } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
@@ -72,7 +76,9 @@ function QuerySection({
 	const handleQueryCategoryChange = (qCategory: string): void => {
 		const currentQueryType = qCategory as EQueryType;
 
-		handleStageQuery({ ...currentQuery, queryType: currentQueryType });
+		featureResponse.refetch().then(() => {
+			handleStageQuery({ ...currentQuery, queryType: currentQueryType });
+		});
 	};
 
 	const handleRunQuery = (): void => {