fix: Preserves selected scopes when toggling between scope types (apa…

…che#23475)
airbnb · Mar 28, 2023 · 80d1e4f · 80d1e4f
1 parent 439d687
commit 80d1e4f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/...nents/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.test.tsx b/...nents/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.test.tsx
@@ -129,7 +129,7 @@ describe('FilterScope', () => {
       expect(screen.getByRole('tree')).toBeInTheDocument();
       expect(
         document.querySelectorAll('.ant-tree-checkbox-checked').length,
-      ).toBe(1);
+      ).toBe(4);
     });
   });
 });
diff --git a/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx b/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useRef, useState } from 'react';
 import {
   NativeFilterScope,
   styled,
@@ -67,6 +67,7 @@ const FilterScope: FC<FilterScopeProps> = ({
   const [initialFilterScope] = useState(
     filterScope || getDefaultScopeValue(chartId, initiallyExcludedCharts),
   );
+  const lastSpecificScope = useRef(initialFilterScope);
   const [initialScopingType] = useState(
     isScopingAll(initialFilterScope, chartId)
       ? ScopingType.all
@@ -78,10 +79,13 @@ const FilterScope: FC<FilterScopeProps> = ({
 
   const onUpdateFormValues = useCallback(
     (formValues: any) => {
+      if (formScopingType === ScopingType.specific) {
+        lastSpecificScope.current = formValues.scope;
+      }
       updateFormValues(formValues);
       setHasScopeBeenModified(true);
     },
-    [updateFormValues],
+    [formScopingType, updateFormValues],
   );
 
   const updateScopes = useCallback(() => {
@@ -113,12 +117,11 @@ const FilterScope: FC<FilterScopeProps> = ({
       >
         <Radio.Group
           onChange={({ target: { value } }) => {
-            if (value === ScopingType.all) {
-              const scope = getDefaultScopeValue(chartId);
-              updateFormValues({
-                scope,
-              });
-            }
+            const scope =
+              value === ScopingType.all
+                ? getDefaultScopeValue(chartId)
+                : lastSpecificScope.current;
+            updateFormValues({ scope });
             setHasScopeBeenModified(true);
             forceUpdate();
           }}