[Unified Search] Fixed warnings with keys and state on update. (#148137)

## Summary

Fixed React warnings, related to the keys and state updates on the
unmounted component.

src/plugins/unified_search/public/filter_badge/filter_badge_group.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import type { Filter, BooleanRelation, DataViewBase } from '@kbn/es-query';
 import { EuiTextColor } from '@elastic/eui';
 import { FilterBadgeErrorBoundary } from './filter_badge_error_boundary';
@@ -41,15 +41,15 @@ export function FilterBadgeGroup({
         const showRelationDelimiter = booleanRelation && index + 1 < filterArr.length;
         const showBrackets = shouldShowBrackets && (filter.meta.negate || filterArr.length > 1);
         return (
-          <>
+          <Fragment key={index}>
             <FilterExpressionBadge
               filter={filter}
               shouldShowBrackets={showBrackets}
               dataViews={dataViews}
               filterLabelStatus={filterLabelStatus}
             />
             {showRelationDelimiter && <BooleanRelationDelimiter conditional={booleanRelation} />}
-          </>
+          </Fragment>
         );
       })}
     </FilterBadgeErrorBoundary>

src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx

@@ -367,7 +367,7 @@ export function FilterItem(props: FilterItemProps) {
       ) : (
         <EuiContextMenuPanel
           items={[
-            <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
+            <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }} key="filter-editor">
               <FilterEditor
                 filter={filter}
                 indexPatterns={indexPatterns}

src/plugins/unified_search/public/filters_builder/filter_group.tsx

@@ -100,6 +100,7 @@ export const FilterGroup = ({
     const showDelimiter = booleanRelation && index + 1 < arrayRef.length;
     return (
       <EuiFlexGroup
+        key={index}
         direction="column"
         gutterSize={shouldNormalizeFirstLevel ? 'none' : 'xs'}
         responsive={false}

src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Filter, buildEmptyFilter } from '@kbn/es-query';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
@@ -32,13 +32,23 @@ export const FilterEditorWrapper = React.memo(function FilterEditorWrapper({
   closePopover,
   onFiltersUpdated,
 }: FilterEditorWrapperProps) {
+  const fetchIndexAbortController = useRef<AbortController>();
+
   const kibana = useKibana<IUnifiedSearchPluginServices>();
   const { uiSettings, data, usageCollection, appName } = kibana.services;
   const reportUiCounter = usageCollection?.reportUiCounter.bind(usageCollection, appName);
   const [dataViews, setDataviews] = useState<DataView[]>([]);
   const [newFilter, setNewFilter] = useState<Filter | undefined>(undefined);
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
 
+  useEffect(() => {
+    fetchIndexAbortController.current = new AbortController();
+
+    return () => {
+      fetchIndexAbortController.current?.abort();
+    };
+  }, []);
+
   useEffect(() => {
     const fetchDataViews = async () => {
       const stringPatterns = indexPatterns?.filter(
@@ -48,15 +58,22 @@ export const FilterEditorWrapper = React.memo(function FilterEditorWrapper({
         (indexPattern) => typeof indexPattern !== 'string'
       ) as DataView[];
 
+      fetchIndexAbortController.current?.abort();
+      fetchIndexAbortController.current = new AbortController();
+      const currentFetchIndexAbortController = fetchIndexAbortController.current;
+
       const objectPatternsFromStrings = (await fetchIndexPatterns(
         data.dataViews,
         stringPatterns.map((value) => ({ type: 'title', value }))
       )) as DataView[];
-      setDataviews([...objectPatterns, ...objectPatternsFromStrings]);
-      const [dataView] = [...objectPatterns, ...objectPatternsFromStrings];
-      const index = dataView && dataView.id;
-      const emptyFilter = buildEmptyFilter(isPinned, index);
-      setNewFilter(emptyFilter);
+
+      if (!currentFetchIndexAbortController.signal.aborted) {
+        setDataviews([...objectPatterns, ...objectPatternsFromStrings]);
+        const [dataView] = [...objectPatterns, ...objectPatternsFromStrings];
+        const index = dataView && dataView.id;
+        const emptyFilter = buildEmptyFilter(isPinned, index);
+        setNewFilter(emptyFilter);
+      }
     };
     if (indexPatterns) {
       fetchDataViews();

src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx

@@ -168,6 +168,7 @@ export function QueryBarMenu({
           <EuiContextMenuPanel
             items={[
               <FilterEditorWrapper
+                key="filter-editor-wrapper"
                 indexPatterns={indexPatterns}
                 filters={filters!}
                 timeRangeForSuggestionsOverride={timeRangeForSuggestionsOverride}