fix filter editor by making a copy instead of mutating current state

grafana · May 17, 2024 · 1be74f1 · 1be74f1
1 parent 6e1f86e
commit 1be74f1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - Fixed `IN` operator escaping the entire string (specifically with `Nullable(String)`), also added `FixedString(N)` (#830)
+- Fixed query builder filter editor on alert rules page (#828)
 
 ## 4.0.7
 

diff --git a/src/components/queryBuilder/FilterEditor.test.tsx b/src/components/queryBuilder/FilterEditor.test.tsx
@@ -192,6 +192,28 @@ describe('FilterEditor', () => {
       // type key into the mapKey input
       await userEvent.type(result!.getAllByRole('combobox')[1], 'http.status_code');
       await userEvent.keyboard('{Enter}');
+
+      result.rerender(
+        <FilterEditor
+          allColumns={[{ name: 'SpanAttributes', type: 'Map(String, String)', picklistValues: [] }]}
+          filter={{
+            key: 'SpanAttributes',
+            type: 'Map(String, String)',
+            mapKey: 'http.status_code',
+            value: '',
+            operator: FilterOperator.Equals,
+            condition: 'AND',
+            filterType: 'custom',
+          }}
+          index={0}
+          onFilterChange={onFilterChange}
+          removeFilter={() => {}}
+          datasource={mockDatasource}
+          database=''
+          table=''
+        />
+      );
+
       // type value into the input
       await userEvent.type(result!.getByTestId('query-builder-filters-single-string-value-input'), '200');
       result!.getByTestId('query-builder-filters-single-string-value-input').blur();

diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
@@ -328,12 +328,12 @@ export const FilterEditor = (props: {
     onFilterChange(index, newFilter);
   };
   const onFilterMapKeyChange = (mapKey: string) => {
-    const newFilter: Filter = filter;
+    const newFilter: Filter = { ...filter };
     newFilter.mapKey = mapKey;
     onFilterChange(index, newFilter);
   };
   const onFilterOperatorChange = (operator: FilterOperator) => {
-    let newFilter: Filter = filter;
+    const newFilter: Filter = { ...filter };
     newFilter.operator = operator;
     if (utils.isMultiFilter(newFilter)) {
       if (!Array.isArray(newFilter.value)) {
@@ -343,7 +343,7 @@ export const FilterEditor = (props: {
     onFilterChange(index, newFilter);
   };
   const onFilterConditionChange = (condition: 'AND' | 'OR') => {
-    let newFilter: Filter = filter;
+    const newFilter: Filter = { ...filter };
     newFilter.condition = condition;
     onFilterChange(index, newFilter);
   };