From e7b87fa201a9fd2c967ca28e6d9b2e9f961d0945 Mon Sep 17 00:00:00 2001
From: Aleksandar Petrov <8142643+aleks-p@users.noreply.github.com>
Date: Wed, 29 Nov 2023 16:33:05 -0400
Subject: [PATCH] Fix issue with old queries running when using the run button

---
 .../QueryEditor/LabelsEditor.tsx                   |  2 ++
 .../QueryEditor/QueryEditor.tsx                    | 14 ++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
index 32b6c76cd15..4c034220c50 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
@@ -11,6 +11,7 @@ import { CompletionProvider } from './autocomplete';
 interface Props {
   value: string;
   onChange: (val: string) => void;
+  onBlur: () => void;
   onRunQuery: (value: string) => void;
   getLabelNames: () => string[];
   getLabelValues: (label: string) => Promise<string[]>;
@@ -33,6 +34,7 @@ export function LabelsEditor(props: Props) {
         value={props.value}
         language={langId}
         onChange={props.onChange}
+        onBlur={props.onBlur}
         containerStyles={styles.queryField}
         monacoOptions={{
           folding: false,
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
index 532f2e5fce6..b7548f542fe 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
@@ -25,7 +25,7 @@ export function QueryEditor(props: Props) {
   }
 
   const profileTypes = useProfileTypes(datasource);
-  const { getLabelNames, getLabelValues, onLabelSelectorChange } = useLabels(range, datasource, query, onChange);
+  const { getLabelNames, getLabelValues, onLabelSelectorChange, onBlur } = useLabels(range, datasource, query, onChange);
   useNormalizeQuery(query, profileTypes, onChange, app);
 
   let cascader = <LoadingPlaceholder text={'Loading'} />;
@@ -53,6 +53,7 @@ export function QueryEditor(props: Props) {
         <LabelsEditor
           value={query.labelSelector}
           onChange={onLabelSelectorChange}
+          onBlur={onBlur}
           onRunQuery={handleRunQuery}
           getLabelNames={getLabelNames}
           getLabelValues={getLabelValues}
@@ -182,14 +183,15 @@ function useLabels(
 
   const onLabelSelectorChange = useCallback(
     (value: string) => {
-      // onChange({ ...query, labelSelector: value });
       setRawQuery({
         data: value,
       })
-      query.labelSelector = value
-    },
-    [setRawQuery, query]
+    }, [setRawQuery]
   );
 
-  return { getLabelNames, getLabelValues, onLabelSelectorChange };
+  const onBlur = useCallback(() => {
+    onChange({ ...query, labelSelector: rawQuery.data });
+  }, [query, onChange, rawQuery.data])
+
+  return { getLabelNames, getLabelValues, onLabelSelectorChange, onBlur };
 }