chore(Dashboard): Simplify scoping logic for cross/native filters (#3…

…0719)
apache · Oct 30, 2024 · d5a98e0 · d5a98e0
1 parent 73768f6
commit d5a98e0
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 295 deletions.
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
@@ -378,7 +378,7 @@ export function cancelNativeFilterSettings() {
     .should('be.visible')
     .should('have.text', 'There are unsaved changes.');
   cy.get(nativeFilters.modal.footer)
-    .find(nativeFilters.modal.yesCancelButton)
+    .find(nativeFilters.modal.confirmCancelButton)
     .contains('cancel')
     .click({ force: true });
   cy.get(nativeFilters.modal.container).should('not.exist');

diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -322,7 +322,9 @@ export const nativeFilters = {
     footer: '.ant-modal-footer',
     saveButton: dataTestLocator('native-filter-modal-save-button'),
     cancelButton: dataTestLocator('native-filter-modal-cancel-button'),
-    yesCancelButton: '[type="button"]',
+    confirmCancelButton: dataTestLocator(
+      'native-filter-modal-confirm-cancel-button',
+    ),
     alertXUnsavedFilters: '.ant-alert-message',
     tabsList: {
       filterItemsContainer: dataTestLocator('filter-title-container'),

diff --git a/superset-frontend/src/dashboard/components/Dashboard.jsx b/superset-frontend/src/dashboard/components/Dashboard.jsx
@@ -212,7 +212,7 @@ class Dashboard extends PureComponent {
 
   applyFilters() {
     const { appliedFilters } = this;
-    const { activeFilters, ownDataCharts, datasources, slices } = this.props;
+    const { activeFilters, ownDataCharts, slices } = this.props;
 
     // refresh charts if a filter was removed, added, or changed
 
@@ -231,22 +231,12 @@ class Dashboard extends PureComponent {
       ) {
         // filterKey is removed?
         affectedChartIds.push(
-          ...getRelatedCharts(
-            appliedFilters,
-            activeFilters,
-            slices,
-            datasources,
-          )[filterKey],
+          ...getRelatedCharts(appliedFilters, activeFilters, slices)[filterKey],
         );
       } else if (!appliedFilterKeys.includes(filterKey)) {
         // filterKey is newly added?
         affectedChartIds.push(
-          ...getRelatedCharts(
-            activeFilters,
-            appliedFilters,
-            slices,
-            datasources,
-          )[filterKey],
+          ...getRelatedCharts(activeFilters, appliedFilters, slices)[filterKey],
         );
       } else {
         // if filterKey changes value,
@@ -261,12 +251,9 @@ class Dashboard extends PureComponent {
           )
         ) {
           affectedChartIds.push(
-            ...getRelatedCharts(
-              activeFilters,
-              appliedFilters,
-              slices,
-              datasources,
-            )[filterKey],
+            ...getRelatedCharts(activeFilters, appliedFilters, slices)[
+              filterKey
+            ],
           );
         }
 

diff --git a/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx b/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -17,13 +17,8 @@
  * under the License.
  */
 
-import { FC, useCallback, useRef, useState } from 'react';
-import {
-  NativeFilterScope,
-  styled,
-  t,
-  useComponentDidUpdate,
-} from '@superset-ui/core';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { NativeFilterScope, styled, t } from '@superset-ui/core';
 import { Radio } from 'src/components/Radio';
 import { AntdForm, Typography } from 'src/components';
 import { ScopingType } from './types';
@@ -32,7 +27,7 @@ import { getDefaultScopeValue, isScopingAll } from './utils';
 
 type FilterScopeProps = {
   pathToFormValue?: string[];
-  updateFormValues: (values: any) => void;
+  updateFormValues: (values: any, triggerFormChange?: boolean) => void;
   formFilterScope?: NativeFilterScope;
   forceUpdate: Function;
   filterScope?: NativeFilterScope;
@@ -64,17 +59,19 @@ const FilterScope: FC<FilterScopeProps> = ({
   chartId,
   initiallyExcludedCharts,
 }) => {
-  const [initialFilterScope] = useState(
-    filterScope || getDefaultScopeValue(chartId, initiallyExcludedCharts),
+  const initialFilterScope = useMemo(
+    () => filterScope || getDefaultScopeValue(chartId, initiallyExcludedCharts),
+    [chartId, filterScope, initiallyExcludedCharts],
   );
   const lastSpecificScope = useRef(initialFilterScope);
-  const [initialScopingType] = useState(
-    isScopingAll(initialFilterScope, chartId)
-      ? ScopingType.All
-      : ScopingType.Specific,
+  const initialScopingType = useMemo(
+    () =>
+      isScopingAll(initialFilterScope, chartId)
+        ? ScopingType.All
+        : ScopingType.Specific,
+    [chartId, initialFilterScope],
   );
-  const [hasScopeBeenModified, setHasScopeBeenModified] =
-    useState(!!filterScope);
+  const [hasScopeBeenModified, setHasScopeBeenModified] = useState(false);
 
   const onUpdateFormValues = useCallback(
     (formValues: any) => {
@@ -87,26 +84,24 @@ const FilterScope: FC<FilterScopeProps> = ({
     [formScopingType, updateFormValues],
   );
 
-  const updateScopes = useCallback(() => {
-    if (filterScope || hasScopeBeenModified) {
-      return;
-    }
+  const updateScopes = useCallback(
+    updatedFormValues => {
+      if (hasScopeBeenModified) {
+        return;
+      }
 
-    const newScope = getDefaultScopeValue(chartId, initiallyExcludedCharts);
-    updateFormValues({
-      scope: newScope,
-      scoping: isScopingAll(newScope, chartId)
-        ? ScopingType.All
-        : ScopingType.Specific,
-    });
-  }, [
-    chartId,
-    filterScope,
-    hasScopeBeenModified,
-    initiallyExcludedCharts,
-    updateFormValues,
-  ]);
-  useComponentDidUpdate(updateScopes);
+      updateFormValues(updatedFormValues, false);
+    },
+    [hasScopeBeenModified, updateFormValues],
+  );
+
+  useEffect(() => {
+    const updatedFormValues = {
+      scope: initialFilterScope,
+      scoping: initialScopingType,
+    };
+    updateScopes(updatedFormValues);
+  }, [initialFilterScope, initialScopingType, updateScopes]);
 
   return (
     <Wrapper>

diff --git a/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -583,9 +583,9 @@ const FiltersConfigForm = (
     !datasetId || datasetDetails || formFilter?.dataset?.label;
 
   const updateFormValues = useCallback(
-    (values: any) => {
+    (values: any, triggerFormChange = true) => {
       setNativeFilterFieldValues(form, filterId, values);
-      formChanged();
+      if (triggerFormChange) formChanged();
     },
     [filterId, form, formChanged],
   );

diff --git a/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -297,7 +297,6 @@ function FiltersConfigModal({
     setRemovedFilters,
     setOrderedFilters,
     setSaveAlertVisible,
-    filterChanges,
     filterId => {
       setFilterChanges(prev => ({
         ...prev,
@@ -510,7 +509,8 @@ function FiltersConfigModal({
       unsavedFiltersIds.length > 0 ||
       form.isFieldsTouched() ||
       changed ||
-      didChangeOrder
+      didChangeOrder ||
+      Object.values(removedFilters).some(f => f?.isPending)
     ) {
       setSaveAlertVisible(true);
     } else {

diff --git a/.../dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx b/.../dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx
@@ -61,6 +61,7 @@ export function CancelConfirmationAlert({
             buttonSize="small"
             buttonStyle="primary"
             onClick={onConfirm}
+            data-test="native-filter-modal-confirm-cancel-button"
           >
             {t('Yes, cancel')}
           </Button>

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
@@ -170,7 +170,6 @@ export const createHandleRemoveItem =
       val: string[] | ((prevState: string[]) => string[]),
     ) => void,
     setSaveAlertVisible: Function,
-    filterChanges: FilterChangesType,
     removeFilter: (filterId: string) => void,
   ) =>
   (filterId: string) => {