Skip to content

Commit

Permalink
Merge pull request elastic#10 from nlatipov/issue-fix-bugs-edit-filter
Browse files Browse the repository at this point in the history 
fix: select operator in edit filter modal and add remove edit filter …
  • Loading branch information
@stratoula
stratoula authored Feb 7, 2022
2 parents 5cd9239 + bf491d3 commit eb718c5
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 66 deletions.
20 changes: 14 additions & 6 deletions src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
/>
Expand Down
49 changes: 22 additions & 27 deletions src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export function AddFilterModal({
onMultipleFiltersSubmit,
onCancel,
applySavedQueries,
multipleFilters,
filter,
indexPatterns,
timeRangeForSuggestionsOverride,
Expand All @@ -110,18 +111,19 @@ export function AddFilterModal({
const [addFilterMode, setAddFilterMode] = useState<string>(initialAddFilterMode ?? tabs[0].type);
const [customLabel, setCustomLabel] = useState<string>(filter.meta.alias || '');
const [queryDsl, setQueryDsl] = useState<string>(JSON.stringify(cleanFilter(filter), null, 2));
const [groupsCount, setGroupsCount] = useState<number>(1);

const [localFilters, setLocalFilters] = useState<FilterGroup[]>([
{
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<number>(1);

const onIndexPatternChange = ([selectedPattern]: IIndexPattern[]) => {
setSelectedIndexPattern(selectedPattern);
Expand All @@ -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]);
Expand Down Expand Up @@ -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] : []}
Expand Down Expand Up @@ -394,6 +394,7 @@ export function AddFilterModal({
(value) => typeof value !== 'undefined'
) as Filter[];
// onSubmit(finalFilters);

onMultipleFiltersSubmit(localFilters, finalFilters);
if (alias) {
saveFilters({
Expand Down Expand Up @@ -433,8 +434,8 @@ export function AddFilterModal({
subGroup.length > 1 && groupsCount > 1
? 'kbnQueryBar__filterModalSubGroups'
: groupsCount === 1 && subGroup.length > 1
? 'kbnQueryBar__filterModalGroups'
: '';
? 'kbnQueryBar__filterModalGroups'
: '';
return (
<>
<div className={classNames(classes)}>
Expand All @@ -455,20 +456,16 @@ export function AddFilterModal({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>

<EuiFlexGroup responsive={false} justifyContent="center">
{subGroup.length < 2 && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={() => {
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) {
Expand All @@ -482,7 +479,7 @@ export function AddFilterModal({
value: undefined,
relationship: undefined,
groupId: localfilter.groupId,
id: localFilters.length,
id: Number(multipleFilters?.length) + localFilters.length,
subGroupId,
},
]);
Expand All @@ -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([
Expand All @@ -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) {
Expand All @@ -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)
Expand Down
57 changes: 27 additions & 30 deletions src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,9 @@ export function EditFilterModal({
applySavedQueries,
filter,
multipleFilters,
currentEditFilters,
indexPatterns,
timeRangeForSuggestionsOverride,
savedQueryManagement,
initialAddFilterMode,
onRemoveFilterGroup,
saveFilters,
Expand All @@ -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;
Expand All @@ -117,7 +117,7 @@ export function EditFilterModal({
const [customLabel, setCustomLabel] = useState<string>(filter.meta.alias || '');
const [queryDsl, setQueryDsl] = useState<string>(JSON.stringify(cleanFilter(filter), null, 2));
const [localFilters, setLocalFilters] = useState<FilterGroup[]>(
convertFilterToFilterGroup(multipleFilters)
convertFilterToFilterGroup(currentEditFilters)
);
const [groupsCount, setGroupsCount] = useState<number>(1);

Expand Down Expand Up @@ -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]);
Expand Down Expand Up @@ -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] : []}
Expand Down Expand Up @@ -438,7 +436,7 @@ export function EditFilterModal({
};

const onDeliteFilter = () => {
onRemoveFilterGroup(multipleFilters[0]?.groupId);
onRemoveFilterGroup(filter?.groupId);
};

const renderGroupedFilters = () => {
Expand All @@ -463,8 +461,8 @@ export function EditFilterModal({
subGroup.length > 1 && groupsCount > 1
? 'kbnQueryBar__filterModalSubGroups'
: groupsCount === 1 && subGroup.length > 1
? 'kbnQueryBar__filterModalGroups'
: '';
? 'kbnQueryBar__filterModalGroups'
: '';
return (
<>
<div className={classNames(classes)}>
Expand All @@ -485,25 +483,24 @@ export function EditFilterModal({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>

<EuiFlexGroup responsive={false} justifyContent="center">
{subGroup.length < 2 && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={() => {
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,
{
Expand All @@ -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,
},
]);
Expand All @@ -533,32 +530,33 @@ 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,
{
field: undefined,
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"
Expand All @@ -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)
Expand Down Expand Up @@ -688,7 +686,6 @@ export function EditFilterModal({
<EuiForm className="kbnQueryBar__filterModalForm">
{addFilterMode === 'quick_form' && renderGroupedFilters()}
{addFilterMode === 'query_builder' && renderCustomEditor()}
{addFilterMode === 'saved_filters' && savedQueryManagement}
</EuiForm>
</EuiModalBody>
<EuiHorizontalRule margin="none" />
Expand Down
Loading

0 comments on commit eb718c5

Please sign in to comment.