Unify auto-refresh behaviour by disabling auto-refresh on search bar …

…form changes.
Graylog2 · Oct 11, 2023 · 799705a · 799705a
1 parent 3ad7e2f
commit 799705a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx
@@ -66,6 +66,16 @@ describe('RefreshControls', () => {
     children: undefined,
   };
 
+  const TriggerFormChangeButton = () => {
+    const { setFieldValue } = useFormikContext();
+
+    return (
+      <Button onClick={() => setFieldValue('example-field', 'example-value')}>
+        Change form field value
+      </Button>
+    );
+  };
+
   beforeEach(() => {
     asMock(useSearchConfiguration).mockReturnValue({
       config: {
@@ -118,16 +128,6 @@ describe('RefreshControls', () => {
     asMock(useRefreshConfig).mockReturnValue({ enabled: false, interval: 5000 });
     const onSubmitMock = jest.fn();
 
-    const TriggerFormChangeButton = () => {
-      const { setFieldValue } = useFormikContext();
-
-      return (
-        <Button onClick={() => setFieldValue('example-field', 'example-value')}>
-          Change form field value
-        </Button>
-      );
-    };
-
     render(
       <SUT onSubmit={onSubmitMock}>
         <TriggerFormChangeButton />
@@ -139,4 +139,18 @@ describe('RefreshControls', () => {
 
     await waitFor(() => expect(onSubmitMock).toHaveBeenCalled());
   });
+
+  it('should stop the interval when there are form changes while the interval is active', async () => {
+    asMock(useRefreshConfig).mockReturnValue({ enabled: true, interval: 5000 });
+
+    render(
+      <SUT>
+        <TriggerFormChangeButton />
+      </SUT>,
+    );
+
+    userEvent.click(await screen.findByRole('button', { name: /change form field value/i }));
+
+    await waitFor(() => expect(RefreshActions.disable).toHaveBeenCalled());
+  });
 });
diff --git a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.tsx
@@ -51,6 +51,17 @@ const ButtonLabel = ({ refreshConfigEnabled, naturalInterval }: {
   return <>{buttonText}</>;
 };
 
+const useDisableOnFormChange = () => {
+  const refreshConfig = useRefreshConfig();
+  const { dirty, isSubmitting } = useFormikContext();
+
+  useEffect(() => {
+    if (refreshConfig.enabled && !isSubmitting && dirty) {
+      RefreshActions.disable();
+    }
+  }, [dirty, isSubmitting, refreshConfig.enabled]);
+};
+
 const durationToMS = (duration: string) => moment.duration(duration).asMilliseconds();
 
 const RefreshControls = () => {
@@ -69,9 +80,14 @@ const RefreshControls = () => {
     });
 
     RefreshActions.setInterval(interval);
+
+    if (dirty) {
+      submitForm();
+    }
   };
 
   useEffect(() => () => RefreshActions.disable(), []);
+  useDisableOnFormChange();
 
   const _toggleEnable = useCallback(() => {
     sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_REFRESH_CONTROL_TOGGLED, {