[8.8] [Security Solution][Endpoint][Response Actions] Set default start/end dates for response actions history page (#158407) (#158593)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Security Solution][Endpoint][Response Actions] Set default start/end
dates for response actions history page
(#158407)](https://github.com/elastic/kibana/pull/158407)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Ashokaditya","email":"1849116+ashokaditya@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-05-26T17:21:47Z","message":"[Security
Solution][Endpoint][Response Actions] Set default start/end dates for
response actions history page (#158407)\n\n## Summary\r\n\r\nFixes a bug
on the response actions history page where even though the\r\ndate range
filter shows `Last 24 hours` the table actually shows all\r\nactions
log.\r\n\r\nfixes elastic/kibana/issues/157676\r\n\r\n### Checklist\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"b2355a9d333bf606b3df5ad5903db584d74291aa","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Defend
Workflows","OLM
Sprint","v8.9.0","v8.8.1"],"number":158407,"url":"https://github.com/elastic/kibana/pull/158407","mergeCommit":{"message":"[Security
Solution][Endpoint][Response Actions] Set default start/end dates for
response actions history page (#158407)\n\n## Summary\r\n\r\nFixes a bug
on the response actions history page where even though the\r\ndate range
filter shows `Last 24 hours` the table actually shows all\r\nactions
log.\r\n\r\nfixes elastic/kibana/issues/157676\r\n\r\n### Checklist\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"b2355a9d333bf606b3df5ad5903db584d74291aa"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/158407","number":158407,"mergeCommit":{"message":"[Security
Solution][Endpoint][Response Actions] Set default start/end dates for
response actions history page (#158407)\n\n## Summary\r\n\r\nFixes a bug
on the response actions history page where even though the\r\ndate range
filter shows `Last 24 hours` the table actually shows all\r\nactions
log.\r\n\r\nfixes elastic/kibana/issues/157676\r\n\r\n### Checklist\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"b2355a9d333bf606b3df5ad5903db584d74291aa"}},{"branch":"8.8","label":"v8.8.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Ashokaditya <1849116+ashokaditya@users.noreply.github.com>

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx

@@ -17,7 +17,6 @@ import type {
 } from '@elastic/eui/src/components/date_picker/types';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
 import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
-import { useActionHistoryUrlParams } from './use_action_history_url_params';
 
 export interface DateRangePickerValues {
   autoRefreshOptions: {
@@ -37,7 +36,6 @@ export const ActionLogDateRangePicker = memo(
   ({
     dateRangePickerState,
     isDataLoading,
-    isFlyout,
     onRefresh,
     onRefreshChange,
     onTimeChange,
@@ -45,13 +43,11 @@ export const ActionLogDateRangePicker = memo(
   }: {
     dateRangePickerState: DateRangePickerValues;
     isDataLoading: boolean;
-    isFlyout: boolean;
     onRefresh: () => void;
     onRefreshChange: (evt: OnRefreshChangeProps) => void;
     onTimeChange: ({ start, end }: DurationRange) => void;
     'data-test-subj'?: string;
   }) => {
-    const { startDate: startDateFromUrl, endDate: endDateFromUrl } = useActionHistoryUrlParams();
     const getTestId = useTestIdGenerator(dataTestSubj);
     const kibana = useKibana<IUnifiedSearchPluginServices>();
     const { uiSettings } = kibana.services;
@@ -77,22 +73,14 @@ export const ActionLogDateRangePicker = memo(
               isLoading={isDataLoading}
               dateFormat={uiSettings.get('dateFormat')}
               commonlyUsedRanges={commonlyUsedRanges}
-              end={
-                isFlyout
-                  ? dateRangePickerState.endDate
-                  : endDateFromUrl ?? dateRangePickerState.endDate
-              }
+              end={dateRangePickerState.endDate}
               isPaused={!dateRangePickerState.autoRefreshOptions.enabled}
               onTimeChange={onTimeChange}
               onRefreshChange={onRefreshChange}
               refreshInterval={dateRangePickerState.autoRefreshOptions.duration}
               onRefresh={onRefresh}
               recentlyUsedRanges={dateRangePickerState.recentlyUsedDateRanges}
-              start={
-                isFlyout
-                  ? dateRangePickerState.startDate
-                  : startDateFromUrl ?? dateRangePickerState.startDate
-              }
+              start={dateRangePickerState.startDate}
               showUpdateButton={false}
               updateButtonProps={{ iconOnly: true, fill: false }}
               width="auto"

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx

@@ -111,7 +111,6 @@ export const ActionsLogFilters = memo(
           <ActionLogDateRangePicker
             dateRangePickerState={dateRangePickerState}
             isDataLoading={isDataLoading}
-            isFlyout={isFlyout}
             onRefresh={onRefresh}
             onRefreshChange={onRefreshChange}
             onTimeChange={onTimeChange}

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/hooks.tsx

@@ -27,7 +27,7 @@ import { StatusBadge } from './status_badge';
 import { useActionHistoryUrlParams } from './use_action_history_url_params';
 import { useGetEndpointsList } from '../../../hooks/endpoint/use_get_endpoints_list';
 
-const defaultDateRangeOptions = Object.freeze({
+export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({
   autoRefreshOptions: {
     enabled: false,
     duration: 10000,
@@ -38,9 +38,20 @@ const defaultDateRangeOptions = Object.freeze({
 });
 
 export const useDateRangePicker = (isFlyout: boolean) => {
-  const { setUrlDateRangeFilters } = useActionHistoryUrlParams();
-  const [dateRangePickerState, setDateRangePickerState] =
-    useState<DateRangePickerValues>(defaultDateRangeOptions);
+  const {
+    setUrlDateRangeFilters,
+    startDate: startDateFromUrl,
+    endDate: endDateFromUrl,
+  } = useActionHistoryUrlParams();
+  const [dateRangePickerState, setDateRangePickerState] = useState<DateRangePickerValues>({
+    ...DEFAULT_DATE_RANGE_OPTIONS,
+    startDate: isFlyout
+      ? DEFAULT_DATE_RANGE_OPTIONS.startDate
+      : startDateFromUrl ?? DEFAULT_DATE_RANGE_OPTIONS.startDate,
+    endDate: isFlyout
+      ? DEFAULT_DATE_RANGE_OPTIONS.endDate
+      : endDateFromUrl ?? DEFAULT_DATE_RANGE_OPTIONS.endDate,
+  });
 
   const updateActionListDateRanges = useCallback(
     ({ start, end }) => {

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/use_action_history_url_params.ts

@@ -14,6 +14,7 @@ import {
   type ResponseActionStatus,
 } from '../../../../../common/endpoint/service/response_actions/constants';
 import { useUrlParams } from '../../../hooks/use_url_params';
+import { DEFAULT_DATE_RANGE_OPTIONS } from './hooks';
 
 interface UrlParamsActionsLogFilters {
   commands: string;
@@ -63,8 +64,8 @@ export const actionsLogFiltersFromUrlParams = (
     commands: [],
     hosts: [],
     statuses: [],
-    startDate: 'now-24h/h',
-    endDate: 'now',
+    startDate: DEFAULT_DATE_RANGE_OPTIONS.startDate,
+    endDate: DEFAULT_DATE_RANGE_OPTIONS.endDate,
     users: [],
     withOutputs: [],
     withAutomatedActions: undefined,

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx

@@ -195,9 +195,6 @@ describe('Response actions history', () => {
       (renderResult = mockedContext.render(
         <ResponseActionsLog data-test-subj={testPrefix} {...(props ?? {})} />
       ));
-    reactTestingLibrary.act(() => {
-      history.push(`${MANAGEMENT_PATH}/response_actions`);
-    });
 
     useGetEndpointActionListMock.mockReturnValue({
       ...getBaseMockedActionList(),
@@ -226,6 +223,30 @@ describe('Response actions history', () => {
     useUserPrivilegesMock.mockReset();
   });
 
+  it('should call API with default date range', () => {
+    reactTestingLibrary.act(() => {
+      history.push(`${MANAGEMENT_PATH}/response_actions_history`);
+    });
+
+    render();
+    expect(useGetEndpointActionListMock).toHaveBeenCalledWith(
+      {
+        page: 1,
+        pageSize: 10,
+        agentIds: undefined,
+        commands: [],
+        statuses: [],
+        userIds: [],
+        withOutputs: [],
+        // should be `false` by default but went out as `true` in 8.8
+        withAutomatedActions: true,
+        startDate: 'now-24h/h',
+        endDate: 'now',
+      },
+      { retry: false }
+    );
+  });
+
   describe('When index does not exist yet', () => {
     it('should show global loader when waiting for response', () => {
       useGetEndpointActionListMock.mockReturnValue({
@@ -291,6 +312,7 @@ describe('Response actions history', () => {
           statuses: [],
           userIds: [],
           withOutputs: [],
+          // should be `false` by default but went out as `true` in 8.8
           withAutomatedActions: true,
         },
         expect.anything()
@@ -1058,6 +1080,7 @@ describe('Response actions history', () => {
           statuses: ['failed', 'pending'],
           userIds: [],
           withOutputs: [],
+          // should be `false` by default but went out as `true` in 8.8
           withAutomatedActions: true,
         },
         expect.anything()
@@ -1260,6 +1283,7 @@ describe('Response actions history', () => {
           statuses: [],
           userIds: [],
           withOutputs: [],
+          // should be `false` by default but went out as `true` in 8.8
           withAutomatedActions: true,
         },
         expect.anything()

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx

@@ -50,8 +50,6 @@ export const ResponseActionsLog = memo<
       commands: commandsFromUrl,
       hosts: agentIdsFromUrl,
       statuses: statusesFromUrl,
-      startDate: startDateFromUrl,
-      endDate: endDateFromUrl,
       users: usersFromUrl,
       withAutomatedActions: withAutomatedActionsFromUrl,
       withOutputs: withOutputsFromUrl,
@@ -115,8 +113,8 @@ export const ResponseActionsLog = memo<
     } = useGetEndpointActionList(
       {
         ...queryParams,
-        startDate: isFlyout ? dateRangePickerState.startDate : startDateFromUrl,
-        endDate: isFlyout ? dateRangePickerState.endDate : endDateFromUrl,
+        startDate: dateRangePickerState.startDate,
+        endDate: dateRangePickerState.endDate,
       },
       { retry: false }
     );

x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx

@@ -137,7 +137,7 @@ describe('Response actions history page', () => {
     ({ history } = mockedContext);
     render = () => (renderResult = mockedContext.render(<ResponseActionsListPage />));
     reactTestingLibrary.act(() => {
-      history.push(`${MANAGEMENT_PATH}/response_actions`);
+      history.push(`${MANAGEMENT_PATH}/response_actions_history`);
     });
 
     mockUseGetEndpointActionList = {
@@ -168,7 +168,7 @@ describe('Response actions history page', () => {
   describe('Hide/Show header', () => {
     it('should show header when data is in', () => {
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?page=3&pageSize=20');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`);
       });
       render();
       const { getByTestId } = renderResult;
@@ -177,7 +177,7 @@ describe('Response actions history page', () => {
 
     it('should not show header when there is no actions index', () => {
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?page=3&pageSize=20');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`);
       });
       mockUseGetEndpointActionList = {
         ...baseMockedActionList,
@@ -194,7 +194,7 @@ describe('Response actions history page', () => {
   describe('Read from URL params', () => {
     it('should read and set paging values from URL params', () => {
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?page=3&pageSize=20');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`);
       });
       render();
       const { getByTestId } = renderResult;
@@ -207,7 +207,7 @@ describe('Response actions history page', () => {
     it('should read and set command filter values from URL params', () => {
       const filterPrefix = 'actions-filter';
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?commands=release,processes');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?commands=release,processes`);
       });
 
       render();
@@ -244,7 +244,7 @@ describe('Response actions history page', () => {
       const filterPrefix = 'hosts-filter';
       reactTestingLibrary.act(() => {
         history.push(
-          '/administration/response_actions_history?hosts=agent-id-1,agent-id-2,agent-id-4,agent-id-5'
+          `${MANAGEMENT_PATH}/response_actions_history?hosts=agent-id-1,agent-id-2,agent-id-4,agent-id-5`
         );
       });
 
@@ -274,7 +274,7 @@ describe('Response actions history page', () => {
     it('should read and set status filter values from URL params', () => {
       const filterPrefix = 'statuses-filter';
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?statuses=pending,failed');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?statuses=pending,failed`);
       });
 
       render();
@@ -297,7 +297,7 @@ describe('Response actions history page', () => {
     it('should set selected users search input strings to URL params ', () => {
       const filterPrefix = 'users-filter';
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?users=userX,userY');
+        history.push(`${MANAGEMENT_PATH}/response_actions_history?users=userX,userY`);
       });
 
       render();
@@ -309,7 +309,9 @@ describe('Response actions history page', () => {
 
     it('should read and set relative date ranges filter values from URL params', () => {
       reactTestingLibrary.act(() => {
-        history.push('/administration/response_actions_history?startDate=now-23m&endDate=now-1m');
+        history.push(
+          `${MANAGEMENT_PATH}/response_actions_history?startDate=now-23m&endDate=now-1m`
+        );
       });
 
       render();
@@ -329,7 +331,7 @@ describe('Response actions history page', () => {
       const endDate = '2022-09-12T11:30:33.000Z';
       reactTestingLibrary.act(() => {
         history.push(
-          `/administration/response_actions_history?startDate=${startDate}&endDate=${endDate}`
+          `${MANAGEMENT_PATH}/response_actions_history?startDate=${startDate}&endDate=${endDate}`
         );
       });
 
@@ -351,7 +353,7 @@ describe('Response actions history page', () => {
       reactTestingLibrary.act(() => {
         // load page 1 but with expanded actions.
         history.push(
-          `/administration/response_actions_history?withOutputs=${actionIdsWithDetails.join(
+          `${MANAGEMENT_PATH}/response_actions_history?withOutputs=${actionIdsWithDetails.join(
             ','
           )}&page=1&pageSize=10`
         );