diff --git a/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx b/graylog2-web-interface/src/views/components/searchbar/RefreshControls.test.tsx index 0a4cc7fbe00e0..b58e7a8c1cf13 100644 --- 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 ( + + ); + }; + 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 ( - - ); - }; - render( @@ -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( + + + , + ); + + 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 index 5eae4cc8473df..d8b52df6b0035 100644 --- 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, {