Correctly normalize keyword time range for search bar form when selec…

…ting keyword time range. (#15938)

* Normalize keyword time range for search bar form.

Before this change a keyword time range in the search bar form could have not needed `from` and `to` attributes.

* Adding test

* Adding changelog

changelog/unreleased/issue-15472.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix problem with search bar submit button incorrectly indicating changes for keyword time range."
+
+issues = ["15472"]
+pulls = ["15938"]

graylog2-web-interface/src/views/components/searchbar/date-time-picker/TimeRangeDropdown.test.tsx

@@ -17,6 +17,7 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from 'wrappedTestingLibrary';
 import { applyTimeoutMultiplier } from 'jest-preset-graylog/lib/timeouts';
+import userEvent from '@testing-library/user-event';
 
 import { StoreMock as MockStore, asMock } from 'helpers/mocking';
 import mockSearchClusterConfig from 'fixtures/searchClusterConfig';
@@ -45,7 +46,7 @@ const defaultProps = {
     type: 'relative',
     from: 300,
   },
-  limitDuration: 259200,
+  limitDuration: 0,
   noOverride: false,
   setCurrentTimeRange: jest.fn(),
   toggleDropdownShow: jest.fn(),
@@ -88,7 +89,7 @@ describe('TimeRangeDropdown', () => {
   });
 
   it('Limit duration is shown when setup', async () => {
-    render(<TimeRangeDropdown {...defaultProps} />);
+    render(<TimeRangeDropdown {...defaultProps} limitDuration={259200} />);
 
     const limitDuration = await screen.findByText(/admin has limited searching to 3 days ago/i);
 
@@ -132,4 +133,22 @@ describe('TimeRangeDropdown', () => {
     expect(noOverrideButton).toBeInTheDocument();
     expect(noOverrideContent).toBeInTheDocument();
   });
+
+  it('Should not change keyword time range after submitting without changes', async () => {
+    const setCurrentTimeRange = jest.fn();
+
+    render(<TimeRangeDropdown {...defaultProps}
+                              currentTimeRange={{ type: 'keyword', keyword: 'yesterday', timezone: 'Asia/Tokyo' }}
+                              setCurrentTimeRange={setCurrentTimeRange} />);
+
+    const submitButton = await screen.findByRole('button', {
+      name: /update time range/i,
+    });
+
+    userEvent.click(submitButton);
+
+    await waitFor(() => expect(setCurrentTimeRange).toHaveBeenCalledTimes(1));
+
+    expect(setCurrentTimeRange).toHaveBeenCalledWith({ type: 'keyword', keyword: 'yesterday', timezone: 'Asia/Tokyo' });
+  });
 });

graylog2-web-interface/src/views/components/searchbar/date-time-picker/TimeRangeDropdown.tsx

@@ -31,7 +31,7 @@ import type {
   RelativeTimeRange,
 } from 'views/logic/queries/Query';
 import type { SearchBarFormValues } from 'views/Constants';
-import { isTypeRelative } from 'views/typeGuards/timeRange';
+import { isTypeKeyword, isTypeRelative } from 'views/typeGuards/timeRange';
 import { normalizeIfAllMessagesRange } from 'views/logic/queries/NormalizeTimeRange';
 import type { RelativeTimeRangeClassified } from 'views/components/searchbar/date-time-picker/types';
 import validateTimeRange from 'views/components/TimeRangeValidation';
@@ -272,10 +272,28 @@ const TimeRangeDropdown = ({
     });
   }, [sendTelemetry, toggleDropdownShow]);
 
+  const normalizeIfKeywordTimerange = (timeRange: TimeRange | NoTimeRangeOverride) => {
+    if (isTypeKeyword(timeRange)) {
+      return {
+        type: timeRange.type,
+        timezone: timeRange.timezone,
+        keyword: timeRange.keyword,
+      };
+    }
+
+    return timeRange;
+  };
+
   const handleSubmit = useCallback(({ nextTimeRange }: {
     nextTimeRange: TimeRangeDropDownFormValues['nextTimeRange']
   }) => {
-    setCurrentTimeRange(normalizeIfAllMessagesRange(normalizeIfClassifiedRelativeTimeRange(nextTimeRange)));
+    const normalizedTimeRange = normalizeIfKeywordTimerange(
+      normalizeIfAllMessagesRange(
+        normalizeIfClassifiedRelativeTimeRange(nextTimeRange),
+      ),
+    );
+
+    setCurrentTimeRange(normalizedTimeRange);
 
     toggleDropdownShow();