From 9a61a3d58faba5863483bf115b3a8f533240181a Mon Sep 17 00:00:00 2001
From: jacovinus <jacovinus@gmail.com>
Date: Mon, 4 Dec 2023 13:01:39 +0100
Subject: [PATCH] fix: query builder with editable input

---
 packages/main/plugins/QueryPreview.tsx        |  2 +-
 packages/main/sections/Browser/helpers.tsx    |  2 +-
 .../QueryBuilder/LogsFormBuilder.tsx          | 44 +++++++++++--------
 .../QueryBuilder/MetricsFormBuilder.tsx       | 44 +++++++++++++------
 4 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/packages/main/plugins/QueryPreview.tsx b/packages/main/plugins/QueryPreview.tsx
index 41a1403d..29fdedf0 100644
--- a/packages/main/plugins/QueryPreview.tsx
+++ b/packages/main/plugins/QueryPreview.tsx
@@ -14,7 +14,7 @@ interface Props {
     queryInput?: any;
 }
 
-const QueryPreviewContainer = (theme: any) => css`
+export const QueryPreviewContainer = (theme: any) => css`
     padding: 8px;
     display: flex;
     flex: 1;
diff --git a/packages/main/sections/Browser/helpers.tsx b/packages/main/sections/Browser/helpers.tsx
index 699ae57d..ae51b29f 100644
--- a/packages/main/sections/Browser/helpers.tsx
+++ b/packages/main/sections/Browser/helpers.tsx
@@ -14,7 +14,7 @@ export default function queryInit(query: any) {
             type: "paragraph",
             children: [
                 {
-                    text: DOMPurify.sanitize("Enter a cLoki Query"),
+                    text: DOMPurify.sanitize("Enter a Query"),
                 },
             ],
         },
diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx
index ccfe6772..18c74c85 100644
--- a/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx
+++ b/packages/main/src/components/DataViews/components/QueryBuilder/LogsFormBuilder.tsx
@@ -6,8 +6,10 @@ import { FlexColumn } from "./styles";
 
 import { LogsFormBuilderProps, Builder } from "./types";
 import { FormBuilders } from "./FormBuilders";
-import QueryPreview from "@ui/plugins/QueryPreview";
+import { QueryPreviewContainer } from "@ui/plugins/QueryPreview";
 import { useSelector } from "react-redux";
