[Attack Discovery][Scheduling] UI: Implement "Attack Discovery Scheduling" rule creation flow (#12006)

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/alert_selection_query/index.test.tsx

@@ -24,15 +24,15 @@ const mockUseSourcererDataView = useSourcererDataView as jest.MockedFunction<
 
 describe('AlertSelectionQuery', () => {
   const defaultProps = {
-    end: 'now',
     filterManager: jest.fn() as unknown as FilterManager,
-    filters: [],
-    query: { query: '', language: 'kuery' },
-    setEnd: jest.fn(),
-    setFilters: jest.fn(),
-    setQuery: jest.fn(),
-    setStart: jest.fn(),
-    start: 'now-15m',
+    settings: {
+      end: 'now',
+      filters: [],
+      query: { query: '', language: 'kuery' },
+      size: 100,
+      start: 'now-15m',
+    },
+    onSettingsChanged: jest.fn(),
   };
 
   beforeEach(() => {

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/alert_selection_query/index.tsx

@@ -19,32 +19,23 @@ import { getCommonTimeRanges } from '../helpers/get_common_time_ranges';
 import { useSourcererDataView } from '../../../../../sourcerer/containers';
 import { SourcererScopeName } from '../../../../../sourcerer/store/model';
 import { useDataView } from '../use_data_view';
+import type { AlertsSelectionSettings } from '../../types';
 
 export const MAX_ALERTS = 500;
 export const MIN_ALERTS = 50;
 export const STEP = 50;
 export const NO_INDEX_PATTERNS: DataView[] = [];
 
 interface Props {
-  end: string;
   filterManager: FilterManager;
-  filters: Filter[];
-  query: Query;
-  setEnd: React.Dispatch<React.SetStateAction<string>>;
-  setQuery: React.Dispatch<React.SetStateAction<Query>>;
-  setStart: React.Dispatch<React.SetStateAction<string>>;
-  start: string;
+  onSettingsChanged?: (settings: AlertsSelectionSettings) => void;
+  settings: AlertsSelectionSettings;
 }
 
 const AlertSelectionQueryComponent: React.FC<Props> = ({
-  end,
   filterManager,
-  filters,
-  query,
-  setEnd,
-  setQuery,
-  setStart,
-  start,
+  onSettingsChanged,
+  settings,
 }) => {
   const {
     unifiedSearch: {
@@ -108,24 +99,27 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
    */
   const onTimeChange = useCallback(
     ({ start: startDate, end: endDate }: OnTimeChangeProps) => {
-      if (unSubmittedQuery != null) {
-        const newUnSubmittedQuery: Query = {
-          query: unSubmittedQuery,
-          language: 'kuery',
-        };
-
-        setQuery(newUnSubmittedQuery); // <-- set the query to the unsubmitted query
-      }
-
-      setStart(startDate);
-      setEnd(endDate);
+      const query =
+        unSubmittedQuery != null
+          ? {
+              query: unSubmittedQuery, // <-- set the query to the unsubmitted query
+              language: 'kuery',
+            }
+          : settings.query;
+      const updatedSettings = {
+        ...settings,
+        end: endDate,
+        start: startDate,
+        query,
+      };
+      onSettingsChanged?.(updatedSettings);
     },
-    [setEnd, setQuery, setStart, unSubmittedQuery]
+    [onSettingsChanged, settings, unSubmittedQuery]
   );
 
   /**
    * `onFiltersUpdated` is called by the `SearchBar` when the filters, (which
-   * appear belew the `SearchBar` input), are updated.
+   * appear below the `SearchBar` input), are updated.
    */
   const onFiltersUpdated = useCallback(
     (newFilters: Filter[]) => {
@@ -140,10 +134,13 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
   const onQuerySubmit = useCallback(
     ({ query: newQuery }: { query?: Query | undefined }) => {
       if (newQuery != null) {
-        setQuery(newQuery);
+        onSettingsChanged?.({
+          ...settings,
+          query: newQuery,
+        });
       }
     },
-    [setQuery]
+    [onSettingsChanged, settings]
   );
 
   return (
@@ -160,7 +157,7 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
           appName="siem"
           data-test-subj="alertSelectionSearchBar"
           indexPatterns={indexPatterns}
-          filters={filters}
+          filters={settings.filters}
           showDatePicker={false}
           showFilterBar={true}
           showQueryInput={true}
@@ -172,7 +169,7 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
             debouncedOnQueryChange(debouncedQuery?.query);
           }}
           onQuerySubmit={onQuerySubmit}
-          query={query}
+          query={settings.query}
         />
       </div>
 
@@ -182,11 +179,11 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
       <EuiSuperDatePicker
         commonlyUsedRanges={commonlyUsedRanges}
         data-test-subj="alertSelectionDatePicker"
-        end={end}
+        end={settings.end}
         isDisabled={false}
         onTimeChange={onTimeChange}
         showUpdateButton="iconOnly"
-        start={start}
+        start={settings.start}
       />
     </>
   );

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/alert_selection_range/index.tsx

@@ -19,7 +19,7 @@ export const NO_INDEX_PATTERNS: DataView[] = [];
 
 interface Props {
   maxAlerts: number;
-  setMaxAlerts: React.Dispatch<React.SetStateAction<string>>;
+  setMaxAlerts: (value: string) => void;
 }
 
 const AlertSelectionRangeComponent: React.FC<Props> = ({ maxAlerts, setMaxAlerts }) => {

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/helpers/get_tabs/index.test.tsx

@@ -11,13 +11,15 @@ import { ALERTS_PREVIEW, ALERT_SUMMARY } from '../../translations';
 const mockProps = {
   alertsPreviewStackBy0: 'mockAlertsPreviewStackBy0',
   alertSummaryStackBy0: 'mockAlertSummaryStackBy0',
-  end: 'now',
-  filters: [],
-  maxAlerts: 100,
-  query: { query: '', language: 'kuery' },
+  settings: {
+    end: 'now',
+    filters: [],
+    query: { query: '', language: 'kuery' },
+    size: 100,
+    start: 'now-7',
+  },
   setAlertsPreviewStackBy0: jest.fn(),
   setAlertSummaryStackBy0: jest.fn(),
-  start: 'now-7',
 };
 
 describe('getTabs', () => {

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/helpers/get_tabs/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import { EuiSpacer } from '@elastic/eui';
-import type { Filter, Query } from '@kbn/es-query';
 import React from 'react';
 
 import { getAlertSummaryEsqlQuery } from '../../alert_summary_tab/get_alert_summary_esql_query';
@@ -16,6 +15,7 @@ import { getAlertsPreviewLensAttributes } from '../../alerts_preview_tab/get_ale
 import { PreviewTab } from '../../preview_tab';
 import * as i18n from '../../translations';
 import type { Sorting } from '../../types';
+import type { AlertsSelectionSettings } from '../../../types';
 
 const SUMMARY_TAB_EMBEDDABLE_ID = 'alertSummaryEmbeddable--id';
 const PREVIEW_TAB_EMBEDDABLE_ID = 'alertsPreviewEmbeddable--id';
@@ -42,25 +42,17 @@ export interface TabInfo {
 interface GetTabs {
   alertsPreviewStackBy0: string;
   alertSummaryStackBy0: string;
-  end: string;
-  filters: Filter[];
-  maxAlerts: number;
-  query: Query;
+  settings: AlertsSelectionSettings;
   setAlertsPreviewStackBy0: React.Dispatch<React.SetStateAction<string>>;
   setAlertSummaryStackBy0: React.Dispatch<React.SetStateAction<string>>;
-  start: string;
 }
 
 export const getTabs = ({
   alertsPreviewStackBy0,
   alertSummaryStackBy0,
-  end,
-  filters,
-  maxAlerts,
-  query,
+  settings,
   setAlertsPreviewStackBy0,
   setAlertSummaryStackBy0,
-  start,
 }: GetTabs): TabInfo[] => [
   {
     id: 'attackDiscoverySettingsAlertSummaryTab--id',
@@ -71,14 +63,14 @@ export const getTabs = ({
         <PreviewTab
           dataTestSubj={ALERT_SUMMARY_TEST_SUBJ}
           embeddableId={SUMMARY_TAB_EMBEDDABLE_ID}
-          end={end}
-          filters={filters}
+          end={settings.end}
+          filters={settings.filters}
           getLensAttributes={getAlertSummaryLensAttributes}
           getPreviewEsqlQuery={getAlertSummaryEsqlQuery}
-          maxAlerts={maxAlerts}
-          query={query}
+          maxAlerts={settings.size}
+          query={settings.query}
           setTableStackBy0={setAlertSummaryStackBy0}
-          start={start}
+          start={settings.start}
           tableStackBy0={alertSummaryStackBy0}
         />
       </>
@@ -93,14 +85,14 @@ export const getTabs = ({
         <PreviewTab
           dataTestSubj={ALERTS_PREVIEW_TEST_SUBJ}
           embeddableId={PREVIEW_TAB_EMBEDDABLE_ID}
-          end={end}
-          filters={filters}
+          end={settings.end}
+          filters={settings.filters}
           getLensAttributes={getAlertsPreviewLensAttributes}
           getPreviewEsqlQuery={getAlertsPreviewEsqlQuery}
-          maxAlerts={maxAlerts}
-          query={query}
+          maxAlerts={settings.size}
+          query={settings.query}
           setTableStackBy0={setAlertsPreviewStackBy0}
-          start={start}
+          start={settings.start}
           tableStackBy0={alertsPreviewStackBy0}
         />
       </>

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/index.test.tsx

@@ -28,18 +28,17 @@ jest.mock('../../../../sourcerer/containers');
 const defaultProps = {
   alertsPreviewStackBy0: 'defaultAlertPreview',
   alertSummaryStackBy0: 'defaultAlertSummary',
-  end: '2024-10-01T00:00:00.000Z',
   filterManager: jest.fn() as unknown as FilterManager,
-  filters: [],
-  maxAlerts: 100,
-  query: { query: '', language: 'kuery' },
+  settings: {
+    end: '2024-10-01T00:00:00.000Z',
+    filters: [],
+    query: { query: '', language: 'kuery' },
+    size: 100,
+    start: '2024-09-01T00:00:00.000Z',
+  },
+  onSettingsChanged: jest.fn(),
   setAlertsPreviewStackBy0: jest.fn(),
   setAlertSummaryStackBy0: jest.fn(),
-  setEnd: jest.fn(),
-  setMaxAlerts: jest.fn(),
-  setQuery: jest.fn(),
-  setStart: jest.fn(),
-  start: '2024-09-01T00:00:00.000Z',
 };
 
 const mockUseKibana = useKibana as jest.MockedFunction<typeof useKibana>;