fix: [alerts] solved legend not updating issue in ch query editor (#1757)

* fix: [alerts] solved legend not updating issue in ch query editor

* fix: [alerts]removed console.log

* fix: added jsdoc description tag

frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx

@@ -3,6 +3,8 @@ import { IClickHouseQueryHandleChange } from 'container/NewWidget/LeftContainer/
 import React from 'react';
 import { IChQueries } from 'types/api/alerts/compositeQuery';
 
+import { rawQueryToIChQuery, toIClickHouseQuery } from './transform';
+
 function ChQuerySection({
 	chQueries,
 	setChQueries,
@@ -12,34 +14,25 @@ function ChQuerySection({
 		legend,
 		toggleDelete,
 	}: IClickHouseQueryHandleChange): void => {
-		let chQuery = chQueries.A;
+		const chQuery = rawQueryToIChQuery(
+			chQueries.A,
+			rawQuery,
+			legend,
+			toggleDelete,
+		);
 
-		if (rawQuery) {
-			chQuery.rawQuery = rawQuery;
-			chQuery.query = rawQuery;
-		}
-
-		if (legend) chQuery.legend = legend;
-		if (toggleDelete) {
-			chQuery = {
-				rawQuery: '',
-				legend: '',
-				name: 'A',
-				disabled: false,
-				query: '',
-			};
-		}
 		setChQueries({
 			A: {
 				...chQuery,
 			},
 		});
 	};
+
 	return (
 		<ClickHouseQueryBuilder
 			key="A"
 			queryIndex="A"
-			queryData={{ ...chQueries?.A, name: 'A', rawQuery: chQueries?.A.query }}
+			queryData={toIClickHouseQuery(chQueries?.A)}
 			handleQueryChange={handleChQueryChange}
 		/>
 	);

frontend/src/container/FormAlertRules/ChQuerySection/index.ts

@@ -0,0 +1,3 @@
+import ChQuerySection from './ChQuerySection';
+
+export default ChQuerySection;

frontend/src/container/FormAlertRules/ChQuerySection/transform.ts

@@ -0,0 +1,37 @@
+import { IChQuery } from 'types/api/alerts/compositeQuery';
+import { IClickHouseQuery } from 'types/api/dashboard/getAll';
+
+// @description rawQueryToIChQuery transforms raw query (from ClickHouseQueryBuilder)
+// to alert specific IChQuery format
+export const rawQueryToIChQuery = (
+	src: IChQuery,
+	rawQuery: string | undefined,
+	legend: string | undefined,
+	toggleDelete: boolean | undefined,
+): IChQuery => {
+	if (toggleDelete) {
+		return {
+			rawQuery: '',
+			legend: '',
+			name: 'A',
+			disabled: false,
+			query: '',
+		};
+	}
+
+	return {
+		rawQuery: rawQuery !== undefined ? rawQuery : src.rawQuery,
+		query: rawQuery !== undefined ? rawQuery : src.rawQuery,
+		legend: legend !== undefined ? legend : src.legend,
+		name: 'A',
+		disabled: false,
+	};
+};
+
+// @description toIClickHouseQuery transforms IChQuery (alert specific) to
+// ClickHouseQueryBuilder format. The main difference is
+// use of rawQuery (in ClickHouseQueryBuilder)
+// and query (in alert builder)
+export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => {
+	return { ...src, name: 'A', rawQuery: src.query };
+};

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx

@@ -54,6 +54,7 @@ function ClickHouseQueryBuilder({
 				}
 				size="middle"
 				defaultValue={queryData.legend}
+				value={queryData.legend}
 				addonBefore="Legend Format"
 			/>
 		</QueryHeader>