LokiContext: Fix wrong queries being run when reopened (#62353)

* fix wrong query being run when reopened

* fix typo

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* and test for `onClose`

* rename functions

---------

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx

@@ -55,6 +55,7 @@ describe('LokiContextUi', () => {
           label3: 'value3',
         },
       } as unknown as LogRowModel,
+      onClose: jest.fn(),
     };
 
     return defaults;
@@ -113,4 +114,14 @@ describe('LokiContextUi', () => {
 
     jest.useRealTimers();
   });
+
+  it('unmounts and calls onClose', async () => {
+    const props = setupProps();
+    const comp = render(<LokiContextUi {...props} />);
+    comp.unmount();
+
+    await waitFor(() => {
+      expect(props.onClose).toHaveBeenCalled();
+    });
+  });
 });

public/app/plugins/datasource/loki/components/LokiContextUi.tsx

@@ -13,6 +13,7 @@ export interface LokiContextUiProps {
   languageProvider: LokiLanguageProvider;
   row: LogRowModel;
   updateFilter: (value: ContextFilter[]) => void;
+  onClose: () => void;
 }
 
 function getStyles(theme: GrafanaTheme2) {
@@ -43,7 +44,7 @@ const formatOptionLabel = memoizeOne(({ label, description }: SelectableValue<st
 ));
 
 export function LokiContextUi(props: LokiContextUiProps) {
-  const { row, languageProvider, updateFilter } = props;
+  const { row, languageProvider, updateFilter, onClose } = props;
   const styles = useStyles2(getStyles);
 
   const [contextFilters, setContextFilters] = useState<ContextFilter[]>([]);
@@ -74,6 +75,13 @@ export function LokiContextUi(props: LokiContextUiProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contextFilters, initialized]);
 
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerHandle.current);
+      onClose();
+    };
+  }, [onClose]);
+
   useAsync(async () => {
     await languageProvider.start();
     const allLabels = languageProvider.getLabelKeys();

public/app/plugins/datasource/loki/datasource.ts

@@ -758,7 +758,7 @@ export class LokiDatasource
     };
   };
 
-  async prepareContextExpr(row: LogRowModel, origQuery?: DataQuery): Promise<string> {
+  async prepareContextExprWithoutParsedLabels(row: LogRowModel, origQuery?: DataQuery): Promise<string> {
     await this.languageProvider.start();
     const labels = this.languageProvider.getLabelKeys();
     const expr = Object.keys(row.labels)
@@ -775,10 +775,17 @@ export class LokiDatasource
     return `{${expr}}`;
   }
 
+  async prepareContextExpr(row: LogRowModel, origQuery?: DataQuery): Promise<string> {
+    return await this.prepareContextExprWithoutParsedLabels(row, origQuery);
+  }
+
   getLogRowContextUi(row: LogRowModel, runContextQuery: () => void): React.ReactNode {
     return LokiContextUi({
       row,
       languageProvider: this.languageProvider,
+      onClose: () => {
+        this.prepareContextExpr = this.prepareContextExprWithoutParsedLabels;
+      },
       updateFilter: (contextFilters: ContextFilter[]) => {
         this.prepareContextExpr = async (row: LogRowModel, origQuery?: DataQuery) => {
           await this.languageProvider.start();