Loki query direction: run initialization only in Explore and Dashboards (#100182)

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { CoreApp, LogSortOrderChangeEvent, LogsSortOrder, store } from '@grafana/data';
@@ -214,42 +214,42 @@ describe('LokiQueryBuilderOptions', () => {
   });
 
   describe('Query direction', () => {
-    it("initializes query direction when it's empty", async () => {
+    it("initializes query direction when it's empty in Explore or Dashboards", () => {
       const onChange = jest.fn();
-      setup({ expr: '{foo="bar"}' }, onChange);
+      setup({ expr: '{foo="bar"}' }, onChange, { app: CoreApp.Explore });
-      await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith({
-        expect(onChange).toHaveBeenCalledWith({
+        expr: '{foo="bar"}',
-          expr: '{foo="bar"}',
+        refId: 'A',
-          refId: 'A',
+        direction: LokiQueryDirection.Backward,
-          direction: LokiQueryDirection.Backward,
+      });
-        })
-      );
     });
 
-    it('uses backward as default in Explore with no previous stored preference', async () => {
+    it('does not change direction on initialization elsewhere', () => {
+      const onChange = jest.fn();
+      setup({ expr: '{foo="bar"}' }, onChange, { app: undefined });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('uses backward as default in Explore with no previous stored preference', () => {
       const onChange = jest.fn();
       store.delete('grafana.explore.logs.sortOrder');
       setup({ expr: '{foo="bar"}' }, onChange, { app: CoreApp.Explore });
-      await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith({
-        expect(onChange).toHaveBeenCalledWith({
+        expr: '{foo="bar"}',
-          expr: '{foo="bar"}',
+        refId: 'A',
-          refId: 'A',
+        direction: LokiQueryDirection.Backward,
-          direction: LokiQueryDirection.Backward,
+      });
-        })
-      );
     });
 
-    it('uses the stored sorting option to determine direction in Explore', async () => {
+    it('uses the stored sorting option to determine direction in Explore', () => {
       store.set('grafana.explore.logs.sortOrder', LogsSortOrder.Ascending);
       const onChange = jest.fn();
       setup({ expr: '{foo="bar"}' }, onChange, { app: CoreApp.Explore });
-      await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith({
-        expect(onChange).toHaveBeenCalledWith({
+        expr: '{foo="bar"}',
-          expr: '{foo="bar"}',
+        refId: 'A',
-          refId: 'A',
+        direction: LokiQueryDirection.Forward,
-          direction: LokiQueryDirection.Forward,
+      });
-        })
-      );
       store.delete('grafana.explore.logs.sortOrder');
     });
 

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx

@@ -39,6 +39,9 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
     const [splitDurationValid, setSplitDurationValid] = useState(true);
 
     useEffect(() => {
+      if (app !== CoreApp.Explore && app !== CoreApp.Dashboard && app !== CoreApp.PanelEditor) {
+        return;
+      }
       // Initialize the query direction according to the current environment.
       if (!query.direction) {
         onChange({ ...query, direction: getDefaultQueryDirection(app) });
@@ -182,7 +185,11 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
                 />
               </EditorField>
               <EditorField label="Direction" tooltip="Direction to search for logs.">
-                <RadioButtonGroup options={queryDirections} value={query.direction} onChange={onQueryDirectionChange} />
+                <RadioButtonGroup
+                  options={queryDirections}
+                  value={query.direction ?? getDefaultQueryDirection(app)}
+                  onChange={onQueryDirectionChange}
+                />
               </EditorField>
             </>
           )}