diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 0d47090f51e78..6344a702a7245 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -106,11 +106,19 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { subGroupId: selectedFilters[idx].subGroupId, }; }); - props.toggleEditFilterModal?.(false); - props?.onMultipleFiltersUpdated?.(mergedFilters); + + const multipleFilters = [...props.multipleFilters]; + + const newMultipleFilters = multipleFilters.filter((filter) => filter.groupId !== Number(groupId)); + + const filtersNew = newMultipleFilters.concat(mergedFilters); const filters = [...props.filters, ...buildFilters]; props?.onFiltersUpdated?.(filters); + + props?.onMultipleFiltersUpdated?.(filtersNew); + + props.toggleEditFilterModal?.(false); } function renderItems() { @@ -187,7 +195,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { onRemove={onRemoveFilterGroup} onUpdate={onUpdateFilterGroup} onEditFilterClick={onEditFilterClick} - filtersGroupsCount={1} + filtersGroupsCount={Object.entries(firstDepthGroupedFilters).length} customLabel={label} savedQueryService={props.savedQueryService} onFilterSave={props.onFilterSave} @@ -213,12 +221,12 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { onMultipleFiltersSubmit={onEditMultipleFiltersANDOR} applySavedQueries={() => props.toggleEditFilterModal?.(false)} onCancel={() => props.toggleEditFilterModal?.(false)} - filter={props.multipleFilters[0]} - multipleFilters={currentEditFilters} + filter={currentEditFilters[0]} + currentEditFilters={currentEditFilters} + multipleFilters={props.multipleFilters} indexPatterns={props.indexPatterns!} onRemoveFilterGroup={onDeleteFilterGroup} timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} - savedQueryManagement={undefined} initialAddFilterMode={undefined} saveFilters={props.onFilterSave} /> diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index b3364ab722448..02144fbb843b0 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -85,6 +85,7 @@ export function AddFilterModal({ onMultipleFiltersSubmit, onCancel, applySavedQueries, + multipleFilters, filter, indexPatterns, timeRangeForSuggestionsOverride, @@ -110,18 +111,19 @@ export function AddFilterModal({ const [addFilterMode, setAddFilterMode] = useState(initialAddFilterMode ?? tabs[0].type); const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); + const [groupsCount, setGroupsCount] = useState(1); + const [localFilters, setLocalFilters] = useState([ { field: undefined, operator: undefined, value: undefined, - groupId: 1, - id: 0, + groupId: multipleFilters?.length ? multipleFilters?.length + 1 : 1, + id: multipleFilters?.length ? multipleFilters?.length : 0, subGroupId: 1, relationship: undefined, }, ]); - const [groupsCount, setGroupsCount] = useState(1); const onIndexPatternChange = ([selectedPattern]: IIndexPattern[]) => { setSelectedIndexPattern(selectedPattern); @@ -142,9 +144,7 @@ export function AddFilterModal({ const index = localFilters.findIndex((f) => f.id === localFilterIndex); // Only reset params when the operator type changes const params = - localFilters[localFilterIndex].operator?.type === operator.type - ? localFilters[localFilterIndex].value - : undefined; + localFilters[index]?.operator?.type === operator.type ? localFilters[index].value : undefined; const updatedLocalFilter = { ...localFilters[index], operator, value: params }; localFilters[index] = updatedLocalFilter; setLocalFilters([...localFilters]); @@ -242,11 +242,11 @@ export function AddFilterModal({ placeholder={ selectedField ? i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderSelect', { - defaultMessage: 'Operator', - }) + defaultMessage: 'Operator', + }) : i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderWaiting', { - defaultMessage: 'Waiting', - }) + defaultMessage: 'Waiting', + }) } options={operators} selectedOptions={selectedOperator ? [selectedOperator] : []} @@ -394,6 +394,7 @@ export function AddFilterModal({ (value) => typeof value !== 'undefined' ) as Filter[]; // onSubmit(finalFilters); + onMultipleFiltersSubmit(localFilters, finalFilters); if (alias) { saveFilters({ @@ -433,8 +434,8 @@ export function AddFilterModal({ subGroup.length > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalSubGroups' : groupsCount === 1 && subGroup.length > 1 - ? 'kbnQueryBar__filterModalGroups' - : ''; + ? 'kbnQueryBar__filterModalGroups' + : ''; return ( <>
@@ -455,20 +456,16 @@ export function AddFilterModal({ - + {subGroup.length < 2 && ( { - const updatedLocalFilter = { - ...localfilter, - relationship: 'OR', - }; + const updatedLocalFilter = { ...localfilter, relationship: 'OR' }; const idx = localFilters.findIndex( - (f) => - f.id === localfilter.id && f.groupId === Number(groupId) + (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); const subGroupId = (localfilter?.subGroupId ?? 0) + 1; if (subGroup.length < 2) { @@ -482,7 +479,7 @@ export function AddFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: localFilters.length, + id: Number(multipleFilters?.length) + localFilters.length, subGroupId, }, ]); @@ -503,15 +500,14 @@ export function AddFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0) + 1; + : (localfilter?.subGroupId ?? 0); const updatedLocalFilter = { ...localfilter, relationship: 'AND', subGroupId: filtersOnGroup.length > 1 ? subGroupId : 1, }; const idx = localFilters.findIndex( - (f) => - f.id === localfilter.id && f.groupId === Number(groupId) + (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); localFilters[idx] = updatedLocalFilter; setLocalFilters([ @@ -521,10 +517,9 @@ export function AddFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: - filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, + groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) + localFilters.length + 1), subGroupId, - id: localFilters.length, + id: Number(multipleFilters?.length) + localFilters.length, }, ]); if (filtersOnGroup.length <= 1) { @@ -548,7 +543,7 @@ export function AddFilterModal({ localFilters[currentIdx - 1].relationship = 'AND'; } const updatedFilters = localFilters.filter( - (_, idx) => idx !== localfilter.id + (_, idx) => idx !== currentIdx ); const filtersOnGroup = updatedFilters.filter( (f) => f.groupId === Number(groupId) diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index e41cc46d4b4a3..cc836282c9b58 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -90,9 +90,9 @@ export function EditFilterModal({ applySavedQueries, filter, multipleFilters, + currentEditFilters, indexPatterns, timeRangeForSuggestionsOverride, - savedQueryManagement, initialAddFilterMode, onRemoveFilterGroup, saveFilters, @@ -103,9 +103,9 @@ export function EditFilterModal({ onCancel: () => void; filter: Filter; multipleFilters?: Filter[]; + currentEditFilters?: Filter[]; indexPatterns: IIndexPattern[]; timeRangeForSuggestionsOverride?: boolean; - savedQueryManagement?: JSX.Element; initialAddFilterMode?: string; onRemoveFilterGroup: (groupId: string) => void; saveFilters: (savedQueryMeta: SavedQueryMeta) => void; @@ -117,7 +117,7 @@ export function EditFilterModal({ const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); const [localFilters, setLocalFilters] = useState( - convertFilterToFilterGroup(multipleFilters) + convertFilterToFilterGroup(currentEditFilters) ); const [groupsCount, setGroupsCount] = useState(1); @@ -168,9 +168,7 @@ export function EditFilterModal({ const index = localFilters.findIndex((f) => f.id === localFilterIndex); // Only reset params when the operator type changes const params = - localFilters[localFilterIndex].operator?.type === operator.type - ? localFilters[localFilterIndex].value - : undefined; + localFilters[index]?.operator?.type === operator.type ? localFilters[index].value : undefined; const updatedLocalFilter = { ...localFilters[index], operator, value: params }; localFilters[index] = updatedLocalFilter; setLocalFilters([...localFilters]); @@ -268,11 +266,11 @@ export function EditFilterModal({ placeholder={ selectedField ? i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderSelect', { - defaultMessage: 'Operator', - }) + defaultMessage: 'Operator', + }) : i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderWaiting', { - defaultMessage: 'Waiting', - }) + defaultMessage: 'Waiting', + }) } options={operators} selectedOptions={selectedOperator ? [selectedOperator] : []} @@ -438,7 +436,7 @@ export function EditFilterModal({ }; const onDeliteFilter = () => { - onRemoveFilterGroup(multipleFilters[0]?.groupId); + onRemoveFilterGroup(filter?.groupId); }; const renderGroupedFilters = () => { @@ -463,8 +461,8 @@ export function EditFilterModal({ subGroup.length > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalSubGroups' : groupsCount === 1 && subGroup.length > 1 - ? 'kbnQueryBar__filterModalGroups' - : ''; + ? 'kbnQueryBar__filterModalGroups' + : ''; return ( <>
@@ -485,25 +483,24 @@ export function EditFilterModal({ - + {subGroup.length < 2 && ( { - const updatedLocalFilter = { - ...localfilter, - relationship: 'OR', - }; + const updatedLocalFilter = { ...localfilter, relationship: 'OR' }; const idx = localFilters.findIndex( - (f) => - f.id === localfilter.id && f.groupId === Number(groupId) + (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); const subGroupId = (localfilter?.subGroupId ?? 0) + 1; if (subGroup.length < 2) { localFilters[idx] = updatedLocalFilter; } + const countOfFilterBeforeFilterEdit = multipleFilters.filter( + (f) => f.groupId === Number(groupId) + ); setLocalFilters([ ...localFilters, { @@ -512,7 +509,7 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: localFilters.length, + id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length, subGroupId, }, ]); @@ -533,17 +530,19 @@ export function EditFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0) + 1; + : localfilter?.subGroupId ?? 0; const updatedLocalFilter = { ...localfilter, relationship: 'AND', subGroupId: filtersOnGroup.length > 1 ? subGroupId : 1, }; const idx = localFilters.findIndex( - (f) => - f.id === localfilter.id && f.groupId === Number(groupId) + (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); localFilters[idx] = updatedLocalFilter; + const countOfFilterBeforeFilterEdit = multipleFilters.filter( + (f) => f.groupId === Number(groupId) + ); setLocalFilters([ ...localFilters, { @@ -551,14 +550,13 @@ export function EditFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: - filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, + groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) - countOfFilterBeforeFilterEdit.length + localFilters.length + 1), subGroupId, - id: localFilters.length, + id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length, }, ]); if (filtersOnGroup.length <= 1) { - setGroupsCount(groupsCount + 1); + setGroupsCount((groupsCount) => groupsCount + 1); } }} iconType="plus" @@ -578,7 +576,7 @@ export function EditFilterModal({ localFilters[currentIdx - 1].relationship = 'AND'; } const updatedFilters = localFilters.filter( - (_, idx) => idx !== localfilter.id + (_, idx) => idx !== currentIdx ); const filtersOnGroup = updatedFilters.filter( (f) => f.groupId === Number(groupId) @@ -688,7 +686,6 @@ export function EditFilterModal({ {addFilterMode === 'quick_form' && renderGroupedFilters()} {addFilterMode === 'query_builder' && renderCustomEditor()} - {addFilterMode === 'saved_filters' && savedQueryManagement} diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index 4761b8ff85ce7..c16d336b93c42 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -393,15 +393,15 @@ export const QueryBarTopRow = React.memo( function onAddMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { const lastFilter: any = props.multipleFilters[props.multipleFilters.length - 1]; const mappedFilters = mapAndFlattenFilters(buildFilters); - if (lastFilter !== undefined) lastFilter.relationship = 'AND'; + // if (lastFilter !== undefined) lastFilter.relationship = 'AND'; const mergedFilters = mappedFilters.map((filter, idx) => { let groupId = selectedFilters[idx].groupId; let id = selectedFilters[idx].id; // groupId starts from 1; id starts from 0 if (lastFilter !== undefined) { - groupId += lastFilter.groupId; - id += lastFilter.id + 1; + // groupId += lastFilter.groupId; + // id += lastFilter.id + 1; } return { @@ -453,6 +453,7 @@ export const QueryBarTopRow = React.memo( indexPatterns={props.indexPatterns!} onSubmit={onAddMultipleFilters} onMultipleFiltersSubmit={onAddMultipleFiltersANDOR} + multipleFilters={props.multipleFilters} applySavedQueries={applySavedQueries} timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} savedQueryManagement={props.savedQueryManagement}