test(email): add return type annotations to setUp/tearDown

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.github/dependabot.yml

@@ -3,6 +3,10 @@ enable-beta-ecosystems: true
 updates:
   - package-ecosystem: "github-actions"
     directory: "/"
+    ignore:
+      # Ignore temporarily as release schedule is too mentally taxing for dep-handling maintainers
+      # Additionally, very few PRs are reviewed by this action.
+      - dependency-name: anthropics/claude-code-action
     schedule:
       interval: "daily"
     cooldown:

.github/workflows/claude.yml

@@ -0,0 +1,88 @@
+name: Claude PR Assistant
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+
+permissions:
+  contents: read
+
+jobs:
+  check-permissions:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude'))
+    runs-on: ubuntu-latest
+    outputs:
+      allowed: ${{ steps.check.outputs.allowed }}
+    steps:
+      - name: Check if user is allowed
+        id: check
+        env:
+          COMMENTER: ${{ github.event.comment.user.login }}
+        run: |
+          # List of allowed users
+          ALLOWED_USERS="mistercrunch,rusackas"
+
+          echo "Checking permissions for user: $COMMENTER"
+
+          # Check if user is in allowed list
+          if [[ ",$ALLOWED_USERS," == *",$COMMENTER,"* ]]; then
+            echo "allowed=true" >> $GITHUB_OUTPUT
+            echo "✅ User $COMMENTER is allowed to use Claude"
+          else
+            echo "allowed=false" >> $GITHUB_OUTPUT
+            echo "❌ User $COMMENTER is not allowed to use Claude"
+          fi
+
+  deny-access:
+    needs: check-permissions
+    if: needs.check-permissions.outputs.allowed == 'false'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Comment access denied
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        env:
+          COMMENTER_LOGIN: ${{ github.event.comment.user.login || github.event.review.user.login || github.event.issue.user.login }}
+        with:
+          script: |
+            const commenter = process.env.COMMENTER_LOGIN;
+            const message = `👋 Hi @${commenter}!
+
+            Thanks for trying to use Claude Code, but currently only certain team members have access to this feature.
+
+            If you believe you should have access, please contact a project maintainer.`;
+
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: message
+            });
+
+  claude-code-action:
+    needs: check-permissions
+    if: needs.check-permissions.outputs.allowed == 'true'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        with:
+          persist-credentials: false
+          fetch-depth: 1
+
+      - name: Run Claude PR Action
+        uses: anthropics/claude-code-action@5fb899572b81d2bb648d4d187173a2f423a9677c # beta
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          timeout_minutes: "60"

UPDATING.md

@@ -135,6 +135,18 @@ Runbook to adopt:
 2. Set that value on the tunnel's `server_host_key` (via the database/SSH tunnel API or UI payload).
 3. Optionally set `SSH_TUNNEL_STRICT_HOST_KEY_CHECKING = True` in `superset_config.py` to require host-key verification on all tunnels.
 
+### SMTP server certificate validation enabled by default
+
+`SMTP_SSL_SERVER_AUTH` now defaults to `True` (previously `False`). With this default, STARTTLS/SSL connections to the configured SMTP server validate the server's TLS certificate against the system trusted CA store. This makes outbound email (alerts and reports) verify the mail server's identity out of the box.
+
+If your SMTP server presents a self-signed certificate, or a certificate that is not trusted by the system CA store, email delivery may now fail with a certificate verification error. To restore the previous behavior of skipping certificate validation, set the following in `superset_config.py`:
+
+```python
+SMTP_SSL_SERVER_AUTH = False
+```
+
+The recommended fix is to add the SMTP server's certificate (or its issuing CA) to the system trust store rather than disabling validation.
+
 ### Dataset import validates catalog against the target connection
 
 Importing a dataset now validates the `catalog` field against the target database connection. When the connection has multi-catalog disabled (`allow_multi_catalog` off) and the dataset's catalog is not the connection's default catalog, the import fails instead of silently persisting the non-default catalog. This matches the validation already enforced on the dataset update path and prevents imported datasets from querying an unintended database.

superset-frontend/src/dashboard/components/Dashboard.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactNode, useCallback, useContext, useEffect, useRef } from 'react';
+import { PureComponent, ReactNode } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { JsonObject } from '@superset-ui/core';
 
@@ -90,61 +90,165 @@ interface VisibilityEventData {
   ts: number;
 }
 
