[8.11] [SecuritySolution] Global search bar Edit Additional Filter no…

…t working (#168955) (#170215)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[SecuritySolution] Global search bar Edit Additional Filter not
working (#168955)](#168955)

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

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

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-10-31T10:28:44Z","message":"[SecuritySolution]
Global search bar Edit Additional Filter not working (#168955)\n\n##
Summary\r\n\r\nThe issue and steps to
reproduce:\r\nhttps://github.com//issues/164406\r\n\r\nRoot
cause:\r\nhttps://github.com//pull/168955/files#r1360612921\r\n\r\nAfter:\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/dc338c53-2f04-4f8b-a794-ff188606332a\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"c054a2d32ac9e6f3cca5ef5cdd61ca2a42b5e95a","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Explore","v8.12.0","v8.11.1"],"number":168955,"url":"https://github.com/elastic/kibana/pull/168955","mergeCommit":{"message":"[SecuritySolution]
Global search bar Edit Additional Filter not working (#168955)\n\n##
Summary\r\n\r\nThe issue and steps to
reproduce:\r\nhttps://github.com//issues/164406\r\n\r\nRoot
cause:\r\nhttps://github.com//pull/168955/files#r1360612921\r\n\r\nAfter:\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/dc338c53-2f04-4f8b-a794-ff188606332a\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"c054a2d32ac9e6f3cca5ef5cdd61ca2a42b5e95a"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/168955","number":168955,"mergeCommit":{"message":"[SecuritySolution]
Global search bar Edit Additional Filter not working (#168955)\n\n##
Summary\r\n\r\nThe issue and steps to
reproduce:\r\nhttps://github.com//issues/164406\r\n\r\nRoot
cause:\r\nhttps://github.com//pull/168955/files#r1360612921\r\n\r\nAfter:\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/dc338c53-2f04-4f8b-a794-ff188606332a\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\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\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"c054a2d32ac9e6f3cca5ef5cdd61ca2a42b5e95a"}},{"branch":"8.11","label":"v8.11.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <[email protected]>

x-pack/plugins/security_solution/public/common/components/search_bar/index.test.tsx

@@ -68,6 +68,7 @@ describe('SearchBarComponent', () => {
       fields: [],
       title: '',
     },
+    sourcererDataView: {},
     updateSearch: jest.fn(),
     setSavedQuery: jest.fn(),
     setSearchBarFilter: jest.fn(),

x-pack/plugins/security_solution/public/common/components/search_bar/index.tsx

@@ -14,11 +14,12 @@ import type { Dispatch } from 'redux';
 import { Subscription } from 'rxjs';
 import deepEqual from 'fast-deep-equal';
 
-import type { DataViewBase, Filter, Query, TimeRange } from '@kbn/es-query';
+import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import type { FilterManager, SavedQuery } from '@kbn/data-plugin/public';
-import type { DataView } from '@kbn/data-views-plugin/public';
+import { DataView } from '@kbn/data-views-plugin/public';
 
 import type { OnTimeChangeProps } from '@elastic/eui';
+import type { DataViewSpec } from '@kbn/data-views-plugin/public';
 import { inputsActions } from '../../store/inputs';
 import type { InputsRange } from '../../store/inputs/model';
 import type { InputsModelId } from '../../store/inputs/constants';
@@ -44,8 +45,8 @@ import { useSyncTimerangeUrlParam } from '../../hooks/search_bar/use_sync_timera
 
 interface SiemSearchBarProps {
   id: InputsModelId.global | InputsModelId.timeline;
-  indexPattern: DataViewBase;
   pollForSignalIndex?: () => void;
+  sourcererDataView: DataViewSpec | undefined;
   timelineId?: string;
   dataTestSubj?: string;
   hideFilterBar?: boolean;
@@ -60,13 +61,13 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
     hideFilterBar = false,
     hideQueryInput = false,
     id,
-    indexPattern,
     isLoading = false,
     pollForSignalIndex,
     queries,
     savedQuery,
     setSavedQuery,
     setSearchBarFilter,
+    sourcererDataView,
     start,
     toStr,
     updateSearch,
@@ -82,6 +83,7 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
       unifiedSearch: {
         ui: { SearchBar },
       },
+      fieldFormats,
     } = useKibana().services;
 
     const dispatch = useDispatch();
@@ -294,7 +296,14 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
+    const dataViews: DataView[] | null = useMemo(() => {
+      if (sourcererDataView != null) {
+        return [new DataView({ spec: sourcererDataView, fieldFormats })];
+      } else {
+        return null;
+      }
+    }, [sourcererDataView, fieldFormats]);
+
     const onTimeRangeChange = useCallback(
       ({ query, dateRange }) => {
         const isQuickSelection = dateRange.from.includes('now') || dateRange.to.includes('now');
@@ -312,12 +321,12 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
       },
       [filterManager, id, setTablesActivePageToZero, updateSearch]
     );
-    return (
+    return dataViews ? (
       <div data-test-subj={`${id}DatePicker`}>
         <SearchBar
           appName="siem"
           isLoading={isLoading}
-          indexPatterns={indexPatterns as DataView[]}
+          indexPatterns={dataViews}
           query={filterQuery}
           onClearSavedQuery={onClearSavedQuery}
           onQuerySubmit={onQuerySubmit}
@@ -333,12 +342,13 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
           dataTestSubj={dataTestSubj}
         />
       </div>
-    );
+    ) : null;
   },
   (prevProps, nextProps) =>
     prevProps.end === nextProps.end &&
     prevProps.filterQuery === nextProps.filterQuery &&
     prevProps.fromStr === nextProps.fromStr &&
+    deepEqual(prevProps.sourcererDataView, nextProps.sourcererDataView) &&
     prevProps.id === nextProps.id &&
     prevProps.isLoading === nextProps.isLoading &&
     prevProps.savedQuery === nextProps.savedQuery &&
@@ -348,7 +358,6 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
     prevProps.toStr === nextProps.toStr &&
     prevProps.updateSearch === nextProps.updateSearch &&
     prevProps.dataTestSubj === nextProps.dataTestSubj &&
-    deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
     deepEqual(prevProps.queries, nextProps.queries)
 );
 

x-pack/plugins/security_solution/public/dashboards/pages/details/index.tsx

@@ -52,7 +52,7 @@ const DashboardViewComponent: React.FC<DashboardViewProps> = ({
   );
   const query = useDeepEqualSelector(getGlobalQuerySelector);
   const filters = useDeepEqualSelector(getGlobalFiltersQuerySelector);
-  const { indexPattern } = useSourcererDataView();
+  const { sourcererDataView } = useSourcererDataView();
 
   const { show: canReadDashboard } =
     useCapabilities<DashboardCapabilities>(LEGACY_DASHBOARD_APP_ID);
@@ -72,7 +72,7 @@ const DashboardViewComponent: React.FC<DashboardViewProps> = ({
   return (
     <>
       <FiltersGlobal>
-        <SiemSearchBar id={InputsModelId.global} indexPattern={indexPattern} />
+        <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
       </FiltersGlobal>
       <SecuritySolutionPageWrapper>
         <EuiFlexGroup

x-pack/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx

@@ -219,7 +219,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
     useListsConfig();
 
   const {
-    indexPattern,
+    sourcererDataView,
     runtimeMappings,
     loading: isLoadingIndexPattern,
   } = useSourcererDataView(SourcererScopeName.detections);
@@ -542,7 +542,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
           <SiemSearchBar
             id={InputsModelId.global}
             pollForSignalIndex={pollForSignalIndex}
-            indexPattern={indexPattern}
+            sourcererDataView={sourcererDataView}
           />
         </FiltersGlobal>
         <RuleDetailsContextProvider>

x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx

@@ -151,7 +151,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
   >();
 
   const {
-    indexPattern,
+    sourcererDataView,
     runtimeMappings,
     loading: isLoadingIndexPattern,
   } = useSourcererDataView(SourcererScopeName.detections);
@@ -440,7 +440,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
             <SiemSearchBar
               id={InputsModelId.global}
               pollForSignalIndex={pollForSignalIndex}
-              indexPattern={indexPattern}
+              sourcererDataView={sourcererDataView}
             />
           </FiltersGlobal>
           <SecuritySolutionPageWrapper

x-pack/plugins/security_solution/public/explore/hosts/pages/details/index.tsx

@@ -115,7 +115,8 @@ const HostDetailsComponent: React.FC<HostDetailsProps> = ({ detailName, hostDeta
     [dispatch]
   );
 
-  const { indexPattern, indicesExist, selectedPatterns } = useSourcererDataView();
+  const { indexPattern, indicesExist, selectedPatterns, sourcererDataView } =
+    useSourcererDataView();
   const [loading, { inspect, hostDetails: hostOverview, id, refetch }] = useHostDetails({
     endDate: to,
     startDate: from,
@@ -172,7 +173,7 @@ const HostDetailsComponent: React.FC<HostDetailsProps> = ({ detailName, hostDeta
         <>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
-            <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper

x-pack/plugins/security_solution/public/explore/hosts/pages/hosts.tsx

@@ -125,7 +125,8 @@ const HostsComponent = () => {
     },
     [dispatch]
   );
-  const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+  const { indicesExist, indexPattern, selectedPatterns, sourcererDataView } =
+    useSourcererDataView();
   const [globalFilterQuery, kqlError] = useMemo(
     () =>
       convertToBuildEsQuery({
@@ -189,7 +190,7 @@ const HostsComponent = () => {
         <StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
-            <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper noPadding={globalFullScreen}>

x-pack/plugins/security_solution/public/explore/network/pages/details/index.tsx

@@ -103,7 +103,8 @@ const NetworkDetailsComponent: React.FC = () => {
     dispatch(setNetworkDetailsTablesActivePageToZero());
   }, [detailName, dispatch]);
 
-  const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+  const { indicesExist, indexPattern, selectedPatterns, sourcererDataView } =
+    useSourcererDataView();
 
   const ip = decodeIpv6(detailName);
   const networkDetailsFilter = useMemo(() => getNetworkDetailsPageFilter(ip), [ip]);
@@ -164,7 +165,7 @@ const NetworkDetailsComponent: React.FC = () => {
       {indicesExist ? (
         <>
           <FiltersGlobal>
-            <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+            <SiemSearchBar sourcererDataView={sourcererDataView} id={InputsModelId.global} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper>

x-pack/plugins/security_solution/public/explore/network/pages/network.tsx

@@ -109,7 +109,8 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
       [dispatch]
     );
 
-    const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+    const { indicesExist, indexPattern, selectedPatterns, sourcererDataView } =
+      useSourcererDataView();
 
     const onSkipFocusBeforeEventsTable = useCallback(() => {
       containerElement.current
@@ -157,7 +158,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
           <StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
             <EuiWindowEvent event="resize" handler={noop} />
             <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
-              <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+              <SiemSearchBar sourcererDataView={sourcererDataView} id={InputsModelId.global} />
             </FiltersGlobal>
 
             <SecuritySolutionPageWrapper noPadding={globalFullScreen}>

x-pack/plugins/security_solution/public/explore/users/pages/details/index.tsx

@@ -103,7 +103,8 @@ const UsersDetailsComponent: React.FC<UsersDetailsProps> = ({
     [detailName]
   );
 
-  const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+  const { indicesExist, indexPattern, selectedPatterns, sourcererDataView } =
+    useSourcererDataView();
 
   const [rawFilteredQuery, kqlError] = useMemo(() => {
     try {
@@ -175,7 +176,7 @@ const UsersDetailsComponent: React.FC<UsersDetailsProps> = ({
         <>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
-            <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+            <SiemSearchBar sourcererDataView={sourcererDataView} id={InputsModelId.global} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper noPadding={globalFullScreen}>

x-pack/plugins/security_solution/public/explore/users/pages/users.tsx

@@ -103,7 +103,8 @@ const UsersComponent = () => {
     return globalFilters;
   }, [severitySelection, tabName, globalFilters]);
 
-  const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+  const { indicesExist, indexPattern, selectedPatterns, sourcererDataView } =
+    useSourcererDataView();
   const [globalFiltersQuery, kqlError] = useMemo(
     () =>
       convertToBuildEsQuery({
@@ -188,7 +189,7 @@ const UsersComponent = () => {
         <StyledFullHeightContainer onKeyDown={onKeyDown} ref={containerElement}>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal>
-            <SiemSearchBar indexPattern={indexPattern} id={InputsModelId.global} />
+            <SiemSearchBar sourcererDataView={sourcererDataView} id={InputsModelId.global} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper noPadding={globalFullScreen}>

x-pack/plugins/security_solution/public/kubernetes/pages/index.tsx

@@ -30,7 +30,7 @@ export const KubernetesContainer = React.memo(() => {
   const { kubernetesSecurity, uiSettings } = useKibana().services;
 
   const { globalFullScreen } = useGlobalFullScreen();
-  const { indexPattern } = useSourcererDataView();
+  const { indexPattern, sourcererDataView } = useSourcererDataView();
   const { from, to } = useGlobalTime();
 
   const getGlobalFiltersQuerySelector = useMemo(
@@ -81,7 +81,7 @@ export const KubernetesContainer = React.memo(() => {
       {kubernetesSecurity.getKubernetesPage({
         filter: (
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId: undefined })}>
-            <SiemSearchBar id={InputsModelId.global} indexPattern={indexPattern} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
         ),
         indexPattern,

x-pack/plugins/security_solution/public/overview/pages/detection_response.tsx

@@ -34,7 +34,7 @@ import { useGlobalFilterQuery } from '../../common/hooks/use_global_filter_query
 
 const DetectionResponseComponent = () => {
   const { filterQuery } = useGlobalFilterQuery();
-  const { indicesExist, indexPattern, loading: isSourcererLoading } = useSourcererDataView();
+  const { indicesExist, loading: isSourcererLoading, sourcererDataView } = useSourcererDataView();
   const { signalIndexName } = useSignalIndex();
   const { hasKibanaREAD, hasIndexRead } = useAlertsPrivileges();
   const canReadCases = useGetUserCasesPermissions().read;
@@ -49,7 +49,7 @@ const DetectionResponseComponent = () => {
       {indicesExist ? (
         <>
           <FiltersGlobal>
-            <SiemSearchBar id={InputsModelId.global} indexPattern={indexPattern} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
           <SecuritySolutionPageWrapper data-test-subj="detectionResponsePage">
             <HeaderPage title={i18n.DETECTION_RESPONSE_TITLE} />

x-pack/plugins/security_solution/public/overview/pages/entity_analytics.tsx

@@ -28,15 +28,15 @@ import { useHasSecurityCapability } from '../../helper_hooks';
 
 const EntityAnalyticsComponent = () => {
   const { data: riskScoreEngineStatus } = useRiskEngineStatus();
-  const { indicesExist, loading: isSourcererLoading, indexPattern } = useSourcererDataView();
+  const { indicesExist, loading: isSourcererLoading, sourcererDataView } = useSourcererDataView();
   const isRiskScoreModuleLicenseAvailable = useHasSecurityCapability('entity-analytics');
 
   return (
     <>
       {indicesExist ? (
         <>
           <FiltersGlobal>
-            <SiemSearchBar id={InputsModelId.global} indexPattern={indexPattern} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper data-test-subj="entityAnalyticsPage">

x-pack/plugins/security_solution/public/overview/pages/overview.tsx

@@ -43,7 +43,8 @@ const OverviewComponent = () => {
   const filters = useDeepEqualSelector(getGlobalFiltersQuerySelector);
 
   const { from, deleteQuery, setQuery, to } = useGlobalTime();
-  const { indicesExist, indexPattern, selectedPatterns } = useSourcererDataView();
+  const { indicesExist, sourcererDataView, indexPattern, selectedPatterns } =
+    useSourcererDataView();
 
   const endpointMetadataIndex = useMemo<string[]>(() => {
     return [ENDPOINT_METADATA_INDEX];
@@ -71,7 +72,7 @@ const OverviewComponent = () => {
       {indicesExist ? (
         <>
           <FiltersGlobal>
-            <SiemSearchBar id={InputsModelId.global} indexPattern={indexPattern} />
+            <SiemSearchBar id={InputsModelId.global} sourcererDataView={sourcererDataView} />
           </FiltersGlobal>
 
           <SecuritySolutionPageWrapper>

x-pack/plugins/threat_intelligence/public/modules/indicators/hooks/use_aggregated_indicators.ts

@@ -80,7 +80,9 @@ export const useAggregatedIndicators = ({
   const userTimeZone = useTimeZone();
   const userFormat = useDateFormat();
 
-  const { selectedPatterns } = useSourcererDataView();
+  const {
+    sourcererDataView: { selectedPatterns },
+  } = useSourcererDataView();
 
   const { inspectorAdapters } = useInspector();
 

x-pack/plugins/threat_intelligence/public/modules/indicators/hooks/use_indicators.ts

@@ -64,7 +64,9 @@ export const useIndicators = ({
       data: { search: searchService },
     },
   } = useKibana();
-  const { selectedPatterns } = useSourcererDataView();
+  const {
+    sourcererDataView: { selectedPatterns },
+  } = useSourcererDataView();
 
   const { inspectorAdapters } = useInspector();
 

x-pack/plugins/threat_intelligence/public/modules/indicators/hooks/use_sourcerer_data_view.ts

@@ -54,7 +54,7 @@ export const useSourcererDataView = () => {
 
   return useMemo(
     () => ({
-      ...sourcererDataView,
+      sourcererDataView,
       indexPatterns,
       indexPattern: updatedPattern,
       browserFields,

x-pack/plugins/threat_intelligence/public/modules/indicators/hooks/use_total_count.tsx

@@ -24,7 +24,9 @@ export const useIndicatorsTotalCount = () => {
   const [count, setCount] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  const { selectedPatterns, loading: loadingDataView } = useSourcererDataView();
+  const {
+    sourcererDataView: { selectedPatterns, loading: loadingDataView },
+  } = useSourcererDataView();
 
   useEffect(() => {
     const query = {