chore(Dashboard): Disable save button in Native Filters when an error…

… is present (#17037)

* Disable save on error

* Remove removed erroredFilter

* Fix cdisabled check

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useMemo, useState, useRef } from 'react';
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+} from 'react';
 import { uniq, isEqual, sortBy, debounce } from 'lodash';
 import { t, styled, SLOW_DEBOUNCE } from '@superset-ui/core';
 import { Form } from 'src/common/components';
@@ -391,6 +397,12 @@ export function FiltersConfigModal({
     [handleFilterHierarchyChange, handleErroredFilters],
   );
 
+  useEffect(() => {
+    setErroredFilters(prevErroredFilters =>
+      prevErroredFilters.filter(f => !removedFilters[f]),
+    );
+  }, [removedFilters]);
+
   return (
     <StyledModalWrapper
       visible={isOpen}
@@ -407,6 +419,7 @@ export function FiltersConfigModal({
           onDismiss={() => setSaveAlertVisible(false)}
           onCancel={handleCancel}
           handleSave={handleSave}
+          canSave={!erroredFilters.length}
           saveAlertVisible={saveAlertVisible}
           onConfirmCancel={handleConfirmCancel}
         />

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/Footer.tsx

@@ -27,9 +27,11 @@ type FooterProps = {
   onConfirmCancel: OnClickHandler;
   onDismiss: OnClickHandler;
   saveAlertVisible: boolean;
+  canSave?: boolean;
 };
 
 const Footer: FC<FooterProps> = ({
+  canSave = true,
   onCancel,
   handleSave,
   onDismiss,
@@ -60,6 +62,7 @@ const Footer: FC<FooterProps> = ({
         {t('Cancel')}
       </Button>
       <Button
+        disabled={!canSave}
         key="submit"
         buttonStyle="primary"
         onClick={handleSave}