fix(reports): commit permalink before Playwright navigates to tab URL

CreateDashboardPermalinkCommand only flushes the INSERT when invoked inside an outer @transaction() (the nesting guard skips the commit). The row is therefore not visible to Playwright's separate DB connection, causing dashboard_permalink to return a 404, the <body class="standalone"> element to never appear, and the screenshot to time out after 600s. Commit immediately after CreateDashboardPermalinkCommand.run() returns, matching the pattern already used by create_log() in the same class. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-16 04:59:17 +00:00 · 2026-06-15 23:50:30 +00:00
37 changed files with 2673 additions and 2434 deletions
--- a/.github/dependabot.yml
+++ b/.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:
--- a/.github/workflows/claude.yml
+++ b/.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"
--- a/superset-frontend/src/dashboard/components/Dashboard.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts
+++ b/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);
--- a/superset-frontend/src/dashboard/components/DashboardGrid.tsx
+++ b/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);
--- a/superset-frontend/src/dashboard/components/PublishedStatus/index.tsx
+++ b/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;
 }
--- a/superset-frontend/src/dashboard/components/SliceAdder.tsx
+++ b/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);
--- a/superset-frontend/src/dashboard/components/UndoRedoKeyListeners/UndoRedoKeyListeners.test.tsx
+++ b/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();
--- a/superset-frontend/src/dashboard/components/UndoRedoKeyListeners/index.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx
+++ b/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>
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
+++ b/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%"
+      />
+    );
+  }
 }
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.test.tsx
+++ b/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');
-});
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx
+++ b/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>
+    );
+  }
 }
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx
+++ b/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
          }
--- a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx
+++ b/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 {
--- a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
+++ b/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>
+    );
+  }
+}
--- a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
+++ b/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}
+      />
+    );
+  }
 }
--- a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
+++ b/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);
--- a/superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx
+++ b/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}
+      />
+    );
+  }
 }
--- a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.test.tsx
+++ b/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" />
--- a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
+++ 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);
--- a/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/BaseConfigModal.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.test.tsx
+++ b/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();
-});
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/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>
--- a/superset-frontend/src/dashboard/util/charts/useAllChartIds.ts
+++ b/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]);
+};
--- a/superset-frontend/src/dashboard/util/logging/findTopLevelComponentIds.ts
+++ b/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;
+}
--- a/superset-frontend/src/dashboard/util/logging/getLoadStatsPerTopLevelComponent.ts
+++ b/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;
+}
--- a/superset-frontend/src/dashboard/util/setPeriodicRunner.ts
+++ b/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;
+}
--- a/superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx
+++ b/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
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/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();
--- a/superset-frontend/src/features/tags/TagCard.tsx
+++ b/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;
--- a/superset-frontend/src/hooks/useMemoCompare.ts
+++ b/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;
+};
--- a/superset-frontend/src/hooks/useOpenerRef.ts
+++ b/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;
+}
--- a/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
+++ b/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;
--- a/superset/commands/report/execute.py
+++ b/superset/commands/report/execute.py
@@ -358,6 +358,11 @@ class BaseReportState:
            dashboard_id=str(self._report_schedule.dashboard.uuid),
            state=dashboard_state,
        ).run()
+        # Commit the permalink immediately so Playwright's separate DB connection
+        # can resolve the URL. CreateDashboardPermalinkCommand only flushes when
+        # called inside an outer @transaction(), leaving the row invisible to
+        # other connections until we explicitly commit here.
+        db.session.commit()  # pylint: disable=consider-using-transaction

        return get_url_path(
            "Superset.dashboard_permalink",
@@ -1157,6 +1162,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 +1175,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(