+import queryInit from "@ui/main/components/LabelBrowser/helpers/queryInit";
+import QueryEditor from "@ui/plugins/queryeditor";
 
 const initialBuilder: Builder = {
     operations: [],
@@ -44,24 +46,22 @@ const binaryOperatorOpts: any = {
 };
 
 /**
- * 
- * @param props 
+ *
+ * @param props
  * @returns The Logs Form Builder
  */
 export function LogsFormBuilder(props: LogsFormBuilderProps) {
-
     const {
         dataSourceId,
         labelValueChange,
         handleLogsVolumeChange,
         searchButton,
-        queryInput
     } = props;
 
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector ((store:any)=> store.start)
-    const stop = useSelector ((store:any)=> store.stop)
-
+    const start = useSelector((store: any) => store.start);
+    const stop = useSelector((store: any) => store.stop);
+    const [editorValue, setEditorValue] = useState(queryInit(""));
     const { logsResponse } = useLogLabels(
         dataSourceId,
         start,
@@ -78,7 +78,7 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
         (idx: number) => {
             setBuilders((prev) => [...prev, { ...prev[idx], isBinary: true }]);
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+
         [builders]
     );
 
@@ -86,12 +86,11 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
         if (builders[0].logsVolumeQuery !== "") {
             handleLogsVolumeChange(builders[0].logsVolumeQuery);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
     useEffect(() => {
         labelValueChange(finalQuery);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        setEditorValue(queryInit(finalQuery));
     }, [finalQuery]);
 
     useEffect(() => {
@@ -115,7 +114,7 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
         }
         return ` ${binaryOperatorOpts[binaryOpt]} ${vectString}`;
     };
-   
+
     const finalQueryOperator = (builders: Builder[]) => {
         let finalQuery = "";
 
@@ -133,9 +132,12 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
 
     useEffect(() => {
         setFinalQuery(finalQueryOperator(builders));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
+    const onEditorChange = (e) => {
+        labelValueChange(e[0]?.children[0]?.text);
+    };
+
     return (
         <ThemeProvider theme={mainTheme}>
             <div className={cx(FlexColumn)}>
@@ -148,12 +150,16 @@ export function LogsFormBuilder(props: LogsFormBuilderProps) {
                     builders={builders}
                     finalQuery={finalQuery}
                 />
-                <QueryPreview
-                    queryText={finalQuery}
-                    searchButton={searchButton}
-                    queryInput={queryInput}
-                
-                />
+
+                <div className={cx(QueryPreviewContainer(mainTheme))}>
+                    <label>Raw Query</label>
+                    <QueryEditor
+                        onQueryChange={onEditorChange}
+                        defaultValue={editorValue}
+                        value={editorValue}
+                    />
+                    <div className="action-buttons">{searchButton}</div>
+                </div>
             </div>
         </ThemeProvider>
     );
diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx
index b55f7aa3..f3753604 100644
--- a/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx
+++ b/packages/main/src/components/DataViews/components/QueryBuilder/MetricsFormBuilder.tsx
@@ -6,16 +6,21 @@ import { FlexColumn } from "./styles";
 
 import { MetricsFormBuilderProps, Builder } from "./types";
 import { FormBuilders } from "./FormBuilders";
-import QueryPreview from "@ui/plugins/QueryPreview";
+import { QueryPreviewContainer } from "@ui/plugins/QueryPreview";
+import QueryEditor from "@ui/plugins/queryeditor";
 import { useSelector } from "react-redux";
 import { initialMetricsBuilder, binaryOperatorOpts } from "./consts";
+import queryInit from "@ui/main/components/LabelBrowser/helpers/queryInit";
 
 export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
-    const { dataSourceId, labelValueChange, searchButton, logsRateButton, queryInput } = props;
-    
+    const { dataSourceId, labelValueChange, searchButton, logsRateButton } =
+        props;
+
     const dataSources = useSelector((store: any) => store.dataSources);
-    const start = useSelector ((store:any)=> store.start)
-    const stop = useSelector ((store:any)=> store.stop)
+    const start = useSelector((store: any) => store.start);
+    const stop = useSelector((store: any) => store.stop);
+
+    const [editorValue, setEditorValue] = useState(queryInit(""));
 
     // this one should be comming form selected metric
 
@@ -37,13 +42,13 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
         (idx: number) => {
             setBuilders((prev) => [...prev, { ...prev[idx], isBinary: true }]);
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+
         [builders]
     );
 
     useEffect(() => {
         labelValueChange(finalQuery);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        setEditorValue(queryInit(finalQuery));
     }, [finalQuery]);
 
     useEffect(() => {
@@ -82,9 +87,12 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
 
     // send a 'logs query' to the builders
 
+    const onEditorChange = (e) => {
+        labelValueChange(e[0]?.children[0]?.text);
+    };
+
     useEffect(() => {
         setFinalQuery(finalQueryOperator(builders));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [builders]);
 
     return (
@@ -99,13 +107,21 @@ export function MetricsFormBuilder(props: MetricsFormBuilderProps) {
                     builders={builders}
                     finalQuery={finalQuery}
                 />
-                <QueryPreview
-                    queryText={finalQuery}
-                    searchButton={searchButton}
-                    logsRateButton={logsRateButton}
-                    queryInput={queryInput}
-                />
+
+                <div className={cx(QueryPreviewContainer(mainTheme))}>
+                    <label>Raw Query</label>
+                    <QueryEditor
+                        onQueryChange={onEditorChange}
+                        defaultValue={editorValue}
+                        value={editorValue}
+                    />
+                    <div className="action-buttons">
+                        {logsRateButton}
+                        {searchButton}
+                    </div>
+                </div>
             </div>
         </ThemeProvider>
     );
 }
+// the queryPreview should be switched to a query editor with a button