feat(native-filters): Add defaultValue for Native filters modal (#12199)

* refactor: sync Scoping tree with Forms data * refactor: update scoping tree * refactor: update scope tree logic to be more UX friendly * test: fix tests * lint: fix lin CR notes * chore: temp * fix: fix jsx * feat: Init value * refactor: move effect to utils * chore: add comments * feat: updates for default value in native filters * refactor: move multi values management to Modal * feat: added currentState to filterState fix: Reset all fixed * style: update filter styles * fix: process selection of same filter * fix: fix double choose select * fix: fix order of cascading filters * fix: fix CR comments * fix: fix CR comments
apache · Feb 2, 2021 · 465d986 · 465d986
1 parent 3ef641d
commit 465d986
Show file tree

Hide file tree

Showing 13 changed files with 461 additions and 182 deletions.
diff --git a/superset-frontend/spec/fixtures/mockNativeFilters.ts b/superset-frontend/spec/fixtures/mockNativeFilters.ts
@@ -16,14 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { NativeFiltersState } from 'src/dashboard/components/nativeFilters/types';
+import {
+  FilterType,
+  NativeFiltersState,
+} from 'src/dashboard/components/nativeFilters/types';
 
 export const nativeFilters: NativeFiltersState = {
   filters: {
     'NATIVE_FILTER-e7Q8zKixx': {
       id: 'NATIVE_FILTER-e7Q8zKixx',
       name: 'region',
-      type: 'text',
+      filterType: FilterType.filter_select,
       targets: [
         {
           datasetId: 2,
@@ -46,7 +49,7 @@ export const nativeFilters: NativeFiltersState = {
     'NATIVE_FILTER-x9QPw0so1': {
       id: 'NATIVE_FILTER-x9QPw0so1',
       name: 'country_code',
-      type: 'text',
+      filterType: FilterType.filter_select,
       targets: [
         {
           datasetId: 2,

diff --git a/superset-frontend/src/dashboard/actions/nativeFilters.ts b/superset-frontend/src/dashboard/actions/nativeFilters.ts
@@ -20,6 +20,7 @@
 import { ExtraFormData, makeApi } from '@superset-ui/core';
 import { Dispatch } from 'redux';
 import {
+  CurrentFilterState,
   Filter,
   FilterConfiguration,
   SelectedValues,
@@ -99,6 +100,7 @@ export interface SetExtraFormData {
   type: typeof SET_EXTRA_FORM_DATA;
   filterId: string;
   extraFormData: ExtraFormData;
+  currentState: CurrentFilterState;
 }
 
 export function setFilterState(
@@ -117,15 +119,18 @@ export function setFilterState(
  * Sets the selected option(s) for a given filter
  * @param filterId the id of the native filter
  * @param extraFormData the selection translated into extra form data
+ * @param currentState
  */
 export function setExtraFormData(
   filterId: string,
   extraFormData: ExtraFormData,
+  currentState: CurrentFilterState,
 ): SetExtraFormData {
   return {
     type: SET_EXTRA_FORM_DATA,
     filterId,
     extraFormData,
+    currentState,
   };
 }
 

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/CascadePopover.tsx b/superset-frontend/src/dashboard/components/nativeFilters/CascadePopover.tsx
@@ -22,14 +22,19 @@ import Popover from 'src/common/components/Popover';
 import Icon from 'src/components/Icon';
 import { Pill } from 'src/dashboard/components/FiltersBadge/Styles';
 import { CascadeFilterControl, FilterControl } from './FilterBar';
-import { Filter, CascadeFilter } from './types';
+import { Filter, CascadeFilter, CurrentFilterState } from './types';
+import { useFilterState } from './state';
 
 interface CascadePopoverProps {
   filter: CascadeFilter;
   visible: boolean;
   directPathToChild?: string[];
   onVisibleChange: (visible: boolean) => void;
-  onExtraFormDataChange: (filter: Filter, extraFormData: ExtraFormData) => void;
+  onFilterSelectionChange: (
+    filter: Filter,
+    extraFormData: ExtraFormData,
+    currentState: CurrentFilterState,
+  ) => void;
 }
 
 const StyledTitleBox = styled.div`
@@ -73,10 +78,11 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
   filter,
   visible,
   onVisibleChange,
-  onExtraFormDataChange,
+  onFilterSelectionChange,
   directPathToChild,
 }) => {
   const [currentPathToChild, setCurrentPathToChild] = useState<string[]>();
+  const filterState = useFilterState(filter.id);
 
   useEffect(() => {
     setCurrentPathToChild(directPathToChild);
@@ -86,26 +92,27 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
     return () => clearTimeout(timeout);
   }, [directPathToChild, setCurrentPathToChild]);
 
-  const getActiveChildren = useCallback((filter: CascadeFilter):
-    | CascadeFilter[]
-    | null => {
-    const children = filter.cascadeChildren || [];
-    const currentValue = filter.currentValue || [];
+  const getActiveChildren = useCallback(
+    (filter: CascadeFilter): CascadeFilter[] | null => {
+      const children = filter.cascadeChildren || [];
+      const currentValue = filterState.currentState?.value;
 
-    const activeChildren = children.flatMap(
-      childFilter => getActiveChildren(childFilter) || [],
-    );
+      const activeChildren = children.flatMap(
+        childFilter => getActiveChildren(childFilter) || [],
+      );
 
-    if (activeChildren.length > 0) {
-      return activeChildren;
-    }
+      if (activeChildren.length > 0) {
+        return activeChildren;
+      }
 
-    if (currentValue.length > 0) {
-      return [filter];
-    }
+      if (currentValue) {
+        return [filter];
+      }
 
-    return null;
-  }, []);
+      return null;
+    },
+    [filterState],
+  );
 
   const getAllFilters = (filter: CascadeFilter): CascadeFilter[] => {
     const children = filter.cascadeChildren || [];
@@ -139,7 +146,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
       <FilterControl
         filter={filter}
         directPathToChild={directPathToChild}
-        onExtraFormDataChange={onExtraFormDataChange}
+        onFilterSelectionChange={onFilterSelectionChange}
       />
     );
   }
@@ -160,7 +167,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
       key={filter.id}
       filter={filter}
       directPathToChild={visible ? currentPathToChild : undefined}
-      onExtraFormDataChange={onExtraFormDataChange}
+      onFilterSelectionChange={onFilterSelectionChange}
     />
   );
 
@@ -180,7 +187,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
           <FilterControl
             key={activeFilter.id}
             filter={activeFilter}
-            onExtraFormDataChange={onExtraFormDataChange}
+            onFilterSelectionChange={onFilterSelectionChange}
             directPathToChild={currentPathToChild}
             icon={
               <>