From 7cec2db50386e7a6406e3a1f5d3dddf1f6d929e4 Mon Sep 17 00:00:00 2001
From: Amol Umbark <amolumbarkar@gmail.com>
Date: Fri, 25 Nov 2022 12:16:47 +0530
Subject: [PATCH] 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
---
 .../{ => ChQuerySection}/ChQuerySection.tsx   | 27 +++++---------
 .../FormAlertRules/ChQuerySection/index.ts    |  3 ++
 .../ChQuerySection/transform.ts               | 37 +++++++++++++++++++
 .../QueryBuilder/clickHouse/query.tsx         |  1 +
 4 files changed, 51 insertions(+), 17 deletions(-)
 rename frontend/src/container/FormAlertRules/{ => ChQuerySection}/ChQuerySection.tsx (70%)
 create mode 100644 frontend/src/container/FormAlertRules/ChQuerySection/index.ts
 create mode 100644 frontend/src/container/FormAlertRules/ChQuerySection/transform.ts

diff --git a/frontend/src/container/FormAlertRules/ChQuerySection.tsx b/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx
similarity index 70%
rename from frontend/src/container/FormAlertRules/ChQuerySection.tsx
rename to frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx
index 49af0aed04..aa316fe558 100644
--- a/frontend/src/container/FormAlertRules/ChQuerySection.tsx
+++ b/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}
 		/>
 	);
diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/index.ts b/frontend/src/container/FormAlertRules/ChQuerySection/index.ts
new file mode 100644
index 0000000000..a28e8594db
--- /dev/null
+++ b/frontend/src/container/FormAlertRules/ChQuerySection/index.ts
@@ -0,0 +1,3 @@
+import ChQuerySection from './ChQuerySection';
+
+export default ChQuerySection;
diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts b/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts
new file mode 100644
index 0000000000..5f5198ec81
--- /dev/null
+++ b/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 };
+};
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx
index 0ace45fdc8..389b7e15c4 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx
+++ b/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>