-function unload(event: BeforeUnloadEvent): string {
-  const message = t('You have unsaved changes.');
-  // Set returnValue on the actual event object to trigger the browser prompt
-  event.returnValue = message;
-  return message; // Gecko + Webkit, Safari, Chrome etc.
-}
+class Dashboard extends PureComponent<DashboardProps> {
+  static contextType = PluginContext;
 
-function onBeforeUnload(hasChanged: boolean): void {
-  if (hasChanged) {
-    window.addEventListener('beforeunload', unload);
-  } else {
-    window.removeEventListener('beforeunload', unload);
+  // Use type assertion when accessing context instead of declare field
+  // to avoid babel transformation issues in Jest
+
+  static defaultProps = {
+    timeout: 60,
+    userId: '',
+  };
+
+  appliedFilters: ActiveFilters;
+
+  appliedOwnDataCharts: JsonObject;
+
+  visibilityEventData: VisibilityEventData;
+
+  static onBeforeUnload(hasChanged: boolean): void {
+    if (hasChanged) {
+      window.addEventListener('beforeunload', Dashboard.unload);
+    } else {
+      window.removeEventListener('beforeunload', Dashboard.unload);
+    }
   }
-}
 
-function Dashboard({
-  actions,
-  dashboardId,
-  editMode,
-  isPublished,
-  hasUnsavedChanges,
-  slices,
-  activeFilters,
-  chartConfiguration,
-  datasources,
-  ownDataCharts,
-  layout,
-  impressionId,
-  timeout = 60,
-  userId = '',
-  children,
-}: DashboardProps): JSX.Element {
-  const context = useContext(PluginContext) as PluginContextType;
+  static unload(): string {
+    const message = t('You have unsaved changes.');
+    // Gecko + IE: returnValue is typed as boolean but historically accepts string
+    (window.event as BeforeUnloadEvent).returnValue = message;
+    return message; // Gecko + Webkit, Safari, Chrome etc.
+  }
 
-  // Use refs to track mutable values that persist across renders
-  const appliedFiltersRef = useRef<ActiveFilters>(activeFilters ?? {});
-  const appliedOwnDataChartsRef = useRef<JsonObject>(ownDataCharts ?? {});
-  const visibilityEventDataRef = useRef<VisibilityEventData>({
-    start_offset: 0,
-    ts: 0,
-  });
-  const prevLayoutRef = useRef<DashboardLayout>(layout);
-  const prevDashboardIdRef = useRef<number>(dashboardId);
+  constructor(props: DashboardProps) {
+    super(props);
+    this.appliedFilters = props.activeFilters ?? {};
+    this.appliedOwnDataCharts = props.ownDataCharts ?? {};
+    this.visibilityEventData = { start_offset: 0, ts: 0 };
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+  }
 
-  const refreshCharts = useCallback(
-    (ids: (string | number)[]): void => {
-      ids.forEach(id => {
-        actions.triggerQuery(true, id);
+  componentDidMount(): void {
+    const bootstrapData = getBootstrapData();
+    const { editMode, isPublished, layout } = this.props;
+    const eventData: Record<string, unknown> = {
+      is_soft_navigation: Logger.timeOriginOffset > 0,
+      is_edit_mode: editMode,
+      mount_duration: Logger.getTimestamp(),
+      is_empty: isDashboardEmpty(layout),
+      is_published: isPublished,
+      bootstrap_data_length: JSON.stringify(bootstrapData).length,
+    };
+    const directLinkComponentId = getLocationHash();
+    if (directLinkComponentId) {
+      eventData.target_id = directLinkComponentId;
+    }
+    this.props.actions.logEvent(LOG_ACTIONS_MOUNT_DASHBOARD, eventData);
+
+    // Handle browser tab visibility change
+    if (document.visibilityState === 'hidden') {
+      this.visibilityEventData = {
+        start_offset: Logger.getTimestamp(),
+        ts: new Date().getTime(),
+      };
+    }
+    window.addEventListener('visibilitychange', this.onVisibilityChange);
+    this.applyCharts();
+  }
+
+  componentDidUpdate(prevProps: DashboardProps): void {
+    this.applyCharts();
+    const currentChartIds = getChartIdsFromLayout(prevProps.layout);
+    const nextChartIds = getChartIdsFromLayout(this.props.layout);
+
+    if (prevProps.dashboardId !== this.props.dashboardId) {
+      // single-page-app navigation check
+      return;
+    }
+
+    if (currentChartIds.length < nextChartIds.length) {
+      const newChartIds = nextChartIds.filter(
+        key => currentChartIds.indexOf(key) === -1,
+      );
+      newChartIds.forEach(newChartId =>
+        this.props.actions.addSliceToDashboard(
+          newChartId,
+          getLayoutComponentFromChartId(this.props.layout, newChartId),
+        ),
+      );
+    } else if (currentChartIds.length > nextChartIds.length) {
+      // remove chart
+      const removedChartIds = currentChartIds.filter(
+        key => nextChartIds.indexOf(key) === -1,
+      );
+      removedChartIds.forEach(removedChartId =>
+        this.props.actions.removeSliceFromDashboard(removedChartId),
+      );
+    }
+  }
+
+  applyCharts(): void {
+    const {
+      activeFilters,
+      ownDataCharts,
+      chartConfiguration,
+      hasUnsavedChanges,
+      editMode,
+    } = this.props;
+    const { appliedFilters, appliedOwnDataCharts } = this;
+    if (!chartConfiguration) {
+      // For a first loading we need to wait for cross filters charts data loaded to get all active filters
+      // for correct comparing  of filters to avoid unnecessary requests
+      return;
+    }
+
+    if (
+      !editMode &&
+      (!areObjectsEqual(appliedOwnDataCharts, ownDataCharts, {
+        ignoreUndefined: true,
+      }) ||
+        !areObjectsEqual(appliedFilters, activeFilters, {
+          ignoreUndefined: true,
+        }))
+    ) {
+      this.applyFilters();
+    }
+
+    if (hasUnsavedChanges) {
+      Dashboard.onBeforeUnload(true);
+    } else {
+      Dashboard.onBeforeUnload(false);
+    }
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('visibilitychange', this.onVisibilityChange);
+    this.props.actions.clearDataMaskState();
+    this.props.actions.clearAllChartStates();
+  }
+
+  onVisibilityChange(): void {
+    if (document.visibilityState === 'hidden') {
+      // from visible to hidden
+      this.visibilityEventData = {
+        start_offset: Logger.getTimestamp(),
+        ts: new Date().getTime(),
+      };
+    } else if (document.visibilityState === 'visible') {
+      // from hidden to visible
+      const logStart = this.visibilityEventData.start_offset;
+      this.props.actions.logEvent(LOG_ACTIONS_HIDE_BROWSER_TAB, {
+        ...this.visibilityEventData,
+        duration: Logger.getTimestamp() - logStart,
       });
-    },
-    [actions],
-  );
+    }
+  }
 
-  const applyFilters = useCallback((): void => {
-    const appliedFilters = appliedFiltersRef.current;
+  applyFilters(): void {
+    const { appliedFilters } = this;
+    const { activeFilters, ownDataCharts, slices } = this.props;
 
     // refresh charts if a filter was removed, added, or changed
 
@@ -154,7 +258,7 @@ function Dashboard({
     const allKeys = new Set(currFilterKeys.concat(appliedFilterKeys));
     const affectedChartIds: (string | number)[] = getAffectedOwnDataCharts(
       ownDataCharts,
-      appliedOwnDataChartsRef.current,
+      this.appliedOwnDataCharts,
     );
 
     [...allKeys].forEach(filterKey => {
@@ -217,157 +321,24 @@ function Dashboard({
     });
 
     // remove dup in affectedChartIds
-    refreshCharts([...new Set(affectedChartIds)]);
-    appliedFiltersRef.current = activeFilters;
-    appliedOwnDataChartsRef.current = ownDataCharts;
-  }, [activeFilters, ownDataCharts, slices, refreshCharts]);
-
-  const applyCharts = useCallback((): void => {
-    if (!chartConfiguration) {
-      // For a first loading we need to wait for cross filters charts data loaded to get all active filters
-      // for correct comparing of filters to avoid unnecessary requests
-      return;
-    }
-
-    if (
-      !editMode &&
-      (!areObjectsEqual(appliedOwnDataChartsRef.current, ownDataCharts, {
-        ignoreUndefined: true,
-      }) ||
-        !areObjectsEqual(appliedFiltersRef.current, activeFilters, {
-          ignoreUndefined: true,
-        }))
-    ) {
-      applyFilters();
-    }
-
-    if (hasUnsavedChanges) {
-      onBeforeUnload(true);
-    } else {
-      onBeforeUnload(false);
-    }
-  }, [
-    chartConfiguration,
-    editMode,
-    ownDataCharts,
-    activeFilters,
-    hasUnsavedChanges,
-    applyFilters,
-  ]);
-
-  const onVisibilityChange = useCallback((): void => {
-    if (document.visibilityState === 'hidden') {
-      // from visible to hidden
-      visibilityEventDataRef.current = {
-        start_offset: Logger.getTimestamp(),
-        ts: new Date().getTime(),
-      };
-    } else if (document.visibilityState === 'visible') {
-      // from hidden to visible
-      const logStart = visibilityEventDataRef.current.start_offset;
-      actions.logEvent(LOG_ACTIONS_HIDE_BROWSER_TAB, {
-        ...visibilityEventDataRef.current,
-        duration: Logger.getTimestamp() - logStart,
-      });
-    }
-  }, [actions]);
-
-  // Refs that always point at the latest closures so the mount-only effect's
-  // listeners/cleanup never invoke a stale `actions` closure when `actions`
-  // identity changes.
-  const onVisibilityChangeRef = useRef(onVisibilityChange);
-  const actionsRef = useRef(actions);
-  useEffect(() => {
-    onVisibilityChangeRef.current = onVisibilityChange;
-    actionsRef.current = actions;
-  });
-
-  // componentDidMount equivalent
-  useEffect(() => {
-    const bootstrapData = getBootstrapData();
-    const eventData: Record<string, unknown> = {
-      is_soft_navigation: Logger.timeOriginOffset > 0,
-      is_edit_mode: editMode,
-      mount_duration: Logger.getTimestamp(),
-      is_empty: isDashboardEmpty(layout),
-      is_published: isPublished,
-      bootstrap_data_length: JSON.stringify(bootstrapData).length,
-    };
-    const directLinkComponentId = getLocationHash();
-    if (directLinkComponentId) {
-      eventData.target_id = directLinkComponentId;
-    }
-    actions.logEvent(LOG_ACTIONS_MOUNT_DASHBOARD, eventData);
-
-    // Handle browser tab visibility change
-    if (document.visibilityState === 'hidden') {
-      visibilityEventDataRef.current = {
-        start_offset: Logger.getTimestamp(),
-        ts: new Date().getTime(),
-      };
-    }
-    const handleVisibilityChange = () => onVisibilityChangeRef.current();
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    // componentWillUnmount equivalent
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      onBeforeUnload(false); // Remove beforeunload listener on unmount
-      actionsRef.current.clearDataMaskState();
-      actionsRef.current.clearAllChartStates();
-    };
-    // Only run on mount/unmount - listeners/cleanup go through refs to avoid
-    // capturing stale closures.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Apply charts on every render (like componentDidMount + componentDidUpdate calling applyCharts)
-  useEffect(() => {
-    applyCharts();
-  }, [applyCharts]);
-
-  // componentDidUpdate equivalent for layout changes
-  useEffect(() => {
-    const prevLayout = prevLayoutRef.current;
-    const prevDashboardId = prevDashboardIdRef.current;
-
-    // Update refs for next comparison
-    prevLayoutRef.current = layout;
-    prevDashboardIdRef.current = dashboardId;
-
-    const currentChartIds = getChartIdsFromLayout(prevLayout);
-    const nextChartIds = getChartIdsFromLayout(layout);
-
-    if (prevDashboardId !== dashboardId) {
-      // single-page-app navigation check
-      return;
-    }
-
-    if (currentChartIds.length < nextChartIds.length) {
-      const newChartIds = nextChartIds.filter(
-        key => currentChartIds.indexOf(key) === -1,
-      );
-      newChartIds.forEach(newChartId =>
-        actions.addSliceToDashboard(
-          newChartId,
-          getLayoutComponentFromChartId(layout, newChartId),
-        ),
-      );
-    } else if (currentChartIds.length > nextChartIds.length) {
-      // remove chart
-      const removedChartIds = currentChartIds.filter(
-        key => nextChartIds.indexOf(key) === -1,
-      );
-      removedChartIds.forEach(removedChartId =>
-        actions.removeSliceFromDashboard(removedChartId),
-      );
-    }
-  }, [layout, dashboardId, actions]);
-
-  if (context.loading) {
-    return <Loading />;
+    this.refreshCharts([...new Set(affectedChartIds)]);
+    this.appliedFilters = activeFilters;
+    this.appliedOwnDataCharts = ownDataCharts;
+  }
+
+  refreshCharts(ids: (string | number)[]): void {
+    ids.forEach(id => {
+      this.props.actions.triggerQuery(true, id);
+    });
+  }
+
+  render(): ReactNode {
+    const context = this.context as PluginContextType;
+    if (context.loading) {
+      return <Loading />;
+    }
+    return this.props.children;
   }
-  return <>{children}</>;
 }
 
 export default Dashboard;

superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts

@@ -31,10 +31,9 @@ export const getRootLevelTabsComponent = (dashboardLayout: DashboardLayout) => {
 };
 
 export const shouldFocusTabs = (
-  event: { target: HTMLElement },
-  container: Pick<Node, 'contains'> | null,
-  _menuRef: HTMLDivElement | null,
-): boolean =>
+  event: { target: { className: string } },
+  container: { contains: (arg0: any) => any },
+) =>
   // don't focus the tabs when we click on a tab
   event.target.className === 'ant-tabs-nav-wrap' ||
-  (container?.contains(event.target) ?? false);
+  container.contains(event.target);

superset-frontend/src/dashboard/components/DashboardGrid.tsx

@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { PureComponent, Fragment } from 'react';
+import { withTheme } from '@emotion/react';
 import classNames from 'classnames';
 import { addAlpha } from '@superset-ui/core';
+import { css, styled, type SupersetTheme } from '@apache-superset/core/theme';
 import { t } from '@apache-superset/core/translation';
-import { css, styled, useTheme } from '@apache-superset/core/theme';
 import { EmptyState } from '@superset-ui/core/components';
 import { Icons } from '@superset-ui/core/components/Icons';
 import { navigateTo } from 'src/utils/navigationUtils';
@@ -47,6 +48,11 @@ export interface DashboardGridProps {
   setEditMode?: (editMode: boolean) => void;
   width: number;
   dashboardId?: number;
+  theme: SupersetTheme;
+}
+
+interface DashboardGridState {
+  isResizing: boolean;
 }
 
 interface DropProps {
@@ -125,235 +131,261 @@ const GridColumnGuide = styled.div`
   `};
 `;
 
-function DashboardGrid({
-  depth,
-  editMode,
-  canEdit,
-  gridComponent,
-  handleComponentDrop,
-  isComponentVisible,
-  resizeComponent,
-  setDirectPathToChild,
-  setEditMode,
-  width,
-  dashboardId,
-}: DashboardGridProps) {
-  const theme = useTheme();
-  const [isResizing, setIsResizing] = useState(false);
-  const gridRef = useRef<HTMLDivElement | null>(null);
+class DashboardGrid extends PureComponent<
+  DashboardGridProps,
+  DashboardGridState
+> {
+  grid: HTMLDivElement | null;
 
-  const setGridRef = useCallback((ref: HTMLDivElement | null): void => {
-    gridRef.current = ref;
-  }, []);
+  constructor(props: DashboardGridProps) {
+    super(props);
+    this.state = {
+      isResizing: false,
+    };
+    this.grid = null;
+    this.handleResizeStart = this.handleResizeStart.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.handleResizeStop = this.handleResizeStop.bind(this);
+    this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
+    this.getRowGuidePosition = this.getRowGuidePosition.bind(this);
+    this.setGridRef = this.setGridRef.bind(this);
+    this.handleChangeTab = this.handleChangeTab.bind(this);
+  }
 
-  const handleResizeStart = useCallback((): void => {
-    setIsResizing(true);
-  }, []);
+  getRowGuidePosition(resizeRef: HTMLElement | null): number | null {
+    if (resizeRef && this.grid) {
+      return (
+        resizeRef.getBoundingClientRect().bottom -
+        this.grid.getBoundingClientRect().top -
+        2
+      );
+    }
+    return null;
+  }
 
-  const handleResize = useCallback(
-    (
-      _event: MouseEvent | TouchEvent,
-      _direction: string,
-      _elementRef: HTMLElement,
-      _delta: { width: number; height: number },
-    ): void => {
-      // no-op: resize position tracking not implemented
-    },
-    [],
-  );
+  setGridRef(ref: HTMLDivElement | null): void {
+    this.grid = ref;
+  }
 
-  const handleResizeStop = useCallback(
-    (
-      _event: MouseEvent | TouchEvent,
-      _direction: string,
-      _elementRef: HTMLElement,
-      delta: { width: number; height: number },
-      id: string,
-    ): void => {
-      resizeComponent({
-        id,
-        width: delta.width,
-        height: delta.height,
+  handleResizeStart(): void {
+    this.setState(() => ({
+      isResizing: true,
+    }));
+  }
+
+  handleResize(
+    _event: MouseEvent | TouchEvent,
+    _direction: string,
+    _elementRef: HTMLElement,
+    _delta: { width: number; height: number },
+  ): void {
+    // no-op: resize position is tracked via getRowGuidePosition
+  }
+
+  handleResizeStop(
+    _event: MouseEvent | TouchEvent,
+    _direction: string,
+    _elementRef: HTMLElement,
+    delta: { width: number; height: number },
+    id: string,
+  ): void {
+    this.props.resizeComponent({
+      id,
+      width: delta.width,
+      height: delta.height,
+    });
+
+    this.setState(() => ({
+      isResizing: false,
+    }));
+  }
+
+  handleTopDropTargetDrop(dropResult: DropResult): void {
+    if (dropResult?.destination) {
+      this.props.handleComponentDrop({
+        ...dropResult,
+        destination: {
+          ...dropResult.destination,
+          // force appending as the first child if top drop target
+          index: 0,
+        },
       });
+    }
+  }
 
-      setIsResizing(false);
-    },
-    [resizeComponent],
-  );
+  handleChangeTab({ pathToTabIndex }: { pathToTabIndex: string[] }): void {
+    this.props.setDirectPathToChild(pathToTabIndex);
+  }
 
-  const handleTopDropTargetDrop = useCallback(
-    (dropResult: DropResult): void => {
-      if (dropResult?.destination) {
-        handleComponentDrop({
-          ...dropResult,
-          destination: {
-            ...dropResult.destination,
-            // force appending as the first child if top drop target
-            index: 0,
-          },
-        });
-      }
-    },
-    [handleComponentDrop],
-  );
+  render() {
+    const {
+      gridComponent,
+      handleComponentDrop,
+      depth,
+      width,
+      isComponentVisible,
+      editMode,
+      canEdit,
+      setEditMode,
+      dashboardId,
+      theme,
+    } = this.props;
+    const columnPlusGutterWidth =
+      (width + GRID_GUTTER_SIZE) / GRID_COLUMN_COUNT;
 
-  const handleChangeTab = useCallback(
-    ({ pathToTabIndex }: { pathToTabIndex: string[] }): void => {
-      setDirectPathToChild(pathToTabIndex);
-    },
-    [setDirectPathToChild],
-  );
+    const columnWidth = columnPlusGutterWidth - GRID_GUTTER_SIZE;
+    const { isResizing } = this.state;
 
-  const columnPlusGutterWidth = (width + GRID_GUTTER_SIZE) / GRID_COLUMN_COUNT;
+    const shouldDisplayEmptyState = gridComponent?.children?.length === 0;
+    const shouldDisplayTopLevelTabEmptyState =
+      shouldDisplayEmptyState && gridComponent?.type === TAB_TYPE;
 
-  const columnWidth = columnPlusGutterWidth - GRID_GUTTER_SIZE;
+    const dashboardEmptyState = editMode && (
+      <EmptyState
+        title={t('Drag and drop components and charts to the dashboard')}
+        description={t(
+          'You can create a new chart or use existing ones from the panel on the right',
+        )}
+        size="large"
+        buttonText={
+          <>
+            <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} />
+            {t('Create a new chart')}
+          </>
+        }
+        buttonAction={() => {
+          navigateTo(`/chart/add?dashboard_id=${dashboardId}`, {
+            newWindow: true,
+          });
+        }}
+        image="chart.svg"
+      />
+    );
 
-  const shouldDisplayEmptyState = gridComponent?.children?.length === 0;
-  const shouldDisplayTopLevelTabEmptyState =
-    shouldDisplayEmptyState && gridComponent?.type === TAB_TYPE;
+    const topLevelTabEmptyState = editMode ? (
+      <EmptyState
+        title={t('Drag and drop components to this tab')}
+        size="large"
+        description={t(
+          `You can create a new chart or use existing ones from the panel on the right`,
+        )}
+        buttonText={
+          <>
+            <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} />
+            {t('Create a new chart')}
+          </>
+        }
+        buttonAction={() => {
+          navigateTo(`/chart/add?dashboard_id=${dashboardId}`, {
+            newWindow: true,
+          });
+        }}
+        image="chart.svg"
+      />
+    ) : (
+      <EmptyState
+        title={t('There are no components added to this tab')}
+        size="large"
+        description={
+          canEdit && t('You can add the components in the edit mode.')
+        }
+        buttonText={canEdit ? t('Edit the dashboard') : undefined}
+        buttonAction={
+          canEdit
+            ? () => {
+                setEditMode?.(true);
+              }
+            : undefined
+        }
+        image="chart.svg"
+      />
+    );
 
-  const dashboardEmptyState = editMode && (
-    <EmptyState
-      title={t('Drag and drop components and charts to the dashboard')}
-      description={t(
-        'You can create a new chart or use existing ones from the panel on the right',
-      )}
-      size="large"
-      buttonText={
-        <>
-          <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} />
-          {t('Create a new chart')}
-        </>
-      }
-      buttonAction={() => {
-        navigateTo(`/chart/add?dashboard_id=${dashboardId}`, {
-          newWindow: true,
-        });
-      }}
-      image="chart.svg"
-    />
-  );
-
-  const topLevelTabEmptyState = editMode ? (
-    <EmptyState
-      title={t('Drag and drop components to this tab')}
-      size="large"
-      description={t(
-        `You can create a new chart or use existing ones from the panel on the right`,
-      )}
-      buttonText={
-        <>
-          <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} />
-          {t('Create a new chart')}
-        </>
-      }
-      buttonAction={() => {
-        navigateTo(`/chart/add?dashboard_id=${dashboardId}`, {
-          newWindow: true,
-        });
-      }}
-      image="chart.svg"
-    />
-  ) : (
-    <EmptyState
-      title={t('There are no components added to this tab')}
-      size="large"
-      description={canEdit && t('You can add the components in the edit mode.')}
-      buttonText={canEdit ? t('Edit the dashboard') : undefined}
-      buttonAction={
-        canEdit
-          ? () => {
-              setEditMode?.(true);
-            }
-          : undefined
-      }
-      image="chart.svg"
-    />
-  );
-
-  return width < 100 ? null : (
-    <>
-      {shouldDisplayEmptyState && (
-        <DashboardEmptyStateContainer>
-          {shouldDisplayTopLevelTabEmptyState
-            ? topLevelTabEmptyState
-            : dashboardEmptyState}
-        </DashboardEmptyStateContainer>
-      )}
-      <div className="dashboard-grid" ref={setGridRef}>
-        <GridContent
-          className="grid-content"
-          data-test="grid-content"
-          editMode={editMode}
-        >
-          {/* make the area above components droppable */}
-          {editMode && (
-            <Droppable
-              component={gridComponent}
-              depth={depth}
-              parentComponent={null}
-              index={0}
-              orientation="column"
-              onDrop={handleTopDropTargetDrop}
-              className={classNames({
-                'empty-droptarget': true,
-                'empty-droptarget--full': gridComponent?.children?.length === 0,
-              })}
-              editMode
-              dropToChild={gridComponent?.children?.length === 0}
-            >
-              {renderDraggableContent}
-            </Droppable>
-          )}
-          {gridComponent?.children?.map((id, index) => (
-            <Fragment key={id}>
-              <DashboardComponent
-                id={id}
-                parentId={gridComponent.id}
-                depth={depth + 1}
-                index={index}
-                availableColumnCount={GRID_COLUMN_COUNT}
-                columnWidth={columnWidth}
-                isComponentVisible={isComponentVisible}
-                onResizeStart={handleResizeStart}
-                onResize={handleResize}
-                onResizeStop={handleResizeStop}
-                onChangeTab={handleChangeTab}
-              />
-              {/* make the area below components droppable */}
-              {editMode && (
-                <Droppable
-                  component={gridComponent}
-                  depth={depth}
-                  parentComponent={null}
-                  index={index + 1}
-                  orientation="column"
-                  onDrop={handleComponentDrop}
-                  className="empty-droptarget"
-                  editMode
-                >
-                  {renderDraggableContent}
-                </Droppable>
-              )}
-            </Fragment>
-          ))}
-          {isResizing &&
-            Array(GRID_COLUMN_COUNT)
-              .fill(null)
-              .map((_, i) => (
-                <GridColumnGuide
-                  key={`grid-column-${i}`}
-                  className="grid-column-guide"
-                  style={{
-                    left: i * GRID_GUTTER_SIZE + i * columnWidth,
-                    width: columnWidth,
-                  }}
+    return width < 100 ? null : (
+      <>
+        {shouldDisplayEmptyState && (
+          <DashboardEmptyStateContainer>
+            {shouldDisplayTopLevelTabEmptyState
+              ? topLevelTabEmptyState
+              : dashboardEmptyState}
+          </DashboardEmptyStateContainer>
+        )}
+        <div className="dashboard-grid" ref={this.setGridRef}>
+          <GridContent
+            className="grid-content"
+            data-test="grid-content"
+            editMode={editMode}
+          >
+            {/* make the area above components droppable */}
+            {editMode && (
+              <Droppable
+                component={gridComponent}
+                depth={depth}
+                parentComponent={null}
+                index={0}
+                orientation="column"
+                onDrop={this.handleTopDropTargetDrop}
+                className={classNames({
+                  'empty-droptarget': true,
+                  'empty-droptarget--full':
+                    gridComponent?.children?.length === 0,
+                })}
+                editMode
+                dropToChild={gridComponent?.children?.length === 0}
+              >
+                {renderDraggableContent}
+              </Droppable>
+            )}
+            {gridComponent?.children?.map((id, index) => (
+              <Fragment key={id}>
+                <DashboardComponent
+                  id={id}
+                  parentId={gridComponent.id}
+                  depth={depth + 1}
+                  index={index}
+                  availableColumnCount={GRID_COLUMN_COUNT}
+                  columnWidth={columnWidth}
+                  isComponentVisible={isComponentVisible}
+                  onResizeStart={this.handleResizeStart}
+                  onResize={this.handleResize}
+                  onResizeStop={this.handleResizeStop}
+                  onChangeTab={this.handleChangeTab}
                 />
-              ))}
-        </GridContent>
-      </div>
-    </>
-  );
+                {/* make the area below components droppable */}
+                {editMode && (
+                  <Droppable
+                    component={gridComponent}
+                    depth={depth}
+                    parentComponent={null}
+                    index={index + 1}
+                    orientation="column"
+                    onDrop={handleComponentDrop}
+                    className="empty-droptarget"
+                    editMode
+                  >
+                    {renderDraggableContent}
+                  </Droppable>
+                )}
+              </Fragment>
+            ))}
+            {isResizing &&
+              Array(GRID_COLUMN_COUNT)
+                .fill(null)
+                .map((_, i) => (
+                  <GridColumnGuide
+                    key={`grid-column-${i}`}
+                    className="grid-column-guide"
+                    style={{
+                      left: i * GRID_GUTTER_SIZE + i * columnWidth,
+                      width: columnWidth,
+                    }}
+                  />
+                ))}
+          </GridContent>
+        </div>
+      </>
+    );
+  }
 }
 
-export default DashboardGrid;
+export default withTheme(DashboardGrid);

superset-frontend/src/dashboard/components/PublishedStatus/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback } from 'react';
+import { Component } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { Tooltip, PublishedLabel } from '@superset-ui/core/components';
 import { HeaderProps, HeaderDropdownProps } from '../Header/types';
@@ -43,64 +43,70 @@ const publishedTooltip = t(
   'This dashboard is published. Click to make it a draft.',
 );
 
-export default function PublishedStatus({
-  dashboardId,
-  userCanEdit,
-  userCanSave,
-  isPublished,
-  savePublished,
-}: DashboardPublishedStatusType) {
-  const togglePublished = useCallback(() => {
-    savePublished(dashboardId, !isPublished);
-  }, [dashboardId, isPublished, savePublished]);
+export default class PublishedStatus extends Component<DashboardPublishedStatusType> {
+  constructor(props: DashboardPublishedStatusType) {
+    super(props);
+    this.togglePublished = this.togglePublished.bind(this);
+  }
 
-  // Show everybody the draft badge
-  if (!isPublished) {
-    // if they can edit the dash, make the badge a button
-    if (userCanEdit && userCanSave) {
+  togglePublished() {
+    this.props.savePublished(this.props.dashboardId, !this.props.isPublished);
+  }
+
+  render() {
+    const { isPublished, userCanEdit, userCanSave } = this.props;
+
+    // Show everybody the draft badge
+    if (!isPublished) {
+      // if they can edit the dash, make the badge a button
+      if (userCanEdit && userCanSave) {
+        return (
+          <Tooltip
+            id="unpublished-dashboard-tooltip"
+            placement="bottom"
+            title={draftButtonTooltip}
+          >
+            <div>
+              <PublishedLabel
+                isPublished={isPublished}
+                onClick={this.togglePublished}
+              />
+            </div>
+          </Tooltip>
+        );
+      }
       return (
         <Tooltip
           id="unpublished-dashboard-tooltip"
           placement="bottom"
-          title={draftButtonTooltip}
+          title={draftDivTooltip}
+        >
+          <div>
+            <PublishedLabel isPublished={isPublished} />
+          </div>
+        </Tooltip>
+      );
+    }
+
+    // Show the published badge for the owner of the dashboard to toggle
+    if (userCanEdit && userCanSave) {
+      return (
+        <Tooltip
+          id="published-dashboard-tooltip"
+          placement="bottom"
+          title={publishedTooltip}
         >
           <div>
             <PublishedLabel
               isPublished={isPublished}
-              onClick={togglePublished}
+              onClick={this.togglePublished}
             />
           </div>
         </Tooltip>
       );
     }
-    return (
-      <Tooltip
-        id="unpublished-dashboard-tooltip"
-        placement="bottom"
-        title={draftDivTooltip}
-      >
-        <div>
-          <PublishedLabel isPublished={isPublished} />
-        </div>
-      </Tooltip>
-    );
-  }
 
-  // Show the published badge for the owner of the dashboard to toggle
-  if (userCanEdit && userCanSave) {
-    return (
-      <Tooltip
-        id="published-dashboard-tooltip"
-        placement="bottom"
-        title={publishedTooltip}
-      >
-        <div>
-          <PublishedLabel isPublished={isPublished} onClick={togglePublished} />
-        </div>
-      </Tooltip>
-    );
+    // Don't show anything if one doesn't own the dashboard and it is published
+    return null;
   }
-
-  // Don't show anything if one doesn't own the dashboard and it is published
-  return null;
 }

superset-frontend/src/dashboard/components/SliceAdder.tsx

@@ -17,13 +17,13 @@
  * under the License.
  */
 /* eslint-env browser */
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Component } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
 // @ts-expect-error
 import { createFilter } from 'react-search-input';
 import { t } from '@apache-superset/core/translation';
-import { styled, css, useTheme } from '@apache-superset/core/theme';
+import { styled, css } from '@apache-superset/core/theme';
 import {
   Button,
   Checkbox,
@@ -49,6 +49,7 @@ import {
 import { debounce, pickBy } from 'lodash';
 import { Dispatch } from 'redux';
 import { Slice } from 'src/dashboard/types';
+import { withTheme, Theme } from '@emotion/react';
 import { navigateTo } from 'src/utils/navigationUtils';
 import type { ConnectDragSource } from 'react-dnd';
 import AddSliceCard from './AddSliceCard';
@@ -57,6 +58,7 @@ import { DragDroppable } from './dnd/DragDroppable';
 import { datasetLabelLower } from 'src/features/semanticLayers/label';
 
 export type SliceAdderProps = {
+  theme: Theme;
   fetchSlices: (
     userId?: number,
     filter_value?: string,
@@ -75,6 +77,14 @@ export type SliceAdderProps = {
   dashboardId: number;
 };
 
+type SliceAdderState = {
+  filteredSlices: Slice[];
+  searchTerm: string;
+  sortBy: keyof Slice;
+  selectedSliceIdsSet: Set<number>;
+  showOnlyMyCharts: boolean;
+};
+
 const KEYS_TO_FILTERS = ['slice_name', 'viz_type', 'datasource_name'];
 const KEYS_TO_SORT = {
   slice_name: t('name'),
@@ -164,308 +174,295 @@ function getFilteredSortedSlices(
     .filter(createFilter(searchTerm, KEYS_TO_FILTERS))
     .sort(sortByComparator(sortBy));
 }
+class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
+  private slicesRequest?: AbortController | Promise<void>;
 
-function SliceAdder({
-  fetchSlices,
-  updateSlices,
-  isLoading,
-  slices,
-  errorMessage = '',
-  userId,
-  selectedSliceIds = [],
-  editMode = false,
-  dashboardId,
-}: SliceAdderProps) {
-  const theme = useTheme();
-  const slicesRequestRef = useRef<AbortController | Promise<void>>();
+  static defaultProps = {
+    selectedSliceIds: [],
+    editMode: false,
+    errorMessage: '',
+  };
 
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortBy, setSortBy] = useState<keyof Slice>(DEFAULT_SORT_KEY);
-  const [selectedSliceIdsSet, setSelectedSliceIdsSet] = useState(
-    () => new Set(selectedSliceIds),
-  );
-
-  // Refs to track latest values for cleanup effect
-  const latestSlicesRef = useRef(slices);
-  const latestSelectedSliceIdsSetRef = useRef(selectedSliceIdsSet);
-  const [showOnlyMyCharts, setShowOnlyMyCharts] = useState(() =>
-    getItem(LocalStorageKeys.DashboardEditorShowOnlyMyCharts, true),
-  );
-
-  // Keep refs updated with latest values
-  useEffect(() => {
-    latestSlicesRef.current = slices;
-  }, [slices]);
-
-  useEffect(() => {
-    latestSelectedSliceIdsSetRef.current = selectedSliceIdsSet;
-  }, [selectedSliceIdsSet]);
-
-  const filteredSlices = useMemo(
-    () =>
-      getFilteredSortedSlices(
-        slices,
-        searchTerm,
-        sortBy,
-        showOnlyMyCharts,
-        userId,
+  constructor(props: SliceAdderProps) {
+    super(props);
+    this.state = {
+      filteredSlices: [],
+      searchTerm: '',
+      sortBy: DEFAULT_SORT_KEY,
+      selectedSliceIdsSet: new Set(props.selectedSliceIds),
+      showOnlyMyCharts: getItem(
+        LocalStorageKeys.DashboardEditorShowOnlyMyCharts,
+        true,
       ),
-    [slices, searchTerm, sortBy, showOnlyMyCharts, userId],
-  );
+    };
+    this.rowRenderer = this.rowRenderer.bind(this);
+    this.searchUpdated = this.searchUpdated.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.userIdForFetch = this.userIdForFetch.bind(this);
+    this.onShowOnlyMyCharts = this.onShowOnlyMyCharts.bind(this);
+  }
 
-  const userIdForFetch = useCallback(
-    () => (showOnlyMyCharts ? userId : undefined),
-    [showOnlyMyCharts, userId],
-  );
+  userIdForFetch() {
+    return this.state.showOnlyMyCharts ? this.props.userId : undefined;
+  }
 
-  // Refs so the debounced search reads the latest sortBy/userIdForFetch at
-  // fire time without recreating the debounce (which would drop a pending,
-  // armed-but-not-yet-fired search when sortBy/showOnlyMyCharts change).
-  const sortByRef = useRef(sortBy);
-  const userIdForFetchRef = useRef(userIdForFetch);
-  useEffect(() => {
-    sortByRef.current = sortBy;
-  }, [sortBy]);
-  useEffect(() => {
-    userIdForFetchRef.current = userIdForFetch;
-  }, [userIdForFetch]);
+  componentDidMount() {
+    this.slicesRequest = this.props.fetchSlices(
+      this.userIdForFetch(),
+      '',
+      this.state.sortBy,
+    );
+  }
 
-  // componentDidMount
-  useEffect(() => {
-    slicesRequestRef.current = fetchSlices(userIdForFetch(), '', sortBy);
-    // Only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Update selectedSliceIdsSet when selectedSliceIds prop changes
-  useEffect(() => {
-    setSelectedSliceIdsSet(new Set(selectedSliceIds));
-  }, [selectedSliceIds]);
-
-  // componentWillUnmount
-  useEffect(
-    () => () => {
-      // Clears the redux store keeping only selected items
-      // Use refs to get latest values on unmount
-      const selectedSlices = pickBy(latestSlicesRef.current, (value: Slice) =>
-        latestSelectedSliceIdsSetRef.current.has(value.slice_id),
+  componentDidUpdate(prevProps: SliceAdderProps) {
+    const nextState: SliceAdderState = {} as SliceAdderState;
+    if (this.props.lastUpdated !== prevProps.lastUpdated) {
+      nextState.filteredSlices = getFilteredSortedSlices(
+        this.props.slices,
+        this.state.searchTerm,
+        this.state.sortBy,
+        this.state.showOnlyMyCharts,
+        this.props.userId,
       );
+    }
 
-      updateSlices(selectedSlices);
-      if (slicesRequestRef.current instanceof AbortController) {
-        slicesRequestRef.current.abort();
-      }
-    },
-    [updateSlices],
-  );
+    if (prevProps.selectedSliceIds !== this.props.selectedSliceIds) {
+      nextState.selectedSliceIdsSet = new Set(this.props.selectedSliceIds);
+    }
 
-  const searchUpdated = useCallback((term: string) => {
-    setSearchTerm(term);
-  }, []);
+    if (Object.keys(nextState).length) {
+      this.setState(nextState);
+    }
+  }
 
-  const fetchSlicesRef = useRef(fetchSlices);
-  useEffect(() => {
-    fetchSlicesRef.current = fetchSlices;
-  }, [fetchSlices]);
+  componentWillUnmount() {
+    // Clears the redux store keeping only selected items
+    const selectedSlices = pickBy(this.props.slices, (value: Slice) =>
+      this.state.selectedSliceIdsSet.has(value.slice_id),
+    );
 
-  // Create the debounce once (stable identity) so a pending search isn't
-  // dropped when sortBy/userIdForFetch change mid-typing. The debounced
-  // function reads the latest values from refs at fire time.
-  const handleChange = useMemo(
-    () =>
-      debounce((value: string) => {
-        searchUpdated(value);
-        slicesRequestRef.current = fetchSlicesRef.current(
-          userIdForFetchRef.current(),
-          value,
-          sortByRef.current,
-        );
-      }, 300),
-    [searchUpdated],
-  );
+    this.props.updateSlices(selectedSlices);
+    if (this.slicesRequest instanceof AbortController) {
+      this.slicesRequest.abort();
+    }
+  }
 
-  useEffect(
-    () => () => {
-      handleChange.cancel();
-    },
-    [handleChange],
-  );
+  handleChange = debounce(value => {
+    this.searchUpdated(value);
+    this.slicesRequest = this.props.fetchSlices(
+      this.userIdForFetch(),
+      value,
+      this.state.sortBy,
+    );
+  }, 300);
 
-  const handleSelect = useCallback(
-    (newSortBy: keyof Slice) => {
-      setSortBy(newSortBy);
-      slicesRequestRef.current = fetchSlices(
-        userIdForFetch(),
+  searchUpdated(searchTerm: string) {
+    this.setState(prevState => ({
+      searchTerm,
+      filteredSlices: getFilteredSortedSlices(
+        this.props.slices,
         searchTerm,
-        newSortBy,
+        prevState.sortBy,
+        prevState.showOnlyMyCharts,
+        this.props.userId,
+      ),
+    }));
+  }
+
+  handleSelect(sortBy: keyof Slice) {
+    this.setState(prevState => ({
+      sortBy,
+      filteredSlices: getFilteredSortedSlices(
+        this.props.slices,
+        prevState.searchTerm,
+        sortBy,
+        prevState.showOnlyMyCharts,
+        this.props.userId,
+      ),
+    }));
+    this.slicesRequest = this.props.fetchSlices(
+      this.userIdForFetch(),
+      this.state.searchTerm,
+      sortBy,
+    );
+  }
+
+  rowRenderer({ index, style }: { index: number; style: React.CSSProperties }) {
+    const { filteredSlices, selectedSliceIdsSet } = this.state;
+    const cellData = filteredSlices[index];
+
+    const isSelected = selectedSliceIdsSet.has(cellData.slice_id);
+    const type = CHART_TYPE;
+    const id = NEW_CHART_ID;
+
+    const meta = {
+      chartId: cellData.slice_id,
+      sliceName: cellData.slice_name,
+    };
+    return (
+      <DragDroppable
+        key={cellData.slice_id}
+        component={{ type, id, meta }}
+        parentComponent={{
+          id: NEW_COMPONENTS_SOURCE_ID,
+          type: NEW_COMPONENT_SOURCE_TYPE,
+        }}
+        index={index}
+        depth={0}
+        disableDragDrop={isSelected}
+        editMode={this.props.editMode}
+        // we must use a custom drag preview within the List because
+        // it does not seem to work within a fixed-position container
+        useEmptyDragPreview
+        // List library expect style props here
+        // actual style should be applied to nested AddSliceCard component
+        style={{}}
+      >
+        {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
+          <AddSliceCard
+            innerRef={dragSourceRef}
+            style={style}
+            sliceName={cellData.slice_name}
+            lastModified={cellData.changed_on_humanized}
+            visType={cellData.viz_type}
+            datasourceUrl={cellData.datasource_url}
+            datasourceName={cellData.datasource_name}
+            thumbnailUrl={cellData.thumbnail_url}
+            isSelected={isSelected}
+          />
+        )}
+      </DragDroppable>
+    );
+  }
+
+  onShowOnlyMyCharts = (showOnlyMyCharts: boolean) => {
+    if (!showOnlyMyCharts) {
+      this.slicesRequest = this.props.fetchSlices(
+        undefined,
+        this.state.searchTerm,
+        this.state.sortBy,
       );
-    },
-    [fetchSlices, searchTerm, userIdForFetch],
-  );
+    }
+    this.setState(prevState => ({
+      showOnlyMyCharts,
+      filteredSlices: getFilteredSortedSlices(
+        this.props.slices,
+        prevState.searchTerm,
+        prevState.sortBy,
+        showOnlyMyCharts,
+        this.props.userId,
+      ),
+    }));
+    setItem(LocalStorageKeys.DashboardEditorShowOnlyMyCharts, showOnlyMyCharts);
+  };
 
-  const onShowOnlyMyCharts = useCallback(
-    (checked: boolean) => {
-      if (!checked) {
-        slicesRequestRef.current = fetchSlices(undefined, searchTerm, sortBy);
-      }
-      setShowOnlyMyCharts(checked);
-      setItem(LocalStorageKeys.DashboardEditorShowOnlyMyCharts, checked);
-    },
-    [fetchSlices, searchTerm, sortBy],
-  );
-
-  const rowRenderer = useCallback(
-    ({ index, style }: { index: number; style: React.CSSProperties }) => {
-      const cellData = filteredSlices[index];
-
-      const isSelected = selectedSliceIdsSet.has(cellData.slice_id);
-      const type = CHART_TYPE;
-      const id = NEW_CHART_ID;
-
-      const meta = {
-        chartId: cellData.slice_id,
-        sliceName: cellData.slice_name,
-      };
-      return (
-        <DragDroppable
-          key={cellData.slice_id}
-          component={{ type, id, meta }}
-          parentComponent={{
-            id: NEW_COMPONENTS_SOURCE_ID,
-            type: NEW_COMPONENT_SOURCE_TYPE,
-          }}
-          index={index}
-          depth={0}
-          disableDragDrop={isSelected}
-          editMode={editMode}
-          // we must use a custom drag preview within the List because
-          // it does not seem to work within a fixed-position container
-          useEmptyDragPreview
-          // List library expect style props here
-          // actual style should be applied to nested AddSliceCard component
-          style={{}}
-        >
-          {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
-            <AddSliceCard
-              innerRef={dragSourceRef}
-              style={style}
-              sliceName={cellData.slice_name}
-              lastModified={cellData.changed_on_humanized}
-              visType={cellData.viz_type}
-              datasourceUrl={cellData.datasource_url}
-              datasourceName={cellData.datasource_name}
-              thumbnailUrl={cellData.thumbnail_url}
-              isSelected={isSelected}
-            />
-          )}
-        </DragDroppable>
-      );
-    },
-    [filteredSlices, selectedSliceIdsSet, editMode],
-  );
-
-  return (
-    <div
-      css={css`
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        button > span > :first-of-type {
-          margin-right: 0;
-        }
-      `}
-    >
-      <NewChartButtonContainer>
-        <NewChartButton
-          buttonStyle="link"
-          buttonSize="xsmall"
-          icon={
-            <Icons.PlusOutlined iconSize="m" iconColor={theme.colorPrimary} />
-          }
-          onClick={() =>
-            navigateTo(`/chart/add?dashboard_id=${dashboardId}`, {
-              newWindow: true,
-            })
-          }
-        >
-          {t('Create new chart')}
-        </NewChartButton>
-      </NewChartButtonContainer>
-      <Controls>
-        <Input
-          placeholder={
-            showOnlyMyCharts ? t('Filter your charts') : t('Filter charts')
-          }
-          className="search-input"
-          onChange={ev => handleChange(ev.target.value)}
-          data-test="dashboard-charts-filter-search-input"
-        />
-        <StyledSelect
-          id="slice-adder-sortby"
-          value={sortBy}
-          onChange={handleSelect}
-          options={Object.entries(KEYS_TO_SORT).map(([key, label]) => ({
-            label: t('Sort by %s', label),
-            value: key,
-          }))}
-          placeholder={t('Sort by')}
-        />
-      </Controls>
+  render() {
+    const { theme } = this.props;
+    return (
       <div
-        css={themeObj => css`
+        css={css`
+          height: 100%;
           display: flex;
-          flex-direction: row;
-          justify-content: flex-start;
-          align-items: center;
-          gap: ${themeObj.sizeUnit}px;
-          padding: 0 ${themeObj.sizeUnit * 3}px ${themeObj.sizeUnit * 4}px
-            ${themeObj.sizeUnit * 3}px;
+          flex-direction: column;
+          button > span > :first-of-type {
+            margin-right: 0;
+          }
         `}
       >
-        <Checkbox
-          onChange={e => onShowOnlyMyCharts(e.target.checked)}
-          checked={showOnlyMyCharts}
-        />
-        {t('Show only my charts')}
-        <InfoTooltip
-          placement="top"
-          tooltip={t(
-            `You can choose to display all charts that you have access to or only the ones you own.
-              Your filter selection will be saved and remain active until you choose to change it.`,
-          )}
-        />
-      </div>
-      {isLoading && <Loading />}
-      {!isLoading && filteredSlices.length > 0 && (
-        <ChartList>
-          <AutoSizer>
-            {({ height, width }: { height: number; width: number }) => (
-              <List
-                width={width}
-                height={height}
-                itemCount={filteredSlices.length}
-                itemSize={DEFAULT_CELL_HEIGHT}
-                itemKey={index => filteredSlices[index].slice_id}
-              >
-                {rowRenderer}
-              </List>
-            )}
-          </AutoSizer>
-        </ChartList>
-      )}
-      {errorMessage && (
+        <NewChartButtonContainer>
+          <NewChartButton
+            buttonStyle="link"
+            buttonSize="xsmall"
+            icon={
+              <Icons.PlusOutlined iconSize="m" iconColor={theme.colorPrimary} />
+            }
+            onClick={() =>
+              navigateTo(`/chart/add?dashboard_id=${this.props.dashboardId}`, {
+                newWindow: true,
+              })
+            }
+          >
+            {t('Create new chart')}
+          </NewChartButton>
+        </NewChartButtonContainer>
+        <Controls>
+          <Input
+            placeholder={
+              this.state.showOnlyMyCharts
+                ? t('Filter your charts')
+                : t('Filter charts')
+            }
+            className="search-input"
+            onChange={ev => this.handleChange(ev.target.value)}
+            data-test="dashboard-charts-filter-search-input"
+          />
+          <StyledSelect
+            id="slice-adder-sortby"
+            value={this.state.sortBy}
+            onChange={this.handleSelect}
+            options={Object.entries(KEYS_TO_SORT).map(([key, label]) => ({
+              label: t('Sort by %s', label),
+              value: key,
+            }))}
+            placeholder={t('Sort by')}
+          />
+        </Controls>
         <div
-          css={css`
-            padding: 16px;
+          css={theme => css`
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            gap: ${theme.sizeUnit}px;
+            padding: 0 ${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px
+              ${theme.sizeUnit * 3}px;
           `}
         >
-          {errorMessage}
+          <Checkbox
+            onChange={e => this.onShowOnlyMyCharts(e.target.checked)}
+            checked={this.state.showOnlyMyCharts}
+          />
+          {t('Show only my charts')}
+          <InfoTooltip
+            placement="top"
+            tooltip={t(
+              `You can choose to display all charts that you have access to or only the ones you own.
+              Your filter selection will be saved and remain active until you choose to change it.`,
+            )}
+          />
         </div>
-      )}
-      {/* Drag preview is just a single fixed-position element */}
-      <AddSliceDragPreview slices={filteredSlices} />
-    </div>
-  );
+        {this.props.isLoading && <Loading />}
+        {!this.props.isLoading && this.state.filteredSlices.length > 0 && (
+          <ChartList>
+            <AutoSizer>
+              {({ height, width }: { height: number; width: number }) => (
+                <List
+                  width={width}
+                  height={height}
+                  itemCount={this.state.filteredSlices.length}
+                  itemSize={DEFAULT_CELL_HEIGHT}
+                  itemKey={index => this.state.filteredSlices[index].slice_id}
+                >
+                  {this.rowRenderer}
+                </List>
+              )}
+            </AutoSizer>
+          </ChartList>
+        )}
+        {this.props.errorMessage && (
+          <div
+            css={css`
+              padding: 16px;
+            `}
+          >
+            {this.props.errorMessage}
+          </div>
+        )}
+        {/* Drag preview is just a single fixed-position element */}
+        <AddSliceDragPreview slices={this.state.filteredSlices} />
+      </div>
+    );
+  }
 }
 
-export default SliceAdder;
+export default withTheme(SliceAdder);

superset-frontend/src/dashboard/components/UndoRedoKeyListeners/UndoRedoKeyListeners.test.tsx

@@ -43,40 +43,6 @@ test('triggers onRedo', () => {
   expect(onRedo).toHaveBeenCalledTimes(1);
 });
 
-test('triggers onRedo with Ctrl+Shift+Z', () => {
-  const onUndo = jest.fn();
-  const onRedo = jest.fn();
-  render(<UndoRedoKeyListeners onUndo={onUndo} onRedo={onRedo} />);
-  fireEvent.keyDown(document.body, {
-    key: 'z',
-    keyCode: 90,
-    ctrlKey: true,
-    shiftKey: true,
-  });
-  expect(onRedo).toHaveBeenCalledTimes(1);
-  expect(onUndo).not.toHaveBeenCalled();
-});
-
-test('triggers onUndo via keyCode fallback for non-Latin layouts', () => {
-  const onUndo = jest.fn();
-  const onRedo = jest.fn();
-  render(<UndoRedoKeyListeners onUndo={onUndo} onRedo={onRedo} />);
-  // event.key is a non-'z' glyph (e.g. non-Latin layout), but code is KeyZ
-  fireEvent.keyDown(document.body, { key: 'я', code: 'KeyZ', ctrlKey: true });
-  expect(onUndo).toHaveBeenCalledTimes(1);
-  expect(onRedo).not.toHaveBeenCalled();
-});
-
-test('triggers onRedo via keyCode fallback for non-Latin layouts', () => {
-  const onUndo = jest.fn();
-  const onRedo = jest.fn();
-  render(<UndoRedoKeyListeners onUndo={onUndo} onRedo={onRedo} />);
-  // event.key is a non-'y' glyph, but code is KeyY
-  fireEvent.keyDown(document.body, { key: 'н', code: 'KeyY', ctrlKey: true });
-  expect(onRedo).toHaveBeenCalledTimes(1);
-  expect(onUndo).not.toHaveBeenCalled();
-});
-
 test('does not trigger when it is another key', () => {
   const onUndo = jest.fn();
   const onRedo = jest.fn();

superset-frontend/src/dashboard/components/UndoRedoKeyListeners/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect } from 'react';
+import { PureComponent } from 'react';
 import { HeaderProps } from '../Header/types';
 
 type UndoRedoKeyListenersProps = {
@@ -24,43 +24,43 @@ type UndoRedoKeyListenersProps = {
   onRedo: HeaderProps['onRedo'];
 };
 
-function UndoRedoKeyListeners({ onUndo, onRedo }: UndoRedoKeyListenersProps) {
-  const handleKeydown = useCallback(
-    (event: KeyboardEvent) => {
-      const controlOrCommand = event.ctrlKey || event.metaKey;
-      if (controlOrCommand) {
-        const key = event.key.toLowerCase();
-        // Fall back to event.code (the physical key) so undo/redo still work on
-        // non-Latin keyboard layouts where event.key is a different glyph.
-        const isZ = key === 'z' || event.code === 'KeyZ';
-        const isY = key === 'y' || event.code === 'KeyY';
-        const isUndo = isZ && !event.shiftKey;
-        const isRedo = isY || (isZ && event.shiftKey);
-        const isEditingMarkdown = document?.querySelector(
-          '.dashboard-markdown--editing',
-        );
-        const isEditingTitle = document?.querySelector(
-          '.editable-title--editing',
-        );
+class UndoRedoKeyListeners extends PureComponent<UndoRedoKeyListenersProps> {
+  constructor(props: UndoRedoKeyListenersProps) {
+    super(props);
+    this.handleKeydown = this.handleKeydown.bind(this);
+  }
 
-        if (!isEditingMarkdown && !isEditingTitle && (isUndo || isRedo)) {
-          event.preventDefault();
-          const func = isUndo ? onUndo : onRedo;
-          func();
-        }
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeydown);
+  }
+
+  handleKeydown(event: KeyboardEvent) {
+    const controlOrCommand = event.ctrlKey || event.metaKey;
+    if (controlOrCommand) {
+      const isZChar = event.key === 'z' || event.keyCode === 90;
+      const isYChar = event.key === 'y' || event.keyCode === 89;
+      const isEditingMarkdown = document?.querySelector(
+        '.dashboard-markdown--editing',
+      );
+      const isEditingTitle = document?.querySelector(
+        '.editable-title--editing',
+      );
+
+      if (!isEditingMarkdown && !isEditingTitle && (isZChar || isYChar)) {
+        event.preventDefault();
+        const func = isZChar ? this.props.onUndo : this.props.onRedo;
+        func();
       }
-    },
-    [onUndo, onRedo],
-  );
+    }
+  }
 
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeydown);
-    return () => {
-      document.removeEventListener('keydown', handleKeydown);
-    };
-  }, [handleKeydown]);
-
-  return null;
+  render() {
+    return null;
+  }
 }
 
 export default UndoRedoKeyListeners;

superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx

@@ -33,6 +33,7 @@ import {
 } from 'react-dnd';
 import cx from 'classnames';
 import { css, styled } from '@apache-superset/core/theme';
+
 import { dragConfig, dropConfig } from './dragDroppableConfig';
 import type { DragDroppableProps as BaseDragDroppableProps } from './dragDroppableConfig';
 import { DROP_FORBIDDEN } from '../../util/getDropPosition';
@@ -121,22 +122,15 @@ const DragDroppableStyles = styled.div`
     }
   `};
 `;
-
-/**
- * Note: This component remains a class component because it is tightly integrated
- * with react-dnd's class-based HOC system (DragSource/DropTarget). The HOCs
- * access component instance properties directly (mounted, ref, props, setState)
- * in the hover/drop callbacks defined in dragDroppableConfig.ts.
- *
- * Converting to a function component would require migrating to react-dnd's
- * hooks API (useDrag/useDrop), which would be a more extensive refactor.
- */
 // export unwrapped component for testing
-// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component -- react-dnd class-based HOC requires class component instance properties
 export class UnwrappedDragDroppable extends PureComponent<
   DragDroppableAllProps,
   DragDroppableState
 > {
+  mounted: boolean;
+
+  ref: HTMLDivElement | null;
+
   static defaultProps = {
     className: null,
     style: null,
@@ -158,10 +152,6 @@ export class UnwrappedDragDroppable extends PureComponent<
     dragPreviewRef() {},
   };
 
-  mounted: boolean;
-
-  ref: HTMLDivElement | null;
-
   constructor(props: DragDroppableAllProps) {
     super(props);
     this.state = {
@@ -293,6 +283,7 @@ export class UnwrappedDragDroppable extends PureComponent<
 
 // react-dnd's DragSource/DropTarget HOC types don't play well with
 // class components using spread config tuples, so we use type assertions here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const DragDroppableAsAny =
   UnwrappedDragDroppable as unknown as ReactComponentType<
     Record<string, unknown>

superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useRef, useCallback } from 'react';
+import { createRef, PureComponent } from 'react';
 import { styled } from '@apache-superset/core/theme';
 import {
   ModalTrigger,
@@ -33,29 +33,39 @@ const FilterScopeModalBody = styled.div(({ theme: { sizeUnit } }) => ({
   paddingBottom: sizeUnit * 3,
 }));
 
-export default function FilterScopeModal({
-  triggerNode,
-}: FilterScopeModalProps) {
-  const modalRef = useRef<ModalTriggerRef['current']>(null);
+export default class FilterScopeModal extends PureComponent<
+  FilterScopeModalProps,
+  {}
+> {
+  modal: ModalTriggerRef;
 
-  const handleCloseModal = useCallback((): void => {
-    modalRef.current?.close?.();
-  }, []);
+  constructor(props: FilterScopeModalProps) {
+    super(props);
 
-  const filterScopeProps = {
-    onCloseModal: handleCloseModal,
-  };
+    this.modal = createRef() as ModalTriggerRef;
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
 
-  return (
-    <ModalTrigger
-      ref={modalRef}
-      triggerNode={triggerNode}
-      modalBody={
-        <FilterScopeModalBody>
-          <FilterScope {...filterScopeProps} />
-        </FilterScopeModalBody>
-      }
-      width="80%"
-    />
-  );
+  handleCloseModal(): void {
+    this?.modal?.current?.close?.();
+  }
+
+  render() {
+    const filterScopeProps = {
+      onCloseModal: this.handleCloseModal,
+    };
+
+    return (
+      <ModalTrigger
+        ref={this.modal}
+        triggerNode={this.props.triggerNode}
+        modalBody={
+          <FilterScopeModalBody>
+            <FilterScope {...filterScopeProps} />
+          </FilterScopeModalBody>
+        }
+        width="80%"
+      />
+    );
+  }
 }

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.test.tsx

@@ -1,265 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-  cleanup,
-  render,
-  screen,
-  userEvent,
-} from 'spec/helpers/testing-library';
-import FilterScopeSelector from './FilterScopeSelector';
-import type { DashboardLayout } from 'src/dashboard/types';
-
-// --- Mock child components ---
-
-jest.mock('./FilterFieldTree', () => ({
-  __esModule: true,
-  default: (props: Record<string, unknown>) => (
-    <div data-test="filter-field-tree">
-      FilterFieldTree (checked={String(props.checked)})
-    </div>
-  ),
-}));
-
-jest.mock('./FilterScopeTree', () => ({
-  __esModule: true,
-  default: (props: Record<string, unknown>) => (
-    <div data-test="filter-scope-tree">
-      FilterScopeTree (checked={String(props.checked)})
-    </div>
-  ),
-}));
-
-// --- Mock utility functions ---
-
-jest.mock('src/dashboard/util/getFilterFieldNodesTree', () => ({
-  __esModule: true,
-  default: jest.fn(() => [
-    {
-      value: 'ALL_FILTERS_ROOT',
-      label: 'All filters',
-      children: [
-        {
-          value: 1,
-          label: 'Filter A',
-          children: [
-            { value: '1_column_b', label: 'Filter B' },
-            { value: '1_column_c', label: 'Filter C' },
-          ],
-        },
-      ],
-    },
-  ]),
-}));
-
-jest.mock('src/dashboard/util/getFilterScopeNodesTree', () => ({
-  __esModule: true,
-  default: jest.fn(() => [
-    {
-      value: 'ROOT_ID',
-      label: 'All charts',
-      children: [{ value: 2, label: 'Chart A' }],
-    },
-  ]),
-}));
-
-jest.mock('src/dashboard/util/getFilterScopeParentNodes', () => ({
-  __esModule: true,
-  default: jest.fn(() => ['ROOT_ID']),
-}));
-
-jest.mock('src/dashboard/util/buildFilterScopeTreeEntry', () => ({
-  __esModule: true,
-  default: jest.fn(() => ({})),
-}));
-
-jest.mock('src/dashboard/util/getKeyForFilterScopeTree', () => ({
-  __esModule: true,
-  default: jest.fn(() => '1_column_b'),
-}));
-
-jest.mock('src/dashboard/util/getSelectedChartIdForFilterScopeTree', () => ({
-  __esModule: true,
-  default: jest.fn(() => 1),
-}));
-
-jest.mock('src/dashboard/util/getFilterScopeFromNodesTree', () => ({
-  __esModule: true,
-  default: jest.fn(() => ({ scope: ['ROOT_ID'], immune: [] })),
-}));
-
-jest.mock('src/dashboard/util/getRevertedFilterScope', () => ({
-  __esModule: true,
-  default: jest.fn(() => ({})),
-}));
-
-jest.mock('src/dashboard/util/activeDashboardFilters', () => ({
-  getChartIdsInFilterScope: jest.fn(() => [2, 3]),
-}));
-
-afterEach(() => {
-  cleanup();
-  jest.clearAllMocks();
-});
-
-const mockDashboardFilters = {
-  1: {
-    chartId: 1,
-    componentId: 'component-1',
-    filterName: 'Filter A',
-    datasourceId: 'ds-1',
-    directPathToFilter: ['ROOT_ID', 'GRID', 'CHART_1'],
-    isDateFilter: false,
-    isInstantFilter: false,
-    columns: { column_b: undefined, column_c: undefined },
-    labels: { column_b: 'Filter B', column_c: 'Filter C' },
-    scopes: {
-      column_b: { immune: [], scope: ['ROOT_ID'] },
-      column_c: { immune: [], scope: ['ROOT_ID'] },
-    },
-  },
-};
-
-const mockLayout: DashboardLayout = {
-  ROOT_ID: { children: ['GRID'], id: 'ROOT_ID', type: 'ROOT' },
-  GRID: {
-    children: ['CHART_1', 'CHART_2'],
-    id: 'GRID',
-    type: 'GRID',
-    parents: ['ROOT_ID'],
-  },
-  CHART_1: {
-    meta: { chartId: 1, sliceName: 'Chart 1' },
-    children: [],
-    id: 'CHART_1',
-    type: 'CHART',
-    parents: ['ROOT_ID', 'GRID'],
-  },
-  CHART_2: {
-    meta: { chartId: 2, sliceName: 'Chart 2' },
-    children: [],
-    id: 'CHART_2',
-    type: 'CHART',
-    parents: ['ROOT_ID', 'GRID'],
-  },
-} as unknown as DashboardLayout;
-
-const defaultProps = {
-  dashboardFilters: mockDashboardFilters,
-  layout: mockLayout,
-  updateDashboardFiltersScope: jest.fn(),
-  setUnsavedChanges: jest.fn(),
-  onCloseModal: jest.fn(),
-};
-
-test('renders the header, filter field panel, and scope panel', () => {
-  render(<FilterScopeSelector {...defaultProps} />, { useRedux: true });
-
-  expect(screen.getByText('Configure filter scopes')).toBeInTheDocument();
-  expect(screen.getByTestId('filter-field-tree')).toBeInTheDocument();
-  expect(screen.getByTestId('filter-scope-tree')).toBeInTheDocument();
-});
-
-test('renders the search input with correct placeholder', () => {
-  render(<FilterScopeSelector {...defaultProps} />, { useRedux: true });
-
-  const searchInput = screen.getByPlaceholderText('Search...');
-  expect(searchInput).toBeInTheDocument();
-  expect(searchInput).toHaveAttribute('type', 'text');
-});
-
-test('renders Close and Save buttons when filters exist', () => {
-  render(<FilterScopeSelector {...defaultProps} />, { useRedux: true });
-
-  expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
-});
-
-test('renders only Close button and a warning when no filters exist', () => {
-  render(<FilterScopeSelector {...defaultProps} dashboardFilters={{}} />, {
-    useRedux: true,
-  });
-
-  expect(
-    screen.getByText('There are no filters in this dashboard.'),
-  ).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  expect(
-    screen.queryByRole('button', { name: 'Save' }),
-  ).not.toBeInTheDocument();
-});
-
-test('does not render FilterFieldTree or FilterScopeTree when no filters exist', () => {
-  render(<FilterScopeSelector {...defaultProps} dashboardFilters={{}} />, {
-    useRedux: true,
-  });
-
-  expect(screen.queryByTestId('filter-field-tree')).not.toBeInTheDocument();
-  expect(screen.queryByTestId('filter-scope-tree')).not.toBeInTheDocument();
-});
-
-test('calls onCloseModal when Close button is clicked', () => {
-  const onCloseModal = jest.fn();
-  render(
-    <FilterScopeSelector {...defaultProps} onCloseModal={onCloseModal} />,
-    { useRedux: true },
-  );
-
-  userEvent.click(screen.getByRole('button', { name: 'Close' }));
-
-  expect(onCloseModal).toHaveBeenCalledTimes(1);
-});
-
-test('calls updateDashboardFiltersScope, setUnsavedChanges, and onCloseModal when Save is clicked', () => {
-  const updateDashboardFiltersScope = jest.fn();
-  const setUnsavedChanges = jest.fn();
-  const onCloseModal = jest.fn();
-
-  render(
-    <FilterScopeSelector
-      {...defaultProps}
-      updateDashboardFiltersScope={updateDashboardFiltersScope}
-      setUnsavedChanges={setUnsavedChanges}
-      onCloseModal={onCloseModal}
-    />,
-    { useRedux: true },
-  );
-
-  userEvent.click(screen.getByRole('button', { name: 'Save' }));
-
-  expect(updateDashboardFiltersScope).toHaveBeenCalledTimes(1);
-  expect(setUnsavedChanges).toHaveBeenCalledWith(true);
-  expect(onCloseModal).toHaveBeenCalledTimes(1);
-});
-
-test('renders the editing filters name section with "Editing 1 filter:" label', () => {
-  render(<FilterScopeSelector {...defaultProps} />, { useRedux: true });
-
-  expect(screen.getByText('Editing 1 filter:')).toBeInTheDocument();
-  // The active filter label should appear (column_b maps to "Filter B")
-  expect(screen.getByText('Filter B')).toBeInTheDocument();
-});
-
-test('updates search text when typing in the search input', () => {
-  render(<FilterScopeSelector {...defaultProps} />, { useRedux: true });
-
-  const searchInput = screen.getByPlaceholderText('Search...');
-  userEvent.type(searchInput, 'Chart');
-
-  expect(searchInput).toHaveValue('Chart');
-});

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx

@@ -16,17 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  useState,
-  useCallback,
-  useMemo,
-  ChangeEvent,
-  type ReactElement,
-} from 'react';
+import { PureComponent, ChangeEvent, type ReactElement } from 'react';
 import cx from 'classnames';
 import { Button, Input } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core/translation';
 import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
+
 import buildFilterScopeTreeEntry from 'src/dashboard/util/buildFilterScopeTreeEntry';
 import getFilterScopeNodesTree from 'src/dashboard/util/getFilterScopeNodesTree';
 import getFilterFieldNodesTree from 'src/dashboard/util/getFilterFieldNodesTree';
@@ -95,6 +90,30 @@ export interface FilterScopeSelectorProps {
   onCloseModal: () => void;
 }
 
+interface FilterScopeSelectorStateWithSelector {
+  showSelector: true;
+  activeFilterField: string | null;
+  searchText: string;
+  filterScopeMap: FilterScopeMap;
+  filterFieldNodes: FilterFieldNode[];
+  checkedFilterFields: string[];
+  expandedFilterIds: (string | number)[];
+}
+
+interface FilterScopeSelectorStateWithoutSelector {
+  showSelector: false;
+  activeFilterField?: undefined;
+  searchText?: undefined;
+  filterScopeMap?: undefined;
+  filterFieldNodes?: undefined;
+  checkedFilterFields?: undefined;
+  expandedFilterIds?: undefined;
+}
+
+type FilterScopeSelectorState =
+  | FilterScopeSelectorStateWithSelector
+  | FilterScopeSelectorStateWithoutSelector;
+
 const ScopeContainer = styled.div`
   ${({ theme }) => css`
     display: flex;
@@ -370,358 +389,271 @@ const ActionsContainer = styled.div`
   `}
 `;
 
-function initializeState(
-  dashboardFilters: Record<number, DashboardFilter>,
-  layout: DashboardLayout,
-) {
-  if (Object.keys(dashboardFilters).length === 0) {
-    return {
-      showSelector: false as const,
-      allFilterFields: [] as string[],
-      defaultFilterKey: '',
-    };
-  }
+export default class FilterScopeSelector extends PureComponent<
+  FilterScopeSelectorProps,
+  FilterScopeSelectorState
+> {
+  allfilterFields: string[];
 
-  // display filter fields in tree structure
-  const filterFieldNodes = getFilterFieldNodesTree({
-    dashboardFilters,
-  });
-  // filterFieldNodes root node is dashboard_root component,
-  // so that we can offer a select/deselect all link
-  const filtersNodes = filterFieldNodes[0].children ?? [];
-  const allFilterFields: string[] = [];
-  filtersNodes.forEach(({ children }) => {
-    (children ?? []).forEach(child => {
-      allFilterFields.push(String(child.value));
-    });
-  });
-  const defaultFilterKey = String(filtersNodes[0]?.children?.[0]?.value ?? '');
+  defaultFilterKey: string;
 
-  // build FilterScopeTree object for each filterKey
-  const filterScopeMap: FilterScopeMap = Object.values(
-    dashboardFilters,
-  ).reduce<FilterScopeMap>((map, { chartId: filterId, columns }) => {
-    const filterScopeByChartId = Object.keys(columns).reduce<FilterScopeMap>(
-      (mapByChartId, columnName) => {
-        const filterKey = getDashboardFilterKey({
-          chartId: String(filterId),
-          column: columnName,
+  constructor(props: FilterScopeSelectorProps) {
+    super(props);
+
+    this.allfilterFields = [];
+    this.defaultFilterKey = '';
+
+    const { dashboardFilters, layout } = props;
+
+    if (Object.keys(dashboardFilters).length > 0) {
+      // display filter fields in tree structure
+      const filterFieldNodes = getFilterFieldNodesTree({
+        dashboardFilters,
+      });
+      // filterFieldNodes root node is dashboard_root component,
+      // so that we can offer a select/deselect all link
+      const filtersNodes = filterFieldNodes[0].children ?? [];
+      this.allfilterFields = [];
+      filtersNodes.forEach(({ children }) => {
+        (children ?? []).forEach(child => {
+          this.allfilterFields.push(String(child.value));
         });
-        const nodes = getFilterScopeNodesTree({
-          components: layout,
-          filterFields: [filterKey],
-          selectedChartId: filterId,
-        });
-        const expanded = getFilterScopeParentNodes(nodes, 1);
-        const chartIdsInFilterScope = (
-          getChartIdsInFilterScope({
-            filterScope: dashboardFilters[filterId].scopes[columnName],
-          }) || []
-        ).filter((id: number) => id !== filterId);
-
-        return {
-          ...mapByChartId,
-          [filterKey]: {
-            // unfiltered nodes
-            nodes,
-            // filtered nodes in display if searchText is not empty
-            nodesFiltered: [...nodes],
-            checked: chartIdsInFilterScope,
-            expanded,
-          },
-        };
-      },
-      {},
-    );
-
-    return {
-      ...map,
-      ...filterScopeByChartId,
-    };
-  }, {});
-
-  // initial state: active defaultFilerKey
-  const { chartId } = getChartIdAndColumnFromFilterKey(defaultFilterKey);
-  const checkedFilterFields: string[] = [];
-  const activeFilterField = defaultFilterKey;
-  // expand defaultFilterKey in filter field tree
-  const expandedFilterIds: (string | number)[] = [ALL_FILTERS_ROOT, chartId];
-
-  const filterScopeTreeEntry = buildFilterScopeTreeEntry({
-    checkedFilterFields,
-    activeFilterField,
-    filterScopeMap,
-    layout,
-  });
-
-  return {
-    showSelector: true as const,
-    allFilterFields,
-    defaultFilterKey,
-    initialState: {
-      activeFilterField,
-      searchText: '',
-      filterScopeMap: {
-        ...filterScopeMap,
-        ...filterScopeTreeEntry,
-      } as FilterScopeMap,
-      filterFieldNodes,
-      checkedFilterFields,
-      expandedFilterIds,
-    },
-  };
-}
-
-export default function FilterScopeSelector({
-  dashboardFilters,
-  layout,
-  updateDashboardFiltersScope,
-  setUnsavedChanges,
-  onCloseModal,
-}: FilterScopeSelectorProps): ReactElement {
-  const initialized = useMemo(
-    () => initializeState(dashboardFilters, layout),
-    // Only initialize once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  const { showSelector, allFilterFields } = initialized;
-
-  const [activeFilterField, setActiveFilterField] = useState<string | null>(
-    () =>
-      initialized.showSelector
-        ? initialized.initialState.activeFilterField
-        : null,
-  );
-  const [searchText, setSearchText] = useState(() =>
-    initialized.showSelector ? initialized.initialState.searchText : '',
-  );
-  const [filterScopeMap, setFilterScopeMap] = useState<FilterScopeMap>(() =>
-    initialized.showSelector ? initialized.initialState.filterScopeMap : {},
-  );
-  const [filterFieldNodes] = useState<FilterFieldNode[]>(() =>
-    initialized.showSelector ? initialized.initialState.filterFieldNodes : [],
-  );
-  const [checkedFilterFields, setCheckedFilterFields] = useState<string[]>(
-    () =>
-      initialized.showSelector
-        ? initialized.initialState.checkedFilterFields
-        : [],
-  );
-  const [expandedFilterIds, setExpandedFilterIds] = useState<
-    (string | number)[]
-  >(() =>
-    initialized.showSelector ? initialized.initialState.expandedFilterIds : [],
-  );
-
-  const filterNodes = useCallback(
-    (
-      filtered: FilterScopeTreeNode[] = [],
-      node: FilterScopeTreeNode = { value: '', label: '' },
-      currentSearchText: string,
-    ): FilterScopeTreeNode[] => {
-      const filterNodesRecursive = (
-        f: FilterScopeTreeNode[],
-        n: FilterScopeTreeNode,
-      ): FilterScopeTreeNode[] => filterNodes(f, n, currentSearchText);
-
-      const children = (node.children || []).reduce<FilterScopeTreeNode[]>(
-        filterNodesRecursive,
-        [],
+      });
+      this.defaultFilterKey = String(
+        filtersNodes[0]?.children?.[0]?.value ?? '',
       );
 
-      if (
-        // Node's label matches the search string
-        node.label
-          .toLocaleLowerCase()
-          .indexOf((currentSearchText ?? '').toLocaleLowerCase()) > -1 ||
-        // Or a children has a matching node
-        children.length
-      ) {
-        filtered.push({ ...node, children });
-      }
-
-      return filtered;
-    },
-    [],
-  );
-
-  const filterTree = useCallback(
-    (currentSearchText: string) => {
-      const key = getKeyForFilterScopeTree({
-        activeFilterField: activeFilterField ?? undefined,
-        checkedFilterFields,
-      });
-
-      // Reset nodes back to unfiltered state
-      if (!currentSearchText) {
-        setFilterScopeMap(prev => ({
-          ...prev,
-          [key]: {
-            ...prev[key],
-            nodesFiltered: prev[key].nodes,
-          },
-        }));
-      } else {
-        setFilterScopeMap(prev => {
-          const nodesFiltered = prev[key].nodes.reduce<FilterScopeTreeNode[]>(
-            (filtered, node) => filterNodes(filtered, node, currentSearchText),
-            [],
-          );
-          const expanded = getFilterScopeParentNodes([...nodesFiltered]);
+      // build FilterScopeTree object for each filterKey
+      const filterScopeMap: FilterScopeMap = Object.values(
+        dashboardFilters,
+      ).reduce<FilterScopeMap>((map, { chartId: filterId, columns }) => {
+        const filterScopeByChartId = Object.keys(
+          columns,
+        ).reduce<FilterScopeMap>((mapByChartId, columnName) => {
+          const filterKey = getDashboardFilterKey({
+            chartId: String(filterId),
+            column: columnName,
+          });
+          const nodes = getFilterScopeNodesTree({
+            components: layout,
+            filterFields: [filterKey],
+            selectedChartId: filterId,
+          });
+          const expanded = getFilterScopeParentNodes(nodes, 1);
+          const chartIdsInFilterScope = (
+            getChartIdsInFilterScope({
+              filterScope: dashboardFilters[filterId].scopes[columnName],
+            }) || []
+          ).filter((id: number) => id !== filterId);
 
           return {
-            ...prev,
-            [key]: {
-              ...prev[key],
-              nodesFiltered,
+            ...mapByChartId,
+            [filterKey]: {
+              // unfiltered nodes
+              nodes,
+              // filtered nodes in display if searchText is not empty
+              nodesFiltered: [...nodes],
+              checked: chartIdsInFilterScope,
               expanded,
             },
           };
-        });
-      }
-    },
-    [activeFilterField, checkedFilterFields, filterNodes],
-  );
+        }, {});
 
-  const onCheckFilterScope = useCallback(
-    (checked: (string | number)[] = []): void => {
-      const key = getKeyForFilterScopeTree({
-        activeFilterField: activeFilterField ?? undefined,
+        return {
+          ...map,
+          ...filterScopeByChartId,
+        };
+      }, {});
+
+      // initial state: active defaultFilerKey
+      const { chartId } = getChartIdAndColumnFromFilterKey(
+        this.defaultFilterKey,
+      );
+      const checkedFilterFields: string[] = [];
+      const activeFilterField = this.defaultFilterKey;
+      // expand defaultFilterKey in filter field tree
+      const expandedFilterIds: (string | number)[] = [
+        ALL_FILTERS_ROOT,
+        chartId,
+      ];
+
+      const filterScopeTreeEntry = buildFilterScopeTreeEntry({
         checkedFilterFields,
-      });
-      const editingList = activeFilterField
-        ? [activeFilterField]
-        : checkedFilterFields;
-
-      const updatedFilterScopeMap = getRevertedFilterScope({
-        checked,
-        filterFields: editingList,
+        activeFilterField,
         filterScopeMap,
+        layout,
       });
+      this.state = {
+        showSelector: true,
+        activeFilterField,
+        searchText: '',
+        filterScopeMap: {
+          ...filterScopeMap,
+          ...filterScopeTreeEntry,
+        } as FilterScopeMap,
+        filterFieldNodes,
+        checkedFilterFields,
+        expandedFilterIds,
+      };
+    } else {
+      this.state = {
+        showSelector: false,
+      };
+    }
 
-      setFilterScopeMap({
+    this.filterNodes = this.filterNodes.bind(this);
+    this.onChangeFilterField = this.onChangeFilterField.bind(this);
+    this.onCheckFilterScope = this.onCheckFilterScope.bind(this);
+    this.onExpandFilterScope = this.onExpandFilterScope.bind(this);
+    this.onSearchInputChange = this.onSearchInputChange.bind(this);
+    this.onCheckFilterField = this.onCheckFilterField.bind(this);
+    this.onExpandFilterField = this.onExpandFilterField.bind(this);
+    this.onClose = this.onClose.bind(this);
+    this.onSave = this.onSave.bind(this);
+  }
+
+  onCheckFilterScope(checked: (string | number)[] = []): void {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { activeFilterField, filterScopeMap, checkedFilterFields } = state;
+
+    const key = getKeyForFilterScopeTree({
+      activeFilterField: activeFilterField ?? undefined,
+      checkedFilterFields,
+    });
+    const editingList = activeFilterField
+      ? [activeFilterField]
+      : checkedFilterFields;
+    const updatedEntry = {
+      ...filterScopeMap[key],
+      checked,
+    };
+
+    const updatedFilterScopeMap = getRevertedFilterScope({
+      checked,
+      filterFields: editingList,
+      filterScopeMap,
+    });
+
+    this.setState(() => ({
+      filterScopeMap: {
         ...filterScopeMap,
         ...updatedFilterScopeMap,
-        [key]: {
-          ...filterScopeMap[key],
-          checked,
-        },
-      } as FilterScopeMap);
-    },
-    [activeFilterField, checkedFilterFields, filterScopeMap],
-  );
+        [key]: updatedEntry,
+      } as FilterScopeMap,
+    }));
+  }
 
-  const onExpandFilterScope = useCallback(
-    (expanded: string[] = []): void => {
-      const key = getKeyForFilterScopeTree({
-        activeFilterField: activeFilterField ?? undefined,
-        checkedFilterFields,
-      });
+  onExpandFilterScope(expanded: string[] = []): void {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { activeFilterField, checkedFilterFields, filterScopeMap } = state;
+    const key = getKeyForFilterScopeTree({
+      activeFilterField: activeFilterField ?? undefined,
+      checkedFilterFields,
+    });
+    const updatedEntry = {
+      ...filterScopeMap[key],
+      expanded,
+    };
+    this.setState(() => ({
+      filterScopeMap: {
+        ...filterScopeMap,
+        [key]: updatedEntry,
+      },
+    }));
+  }
 
-      setFilterScopeMap(prev => ({
-        ...prev,
-        [key]: {
-          ...prev[key],
-          expanded,
-        },
-      }));
-    },
-    [activeFilterField, checkedFilterFields],
-  );
+  onCheckFilterField(checkedFilterFields: string[] = []): void {
+    const { layout } = this.props;
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { filterScopeMap } = state;
+    const filterScopeTreeEntry = buildFilterScopeTreeEntry({
+      checkedFilterFields,
+      activeFilterField: undefined,
+      filterScopeMap,
+      layout,
+    });
 
-  const onCheckFilterField = useCallback(
-    (newCheckedFilterFields: string[] = []): void => {
+    this.setState(() => ({
+      activeFilterField: null,
+      checkedFilterFields,
+      filterScopeMap: {
+        ...filterScopeMap,
+        ...filterScopeTreeEntry,
+      },
+    }));
+  }
+
+  onExpandFilterField(expandedFilterIds: (string | number)[] = []): void {
+    this.setState(() => ({
+      expandedFilterIds,
+    }));
+  }
+
+  onChangeFilterField(filterField: { value?: string } = {}): void {
+    const { layout } = this.props;
+    const nextActiveFilterField = filterField.value;
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const {
+      activeFilterField: currentActiveFilterField,
+      checkedFilterFields,
+      filterScopeMap,
+    } = state;
+
+    // we allow single edit and multiple edit in the same view.
+    // if user click on the single filter field,
+    // will show filter scope for the single field.
+    // if user click on the same filter filed again,
+    // will toggle off the single filter field,
+    // and allow multi-edit all checked filter fields.
+    if (nextActiveFilterField === currentActiveFilterField) {
       const filterScopeTreeEntry = buildFilterScopeTreeEntry({
-        checkedFilterFields: newCheckedFilterFields,
+        checkedFilterFields,
         activeFilterField: undefined,
         filterScopeMap,
         layout,
       });
 
-      setActiveFilterField(null);
-      setCheckedFilterFields(newCheckedFilterFields);
-      setFilterScopeMap({
-        ...filterScopeMap,
-        ...filterScopeTreeEntry,
+      this.setState({
+        activeFilterField: null,
+        filterScopeMap: {
+          ...filterScopeMap,
+          ...filterScopeTreeEntry,
+        } as FilterScopeMap,
+      });
+    } else if (
+      nextActiveFilterField &&
+      this.allfilterFields.includes(nextActiveFilterField)
+    ) {
+      const filterScopeTreeEntry = buildFilterScopeTreeEntry({
+        checkedFilterFields,
+        activeFilterField: nextActiveFilterField,
+        filterScopeMap,
+        layout,
       });
-    },
-    [filterScopeMap, layout],
-  );
 
-  const onExpandFilterField = useCallback(
-    (newExpandedFilterIds: (string | number)[] = []): void => {
-      setExpandedFilterIds(newExpandedFilterIds);
-    },
-    [],
-  );
-
-  const onChangeFilterField = useCallback(
-    (filterField: { value?: string } = {}): void => {
-      const nextActiveFilterField = filterField.value;
-
-      // we allow single edit and multiple edit in the same view.
-      // if user click on the single filter field,
-      // will show filter scope for the single field.
-      // if user click on the same filter filed again,
-      // will toggle off the single filter field,
-      // and allow multi-edit all checked filter fields.
-      if (nextActiveFilterField === activeFilterField) {
-        const filterScopeTreeEntry = buildFilterScopeTreeEntry({
-          checkedFilterFields,
-          activeFilterField: undefined,
-          filterScopeMap,
-          layout,
-        });
-
-        setActiveFilterField(null);
-        setFilterScopeMap({
+      this.setState({
+        activeFilterField: nextActiveFilterField,
+        filterScopeMap: {
           ...filterScopeMap,
           ...filterScopeTreeEntry,
-        });
-      } else if (
-        nextActiveFilterField &&
-        allFilterFields.includes(nextActiveFilterField)
-      ) {
-        const filterScopeTreeEntry = buildFilterScopeTreeEntry({
-          checkedFilterFields,
-          activeFilterField: nextActiveFilterField,
-          filterScopeMap,
-          layout,
-        });
+        } as FilterScopeMap,
+      });
+    }
+  }
 
-        setActiveFilterField(nextActiveFilterField);
-        setFilterScopeMap({
-          ...filterScopeMap,
-          ...filterScopeTreeEntry,
-        });
-      }
-    },
-    [
-      activeFilterField,
-      allFilterFields,
-      checkedFilterFields,
-      filterScopeMap,
-      layout,
-    ],
-  );
+  onSearchInputChange(e: ChangeEvent<HTMLInputElement>): void {
+    this.setState({ searchText: e.target.value }, this.filterTree);
+  }
 
-  const onSearchInputChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>): void => {
-      const newSearchText = e.target.value;
-      setSearchText(newSearchText);
-      filterTree(newSearchText);
-    },
-    [filterTree],
-  );
+  onClose(): void {
+    this.props.onCloseModal();
+  }
 
-  const onClose = useCallback((): void => {
-    onCloseModal();
-  }, [onCloseModal]);
+  onSave(): void {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { filterScopeMap } = state;
 
-  const onSave = useCallback((): void => {
-    const allFilterFieldScopes = allFilterFields.reduce<
+    const allFilterFieldScopes = this.allfilterFields.reduce<
       Record<string, ReturnType<typeof getFilterScopeFromNodesTree>>
     >((map, filterKey) => {
       const { nodes } = filterScopeMap[filterKey];
@@ -737,32 +669,124 @@ export default function FilterScopeSelector({
       };
     }, {});
 
-    updateDashboardFiltersScope(allFilterFieldScopes);
-    setUnsavedChanges(true);
+    this.props.updateDashboardFiltersScope(allFilterFieldScopes);
+    this.props.setUnsavedChanges(true);
 
     // click Save button will do save and close modal
-    onCloseModal();
-  }, [
-    allFilterFields,
-    filterScopeMap,
-    onCloseModal,
-    setUnsavedChanges,
-    updateDashboardFiltersScope,
-  ]);
+    this.props.onCloseModal();
+  }
 
-  const renderFilterFieldList = (): ReactElement | null => (
-    <FilterFieldTree
-      activeKey={activeFilterField}
-      nodes={filterFieldNodes}
-      checked={checkedFilterFields}
-      expanded={expandedFilterIds}
-      onClick={onChangeFilterField}
-      onCheck={onCheckFilterField}
-      onExpand={onExpandFilterField}
-    />
-  );
+  filterTree(): void {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    // Reset nodes back to unfiltered state
+    if (!state.searchText) {
+      this.setState(prevState => {
+        const prev = prevState as FilterScopeSelectorStateWithSelector;
+        const { activeFilterField, checkedFilterFields, filterScopeMap } = prev;
+        const key = getKeyForFilterScopeTree({
+          activeFilterField: activeFilterField ?? undefined,
+          checkedFilterFields,
+        });
+
+        const updatedEntry = {
+          ...filterScopeMap[key],
+          nodesFiltered: filterScopeMap[key].nodes,
+        };
+        return {
+          filterScopeMap: {
+            ...filterScopeMap,
+            [key]: updatedEntry,
+          },
+        } as Partial<FilterScopeSelectorStateWithSelector> as FilterScopeSelectorState;
+      });
+    } else {
+      const updater = (
+        prevState: FilterScopeSelectorState,
+      ): FilterScopeSelectorState => {
+        const prev = prevState as FilterScopeSelectorStateWithSelector;
+        const { activeFilterField, checkedFilterFields, filterScopeMap } = prev;
+        const key = getKeyForFilterScopeTree({
+          activeFilterField: activeFilterField ?? undefined,
+          checkedFilterFields,
+        });
+
+        const nodesFiltered = filterScopeMap[key].nodes.reduce<
+          FilterScopeTreeNode[]
+        >(this.filterNodes, []);
+        const expanded = getFilterScopeParentNodes([...nodesFiltered]);
+        const updatedEntry = {
+          ...filterScopeMap[key],
+          nodesFiltered,
+          expanded,
+        };
+
+        return {
+          filterScopeMap: {
+            ...filterScopeMap,
+            [key]: updatedEntry,
+          },
+        } as Partial<FilterScopeSelectorStateWithSelector> as FilterScopeSelectorState;
+      };
+
+      this.setState(updater);
+    }
+  }
+
+  filterNodes(
+    filtered: FilterScopeTreeNode[] = [],
+    node: FilterScopeTreeNode = { value: '', label: '' },
+  ): FilterScopeTreeNode[] {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { searchText } = state;
+    const children = (node.children || []).reduce<FilterScopeTreeNode[]>(
+      this.filterNodes,
+      [],
+    );
+
+    if (
+      // Node's label matches the search string
+      node.label
+        .toLocaleLowerCase()
+        .indexOf((searchText ?? '').toLocaleLowerCase()) > -1 ||
+      // Or a children has a matching node
+      children.length
+    ) {
+      filtered.push({ ...node, children });
+    }
+
+    return filtered;
+  }
+
+  renderFilterFieldList(): ReactElement | null {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const {
+      activeFilterField,
+      filterFieldNodes,
+      checkedFilterFields,
+      expandedFilterIds,
+    } = state;
+    return (
+      <FilterFieldTree
+        activeKey={activeFilterField}
+        nodes={filterFieldNodes}
+        checked={checkedFilterFields}
+        expanded={expandedFilterIds}
+        onClick={this.onChangeFilterField}
+        onCheck={this.onCheckFilterField}
+        onExpand={this.onExpandFilterField}
+      />
+    );
+  }
+
+  renderFilterScopeTree(): ReactElement {
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const {
+      filterScopeMap,
+      activeFilterField,
+      checkedFilterFields,
+      searchText,
+    } = state;
 
-  const renderFilterScopeTree = (): ReactElement => {
     const key = getKeyForFilterScopeTree({
       activeFilterField: activeFilterField ?? undefined,
       checkedFilterFields,
@@ -779,23 +803,26 @@ export default function FilterScopeSelector({
           placeholder={t('Search...')}
           type="text"
           value={searchText}
-          onChange={onSearchInputChange}
+          onChange={this.onSearchInputChange}
         />
         <FilterScopeTree
           nodes={filterScopeMap[key].nodesFiltered}
           checked={filterScopeMap[key].checked}
           expanded={filterScopeMap[key].expanded}
-          onCheck={onCheckFilterScope}
-          onExpand={onExpandFilterScope}
+          onCheck={this.onCheckFilterScope}
+          onExpand={this.onExpandFilterScope}
           // pass selectedFilterId prop to FilterScopeTree component,
           // to hide checkbox for selected filter field itself
           selectedChartId={selectedChartId}
         />
       </>
     );
-  };
+  }
 
-  const renderEditingFiltersName = (): ReactElement => {
+  renderEditingFiltersName(): ReactElement {
+    const { dashboardFilters } = this.props;
+    const state = this.state as FilterScopeSelectorStateWithSelector;
+    const { activeFilterField, checkedFilterFields } = state;
     const currentFilterLabels = ([] as string[])
       .concat(activeFilterField || checkedFilterFields)
       .filter(Boolean)
@@ -815,42 +842,50 @@ export default function FilterScopeSelector({
         </span>
       </div>
     );
-  };
+  }
 
-  return (
-    <ScopeContainer>
-      <ScopeHeader>
-        <h4>{t('Configure filter scopes')}</h4>
-        {showSelector && renderEditingFiltersName()}
-      </ScopeHeader>
+  render(): ReactElement {
+    const { showSelector } = this.state;
 
-      <ScopeBody className="filter-scope-body">
-        {!showSelector ? (
-          <div className="warning-message">
-            {t('There are no filters in this dashboard.')}
-          </div>
-        ) : (
-          <ScopeSelector className="filters-scope-selector">
-            <div className={cx('filter-field-pane multi-edit-mode')}>
-              {renderFilterFieldList()}
+    return (
+      <ScopeContainer>
+        <ScopeHeader>
+          <h4>{t('Configure filter scopes')}</h4>
+          {showSelector && this.renderEditingFiltersName()}
+        </ScopeHeader>
+
+        <ScopeBody className="filter-scope-body">
+          {!showSelector ? (
+            <div className="warning-message">
+              {t('There are no filters in this dashboard.')}
             </div>
-            <div className="filter-scope-pane multi-edit-mode">
-              {renderFilterScopeTree()}
-            </div>
-          </ScopeSelector>
-        )}
-      </ScopeBody>
+          ) : (
+            <ScopeSelector className="filters-scope-selector">
+              <div className={cx('filter-field-pane multi-edit-mode')}>
+                {this.renderFilterFieldList()}
+              </div>
+              <div className="filter-scope-pane multi-edit-mode">
+                {this.renderFilterScopeTree()}
+              </div>
+            </ScopeSelector>
+          )}
+        </ScopeBody>
 
-      <ActionsContainer>
-        <Button buttonSize="small" onClick={onClose}>
-          {t('Close')}
-        </Button>
-        {showSelector && (
-          <Button buttonSize="small" buttonStyle="primary" onClick={onSave}>
-            {t('Save')}
+        <ActionsContainer>
+          <Button buttonSize="small" onClick={this.onClose}>
+            {t('Close')}
           </Button>
-        )}
-      </ActionsContainer>
-    </ScopeContainer>
-  );
+          {showSelector && (
+            <Button
+              buttonSize="small"
+              buttonStyle="primary"
+              onClick={this.onSave}
+            >
+              {t('Save')}
+            </Button>
+          )}
+        </ActionsContainer>
+      </ScopeContainer>
+    );
+  }
 }

superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx

@@ -128,10 +128,6 @@ const SliceContainer = styled.div`
 
 const EMPTY_OBJECT: Record<string, never> = {};
 
-// Stable no-op fallback for optional callbacks so we don't allocate a new
-// function on every render (keeps referential equality for memoized children).
-const NOOP = () => {};
-
 // Helper function to get chart state with fallback
 const getChartStateWithFallback = (
   chartState: { state?: JsonObject } | undefined,
@@ -767,11 +763,11 @@ const Chart = (props: ChartProps) => {
             },
             slice.viz_type,
           )}
-          queriesResponse={chart.queriesResponse ?? null}
+          queriesResponse={chart.queriesResponse ?? undefined}
           timeout={timeout}
           triggerQuery={chart.triggerQuery}
           vizType={slice.viz_type}
-          setControlValue={props.setControlValue ?? NOOP}
+          setControlValue={props.setControlValue}
           datasetsStatus={
             datasetsStatus as 'loading' | 'error' | 'complete' | undefined
           }

superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx

@@ -17,8 +17,9 @@
  * under the License.
  */
 
-import { useCallback, memo } from 'react';
+import { PureComponent } from 'react';
 import { css, styled } from '@apache-superset/core/theme';
+
 import { Draggable } from '../../dnd/DragDroppable';
 import HoverMenu from '../../menu/HoverMenu';
 import DeleteComponentButton from '../../DeleteComponentButton';
@@ -62,43 +63,50 @@ const DividerLine = styled.div`
   `}
 `;
 
-function Divider({
-  id,
-  parentId,
-  component,
-  depth,
-  parentComponent,
-  index,
-  editMode,
-  handleComponentDrop,
-  deleteComponent,
-}: DividerProps) {
-  const handleDeleteComponent = useCallback(() => {
-    deleteComponent(id, parentId);
-  }, [deleteComponent, id, parentId]);
+class Divider extends PureComponent<DividerProps> {
+  constructor(props: DividerProps) {
+    super(props);
+    this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
+  }
 
-  return (
-    <Draggable
-      component={component}
-      parentComponent={parentComponent}
-      orientation="row"
-      index={index}
-      depth={depth}
-      onDrop={handleComponentDrop}
-      editMode={editMode}
-    >
-      {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
-        <div ref={dragSourceRef}>
-          {editMode && (
-            <HoverMenu position="left">
-              <DeleteComponentButton onDelete={handleDeleteComponent} />
-            </HoverMenu>
-          )}
-          <DividerLine className="dashboard-component dashboard-component-divider" />
-        </div>
-      )}
-    </Draggable>
-  );
+  handleDeleteComponent() {
+    const { deleteComponent, id, parentId } = this.props;
+    deleteComponent(id, parentId);
+  }
+
+  render() {
+    const {
+      component,
+      depth,
+      parentComponent,
+      index,
+      handleComponentDrop,
+      editMode,
+    } = this.props;
+
+    return (
+      <Draggable
+        component={component}
+        parentComponent={parentComponent}
+        orientation="row"
+        index={index}
+        depth={depth}
+        onDrop={handleComponentDrop}
+        editMode={editMode}
+      >
+        {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
+          <div ref={dragSourceRef}>
+            {editMode && (
+              <HoverMenu position="left">
+                <DeleteComponentButton onDelete={this.handleDeleteComponent} />
+              </HoverMenu>
+            )}
+            <DividerLine className="dashboard-component dashboard-component-divider" />
+          </div>
+        )}
+      </Draggable>
+    );
+  }
 }
 
-export default memo(Divider);
+export default Divider;

superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx

@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useCallback, memo } from 'react';
+import { PureComponent } from 'react';
 import cx from 'classnames';
 import { css, styled } from '@apache-superset/core/theme';
+
 import PopoverDropdown from '@superset-ui/core/components/PopoverDropdown';
 import { EditableTitle } from '@superset-ui/core/components';
 import { Draggable } from 'src/dashboard/components/dnd/DragDroppable';
@@ -84,6 +85,10 @@ interface HeaderProps {
   updateComponents: (changes: Record<string, ComponentShape>) => void;
 }
 
+interface HeaderState {
+  isFocused: boolean;
+}
+
 const HeaderStyles = styled.div`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeightStrong};
@@ -154,141 +159,149 @@ const HeaderStyles = styled.div`
   `}
 `;
 
-function Header({
-  id,
-  dashboardId,
-  parentId,
-  component,
-  depth,
-  parentComponent,
-  index,
-  editMode,
-  embeddedMode,
-  handleComponentDrop,
-  deleteComponent,
-  updateComponents,
-}: HeaderProps) {
-  const [isFocused, setIsFocused] = useState(false);
+class Header extends PureComponent<HeaderProps, HeaderState> {
+  handleChangeSize: (nextValue: string) => void;
+  handleChangeBackground: (nextValue: string) => void;
+  handleChangeText: (nextValue: string) => void;
 
-  const handleChangeFocus = useCallback((nextFocus: boolean): void => {
-    setIsFocused(nextFocus);
-  }, []);
+  constructor(props: HeaderProps) {
+    super(props);
+    this.state = {
+      isFocused: false,
+    };
+    this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
+    this.handleChangeFocus = this.handleChangeFocus.bind(this);
+    this.handleUpdateMeta = this.handleUpdateMeta.bind(this);
 
-  const handleUpdateMeta = useCallback(
-    (metaKey: keyof ComponentMeta, nextValue: string): void => {
-      if (nextValue && component.meta[metaKey] !== nextValue) {
-        updateComponents({
-          [component.id]: {
-            ...component,
-            meta: {
-              ...component.meta,
-              [metaKey]: nextValue,
-            },
+    this.handleChangeSize = (nextValue: string) =>
+      this.handleUpdateMeta('headerSize', nextValue);
+    this.handleChangeBackground = (nextValue: string) =>
+      this.handleUpdateMeta('background', nextValue);
+    this.handleChangeText = (nextValue: string) =>
+      this.handleUpdateMeta('text', nextValue);
+  }
+
+  handleChangeFocus(nextFocus: boolean): void {
+    this.setState(() => ({ isFocused: nextFocus }));
+  }
+
+  handleUpdateMeta(metaKey: keyof ComponentMeta, nextValue: string): void {
+    const { updateComponents, component } = this.props;
+    if (nextValue && component.meta[metaKey] !== nextValue) {
+      updateComponents({
+        [component.id]: {
+          ...component,
+          meta: {
+            ...component.meta,
+            [metaKey]: nextValue,
           },
-        } as Record<string, ComponentShape>);
-      }
-    },
-    [component, updateComponents],
-  );
+        },
+      } as Record<string, ComponentShape>);
+    }
+  }
 
-  const handleChangeSize = useCallback(
-    (nextValue: string) => handleUpdateMeta('headerSize', nextValue),
-    [handleUpdateMeta],
-  );
-
-  const handleChangeBackground = useCallback(
-    (nextValue: string) => handleUpdateMeta('background', nextValue),
-    [handleUpdateMeta],
-  );
-
-  const handleChangeText = useCallback(
-    (nextValue: string) => handleUpdateMeta('text', nextValue),
-    [handleUpdateMeta],
-  );
-
-  const handleDeleteComponent = useCallback((): void => {
+  handleDeleteComponent(): void {
+    const { deleteComponent, id, parentId } = this.props;
     deleteComponent(id, parentId);
-  }, [deleteComponent, id, parentId]);
+  }
 
-  const headerStyle = headerStyleOptions.find(
-    opt => opt.value === (component.meta.headerSize || SMALL_HEADER),
-  );
+  render() {
+    const { isFocused } = this.state;
 
-  const rowStyle = backgroundStyleOptions.find(
-    opt => opt.value === (component.meta.background || BACKGROUND_TRANSPARENT),
-  );
+    const {
+      dashboardId,
+      component,
+      depth,
+      parentComponent,
+      index,
+      handleComponentDrop,
+      editMode,
+      embeddedMode,
+    } = this.props;
 
-  return (
-    <Draggable
-      component={component}
-      parentComponent={parentComponent}
-      orientation="row"
-      index={index}
-      depth={depth}
-      onDrop={handleComponentDrop}
-      disableDragDrop={isFocused}
-      editMode={editMode}
-    >
-      {({
-        dragSourceRef,
-      }: {
-        dragSourceRef: React.Ref<HTMLDivElement> | undefined;
-      }) => (
-        <div ref={dragSourceRef}>
-          {editMode &&
-            depth <= 2 && ( // drag handle looks bad when nested
-              <HoverMenu position="left">
-                <DragHandle position="left" />
-              </HoverMenu>
-            )}
-          <WithPopoverMenu
-            onChangeFocus={handleChangeFocus}
-            menuItems={[
-              <PopoverDropdown
-                id={`${component.id}-header-style`}
-                options={headerStyleOptions}
-                value={component.meta.headerSize as string}
-                onChange={handleChangeSize}
-              />,
-              <BackgroundStyleDropdown
-                id={`${component.id}-background`}
-                value={component.meta.background as string}
-                onChange={handleChangeBackground}
-              />,
-            ]}
-            editMode={editMode}
-          >
-            <HeaderStyles
-              className={cx(
-                'dashboard-component',
-                'dashboard-component-header',
-                headerStyle?.className,
-                rowStyle?.className,
-              )}
-            >
-              {editMode && (
-                <HoverMenu position="top">
-                  <DeleteComponentButton onDelete={handleDeleteComponent} />
+    const headerStyle = headerStyleOptions.find(
+      opt => opt.value === (component.meta.headerSize || SMALL_HEADER),
+    );
+
+    const rowStyle = backgroundStyleOptions.find(
+      opt =>
+        opt.value === (component.meta.background || BACKGROUND_TRANSPARENT),
+    );
+
+    return (
+      <Draggable
+        component={component}
+        parentComponent={parentComponent}
+        orientation="row"
+        index={index}
+        depth={depth}
+        onDrop={handleComponentDrop}
+        disableDragDrop={isFocused}
+        editMode={editMode}
+      >
+        {({
+          dragSourceRef,
+        }: {
+          dragSourceRef: React.Ref<HTMLDivElement> | undefined;
+        }) => (
+          <div ref={dragSourceRef}>
+            {editMode &&
+              depth <= 2 && ( // drag handle looks bad when nested
+                <HoverMenu position="left">
+                  <DragHandle position="left" />
                 </HoverMenu>
               )}
-              <EditableTitle
-                title={component.meta.text}
-                canEdit={editMode}
-                onSaveTitle={handleChangeText}
-                showTooltip={false}
-              />
-              {!editMode && !embeddedMode && (
-                <AnchorLink
-                  id={component.id}
-                  dashboardId={Number(dashboardId)}
+            <WithPopoverMenu
+              onChangeFocus={this.handleChangeFocus}
+              menuItems={[
+                <PopoverDropdown
+                  id={`${component.id}-header-style`}
+                  options={headerStyleOptions}
+                  value={component.meta.headerSize as string}
+                  onChange={this.handleChangeSize}
+                />,
+                <BackgroundStyleDropdown
+                  id={`${component.id}-background`}
+                  value={component.meta.background as string}
+                  onChange={this.handleChangeBackground}
+                />,
+              ]}
+              editMode={editMode}
+            >
+              <HeaderStyles
+                className={cx(
+                  'dashboard-component',
+                  'dashboard-component-header',
+                  headerStyle?.className,
+                  rowStyle?.className,
+                )}
+              >
+                {editMode && (
+                  <HoverMenu position="top">
+                    <DeleteComponentButton
+                      onDelete={this.handleDeleteComponent}
+                    />
+                  </HoverMenu>
+                )}
+                <EditableTitle
+                  title={component.meta.text}
+                  canEdit={editMode}
+                  onSaveTitle={this.handleChangeText}
+                  showTooltip={false}
                 />
-              )}
-            </HeaderStyles>
-          </WithPopoverMenu>
-        </div>
-      )}
-    </Draggable>
-  );
+                {!editMode && !embeddedMode && (
+                  <AnchorLink
+                    id={component.id}
+                    dashboardId={Number(dashboardId)}
+                  />
+                )}
+              </HeaderStyles>
+            </WithPopoverMenu>
+          </div>
+        )}
+      </Draggable>
+    );
+  }
 }
 
-export default memo(Header);
+export default Header;

superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx

@@ -16,16 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ErrorInfo } from 'react';
+import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import cx from 'classnames';
 import type { JsonObject } from '@superset-ui/core';
 import type { ResizeStartCallback, ResizeCallback } from 're-resizable';
-import { ErrorBoundary } from 'src/components';
 
-import { t } from '@apache-superset/core/translation';
 import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
 import { SafeMarkdown } from '@superset-ui/core/components';
 import { EditorHost } from 'src/core/editors';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
@@ -84,6 +82,16 @@ export interface MarkdownStateProps {
 
 export type MarkdownProps = MarkdownOwnProps & MarkdownStateProps;
 
+export interface MarkdownState {
+  isFocused: boolean;
+  markdownSource: string;
+  editor: EditorInstance | null;
+  editorMode: 'preview' | 'edit';
+  undoLength: number;
+  redoLength: number;
+  hasError?: boolean;
+}
+
 // TODO: localize
 const MARKDOWN_PLACE_HOLDER = `# ✨Header 1
 ## ✨Header 2
@@ -132,199 +140,193 @@ interface DragChildProps {
   dragSourceRef: React.RefCallback<HTMLElement>;
 }
 
-function Markdown({
-  id,
-  parentId,
-  component,
-  parentComponent,
-  index,
-  depth,
-  editMode,
-  availableColumnCount,
-  columnWidth,
-  onResizeStart,
-  onResize,
-  onResizeStop,
-  deleteComponent,
-  handleComponentDrop,
-  updateComponents,
-  logEvent,
-  addDangerToast,
-  undoLength,
-  redoLength,
-  htmlSanitization,
-  htmlSchemaOverrides,
-}: MarkdownProps) {
-  const [isFocused, setIsFocused] = useState(false);
-  const [markdownSource, setMarkdownSource] = useState<string>(
-    component.meta.code as string,
-  );
-  const [editor, setEditorState] = useState<EditorInstance | null>(null);
-  const [editorMode, setEditorMode] = useState<'preview' | 'edit'>('preview');
-  const [hasError, setHasError] = useState(false);
+class Markdown extends PureComponent<MarkdownProps, MarkdownState> {
+  renderStartTime: number;
 
-  const renderStartTimeRef = useRef(Logger.getTimestamp());
-  const prevUndoLengthRef = useRef(undoLength);
-  const prevRedoLengthRef = useRef(redoLength);
-  const prevComponentWidthRef = useRef(component.meta.width);
-  const prevColumnWidthRef = useRef(columnWidth);
+  constructor(props: MarkdownProps) {
+    super(props);
+    this.state = {
+      isFocused: false,
+      markdownSource: props.component.meta.code as string,
+      editor: null,
+      editorMode: 'preview',
+      undoLength: props.undoLength,
+      redoLength: props.redoLength,
+    };
+    this.renderStartTime = Logger.getTimestamp();
 
-  // getDerivedStateFromProps equivalent for undo/redo. Run during render
-  // (not in an effect) so the new markdownSource is applied before the commit,
-  // avoiding a one-frame flash of the old content. React bails out of the
-  // intermediate render without committing it.
-  const isUndoRedo =
-    undoLength !== prevUndoLengthRef.current ||
-    redoLength !== prevRedoLengthRef.current;
-  if (isUndoRedo) {
-    setMarkdownSource(component.meta.code as string);
-    setHasError(false);
-    prevUndoLengthRef.current = undoLength;
-    prevRedoLengthRef.current = redoLength;
+    this.handleChangeFocus = this.handleChangeFocus.bind(this);
+    this.handleChangeEditorMode = this.handleChangeEditorMode.bind(this);
+    this.handleMarkdownChange = this.handleMarkdownChange.bind(this);
+    this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
+    this.handleResizeStart = this.handleResizeStart.bind(this);
+    this.setEditor = this.setEditor.bind(this);
+    this.shouldFocusMarkdown = this.shouldFocusMarkdown.bind(this);
   }
 
-  // Sync external code changes (not from undo/redo) while in preview mode.
-  useEffect(() => {
+  componentDidMount(): void {
+    this.props.logEvent(LOG_ACTIONS_RENDER_CHART, {
+      viz_type: 'markdown',
+      start_offset: this.renderStartTime,
+      ts: new Date().getTime(),
+      duration: Logger.getTimestamp() - this.renderStartTime,
+    });
+  }
+
+  static getDerivedStateFromProps(
+    nextProps: MarkdownProps,
+    state: MarkdownState,
+  ): MarkdownState | null {
+    const { hasError, editorMode, markdownSource, undoLength, redoLength } =
+      state;
+    const {
+      component: nextComponent,
+      undoLength: nextUndoLength,
+      redoLength: nextRedoLength,
+    } = nextProps;
+    // user click undo or redo ?
+    if (nextUndoLength !== undoLength || nextRedoLength !== redoLength) {
+      return {
+        ...state,
+        undoLength: nextUndoLength,
+        redoLength: nextRedoLength,
+        markdownSource: nextComponent.meta.code as string,
+        hasError: false,
+      };
+    }
     if (
-      !isUndoRedo &&
       !hasError &&
       editorMode === 'preview' &&
-      component.meta.code !== markdownSource
+      nextComponent.meta.code !== markdownSource
     ) {
-      setMarkdownSource(component.meta.code as string);
+      return {
+        ...state,
+        markdownSource: nextComponent.meta.code as string,
+      };
     }
-  }, [isUndoRedo, component.meta.code, hasError, editorMode, markdownSource]);
 
-  // componentDidMount equivalent: log render event
-  useEffect(() => {
-    logEvent(LOG_ACTIONS_RENDER_CHART, {
-      viz_type: 'markdown',
-      start_offset: renderStartTimeRef.current,
-      ts: new Date().getTime(),
-      duration: Logger.getTimestamp() - renderStartTimeRef.current,
-    });
-    // Only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    return state;
+  }
 
-  // componentDidUpdate equivalent: resize editor when width changes
-  useEffect(() => {
+  static getDerivedStateFromError(): { hasError: boolean } {
+    return {
+      hasError: true,
+    };
+  }
+
+  componentDidUpdate(prevProps: MarkdownProps): void {
     if (
-      editor &&
-      (prevComponentWidthRef.current !== component.meta.width ||
-        prevColumnWidthRef.current !== columnWidth)
+      this.state.editor &&
+      (prevProps.component.meta.width !== this.props.component.meta.width ||
+        prevProps.columnWidth !== this.props.columnWidth)
     ) {
       // Handle both Ace editor (resize method) and EditorHandle (no resize needed)
-      if (typeof editor.resize === 'function') {
-        editor.resize(true);
+      if (typeof this.state.editor.resize === 'function') {
+        this.state.editor.resize(true);
       }
     }
-    prevComponentWidthRef.current = component.meta.width;
-    prevColumnWidthRef.current = columnWidth;
-  }, [editor, component.meta.width, columnWidth]);
+  }
 
-  const updateMarkdownContent = useCallback((): void => {
-    if (component.meta.code !== markdownSource) {
+  componentDidCatch(): void {
+    if (this.state.editor && this.state.editorMode === 'preview') {
+      this.props.addDangerToast(
+        t(
+          'This markdown component has an error. Please revert your recent changes.',
+        ),
+      );
+    }
+  }
+
+  setEditor(editor: EditorInstance): void {
+    // EditorHandle or Ace editor instance
+    // For Ace: editor.getSession().setUseWrapMode(true)
+    // For EditorHandle: wrapEnabled is handled via options
+    if (editor?.getSession) {
+      editor.getSession!().setUseWrapMode(true);
+    }
+    this.setState({
+      editor,
+    });
+  }
+
+  handleChangeFocus(nextFocus: boolean | number): void {
+    const nextFocused = !!nextFocus;
+    const nextEditMode: 'edit' | 'preview' = nextFocused ? 'edit' : 'preview';
+    this.setState(() => ({ isFocused: nextFocused }));
+    this.handleChangeEditorMode(nextEditMode);
+  }
+
+  handleChangeEditorMode(mode: 'edit' | 'preview'): void {
+    const nextState: MarkdownState = {
+      ...this.state,
+      editorMode: mode,
+    };
+    if (mode === 'preview') {
+      this.updateMarkdownContent();
+      nextState.hasError = false;
+    }
+
+    this.setState(nextState);
+  }
+
+  updateMarkdownContent(): void {
+    const { updateComponents, component } = this.props;
+    if (component.meta.code !== this.state.markdownSource) {
       updateComponents({
         [component.id]: {
           ...component,
           meta: {
             ...component.meta,
-            code: markdownSource,
+            code: this.state.markdownSource,
           },
         },
       });
     }
-  }, [component, markdownSource, updateComponents]);
+  }
 
-  const setEditor = useCallback((editorInstance: EditorInstance): void => {
-    // EditorHandle or Ace editor instance
-    // For Ace: editor.getSession().setUseWrapMode(true)
-    // For EditorHandle: wrapEnabled is handled via options
-    if (editorInstance?.getSession) {
-      editorInstance.getSession!().setUseWrapMode(true);
-    }
-    setEditorState(editorInstance);
-  }, []);
+  handleMarkdownChange(nextValue: string): void {
+    this.setState({
+      markdownSource: nextValue,
+    });
+  }
 
-  const handleChangeEditorMode = useCallback(
-    (mode: 'edit' | 'preview'): void => {
-      if (mode === 'preview') {
-        updateMarkdownContent();
-        setHasError(false);
-      }
-      setEditorMode(mode);
-    },
-    [updateMarkdownContent],
-  );
-
-  const handleChangeFocus = useCallback(
-    (nextFocus: boolean | number): void => {
-      const nextFocused = !!nextFocus;
-      const nextEditMode: 'edit' | 'preview' = nextFocused ? 'edit' : 'preview';
-      setIsFocused(nextFocused);
-      handleChangeEditorMode(nextEditMode);
-    },
-    [handleChangeEditorMode],
-  );
-
-  const handleMarkdownChange = useCallback((nextValue: string): void => {
-    setMarkdownSource(nextValue);
-  }, []);
-
-  const handleDeleteComponent = useCallback((): void => {
+  handleDeleteComponent(): void {
+    const { deleteComponent, id, parentId } = this.props;
     deleteComponent(id, parentId);
-  }, [deleteComponent, id, parentId]);
+  }
 
-  const handleResizeStart = useCallback(
-    (...args: Parameters<ResizeStartCallback>): void => {
-      const isEditing = editorMode === 'edit';
-      onResizeStart(...args);
-      if (editMode && isEditing) {
-        updateMarkdownContent();
-      }
-    },
-    [editorMode, editMode, onResizeStart, updateMarkdownContent],
-  );
+  handleResizeStart(...args: Parameters<ResizeStartCallback>): void {
+    const { editorMode } = this.state;
+    const { editMode, onResizeStart } = this.props;
+    const isEditing = editorMode === 'edit';
+    onResizeStart(...args);
+    if (editMode && isEditing) {
+      this.updateMarkdownContent();
+    }
+  }
 
-  const shouldFocusMarkdown = useCallback(
-    (
-      event: MouseEvent,
-      container: HTMLElement | null,
-      menuRef: HTMLElement | null,
-    ): boolean => {
-      if (container?.contains(event.target as Node)) return true;
-      if (menuRef?.contains(event.target as Node)) return true;
-      return false;
-    },
-    [],
-  );
+  shouldFocusMarkdown(
+    event: MouseEvent,
+    container: HTMLElement | null,
+    menuRef: HTMLElement | null,
+  ): boolean {
+    if (container?.contains(event.target as Node)) return true;
+    if (menuRef?.contains(event.target as Node)) return true;
 
-  const handleRenderError = useCallback(
-    (_error: Error, _info: ErrorInfo): void => {
-      setHasError(true);
-      if (editorMode === 'preview') {
-        addDangerToast(
-          t(
-            'This markdown component has an error. Please revert your recent changes.',
-          ),
-        );
-      }
-    },
-    [addDangerToast, editorMode],
-  );
+    return false;
+  }
 
-  const renderEditMode = useMemo(
-    () => (
+  renderEditMode(): JSX.Element {
+    return (
       <EditorHost
-        id={`markdown-editor-${id}`}
-        onChange={handleMarkdownChange}
+        id={`markdown-editor-${this.props.id}`}
+        onChange={this.handleMarkdownChange}
         width="100%"
         height="100%"
         value={
           // this allows "select all => delete" to give an empty editor
-          typeof markdownSource === 'string'
-            ? markdownSource
+          typeof this.state.markdownSource === 'string'
+            ? this.state.markdownSource
             : MARKDOWN_PLACE_HOLDER
         }
         language="markdown"
@@ -334,116 +336,126 @@ function Markdown({
         onReady={(handle: EditorInstance) => {
           // The handle provides access to the underlying editor for resize
           if (handle && typeof handle.focus === 'function') {
-            setEditor(handle);
+            this.setEditor(handle);
           }
         }}
         data-test="editor"
       />
-    ),
-    [id, markdownSource, handleMarkdownChange, setEditor],
-  );
+    );
+  }
 
-  const renderPreviewMode = useMemo(
-    () => (
+  renderPreviewMode(): JSX.Element {
+    const { hasError } = this.state;
+
+    return (
       <SafeMarkdown
         source={
           hasError
             ? MARKDOWN_ERROR_MESSAGE
-            : markdownSource || MARKDOWN_PLACE_HOLDER
+            : this.state.markdownSource || MARKDOWN_PLACE_HOLDER
         }
-        htmlSanitization={htmlSanitization}
-        htmlSchemaOverrides={htmlSchemaOverrides}
+        htmlSanitization={this.props.htmlSanitization}
+        htmlSchemaOverrides={this.props.htmlSchemaOverrides}
       />
-    ),
-    [hasError, markdownSource, htmlSanitization, htmlSchemaOverrides],
-  );
+    );
+  }
 
-  // inherit the size of parent columns
-  const widthMultiple =
-    parentComponent.type === COLUMN_TYPE
-      ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
-      : component.meta.width || GRID_MIN_COLUMN_COUNT;
+  render() {
+    const { isFocused, editorMode } = this.state;
 
-  const isEditing = editorMode === 'edit';
+    const {
+      component,
+      parentComponent,
+      index,
+      depth,
+      availableColumnCount,
+      columnWidth,
+      onResize,
+      onResizeStop,
+      handleComponentDrop,
+      editMode,
+    } = this.props;
 
-  const menuItems = useMemo(
-    () => [
-      <MarkdownModeDropdown
-        key={`${component.id}-mode`}
-        id={`${component.id}-mode`}
-        value={editorMode}
-        onChange={handleChangeEditorMode}
-      />,
-    ],
-    [component.id, editorMode, handleChangeEditorMode],
-  );
+    // inherit the size of parent columns
+    const widthMultiple =
+      parentComponent.type === COLUMN_TYPE
+        ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
+        : component.meta.width || GRID_MIN_COLUMN_COUNT;
 
-  return (
-    <Draggable
-      component={component}
-      parentComponent={parentComponent}
-      orientation={parentComponent.type === ROW_TYPE ? 'column' : 'row'}
-      index={index}
-      depth={depth}
-      onDrop={handleComponentDrop}
-      disableDragDrop={isFocused}
-      editMode={editMode}
-    >
-      {({ dragSourceRef }: DragChildProps) => (
-        <WithPopoverMenu
-          onChangeFocus={handleChangeFocus}
-          shouldFocus={shouldFocusMarkdown}
-          menuItems={menuItems}
-          editMode={editMode}
-        >
-          <MarkdownStyles
-            data-test="dashboard-markdown-editor"
-            className={cx(
-              'dashboard-markdown',
-              isEditing && 'dashboard-markdown--editing',
-            )}
-            id={component.id}
+    const isEditing = editorMode === 'edit';
+
+    return (
+      <Draggable
+        component={component}
+        parentComponent={parentComponent}
+        orientation={parentComponent.type === ROW_TYPE ? 'column' : 'row'}
+        index={index}
+        depth={depth}
+        onDrop={handleComponentDrop}
+        disableDragDrop={isFocused}
+        editMode={editMode}
+      >
+        {({ dragSourceRef }: DragChildProps) => (
+          <WithPopoverMenu
+            onChangeFocus={this.handleChangeFocus}
+            shouldFocus={this.shouldFocusMarkdown}
+            menuItems={[
+              <MarkdownModeDropdown
+                key={`${component.id}-mode`}
+                id={`${component.id}-mode`}
+                value={this.state.editorMode}
+                onChange={this.handleChangeEditorMode}
+              />,
+            ]}
+            editMode={editMode}
           >
-            <ResizableContainer
+            <MarkdownStyles
+              data-test="dashboard-markdown-editor"
+              className={cx(
+                'dashboard-markdown',
+                isEditing && 'dashboard-markdown--editing',
+              )}
               id={component.id}
-              adjustableWidth={parentComponent.type === ROW_TYPE}
-              adjustableHeight
-              widthStep={columnWidth}
-              widthMultiple={widthMultiple}
-              heightStep={GRID_BASE_UNIT}
-              heightMultiple={component.meta.height ?? GRID_MIN_ROW_UNITS}
-              minWidthMultiple={GRID_MIN_COLUMN_COUNT}
-              minHeightMultiple={GRID_MIN_ROW_UNITS}
-              maxWidthMultiple={availableColumnCount + widthMultiple}
-              onResizeStart={handleResizeStart}
-              onResize={onResize}
-              onResizeStop={onResizeStop}
-              editMode={isFocused ? false : editMode}
             >
-              <div
-                ref={dragSourceRef}
-                className="dashboard-component dashboard-component-chart-holder"
-                data-test="dashboard-component-chart-holder"
+              <ResizableContainer
+                id={component.id}
+                adjustableWidth={parentComponent.type === ROW_TYPE}
+                adjustableHeight
+                widthStep={columnWidth}
+                widthMultiple={widthMultiple}
+                heightStep={GRID_BASE_UNIT}
+                heightMultiple={component.meta.height ?? GRID_MIN_ROW_UNITS}
+                minWidthMultiple={GRID_MIN_COLUMN_COUNT}
+                minHeightMultiple={GRID_MIN_ROW_UNITS}
+                maxWidthMultiple={availableColumnCount + widthMultiple}
+                onResizeStart={this.handleResizeStart}
+                onResize={onResize}
+                onResizeStop={onResizeStop}
+                editMode={isFocused ? false : editMode}
               >
-                {editMode && (
-                  <HoverMenu position="top">
-                    <DeleteComponentButton onDelete={handleDeleteComponent} />
-                  </HoverMenu>
-                )}
-                <ErrorBoundary
-                  key={hasError ? 'markdown-error' : 'markdown-ok'}
-                  onError={handleRenderError}
-                  showMessage={false}
+                <div
+                  ref={dragSourceRef}
+                  className="dashboard-component dashboard-component-chart-holder"
+                  data-test="dashboard-component-chart-holder"
                 >
-                  {editMode && isEditing ? renderEditMode : renderPreviewMode}
-                </ErrorBoundary>
-              </div>
-            </ResizableContainer>
-          </MarkdownStyles>
-        </WithPopoverMenu>
-      )}
-    </Draggable>
-  );
+                  {editMode && (
+                    <HoverMenu position="top">
+                      <DeleteComponentButton
+                        onDelete={this.handleDeleteComponent}
+                      />
+                    </HoverMenu>
+                  )}
+                  {editMode && isEditing
+                    ? this.renderEditMode()
+                    : this.renderPreviewMode()}
+                </div>
+              </ResizableContainer>
+            </MarkdownStyles>
+          </WithPopoverMenu>
+        )}
+      </Draggable>
+    );
+  }
 }
 
 interface ReduxState {

superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { memo } from 'react';
+import { PureComponent } from 'react';
 import cx from 'classnames';
 import { css, styled } from '@apache-superset/core/theme';
 import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable';
@@ -62,37 +62,37 @@ const NewComponentPlaceholder = styled.div`
   `}
 `;
 
-function DraggableNewComponent({
-  label,
-  id,
-  type,
-  className,
-  meta,
-  IconComponent,
-}: DraggableNewComponentProps) {
-  return (
-    <DragDroppable
-      component={{ type, id, meta }}
-      parentComponent={{
-        id: NEW_COMPONENTS_SOURCE_ID,
-        type: NEW_COMPONENT_SOURCE_TYPE,
-      }}
-      index={0}
-      depth={0}
-      editMode
-    >
-      {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
-        <NewComponent ref={dragSourceRef} data-test="new-component">
-          <NewComponentPlaceholder
-            className={cx('new-component-placeholder', className)}
-          >
-            {IconComponent && <IconComponent iconSize="xl" />}
-          </NewComponentPlaceholder>
-          {label}
-        </NewComponent>
-      )}
-    </DragDroppable>
-  );
-}
+export default class DraggableNewComponent extends PureComponent<DraggableNewComponentProps> {
+  static defaultProps = {
+    className: null,
+    IconComponent: undefined,
+  };
 
-export default memo(DraggableNewComponent);
+  render() {
+    const { label, id, type, className, meta, IconComponent } = this.props;
+
+    return (
+      <DragDroppable
+        component={{ type, id, meta }}
+        parentComponent={{
+          id: NEW_COMPONENTS_SOURCE_ID,
+          type: NEW_COMPONENT_SOURCE_TYPE,
+        }}
+        index={0}
+        depth={0}
+        editMode
+      >
+        {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
+          <NewComponent ref={dragSourceRef} data-test="new-component">
+            <NewComponentPlaceholder
+              className={cx('new-component-placeholder', className)}
+            >
+              {IconComponent && <IconComponent iconSize="xl" />}
+            </NewComponentPlaceholder>
+            {label}
+          </NewComponent>
+        )}
+      </DragDroppable>
+    );
+  }
+}

superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx

@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { PureComponent } from 'react';
 import cx from 'classnames';
 import { t } from '@apache-superset/core/translation';
 import { css, styled } from '@apache-superset/core/theme';
+
 import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
 import PopoverDropdown, {
   OptionProps,
@@ -88,19 +90,18 @@ function renderOption(option: OptionProps) {
   );
 }
 
-export default function BackgroundStyleDropdown({
-  id,
-  value,
-  onChange,
-}: BackgroundStyleDropdownProps) {
-  return (
-    <PopoverDropdown
-      id={id}
-      options={backgroundStyleOptions}
-      value={value}
-      onChange={onChange}
-      renderButton={renderButton}
-      renderOption={renderOption}
-    />
-  );
+export default class BackgroundStyleDropdown extends PureComponent<BackgroundStyleDropdownProps> {
+  render() {
+    const { id, value, onChange } = this.props;
+    return (
+      <PopoverDropdown
+        id={id}
+        options={backgroundStyleOptions}
+        value={value}
+        onChange={onChange}
+        renderButton={renderButton}
+        renderOption={renderOption}
+      />
+    );
+  }
 }

superset-frontend/src/dashboard/components/menu/HoverMenu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-state */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -16,15 +17,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { RefObject, ReactNode, useCallback, memo } from 'react';
+import { RefObject, ReactNode, PureComponent } from 'react';
 
 import { styled } from '@apache-superset/core/theme';
 import cx from 'classnames';
 
 interface HoverMenuProps {
-  position?: 'left' | 'top';
-  innerRef?: RefObject<HTMLDivElement> | null;
-  children?: ReactNode;
+  position: 'left' | 'top';
+  innerRef: RefObject<HTMLDivElement>;
+  children: ReactNode;
   onHover?: (data: { isHovered: boolean }) => void;
 }
 
@@ -65,41 +66,45 @@ const HoverStyleOverrides = styled.div`
   }
 `;
 
-function HoverMenu({
-  position = 'left',
-  innerRef = null,
-  children = null,
-  onHover,
-}: HoverMenuProps) {
-  const handleMouseEnter = useCallback(() => {
+export default class HoverMenu extends PureComponent<HoverMenuProps> {
+  static defaultProps = {
+    position: 'left',
+    innerRef: null,
+    children: null,
+  };
+
+  handleMouseEnter = () => {
+    const { onHover } = this.props;
     if (onHover) {
       onHover({ isHovered: true });
     }
-  }, [onHover]);
+  };
 
-  const handleMouseLeave = useCallback(() => {
+  handleMouseLeave = () => {
+    const { onHover } = this.props;
     if (onHover) {
       onHover({ isHovered: false });
     }
-  }, [onHover]);
+  };
 
-  return (
-    <HoverStyleOverrides className="hover-menu-container">
-      <div
-        ref={innerRef}
-        className={cx(
-          'hover-menu',
-          position === 'left' && 'hover-menu--left',
-          position === 'top' && 'hover-menu--top',
-        )}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        data-test="hover-menu"
-      >
-        {children}
-      </div>
-    </HoverStyleOverrides>
-  );
+  render() {
+    const { innerRef, position, children } = this.props;
+    return (
+      <HoverStyleOverrides className="hover-menu-container">
+        <div
+          ref={innerRef}
+          className={cx(
+            'hover-menu',
+            position === 'left' && 'hover-menu--left',
+            position === 'top' && 'hover-menu--top',
+          )}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          data-test="hover-menu"
+        >
+          {children}
+        </div>
+      </HoverStyleOverrides>
+    );
+  }
 }
-
-export default memo(HoverMenu);

superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx

@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { PureComponent } from 'react';
 import { t } from '@apache-superset/core/translation';
+
 import PopoverDropdown, {
   OnChangeHandler,
 } from '@superset-ui/core/components/PopoverDropdown';
@@ -38,18 +40,18 @@ const dropdownOptions = [
   },
 ];
 
-export default function MarkdownModeDropdown({
-  id,
-  value,
-  onChange,
-}: MarkdownModeDropdownProps) {
-  return (
-    <PopoverDropdown
-      data-test="markdown-mode-dropdown"
-      id={id}
-      options={dropdownOptions}
-      value={value}
-      onChange={onChange}
-    />
-  );
+export default class MarkdownModeDropdown extends PureComponent<MarkdownModeDropdownProps> {
+  render() {
+    const { id, value, onChange } = this.props;
+
+    return (
+      <PopoverDropdown
+        data-test="markdown-mode-dropdown"
+        id={id}
+        options={dropdownOptions}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
 }

superset-frontend/src/dashboard/components/menu/WithPopoverMenu.test.tsx

@@ -106,9 +106,7 @@ test('should unfocus when another component is clicked', async () => {
     <WithPopoverMenu
       {...props}
       editMode
-      shouldFocus={(event, container, _menuRef) =>
-        container?.contains(event.target) ?? false
-      }
+      shouldFocus={(event, container) => container?.contains(event.target)}
       onChangeFocus={onChangeFocusA}
     >
       <div id="child-a" />
@@ -119,9 +117,7 @@ test('should unfocus when another component is clicked', async () => {
     <WithPopoverMenu
       {...props}
       editMode
-      shouldFocus={(event, container, _menuRef) =>
-        container?.contains(event.target) ?? false
-      }
+      shouldFocus={(event, container) => container?.contains(event.target)}
       onChangeFocus={onChangeFocusB}
     >
       <div id="child-b" />

superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx

@@ -16,15 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  ReactNode,
-  CSSProperties,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  memo,
-} from 'react';
+import { ReactNode, CSSProperties, PureComponent } from 'react';
 import cx from 'classnames';
 import { addAlpha } from '@superset-ui/core';
 import { css, styled } from '@apache-superset/core/theme';
@@ -34,32 +26,26 @@ type ShouldFocusContainer = HTMLDivElement & {
 };
 
 interface WithPopoverMenuProps {
-  children?: ReactNode;
-  disableClick?: boolean;
-  menuItems?: ReactNode[];
-  onChangeFocus?: ((focus: boolean) => void) | null;
-  isFocused?: boolean;
-  // Event argument is left as "any" because of the clash. In props it seems
+  children: ReactNode;
+  disableClick: boolean;
+  menuItems: ReactNode[];
+  onChangeFocus: (focus: boolean) => void;
+  isFocused: boolean;
+  // Event argument is left as "any" because of the clash. In defaultProps it seems
   // like it should be React.FocusEvent<>, however from handleClick() we can also
   // derive that type is EventListenerOrEventListenerObject.
-  shouldFocus?: (
+  shouldFocus: (
     event: any,
-    container: ShouldFocusContainer | null,
+    container: ShouldFocusContainer,
     menuRef: HTMLDivElement | null,
   ) => boolean;
-  editMode?: boolean;
-  style?: CSSProperties | null;
+  editMode: boolean;
+  style: CSSProperties;
 }
 
-const defaultShouldFocus = (
-  event: any,
-  container: ShouldFocusContainer | null,
-  menuRef: HTMLDivElement | null,
-): boolean => {
-  if (container?.contains(event.target)) return true;
-  if (menuRef?.contains(event.target)) return true;
-  return false;
-};
+interface WithPopoverMenuState {
+  isFocused: boolean;
+}
 
 const WithPopoverMenuStyles = styled.div`
   ${({ theme }) => css`
@@ -118,114 +104,151 @@ const PopoverMenuStyles = styled.div`
   `}
 `;
 
-function WithPopoverMenu({
-  children = null,
-  disableClick = false,
-  menuItems = [],
-  onChangeFocus = null,
-  isFocused: isFocusedProp = false,
-  shouldFocus: shouldFocusFunc = defaultShouldFocus,
-  editMode = false,
-  style = null,
-}: WithPopoverMenuProps) {
-  const [isFocused, setIsFocused] = useState(isFocusedProp);
-  const containerRef = useRef<ShouldFocusContainer | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  // Tracks the native event that just triggered focus via the container's
-  // onClick so the document-level listener (registered once focused) can
-  // skip it. Without this, the same click bubbles to document after a
-  // re-render has detached its event.target, causing shouldFocus to return
-  // false and immediately undoing the focus.
-  const focusEventRef = useRef<Event | null>(null);
+export default class WithPopoverMenu extends PureComponent<
+  WithPopoverMenuProps,
+  WithPopoverMenuState
+> {
+  container: ShouldFocusContainer;
 
-  const handleClick = useCallback(
-    (event: any) => {
-      if (!editMode) {
-        return;
-      }
+  menuRef: HTMLDivElement | null;
 
-      const nativeEvent = event.nativeEvent || event;
-      if (focusEventRef.current === nativeEvent) {
-        focusEventRef.current = null;
-        return;
-      }
+  focusEvent: Event | null;
 
-      const shouldFocusResult = shouldFocusFunc(
-        event,
-        containerRef.current,
-        menuRef.current,
-      );
-
-      if (shouldFocusResult === isFocused) return;
-
-      if (!disableClick && shouldFocusResult && !isFocused) {
-        focusEventRef.current = nativeEvent;
-        setIsFocused(true);
-        if (onChangeFocus) onChangeFocus(true);
-      } else if (!shouldFocusResult && isFocused) {
-        setIsFocused(false);
-        if (onChangeFocus) onChangeFocus(false);
-      }
+  static defaultProps = {
+    children: null,
+    disableClick: false,
+    onChangeFocus: null,
+    menuItems: [],
+    isFocused: false,
+    shouldFocus: (
+      event: any,
+      container: ShouldFocusContainer,
+      menuRef: HTMLDivElement | null,
+    ) => {
+      if (container?.contains(event.target)) return true;
+      if (menuRef?.contains(event.target)) return true;
+      return false;
     },
-    [editMode, shouldFocusFunc, isFocused, disableClick, onChangeFocus],
-  );
+    style: null,
+  };
 
-  // Keep the latest handleClick in a ref so the document listeners can be
-  // registered via a stable wrapper. This keeps the listener effect dependent
-  // only on focus/editMode transitions, instead of thrashing (remove + re-add)
-  // every time handleClick's identity changes.
-  const handleClickRef = useRef(handleClick);
-  useEffect(() => {
-    handleClickRef.current = handleClick;
-  }, [handleClick]);
+  constructor(props: WithPopoverMenuProps) {
+    super(props);
+    this.state = {
+      isFocused: props.isFocused!,
+    };
+    this.menuRef = null;
+    this.focusEvent = null;
+    this.setRef = this.setRef.bind(this);
+    this.setMenuRef = this.setMenuRef.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
 
-  // Handle prop-driven focus changes and add/remove document listeners
-  useEffect(() => {
-    if (editMode && isFocusedProp && !isFocused) {
-      setIsFocused(true);
-    } else if (isFocused && !editMode) {
-      setIsFocused(false);
+  componentDidUpdate(prevProps: WithPopoverMenuProps) {
+    if (this.props.editMode && this.props.isFocused && !this.state.isFocused) {
+      document.addEventListener('click', this.handleClick);
+      document.addEventListener('drag', this.handleClick);
+      this.setState({ isFocused: true });
+    } else if (this.state.isFocused && !this.props.editMode) {
+      document.removeEventListener('click', this.handleClick);
+      document.removeEventListener('drag', this.handleClick);
+      this.setState({ isFocused: false });
     }
-  }, [editMode, isFocusedProp, isFocused]);
+  }
 
-  // Add/remove document event listeners only on focus/editMode transitions.
-  useEffect(() => {
-    if (isFocused && editMode) {
-      const listener = (event: Event) => handleClickRef.current(event);
-      document.addEventListener('click', listener);
-      document.addEventListener('drag', listener);
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick);
+    document.removeEventListener('drag', this.handleClick);
+  }
 
-      return () => {
-        document.removeEventListener('click', listener);
-        document.removeEventListener('drag', listener);
-      };
+  setRef(ref: ShouldFocusContainer) {
+    this.container = ref;
+  }
+
+  setMenuRef(ref: HTMLDivElement | null) {
+    this.menuRef = ref;
+  }
+
+  shouldHandleFocusChange(shouldFocus: boolean): boolean {
+    const { disableClick } = this.props;
+    const { isFocused } = this.state;
+
+    return (
+      (!disableClick && shouldFocus && !isFocused) ||
+      (!shouldFocus && isFocused)
+    );
+  }
+
+  handleClick(event: any) {
+    if (!this.props.editMode) {
+      return;
     }
-    return undefined;
-  }, [isFocused, editMode]);
 
-  return (
-    <WithPopoverMenuStyles
-      ref={containerRef}
-      onClick={handleClick}
-      role="none"
-      className={cx(
-        'with-popover-menu',
-        editMode && isFocused && 'with-popover-menu--focused',
-      )}
-      style={style ?? undefined}
-    >
-      {children}
-      {editMode && isFocused && menuItems?.some(Boolean) && (
-        <PopoverMenuStyles ref={menuRef}>
-          {menuItems.map((node: ReactNode, i: number) => (
-            <div className="menu-item" key={`menu-item-${i}`}>
-              {node}
-            </div>
-          ))}
-        </PopoverMenuStyles>
-      )}
-    </WithPopoverMenuStyles>
-  );
+    // Skip if this is the same event that just triggered focus via onClick.
+    // The document-level listener registered during focus will see the same
+    // event bubble up; by that time a re-render may have detached the
+    // original event.target, causing shouldFocus to return false and
+    // immediately undoing the focus.
+    const nativeEvent = event.nativeEvent || event;
+    if (this.focusEvent === nativeEvent) {
+      this.focusEvent = null;
+      return;
+    }
+
+    const {
+      onChangeFocus,
+      shouldFocus: shouldFocusFunc,
+      disableClick,
+    } = this.props;
+
+    const shouldFocus = shouldFocusFunc(event, this.container, this.menuRef);
+
+    if (shouldFocus === this.state.isFocused) return;
+
+    if (!disableClick && shouldFocus && !this.state.isFocused) {
+      document.addEventListener('click', this.handleClick);
+      document.addEventListener('drag', this.handleClick);
+      this.focusEvent = event.nativeEvent || event;
+
+      this.setState(() => ({ isFocused: true }));
+
+      if (onChangeFocus) onChangeFocus(true);
+    } else if (!shouldFocus && this.state.isFocused) {
+      document.removeEventListener('click', this.handleClick);
+      document.removeEventListener('drag', this.handleClick);
+
+      this.setState(() => ({ isFocused: false }));
+
+      if (onChangeFocus) onChangeFocus(false);
+    }
+  }
+
+  render() {
+    const { children, menuItems, editMode, style } = this.props;
+    const { isFocused } = this.state;
+
+    return (
+      <WithPopoverMenuStyles
+        ref={this.setRef}
+        onClick={this.handleClick}
+        role="none"
+        className={cx(
+          'with-popover-menu',
+          editMode && isFocused && 'with-popover-menu--focused',
+        )}
+        style={style}
+      >
+        {children}
+        {editMode && isFocused && (menuItems?.length ?? 0) > 0 && (
+          <PopoverMenuStyles ref={this.setMenuRef}>
+            {menuItems.map((node: ReactNode, i: number) => (
+              <div className="menu-item" key={`menu-item-${i}`}>
+                {node}
+              </div>
+            ))}
+          </PopoverMenuStyles>
+        )}
+      </WithPopoverMenuStyles>
+    );
+  }
 }
-
-export default memo(WithPopoverMenu);

superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/BaseConfigModal.tsx

@@ -0,0 +1,148 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ReactNode, useState, useCallback } from 'react';
+import type { FormInstance } from '@superset-ui/core/components';
+import { ErrorBoundary } from 'src/components/ErrorBoundary';
+import { BaseModalBody, BaseForm, BaseModalWrapper } from './SharedStyles';
+import { ModalFooter } from './ModalFooter';
+
+export interface BaseConfigModalProps {
+  isOpen: boolean;
+  title: string;
+  expanded?: boolean;
+  onCancel: () => void;
+  onSave: () => void;
+  leftPane: ReactNode;
+  rightPane: ReactNode;
+  footer?: ReactNode;
+  form?: FormInstance;
+  onValuesChange?: (changedValues: any, allValues: any) => void;
+  canSave?: boolean;
+  saveAlertVisible?: boolean;
+  onDismissSaveAlert?: () => void;
+  onConfirmCancel?: () => void;
+  onToggleExpand?: () => void;
+  testId?: string;
+  maskClosable?: boolean;
+  destroyOnClose?: boolean;
+  centered?: boolean;
+}
+
+export const BaseConfigModal = ({
+  isOpen,
+  title,
+  expanded = false,
+  onCancel,
+  onSave,
+  leftPane,
+  rightPane,
+  footer,
+  form,
+  onValuesChange,
+  canSave = true,
+  saveAlertVisible = false,
+  onDismissSaveAlert,
+  onConfirmCancel,
+  onToggleExpand,
+  testId = 'base-config-modal',
+  maskClosable = false,
+  destroyOnClose = true,
+  centered = true,
+}: BaseConfigModalProps) => {
+  const [internalExpanded, setInternalExpanded] = useState(false);
+
+  const isExpandedControlled = onToggleExpand !== undefined;
+  const isExpanded = isExpandedControlled ? expanded : internalExpanded;
+
+  const handleToggleExpand = useCallback(() => {
+    if (isExpandedControlled && onToggleExpand) {
+      onToggleExpand();
+    } else {
+      setInternalExpanded(!internalExpanded);
+    }
+  }, [isExpandedControlled, onToggleExpand, internalExpanded]);
+
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  const handleSave = useCallback(() => {
+    onSave();
+  }, [onSave]);
+
+  const handleDismissSaveAlert = useCallback(() => {
+    if (onDismissSaveAlert) {
+      onDismissSaveAlert();
+    }
+  }, [onDismissSaveAlert]);
+
+  const handleConfirmCancel = useCallback(() => {
+    if (onConfirmCancel) {
+      onConfirmCancel();
+    } else {
+      onCancel();
+    }
+  }, [onConfirmCancel, onCancel]);
+
+  const defaultFooter = (
+    <ModalFooter
+      onCancel={handleCancel}
+      onSave={handleSave}
+      onConfirmCancel={handleConfirmCancel}
+      onDismiss={handleDismissSaveAlert}
+      saveAlertVisible={saveAlertVisible}
+      canSave={canSave}
+      expanded={isExpanded}
+      onToggleExpand={handleToggleExpand}
+      saveButtonTestId={`${testId}-save-button`}
+      cancelButtonTestId={`${testId}-cancel-button`}
+    />
+  );
+
+  return (
+    <BaseModalWrapper
+      open={isOpen}
+      onCancel={handleCancel}
+      onOk={handleSave}
+      title={title}
+      footer={footer || defaultFooter}
+      centered={centered}
+      destroyOnClose={destroyOnClose}
+      maskClosable={maskClosable}
+      data-test={testId}
+      expanded={isExpanded}
+    >
+      <ErrorBoundary>
+        <BaseModalBody expanded={isExpanded}>
+          <BaseForm
+            form={form}
+            onValuesChange={onValuesChange}
+            layout="vertical"
+            css={{ width: '100%' }}
+          >
+            {leftPane}
+            {rightPane}
+          </BaseForm>
+        </BaseModalBody>
+      </ErrorBoundary>
+    </BaseModalWrapper>
+  );
+};
+
+export default BaseConfigModal;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.test.tsx

@@ -1,228 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { NativeFilterType } from '@superset-ui/core';
-import type { Filter } from '@superset-ui/core';
-import FilterValue from './FilterValue';
-
-const mockGetChartDataRequest = jest.fn();
-jest.mock('src/components/Chart/chartAction', () => ({
-  getChartDataRequest: (...args: unknown[]) => mockGetChartDataRequest(...args),
-}));
-
-jest.mock('src/middleware/asyncEvent', () => ({
-  waitForAsyncData: jest.fn(),
-}));
-
-jest.mock('@superset-ui/core', () => {
-  const original = jest.requireActual('@superset-ui/core');
-  return {
-    ...original,
-    getChartMetadataRegistry: () => ({
-      get: () => ({ enableNoResults: false }),
-    }),
-    SuperChart: (props: Record<string, unknown>) => (
-      <div data-test="mock-super-chart" data-chart-type={props.chartType}>
-        SuperChart
-      </div>
-    ),
-    isFeatureEnabled: () => false,
-    getClientErrorObject: (_err: unknown) =>
-      Promise.resolve({
-        message: 'Something went wrong',
-        errors: [
-          { message: 'Test error', error_type: 'GENERIC_BACKEND_ERROR' },
-        ],
-      }),
-  };
-});
-
-jest.mock('../useFilterOutlined', () => ({
-  useFilterOutlined: () => ({
-    outlinedFilterId: undefined,
-    lastUpdated: 0,
-  }),
-}));
-
-const mockUseFilterDependencies = jest.fn().mockReturnValue({});
-const mockUseTransitiveParentIds = jest.fn().mockReturnValue([]);
-jest.mock('./state', () => ({
-  useFilterDependencies: (...args: unknown[]) =>
-    mockUseFilterDependencies(...args),
-  useTransitiveParentIds: (...args: unknown[]) =>
-    mockUseTransitiveParentIds(...args),
-}));
-
-const mockStore = configureStore([thunk]);
-
-const createMockFilter = (overrides: Partial<Filter> = {}): Filter => ({
-  id: 'NATIVE_FILTER-1',
-  name: 'Test Filter',
-  filterType: 'filter_select',
-  targets: [{ datasetId: 1, column: { name: 'country' } }],
-  defaultDataMask: {},
-  controlValues: {},
-  cascadeParentIds: [],
-  scope: { rootPath: ['ROOT_ID'], excluded: [] },
-  type: NativeFilterType.NativeFilter,
-  description: 'Test filter description',
-  ...overrides,
-});
-
-const getDefaultStoreState = () => ({
-  dashboardInfo: { id: 1 },
-  dashboardState: {
-    isRefreshing: false,
-    isFiltersRefreshing: false,
-    directPathToChild: [],
-    directPathLastUpdated: 0,
-  },
-  nativeFilters: {
-    filters: {
-      'NATIVE_FILTER-1': createMockFilter(),
-    },
-    filterSets: {},
-  },
-  dataMask: {},
-  charts: {},
-  dashboardLayout: { present: {} },
-});
-
-const defaultProps = {
-  filter: createMockFilter(),
-  dataMaskSelected: {},
-  onFilterSelectionChange: jest.fn(),
-  inView: true,
-};
-
-function renderFilterValue(
-  propOverrides: Record<string, unknown> = {},
-  stateOverrides: Record<string, unknown> = {},
-) {
-  const state = { ...getDefaultStoreState(), ...stateOverrides };
-  const store = mockStore(state);
-  const mergedProps = { ...defaultProps, ...propOverrides };
-  return render(
-    <Provider store={store}>
-      <FilterValue {...(mergedProps as typeof defaultProps)} />
-    </Provider>,
-  );
-}
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-test('renders loading spinner when filter has a data source', () => {
-  mockGetChartDataRequest.mockReturnValue(new Promise(() => {}));
-
-  renderFilterValue();
-
-  expect(screen.getByRole('status')).toBeInTheDocument();
-  expect(screen.queryByTestId('mock-super-chart')).not.toBeInTheDocument();
-});
-
-test('renders SuperChart after data loads successfully', async () => {
-  mockGetChartDataRequest.mockResolvedValue({
-    response: { status: 200 },
-    json: { result: [{ data: [{ country: 'US' }] }] },
-  });
-
-  renderFilterValue();
-
-  await waitFor(() => {
-    expect(screen.getByTestId('mock-super-chart')).toBeInTheDocument();
-  });
-
-  expect(screen.queryByRole('status')).not.toBeInTheDocument();
-});
-
-test('renders error state when API call fails', async () => {
-  mockGetChartDataRequest.mockRejectedValue(
-    new Response(JSON.stringify({ message: 'Server Error' }), { status: 500 }),
-  );
-
-  renderFilterValue();
-
-  await waitFor(() => {
-    expect(screen.queryByRole('status')).not.toBeInTheDocument();
-  });
-
-  // No ErrorMessageComponent is registered for GENERIC_BACKEND_ERROR in the
-  // test environment, so FilterValue renders its fallback ErrorAlert.
-  expect(await screen.findByText('Network error')).toBeInTheDocument();
-});
-
-test('does not fetch data when filter has not been in view', () => {
-  renderFilterValue({ inView: false });
-
-  expect(mockGetChartDataRequest).not.toHaveBeenCalled();
-});
-
-test('does not render loading spinner when filter has no data source', () => {
-  const filterWithoutDataSource = createMockFilter({
-    targets: [{ column: { name: 'country' } }],
-  });
-  mockGetChartDataRequest.mockReturnValue(new Promise(() => {}));
-
-  renderFilterValue({ filter: filterWithoutDataSource });
-
-  expect(screen.queryByRole('status')).not.toBeInTheDocument();
-  expect(screen.getByTestId('mock-super-chart')).toBeInTheDocument();
-});
-
-test('skips data fetch when cascade parent filters have no values selected', () => {
-  // useFilterDependencies returns dependencies with a filter (from parent defaults),
-  // but dataMaskSelected has no extraFormData for the parent -- counts disagree, so
-  // the component skips the fetch.
-  mockUseFilterDependencies.mockReturnValue({
-    filters: [{ col: 'region', op: 'IN', val: ['US'] }],
-  });
-  mockUseTransitiveParentIds.mockReturnValue(['NATIVE_FILTER-PARENT']);
-
-  const childFilter = createMockFilter({
-    id: 'NATIVE_FILTER-CHILD',
-    cascadeParentIds: ['NATIVE_FILTER-PARENT'],
-  });
-
-  const stateWithParent = {
-    nativeFilters: {
-      filters: {
-        'NATIVE_FILTER-CHILD': childFilter,
-        'NATIVE_FILTER-PARENT': createMockFilter({
-          id: 'NATIVE_FILTER-PARENT',
-        }),
-      },
-      filterSets: {},
-    },
-  };
-
-  renderFilterValue(
-    {
-      filter: childFilter,
-      dataMaskSelected: {},
-    },
-    stateWithParent,
-  );
-
-  expect(mockGetChartDataRequest).not.toHaveBeenCalled();
-});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -41,8 +41,7 @@ import {
   getClientErrorObject,
   isChartCustomization,
 } from '@superset-ui/core';
-import { styled, SupersetTheme } from '@apache-superset/core/theme';
-import { useTheme } from '@emotion/react';
+import { styled } from '@apache-superset/core/theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEqual, isEqualWith } from 'lodash';
 import { getChartDataRequest } from 'src/components/Chart/chartAction';
@@ -142,7 +141,6 @@ const FilterValue: FC<FilterValueProps> = ({
   clearAllTrigger,
   onClearAllComplete,
 }) => {
-  const theme = useTheme() as SupersetTheme;
   const { id, targets, filterType } = filter;
   const isCustomization = isChartCustomization(filter);
   const allowedTimeGrains = isCustomization
@@ -489,7 +487,6 @@ const FilterValue: FC<FilterValueProps> = ({
           enableNoResults={metadata?.enableNoResults}
           isRefreshing={isRefreshing}
           hooks={hooks}
-          theme={theme}
         />
       )}
     </StyledDiv>

superset-frontend/src/dashboard/util/charts/useAllChartIds.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useSelector } from 'react-redux';
+import { useMemo } from 'react';
+import { RootState } from 'src/dashboard/types';
+import getChartIdsFromLayout from '../getChartIdsFromLayout';
+
+export const useAllChartIds = () => {
+  const layout = useSelector(
+    (state: RootState) => state.dashboardLayout.present,
+  );
+  return useMemo(() => getChartIdsFromLayout(layout), [layout]);
+};

superset-frontend/src/dashboard/util/logging/findTopLevelComponentIds.ts

@@ -0,0 +1,113 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Layout, LayoutItem } from 'src/dashboard/types';
+import { TAB_TYPE, DASHBOARD_GRID_TYPE } from '../componentTypes';
+import { DASHBOARD_ROOT_ID } from '../constants';
+import findNonTabChildChartIds from './findNonTabChildChartIds';
+
+interface TopLevelNode {
+  id: string;
+  type: string;
+  parent_type: string | null;
+  parent_id: string | null;
+  index: number | null;
+  depth: number;
+  slice_ids: number[];
+}
+
+interface RecurseParams {
+  node: LayoutItem | undefined;
+  index?: number | null;
+  depth: number;
+  parentType?: string | null;
+  parentId?: string | null;
+}
+
+// This function traverses the layout to identify top grid + tab level components
+// for which we track load times
+function findTopLevelComponentIds(layout: Layout): TopLevelNode[] {
+  const topLevelNodes: TopLevelNode[] = [];
+
+  function recurseFromNode({
+    node,
+    index = null,
+    depth,
+    parentType = null,
+    parentId = null,
+  }: RecurseParams): void {
+    if (!node) return;
+
+    let nextParentType = parentType;
+    let nextParentId = parentId;
+    let nextDepth = depth;
+    if (node.type === TAB_TYPE || node.type === DASHBOARD_GRID_TYPE) {
+      const chartIds = findNonTabChildChartIds({
+        layout,
+        id: node.id,
+      });
+
+      topLevelNodes.push({
+        id: node.id,
+        type: node.type,
+        parent_type: parentType,
+        parent_id: parentId,
+        index,
+        depth,
+        slice_ids: chartIds,
+      });
+
+      nextParentId = node.id;
+      nextParentType = node.type;
+      nextDepth += 1;
+    }
+    if (node.children && node.children.length) {
+      node.children.forEach((childId, childIndex) => {
+        recurseFromNode({
+          node: layout[childId],
+          index: childIndex,
+          parentType: nextParentType,
+          parentId: nextParentId,
+          depth: nextDepth,
+        });
+      });
+    }
+  }
+
+  recurseFromNode({
+    node: layout[DASHBOARD_ROOT_ID],
+    depth: 0,
+  });
+
+  return topLevelNodes;
+}
+
+// This method is called frequently, so cache results
+let cachedLayout: Layout | undefined;
+let cachedTopLevelNodes: TopLevelNode[] = [];
+export default function findTopLevelComponentIdsWithCache(
+  layout: Layout,
+): TopLevelNode[] {
+  if (layout === cachedLayout) {
+    return cachedTopLevelNodes;
+  }
+  cachedLayout = layout;
+  cachedTopLevelNodes = findTopLevelComponentIds(layout);
+
+  return cachedTopLevelNodes;
+}

superset-frontend/src/dashboard/util/logging/getLoadStatsPerTopLevelComponent.ts

@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartState } from 'src/explore/types';
+import { Layout } from 'src/dashboard/types';
+import findTopLevelComponentIds from './findTopLevelComponentIds';
+import childChartsDidLoad from './childChartsDidLoad';
+
+interface GetLoadStatsParams {
+  layout: Layout;
+  chartQueries: Record<string, Partial<ChartState>>;
+}
+
+interface LoadStats {
+  didLoad: boolean;
+  id: string;
+  minQueryStartTime: number | null;
+  [key: string]: unknown;
+}
+
+export default function getLoadStatsPerTopLevelComponent({
+  layout,
+  chartQueries,
+}: GetLoadStatsParams): Record<string, LoadStats> {
+  const topLevelComponents = findTopLevelComponentIds(layout);
+  const stats: Record<string, LoadStats> = {};
+  topLevelComponents.forEach(topLevelComponent => {
+    const { id, ...restStats } = topLevelComponent;
+    const { didLoad, minQueryStartTime } = childChartsDidLoad({
+      id,
+      layout,
+      chartQueries,
+    });
+
+    stats[id] = {
+      didLoad,
+      id,
+      minQueryStartTime,
+      ...restStats,
+    };
+  });
+
+  return stats;
+}

superset-frontend/src/dashboard/util/setPeriodicRunner.ts

@@ -0,0 +1,42 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export const stopPeriodicRender = (refreshTimer?: number) => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+  }
+};
+
+interface SetPeriodicRunnerProps {
+  interval?: number;
+  periodicRender: TimerHandler;
+  refreshTimer?: number;
+}
+
+export default function setPeriodicRunner({
+  interval = 0,
+  periodicRender,
+  refreshTimer,
+}: SetPeriodicRunnerProps) {
+  stopPeriodicRender(refreshTimer);
+
+  if (interval > 0) {
+    return setInterval(periodicRender, interval);
+  }
+  return 0;
+}

superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx

@@ -437,32 +437,6 @@ describe('UploadDataModal - Form Validation', () => {
       expect(screen.getByText('Table name is required')).toBeInTheDocument();
     });
   });
-
-  test('database validation error clears after selecting a database', async () => {
-    render(<UploadDataModal {...csvProps} />, { useRedux: true });
-
-    const uploadButton = screen.getByRole('button', { name: 'Upload' });
-    await userEvent.click(uploadButton);
-
-    await waitFor(() => {
-      expect(
-        screen.getByText('Selecting a database is required'),
-      ).toBeInTheDocument();
-    });
-
-    const selectDatabase = screen.getByRole('combobox', {
-      name: /select a database/i,
-    });
-    await userEvent.click(selectDatabase);
-    await waitFor(() => screen.getByText('database1'));
-    await userEvent.click(screen.getByText('database1'));
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText('Selecting a database is required'),
-      ).not.toBeInTheDocument();
-    });
-  });
 });
 
 // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks

superset-frontend/src/features/databases/UploadDataModel/index.tsx

@@ -578,11 +578,8 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
     return Promise.resolve();
   };
 
-  const validateDatabase = (
-    _: any,
-    value: { value: number; label: string } | null | undefined,
-  ) => {
-    if (!value?.value) {
+  const validateDatabase = (_: any, value: string) => {
+    if (!currentDatabaseId) {
       return Promise.reject(t('Selecting a database is required'));
     }
     return Promise.resolve();

superset-frontend/src/features/tags/TagCard.tsx

@@ -0,0 +1,126 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Link } from 'react-router-dom';
+import { t } from '@apache-superset/core/translation';
+import { isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
+import { CardStyles } from 'src/views/CRUD/utils';
+import {
+  Button,
+  Dropdown,
+  ConfirmStatusChange,
+  ListViewCard,
+} from '@superset-ui/core/components';
+import { MenuItem } from '@superset-ui/core/components/Menu';
+import { Icons } from '@superset-ui/core/components/Icons';
+import { Tag } from 'src/views/CRUD/types';
+import { deleteTags } from 'src/features/tags/tags';
+import { assetUrl } from 'src/utils/assetUrl';
+
+interface TagCardProps {
+  tag: Tag;
+  hasPerm: (name: string) => boolean;
+  bulkSelectEnabled: boolean;
+  refreshData: () => void;
+  loading: boolean;
+  addDangerToast: (msg: string) => void;
+  addSuccessToast: (msg: string) => void;
+  tagFilter?: string;
+  userId?: string | number;
+  showThumbnails?: boolean;
+}
+
+function TagCard({
+  tag,
+  hasPerm,
+  refreshData,
+  addDangerToast,
+  addSuccessToast,
+  showThumbnails,
+}: TagCardProps) {
+  const canDelete = hasPerm('can_write');
+
+  const handleTagDelete = (tag: Tag) => {
+    deleteTags([tag], addSuccessToast, addDangerToast);
+    refreshData();
+  };
+
+  const menuItems: MenuItem[] = [];
+  if (canDelete) {
+    menuItems.push({
+      key: 'delete-tag',
+      label: (
+        <ConfirmStatusChange
+          title={t('Please confirm')}
+          description={
+            <>
+              {t('Are you sure you want to delete')} <b>{tag.name}</b>?
+            </>
+          }
+          onConfirm={() => handleTagDelete(tag)}
+        >
+          {confirmDelete => (
+            <div
+              role="button"
+              tabIndex={0}
+              className="action-button"
+              onClick={confirmDelete}
+              data-test="dashboard-card-option-delete-button"
+            >
+              <Icons.DeleteOutlined iconSize="l" /> {t('Delete')}
+            </div>
+          )}
+        </ConfirmStatusChange>
+      ),
+    });
+  }
+  return (
+    <CardStyles>
+      <ListViewCard
+        title={tag.name}
+        cover={
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
+            <></>
+          ) : null
+        }
+        url={undefined}
+        linkComponent={Link}
+        imgFallbackURL={assetUrl(
+          '/static/assets/images/dashboard-card-fallback.svg',
+        )}
+        description={t('Modified %s', tag.changed_on_delta_humanized)}
+        actions={
+          <ListViewCard.Actions
+            onClick={e => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          >
+            <Dropdown menu={{ items: menuItems }} trigger={['click', 'hover']}>
+              <Button buttonSize="xsmall" buttonStyle="link">
+                <Icons.MoreOutlined iconSize="xl" />
+              </Button>
+            </Dropdown>
+          </ListViewCard.Actions>
+        }
+      />
+    </CardStyles>
+  );
+}
+
+export default TagCard;

superset-frontend/src/hooks/useMemoCompare.ts

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+import { isDefined } from '@superset-ui/core';
+
+export const useMemoCompare = <T>(
+  next: T,
+  compare: (prev: T | undefined, next: T) => boolean,
+) => {
+  const previousRef = useRef<T>();
+  const previous = previousRef.current;
+  const isEqual = compare(previous, next);
+  useEffect(() => {
+    if (!isEqual) {
+      previousRef.current = next;
+    }
+  });
+  if (!isDefined(previous)) {
+    return next;
+  }
+  return isEqual ? previous : next;
+};

superset-frontend/src/hooks/useOpenerRef.ts

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useOpenerRef(active: boolean) {
+  const openerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (active) {
+      openerRef.current = document.activeElement as HTMLElement;
+    }
+  }, [active]);
+
+  return openerRef;
+}

superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts

@@ -0,0 +1,30 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export enum DashboardVirtualizationMode {
+  None = 'NONE',
+  Viewport = 'VIEWPORT',
+  Paginated = 'PAGINATED',
+}
+
+export const isDashboardVirtualizationEnabled = (
+  virtualizationMode: DashboardVirtualizationMode,
+) =>
+  virtualizationMode === DashboardVirtualizationMode.Viewport ||
+  virtualizationMode === DashboardVirtualizationMode.Paginated;

superset/charts/schemas.py

@@ -1454,21 +1454,6 @@ class ChartDataQueryObjectSchema(Schema):
         allow_none=True,
     )
 
-    @post_load
-    def rename_deprecated_fields(
-        self, data: dict[str, Any], **kwargs: Any
-    ) -> dict[str, Any]:
-        _renames = (
-            ("groupby", "columns"),
-            ("granularity_sqla", "granularity"),
-            ("timeseries_limit", "series_limit"),
-            ("timeseries_limit_metric", "series_limit_metric"),
-        )
-        for old, new in _renames:
-            if value := data.pop(old, None):
-                data[new] = value
-        return data
-
 
 class ChartDataQueryContextSchema(Schema):
     query_context_factory: QueryContextFactory | None = None

superset/commands/report/execute.py

@@ -1157,6 +1157,7 @@ class AsyncExecuteReportScheduleCommand(BaseCommand):
         self._scheduled_dttm = scheduled_dttm
         self._execution_id = UUID(task_id)
 
+    @transaction()
     def run(self) -> None:
         try:
             self.validate()
@@ -1169,21 +1170,6 @@ class AsyncExecuteReportScheduleCommand(BaseCommand):
             )
             user = security_manager.find_user(username)
 
-            with override_user(user):
-                # Pre-commit any permalink rows before the state machine's
-                # @transaction() opens. When called inside a transaction,
-                # CreateDashboardPermalinkCommand only flushes (not commits),
-                # leaving the row invisible to Playwright's separate DB
-                # connection. Running get_dashboard_urls() here — outside any
-                # transaction — lets the command commit normally. The state
-                # machine's inner call to get_dashboard_urls() hits get_entry()
-                # for the same deterministic UUID and returns the
-                # already-committed row without a second INSERT.
-                if self._model.dashboard_id:
-                    BaseReportState(
-                        self._model, self._scheduled_dttm, self._execution_id
-                    ).get_dashboard_urls()
-
             start_time = datetime.utcnow()
             with override_user(user):
                 ReportScheduleStateMachine(

superset/config.py

@@ -1731,9 +1731,14 @@ SMTP_USER = "superset"
 SMTP_PORT = 25
 SMTP_PASSWORD = "superset"  # noqa: S105
 SMTP_MAIL_FROM = "superset@superset.com"
-# If True creates a default SSL context with ssl.Purpose.CLIENT_AUTH using the
-# default system root CA certificates.
-SMTP_SSL_SERVER_AUTH = False
+# If True creates a default SSL context with ssl.Purpose.SERVER_AUTH using the
+# default system root CA certificates. This makes STARTTLS/SSL connections to the
+# SMTP server validate the server's certificate against the trusted CA store.
+# Defaults to True so the mail server identity is verified out of the box. Set to
+# False to restore the previous behavior of skipping certificate validation (for
+# example, when using a self-signed certificate that is not in the system CA
+# store).
+SMTP_SSL_SERVER_AUTH = True
 ENABLE_CHUNK_ENCODING = False
 
 # Whether to bump the logging level to ERROR on the flask_appbuilder package

superset/db_engine_specs/bigquery.py

@@ -195,7 +195,6 @@ class BigQueryEngineSpec(BaseEngineSpec):  # pylint: disable=too-many-public-met
     allows_hidden_cc_in_orderby = True
 
     supports_catalog = supports_dynamic_catalog = supports_cross_catalog_queries = True
-    supports_dynamic_schema = True
 
     # when editing the database, mask this field in `encrypted_extra`
     # pylint: disable=invalid-name
@@ -741,41 +740,11 @@ class BigQueryEngineSpec(BaseEngineSpec):  # pylint: disable=too-many-public-met
         catalog: str | None = None,
         schema: str | None = None,
     ) -> tuple[URL, dict[str, Any]]:
-        if not uri.host:
-            # Triple-slash form (e.g., bigquery:///project): project is in database.
-            default_catalog = uri.database
-            default_schema = None
-        else:
-            # Standard forms: bigquery://project, bigquery://project/dataset
-            default_catalog = uri.host
-            default_schema = uri.database or None  # coerce empty string to None
-
-        uri = uri.set(
-            host=catalog or default_catalog,
-            database=schema or default_schema,
-        )
+        if catalog:
+            uri = uri.set(host=catalog, database="")
 
         return uri, connect_args
 
-    @classmethod
-    def get_schema_from_engine_params(
-        cls,
-        sqlalchemy_uri: URL,
-        connect_args: dict[str, Any],
-    ) -> str | None:
-        """
-        Return the default dataset encoded in a ``bigquery://project/dataset`` URI.
-
-        The BigQuery SQLAlchemy driver uses the URL ``database`` component as the
-        default dataset, but only when ``host`` (the project) is also present.
-        The triple-slash form ``bigquery:///project`` puts the project in
-        ``database`` with no host, so we guard against misidentifying it as a
-        dataset.
-        """
-        if sqlalchemy_uri.host and sqlalchemy_uri.database:
-            return sqlalchemy_uri.database
-        return None
-
     @classmethod
     def get_allow_cost_estimate(cls, extra: dict[str, Any]) -> bool:
         return True

superset/security/manager.py

@@ -342,43 +342,11 @@ PermissionModelView.include_route_methods = {RouteMethod.LIST}
 ViewMenuModelView.include_route_methods = {RouteMethod.LIST}
 
 
-# Keys on an adhoc column/metric that a guest may legitimately change through a
-# supported native filter, and which therefore must not count as payload
-# tampering. The time grain of a temporal x-axis is baked into its `BASE_AXIS`
-# column by `normalizeTimeColumn` on the frontend (it copies
-# `extras.time_grain_sqla` onto the column), so a Time Grain filter alters the
-# column payload without changing which data is queried.
-GUEST_OVERRIDABLE_VALUE_KEYS = frozenset({"timeGrain"})
-
-
-def _strip_overridable_keys(value: Any) -> Any:
-    """
-    Recursively drop guest-overridable keys from a value.
-
-    Adhoc columns/metrics can be nested inside sequences (e.g. an ``orderby``
-    entry is a ``(column, bool)`` tuple), so the overridable keys must be
-    stripped at every level rather than only from a top-level dict.
-    """
-    if isinstance(value, dict):
-        return {
-            key: _strip_overridable_keys(val)
-            for key, val in value.items()
-            if key not in GUEST_OVERRIDABLE_VALUE_KEYS
-        }
-    if isinstance(value, (list, tuple)):
-        return [_strip_overridable_keys(item) for item in value]
-    return value
-
-
 def freeze_value(value: Any) -> str:
     """
     Used to compare column and metric sets.
-
-    Guest-overridable keys (e.g. the time grain baked into a temporal x-axis
-    column) are dropped so that legitimate native-filter changes don't read as
-    payload tampering.
     """
-    return json.dumps(_strip_overridable_keys(value), sort_keys=True)
+    return json.dumps(value, sort_keys=True)
 
 
 def _native_filter_allowed_targets(

tests/integration_tests/db_engine_specs/bigquery_tests.py

@@ -305,13 +305,6 @@ class TestBigQueryDbEngineSpec(SupersetTestCase):
 
     @mock.patch("superset.models.core.Database.db_engine_spec", BigQueryEngineSpec)
     @mock.patch("sqlalchemy_bigquery._helpers.create_bigquery_client", mock.Mock)
-    @mock.patch(
-        "superset.db_engine_specs.bigquery.BigQueryEngineSpec.adjust_engine_params",
-        new=lambda uri, connect_args, catalog=None, schema=None, **kw: (
-            uri,
-            connect_args,
-        ),
-    )
     @pytest.mark.usefixtures("load_birth_names_dashboard_with_slices")
     def test_calculated_column_in_order_by(self):
         table = self.get_table(name="birth_names")

tests/integration_tests/email_tests.py

@@ -37,9 +37,18 @@ logger = logging.getLogger(__name__)
 
 
 class TestEmailSmtp(SupersetTestCase):
-    def setUp(self):
+    SMTP_CONFIG_KEYS = ("SMTP_SSL", "SMTP_SSL_SERVER_AUTH", "SMTP_STARTTLS")
+
+    def setUp(self) -> None:
+        self._original_smtp_config = {
+            key: current_app.config[key] for key in self.SMTP_CONFIG_KEYS
+        }
         current_app.config["SMTP_SSL"] = False
 
+    def tearDown(self) -> None:
+        current_app.config.update(self._original_smtp_config)
+        super().tearDown()
+
     @mock.patch("superset.utils.core.send_mime_email")
     def test_send_smtp(self, mock_send_mime):
         attachment = tempfile.NamedTemporaryFile()
@@ -208,6 +217,7 @@ class TestEmailSmtp(SupersetTestCase):
     @mock.patch("smtplib.SMTP")
     def test_send_mime_ssl(self, mock_smtp, mock_smtp_ssl):
         current_app.config["SMTP_SSL"] = True
+        current_app.config["SMTP_SSL_SERVER_AUTH"] = False
         mock_smtp.return_value = mock.Mock()
         mock_smtp_ssl.return_value = mock.Mock()
         utils.send_mime_email(

tests/unit_tests/charts/test_schemas.py

@@ -213,53 +213,6 @@ def test_chart_data_query_object_schema_time_grain_sqla_validation(
     assert result["extras"]["time_grain_sqla"] is None
 
 
-def test_chart_data_query_object_schema_deprecated_fields_renamed(
-    app_context: None,
-) -> None:
-    """Deprecated query object fields are renamed to their canonical names."""
-    schema = ChartDataQueryObjectSchema()
-
-    # groupby alone → becomes columns
-    result = schema.load({"groupby": ["country_name"]})
-    assert result.get("columns") == ["country_name"]
-    assert "groupby" not in result
-
-    # groupby overwrites columns when both are provided
-    result = schema.load({"groupby": ["region"], "columns": ["country_name"]})
-    assert result.get("columns") == ["region"]
-    assert "groupby" not in result
-
-    # empty groupby is discarded; existing columns is preserved
-    result = schema.load({"groupby": [], "columns": ["country_name"]})
-    assert result.get("columns") == ["country_name"]
-    assert "groupby" not in result
-
-    # null groupby is discarded; existing columns is preserved (allow_none=True)
-    result = schema.load({"groupby": None, "columns": ["country_name"]})
-    assert result.get("columns") == ["country_name"]
-    assert "groupby" not in result
-
-    # no groupby → columns passes through unchanged
-    result = schema.load({"columns": ["country_name"]})
-    assert result.get("columns") == ["country_name"]
-    assert "groupby" not in result
-
-    # granularity_sqla → granularity
-    result = schema.load({"granularity_sqla": "ds"})
-    assert result.get("granularity") == "ds"
-    assert "granularity_sqla" not in result
-
-    # timeseries_limit → series_limit
-    result = schema.load({"timeseries_limit": 5})
-    assert result.get("series_limit") == 5
-    assert "timeseries_limit" not in result
-
-    # timeseries_limit_metric → series_limit_metric
-    result = schema.load({"timeseries_limit_metric": "count"})
-    assert result.get("series_limit_metric") == "count"
-    assert "timeseries_limit_metric" not in result
-
-
 @pytest.mark.parametrize(
     "app",
     [{"TIME_GRAIN_ADDONS": {"PT10M": "10 minutes"}}],

tests/unit_tests/config_test.py

@@ -312,3 +312,123 @@ def test_full_setting(
     assert dttm_col.is_dttm
     assert dttm_col.python_date_format == "epoch_s"
     assert dttm_col.expression == "CAST(dttm as INTEGER)"
+
+
+def test_smtp_ssl_server_auth_defaults_to_true() -> None:
+    """
+    The shipped default for SMTP_SSL_SERVER_AUTH validates the SMTP server's
+    TLS certificate. Operators can still opt out by overriding it to False.
+    """
+    from superset import config
+
+    assert config.SMTP_SSL_SERVER_AUTH is True
+
+
+def _smtp_config(**overrides: Any) -> dict[str, Any]:
+    """
+    Build a minimal SMTP config dict for ``send_mime_email`` tests, with
+    plaintext transport defaults; keyword ``overrides`` replace any key.
+    """
+    config = {
+        "SMTP_HOST": "localhost",
+        "SMTP_PORT": 25,
+        "SMTP_USER": "",
+        "SMTP_PASSWORD": "",
+        "SMTP_STARTTLS": False,
+        "SMTP_SSL": False,
+        "SMTP_SSL_SERVER_AUTH": True,
+    }
+    config.update(overrides)
+    return config
+
+
+def test_send_mime_email_ssl_server_auth_passes_context(
+    mocker: MockerFixture,
+) -> None:
+    """
+    With SMTP_SSL and SMTP_SSL_SERVER_AUTH enabled, ``send_mime_email`` builds a
+    default SSL context and threads it through to ``smtplib.SMTP_SSL`` so the
+    server certificate is validated.
+    """
+    from email.mime.multipart import MIMEMultipart
+
+    from superset.utils import core as utils
+
+    create_default_context = mocker.patch(
+        "superset.utils.core.ssl.create_default_context"
+    )
+    smtp_ssl = mocker.patch("smtplib.SMTP_SSL")
+    smtp = mocker.patch("smtplib.SMTP")
+
+    utils.send_mime_email(
+        "from",
+        ["to"],
+        MIMEMultipart(),
+        _smtp_config(SMTP_SSL=True, SMTP_SSL_SERVER_AUTH=True),
+        dryrun=False,
+    )
+
+    create_default_context.assert_called_once_with()
+    assert not smtp.called
+    smtp_ssl.assert_called_once_with(
+        "localhost", 25, context=create_default_context.return_value
+    )
+
+
+def test_send_mime_email_starttls_server_auth_passes_context(
+    mocker: MockerFixture,
+) -> None:
+    """
+    With STARTTLS and SMTP_SSL_SERVER_AUTH enabled, ``send_mime_email`` builds a
+    default SSL context and threads it through to ``starttls`` so the server
+    certificate is validated.
+    """
+    from email.mime.multipart import MIMEMultipart
+
+    from superset.utils import core as utils
+
+    create_default_context = mocker.patch(
+        "superset.utils.core.ssl.create_default_context"
+    )
+    smtp = mocker.patch("smtplib.SMTP")
+
+    utils.send_mime_email(
+        "from",
+        ["to"],
+        MIMEMultipart(),
+        _smtp_config(SMTP_STARTTLS=True, SMTP_SSL_SERVER_AUTH=True),
+        dryrun=False,
+    )
+
+    create_default_context.assert_called_once_with()
+    smtp.return_value.starttls.assert_called_once_with(
+        context=create_default_context.return_value
+    )
+
+
+def test_send_mime_email_server_auth_disabled_skips_context(
+    mocker: MockerFixture,
+) -> None:
+    """
+    When SMTP_SSL_SERVER_AUTH is disabled no SSL context is built and ``None`` is
+    passed through, preserving the opt-out (certificate validation skipped).
+    """
+    from email.mime.multipart import MIMEMultipart
+
+    from superset.utils import core as utils
+
+    create_default_context = mocker.patch(
+        "superset.utils.core.ssl.create_default_context"
+    )
+    smtp_ssl = mocker.patch("smtplib.SMTP_SSL")
+
+    utils.send_mime_email(
+        "from",
+        ["to"],
+        MIMEMultipart(),
+        _smtp_config(SMTP_SSL=True, SMTP_SSL_SERVER_AUTH=False),
+        dryrun=False,
+    )
+
+    assert not create_default_context.called
+    smtp_ssl.assert_called_once_with("localhost", 25, context=None)

tests/unit_tests/db_engine_specs/test_bigquery.py

@@ -448,92 +448,7 @@ def test_adjust_engine_params_catalog_as_host() -> None:
         {},
         catalog="other-project",
     )[0]
-    assert uri.host == "other-project"
-    assert not uri.database  # no dataset when only catalog is overridden
-
-
-def test_adjust_engine_params_schema_as_dataset() -> None:
-    """
-    Test that passing a schema sets it as the BigQuery default dataset.
-
-    BigQuery requires table names to be fully qualified (project.dataset.table)
-    unless a default dataset is set via the URL database component. When schema
-    is provided, the URL database should be updated so unqualified table names
-    resolve to schema.table_name.
-    """
-    from superset.db_engine_specs.bigquery import BigQueryEngineSpec
-
-    url = make_url("bigquery://project")
-
-    # Without schema, URL is unchanged
-    uri = BigQueryEngineSpec.adjust_engine_params(url, {})[0]
-    assert str(uri) == "bigquery://project"
-
-    # With schema, database component is set to enable default dataset
-    uri = BigQueryEngineSpec.adjust_engine_params(
-        url,
-        {},
-        schema="my_dataset",
-    )[0]
-    assert uri.database == "my_dataset"
-
-    # catalog + schema: catalog goes to host, schema goes to database
-    uri = BigQueryEngineSpec.adjust_engine_params(
-        url,
-        {},
-        catalog="other-project",
-        schema="my_dataset",
-    )[0]
-    assert uri.host == "other-project"
-    assert uri.database == "my_dataset"
-
-    # Triple-slash form (bigquery:///project): project must not be overwritten
-    triple_slash_url = make_url("bigquery:///my_project")
-    uri = BigQueryEngineSpec.adjust_engine_params(
-        triple_slash_url,
-        {},
-        schema="my_dataset",
-    )[0]
-    assert uri.host == "my_project"
-    assert uri.database == "my_dataset"
-
-
-def test_get_schema_from_engine_params() -> None:
-    """
-    Test that get_schema_from_engine_params returns the dataset from
-    bigquery://project/dataset URIs and None for all other URL forms.
-    """
-    from superset.db_engine_specs.bigquery import BigQueryEngineSpec
-
-    # Standard form: project in host, dataset in database
-    assert (
-        BigQueryEngineSpec.get_schema_from_engine_params(
-            make_url("bigquery://project/my_dataset"), {}
-        )
-        == "my_dataset"
-    )
-
-    # Project-only URI — no default dataset configured
-    assert (
-        BigQueryEngineSpec.get_schema_from_engine_params(
-            make_url("bigquery://project"), {}
-        )
-        is None
-    )
-
-    # Triple-slash form — database component is the project, not a dataset
-    assert (
-        BigQueryEngineSpec.get_schema_from_engine_params(
-            make_url("bigquery:///my_project"), {}
-        )
-        is None
-    )
-
-    # Bare URI — no project, no dataset
-    assert (
-        BigQueryEngineSpec.get_schema_from_engine_params(make_url("bigquery://"), {})
-        is None
-    )
+    assert str(uri) == "bigquery://other-project/"
 
 
 def test_get_materialized_view_names() -> None:

tests/unit_tests/security/manager_test.py

@@ -1218,182 +1218,6 @@ def test_query_context_modified_orderby(mocker: MockerFixture) -> None:
     assert query_context_modified(query_context)
 
 
-def test_query_context_modified_time_grain_native_filter(
-    mocker: MockerFixture,
-) -> None:
-    """
-    Test `query_context_modified` when a guest applies a Time Grain native filter.
-
-    Reproduces https://github.com/apache/superset/issues/32768.
-
-    On a chart that uses a generic x-axis, the selected time grain is baked into the
-    ``BASE_AXIS`` adhoc column as a ``timeGrain`` property (see
-    ``normalizeTimeColumn`` on the frontend, which copies ``extras.time_grain_sqla``
-    onto the column). A Time Grain native filter is a supported, read-only guest
-    interaction: it only changes the granularity at which the *same* dimension is
-    bucketed, never which metrics or columns are queried.
-
-    Previously, because the changed time grain travels inside the ``columns``
-    payload, the subset comparison treated the request as tampering and
-    ``query_context_modified`` returned ``True`` -- so guests hit "Guest user cannot
-    modify chart payload" whenever they picked a grain other than the chart default.
-
-    ``freeze_value`` now drops the guest-overridable ``timeGrain`` key before
-    comparing, so a pure time-grain change is no longer flagged as a modification.
-    This test guards that behavior.
-    """
-    # The chart was saved with a monthly grain on its x-axis column.
-    stored_axis_column: AdhocColumn = {
-        "label": "order_date",
-        "sqlExpression": "order_date",
-        "columnType": "BASE_AXIS",
-        "timeGrain": "P1M",
-    }
-    # The guest picked a daily grain via the dashboard Time Grain native filter;
-    # `normalizeTimeColumn` rewrote the otherwise-identical column accordingly.
-    requested_axis_column: AdhocColumn = {
-        **stored_axis_column,
-        "timeGrain": "P1D",
-    }
-
-    query_context = mocker.MagicMock()
-    query_context.slice_.id = 42
-    query_context.slice_.params_dict = {
-        "metrics": ["count"],
-    }
-    query_context.slice_.query_context = json.dumps(
-        {
-            "queries": [
-                {
-                    "columns": [stored_axis_column],
-                    "metrics": ["count"],
-                }
-            ],
-        }
-    )
-    # Native-filter data requests don't carry the mutated columns at the top level;
-    # the grain change only shows up inside the query's columns.
-    query_context.form_data = {
-        "slice_id": 42,
-        "metrics": ["count"],
-    }
-    query_context.queries = [
-        QueryObject(
-            columns=[requested_axis_column],
-            metrics=["count"],
-        ),
-    ]
-
-    assert not query_context_modified(query_context)
-
-
-def test_query_context_modified_time_grain_with_tampered_column(
-    mocker: MockerFixture,
-) -> None:
-    """
-    Test that relaxing the time grain comparison does not open a tamper hole.
-
-    Only the ``timeGrain`` key is guest-overridable. A request that changes the
-    grain *and* also swaps a non-overridable attribute (here ``sqlExpression``,
-    which selects which column is queried) must still be flagged as tampering --
-    otherwise a guest could query an arbitrary column under cover of a Time Grain
-    filter.
-    """
-    stored_axis_column: AdhocColumn = {
-        "label": "order_date",
-        "sqlExpression": "order_date",
-        "columnType": "BASE_AXIS",
-        "timeGrain": "P1M",
-    }
-    # Guest changes the grain (allowed) but also rewrites the SQL expression to a
-    # different column (not allowed) -- this must still read as a modification.
-    tampered_axis_column: AdhocColumn = {
-        **stored_axis_column,
-        "sqlExpression": "secret_column",
-        "timeGrain": "P1D",
-    }
-
-    query_context = mocker.MagicMock()
-    query_context.slice_.id = 42
-    query_context.slice_.params_dict = {
-        "metrics": ["count"],
-    }
-    query_context.slice_.query_context = json.dumps(
-        {
-            "queries": [
-                {
-                    "columns": [stored_axis_column],
-                    "metrics": ["count"],
-                }
-            ],
-        }
-    )
-    query_context.form_data = {
-        "slice_id": 42,
-        "metrics": ["count"],
-    }
-    query_context.queries = [
-        QueryObject(
-            columns=[tampered_axis_column],
-            metrics=["count"],
-        ),
-    ]
-
-    assert query_context_modified(query_context)
-
-
-def test_query_context_modified_time_grain_in_orderby(
-    mocker: MockerFixture,
-) -> None:
-    """
-    Test `query_context_modified` when the time grain travels inside `orderby`.
-
-    Each ``orderby`` entry is an ``(column, bool)`` tuple, so a temporal x-axis
-    adhoc column carrying the guest-overridable ``timeGrain`` is nested one level
-    deep rather than sitting at the top level. The overridable key must still be
-    stripped before comparing, otherwise sorting by the temporal axis would make
-    a pure time-grain change read as tampering.
-    """
-    stored_axis_column: AdhocColumn = {
-        "label": "order_date",
-        "sqlExpression": "order_date",
-        "columnType": "BASE_AXIS",
-        "timeGrain": "P1M",
-    }
-    requested_axis_column: AdhocColumn = {
-        **stored_axis_column,
-        "timeGrain": "P1D",
-    }
-
-    query_context = mocker.MagicMock()
-    query_context.slice_.id = 42
-    query_context.slice_.params_dict = {
-        "metrics": ["count"],
-    }
-    query_context.slice_.query_context = json.dumps(
-        {
-            "queries": [
-                {
-                    "orderby": [[stored_axis_column, True]],
-                    "metrics": ["count"],
-                }
-            ],
-        }
-    )
-    query_context.form_data = {
-        "slice_id": 42,
-        "metrics": ["count"],
-    }
-    query_context.queries = [
-        QueryObject(
-            orderby=[(requested_axis_column, True)],
-            metrics=["count"],
-        ),
-    ]
-
-    assert not query_context_modified(query_context)
-
-
 def test_get_catalog_perm() -> None:
     """
     Test the `get_catalog_perm` method.