feat(i18n): Add ESLint rule to enforce sentence case in translations

This commit introduces a new ESLint rule 'i18n-strings/no-title-case' that enforces
sentence case instead of title case in translation strings, aligning with the recent
UI modernization effort to use sentence case throughout the application.

Key changes:
- Add 'no-title-case' rule to detect title case patterns in t() and tn() functions
- Rule intelligently skips: single words, acronyms, placeholders, and multi-sentence strings
- Enhanced error messages to show the actual violating string for easier identification
- Enable the rule as an error in .eslintrc.js
- Add comprehensive test coverage for the new rule

Fix title case violations across the codebase:
- Convert "Yes"/"No" to "yes"/"no" in list filters
- Fix "Virtual"/"Physical" to lowercase in DatasetList
- Update various UI labels: "Create Chart", "Dataset Name", "Chart Source", etc.
- Fix security page labels: "Row Level Security", "Filter Type", "Group Key"
- Update time-related labels: "Time Range", "Time Column", "Time Grain"
- Fix SqlLab keyboard shortcuts: "Previous Line" to "Previous line"
- Fix additional violations: "Untitled Dataset", "Include Template Parameters",
  "Affected Dashboards/Charts", "Delete Dataset?", "0 Selected", "List Users",
  "Open Datasource tab"

This change helps maintain consistency with the new sentence case standard and
prevents future title case violations from being introduced.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

.devcontainer/Dockerfile

@@ -0,0 +1,20 @@
+# Keep this in sync with the base image in the main Dockerfile (ARG PY_VER)
+FROM python:3.11.13-bookworm AS base
+
+# Install system dependencies that Superset needs
+# This layer will be cached across Codespace sessions
+RUN apt-get update && apt-get install -y \
+    libsasl2-dev \
+    libldap2-dev \
+    libpq-dev \
+    tmux \
+    gh \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install uv for fast Python package management
+# This will also be cached in the image
+RUN curl -LsSf https://astral.sh/uv/install.sh | sh && \
+    echo 'export PATH="/root/.cargo/bin:$PATH"' >> /etc/bash.bashrc
+
+# Set the cargo/bin directory in PATH for all users
+ENV PATH="/root/.cargo/bin:${PATH}"

.devcontainer/README.md

@@ -0,0 +1,16 @@
+# Superset Development with GitHub Codespaces
+
+For complete documentation on using GitHub Codespaces with Apache Superset, please see:
+
+**[Setting up a Development Environment - GitHub Codespaces](https://superset.apache.org/docs/contributing/development#github-codespaces-cloud-development)**
+
+## Pre-installed Development Environment
+
+When you create a new Codespace from this repository, it automatically:
+
+1. **Creates a Python virtual environment** using `uv venv`
+2. **Installs all development dependencies** via `uv pip install -r requirements/development.txt`
+3. **Sets up pre-commit hooks** with `pre-commit install`
+4. **Activates the virtual environment** automatically in all terminals
+
+The virtual environment is located at `/workspaces/{repository-name}/.venv` and is automatically activated through environment variables set in the devcontainer configuration.

.devcontainer/bashrc-additions

@@ -0,0 +1,62 @@
+# Superset Codespaces environment setup
+# This file is appended to ~/.bashrc during Codespace setup
+
+# Find the workspace directory (handles both 'superset' and 'superset-2' names)
+WORKSPACE_DIR=$(find /workspaces -maxdepth 1 -name "superset*" -type d | head -1)
+
+if [ -n "$WORKSPACE_DIR" ]; then
+    # Check if virtual environment exists
+    if [ -d "$WORKSPACE_DIR/.venv" ]; then
+        # Activate the virtual environment
+        source "$WORKSPACE_DIR/.venv/bin/activate"
+        echo "✅ Python virtual environment activated"
+
+        # Verify pre-commit is installed and set up
+        if command -v pre-commit &> /dev/null; then
+            echo "✅ pre-commit is available ($(pre-commit --version))"
+            # Install git hooks if not already installed
+            if [ -d "$WORKSPACE_DIR/.git" ] && [ ! -f "$WORKSPACE_DIR/.git/hooks/pre-commit" ]; then
+                echo "🪝 Installing pre-commit hooks..."
+                cd "$WORKSPACE_DIR" && pre-commit install
+            fi
+        else
+            echo "⚠️  pre-commit not found. Run: pip install pre-commit"
+        fi
+    else
+        echo "⚠️  Python virtual environment not found at $WORKSPACE_DIR/.venv"
+        echo "   Run: cd $WORKSPACE_DIR && .devcontainer/setup-dev.sh"
+    fi
+
+    # Always cd to the workspace directory for convenience
+    cd "$WORKSPACE_DIR"
+fi
+
+# Add helpful aliases for Superset development
+alias start-superset="$WORKSPACE_DIR/.devcontainer/start-superset.sh"
+alias setup-dev="$WORKSPACE_DIR/.devcontainer/setup-dev.sh"
+
+# Show helpful message on login
+echo ""
+echo "🚀 Superset Codespaces Environment"
+echo "=================================="
+
+# Check if Superset is running
+if docker ps 2>/dev/null | grep -q "superset"; then
+    echo "✅ Superset is running!"
+    echo "   - Check the 'Ports' tab for your live Superset URL"
+    echo "   - Initial startup takes 10-20 minutes"
+    echo "   - Login: admin/admin"
+else
+    echo "⚠️  Superset is not running. Use: start-superset"
+    # Check if there's a startup log
+    if [ -f "/tmp/superset-startup.log" ]; then
+        echo "   📋 Startup log found: cat /tmp/superset-startup.log"
+    fi
+fi
+
+echo ""
+echo "Quick commands:"
+echo "  start-superset - Start Superset with Docker Compose"
+echo "  setup-dev      - Set up Python environment (if not already done)"
+echo "  pre-commit run - Run pre-commit checks on staged files"
+echo ""

.devcontainer/build-and-push-image.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+# Script to build and push the devcontainer image to GitHub Container Registry
+# This allows caching the image between Codespace sessions
+
+# You'll need to run this with appropriate GitHub permissions
+# gh auth login --scopes write:packages
+
+REGISTRY="ghcr.io"
+OWNER="apache"
+REPO="superset"
+TAG="devcontainer-base"
+
+echo "Building devcontainer image..."
+docker build -t $REGISTRY/$OWNER/$REPO:$TAG .devcontainer/
+
+echo "Pushing to GitHub Container Registry..."
+docker push $REGISTRY/$OWNER/$REPO:$TAG
+
+echo "Done! Update .devcontainer/devcontainer.json to use:"
+echo "  \"image\": \"$REGISTRY/$OWNER/$REPO:$TAG\""

.devcontainer/devcontainer.json

@@ -0,0 +1,66 @@
+{
+  "name": "Apache Superset Development",
+  // Option 1: Use pre-built image directly
+  // "image": "ghcr.io/apache/superset:devcontainer-base",
+
+  // Option 2: Build from Dockerfile with cache (current approach)
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".",
+    // Cache from the Apache registry image
+    "cacheFrom": ["ghcr.io/apache/superset:devcontainer-base"]
+  },
+
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
+      "moby": true,
+      "dockerDashComposeVersion": "v2"
+    },
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "20"
+    },
+    "ghcr.io/devcontainers/features/git:1": {},
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "configureZshAsDefaultShell": true
+    },
+    "ghcr.io/devcontainers/features/sshd:1": {
+      "version": "latest"
+    }
+  },
+
+  // Forward ports for development
+  "forwardPorts": [9001],
+  "portsAttributes": {
+    "9001": {
+      "label": "Superset (via Webpack Dev Server)",
+      "onAutoForward": "notify",
+      "visibility": "public"
+    }
+  },
+
+  // Run commands after container is created
+  "postCreateCommand": "bash .devcontainer/setup-dev.sh || echo '⚠️ Setup had issues - run .devcontainer/setup-dev.sh manually'",
+
+  // Auto-start Superset after ensuring Docker is ready
+  // Run in foreground to see any errors, but don't block on failures
+  "postStartCommand": "bash -c 'echo \"Waiting 30s for services to initialize...\"; sleep 30; .devcontainer/start-superset.sh || echo \"⚠️ Auto-start failed - run start-superset manually\"'",
+
+  // Set environment variables
+  "remoteEnv": {
+    // Removed automatic venv activation to prevent startup issues
+    // The setup script will handle this
+  },
+
+  // VS Code customizations
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "ms-python.python",
+        "ms-python.vscode-pylance",
+        "charliermarsh.ruff",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  }
+}

.devcontainer/setup-dev.sh

@@ -0,0 +1,78 @@
+#!/bin/bash
+# Setup script for Superset Codespaces development environment
+
+echo "🔧 Setting up Superset development environment..."
+
+# System dependencies and uv are now pre-installed in the Docker image
+# This speeds up Codespace creation significantly!
+
+# Create virtual environment using uv
+echo "🐍 Creating Python virtual environment..."
+if ! uv venv; then
+    echo "❌ Failed to create virtual environment"
+    exit 1
+fi
+
+# Install Python dependencies
+echo "📦 Installing Python dependencies..."
+if ! uv pip install -r requirements/development.txt; then
+    echo "❌ Failed to install Python dependencies"
+    echo "💡 You may need to run this manually after the Codespace starts"
+    exit 1
+fi
+
+# Install pre-commit hooks
+echo "🪝 Installing pre-commit hooks..."
+if source .venv/bin/activate && pre-commit install; then
+    echo "✅ Pre-commit hooks installed"
+else
+    echo "⚠️  Pre-commit hooks installation failed (non-critical)"
+fi
+
+# Install Claude Code CLI via npm
+echo "🤖 Installing Claude Code..."
+if npm install -g @anthropic-ai/claude-code; then
+    echo "✅ Claude Code installed"
+else
+    echo "⚠️  Claude Code installation failed (non-critical)"
+fi
+
+# Make the start script executable
+chmod +x .devcontainer/start-superset.sh
+
+# Add bashrc additions for automatic venv activation
+echo "🔧 Setting up automatic environment activation..."
+if [ -f ~/.bashrc ]; then
+    # Check if we've already added our additions
+    if ! grep -q "Superset Codespaces environment setup" ~/.bashrc; then
+        echo "" >> ~/.bashrc
+        cat .devcontainer/bashrc-additions >> ~/.bashrc
+        echo "✅ Added automatic venv activation to ~/.bashrc"
+    else
+        echo "✅ Bashrc additions already present"
+    fi
+else
+    # Create bashrc if it doesn't exist
+    cat .devcontainer/bashrc-additions > ~/.bashrc
+    echo "✅ Created ~/.bashrc with automatic venv activation"
+fi
+
+# Also add to zshrc since that's the default shell
+if [ -f ~/.zshrc ] || [ -n "$ZSH_VERSION" ]; then
+    if ! grep -q "Superset Codespaces environment setup" ~/.zshrc; then
+        echo "" >> ~/.zshrc
+        cat .devcontainer/bashrc-additions >> ~/.zshrc
+        echo "✅ Added automatic venv activation to ~/.zshrc"
+    fi
+fi
+
+echo "✅ Development environment setup complete!"
+echo ""
+echo "📝 The virtual environment will be automatically activated in new terminals"
+echo ""
+echo "🔄 To activate in this terminal, run:"
+echo "   source ~/.bashrc"
+echo ""
+echo "🚀 To start Superset:"
+echo "   start-superset"
+echo ""

.devcontainer/start-superset.sh

@@ -0,0 +1,108 @@
+#!/bin/bash
+# Startup script for Superset in Codespaces
+
+# Log to a file for debugging
+LOG_FILE="/tmp/superset-startup.log"
+echo "[$(date)] Starting Superset startup script" >> "$LOG_FILE"
+echo "[$(date)] User: $(whoami), PWD: $(pwd)" >> "$LOG_FILE"
+
+echo "🚀 Starting Superset in Codespaces..."
+echo "🌐 Frontend will be available at port 9001"
+
+# Find the workspace directory (Codespaces clones as 'superset', not 'superset-2')
+WORKSPACE_DIR=$(find /workspaces -maxdepth 1 -name "superset*" -type d | head -1)
+if [ -n "$WORKSPACE_DIR" ]; then
+    cd "$WORKSPACE_DIR"
+    echo "📁 Working in: $WORKSPACE_DIR"
+else
+    echo "📁 Using current directory: $(pwd)"
+fi
+
+# Wait for Docker to be available
+echo "⏳ Waiting for Docker to start..."
+echo "[$(date)] Waiting for Docker..." >> "$LOG_FILE"
+max_attempts=30
+attempt=0
+while ! docker info > /dev/null 2>&1; do
+    if [ $attempt -eq $max_attempts ]; then
+        echo "❌ Docker failed to start after $max_attempts attempts"
+        echo "[$(date)] Docker failed to start after $max_attempts attempts" >> "$LOG_FILE"
+        echo "🔄 Please restart the Codespace or run this script manually later"
+        exit 1
+    fi
+    echo "   Attempt $((attempt + 1))/$max_attempts..."
+    echo "[$(date)] Docker check attempt $((attempt + 1))/$max_attempts" >> "$LOG_FILE"
+    sleep 2
+    attempt=$((attempt + 1))
+done
+echo "✅ Docker is ready!"
+echo "[$(date)] Docker is ready" >> "$LOG_FILE"
+
+# Check if Superset containers are already running
+if docker ps | grep -q "superset"; then
+    echo "✅ Superset containers are already running!"
+    echo ""
+    echo "🌐 To access Superset:"
+    echo "   1. Click the 'Ports' tab at the bottom of VS Code"
+    echo "   2. Find port 9001 and click the globe icon to open"
+    echo "   3. Wait 10-20 minutes for initial startup"
+    echo ""
+    echo "📝 Login credentials: admin/admin"
+    exit 0
+fi
+
+# Clean up any existing containers
+echo "🧹 Cleaning up existing containers..."
+docker-compose -f docker-compose-light.yml down
+
+# Start services
+echo "🏗️  Starting Superset in background (daemon mode)..."
+echo ""
+
+# Start in detached mode
+docker-compose -f docker-compose-light.yml up -d
+
+echo ""
+echo "✅ Docker Compose started successfully!"
+echo ""
+echo "📋 Important information:"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "⏱️  Initial startup takes 10-20 minutes"
+echo "🌐 Check the 'Ports' tab for your Superset URL (port 9001)"
+echo "👤 Login: admin / admin"
+echo ""
+echo "📊 Useful commands:"
+echo "   docker-compose -f docker-compose-light.yml logs -f    # Follow logs"
+echo "   docker-compose -f docker-compose-light.yml ps         # Check status"
+echo "   docker-compose -f docker-compose-light.yml down       # Stop services"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+echo "💤 Keeping terminal open for 60 seconds to test persistence..."
+sleep 60
+echo "✅ Test complete - check if this terminal is still visible!"
+
+# Show final status
+docker-compose -f docker-compose-light.yml ps
+EXIT_CODE=$?
+
+# If it failed, provide helpful instructions
+if [ $EXIT_CODE -ne 0 ] && [ $EXIT_CODE -ne 130 ]; then  # 130 is Ctrl+C
+    echo ""
+    echo "❌ Superset startup failed (exit code: $EXIT_CODE)"
+    echo ""
+    echo "🔄 To restart Superset, run:"
+    echo "   .devcontainer/start-superset.sh"
+    echo ""
+    echo "🔧 For troubleshooting:"
+    echo "   # View logs:"
+    echo "   docker-compose -f docker-compose-light.yml logs"
+    echo ""
+    echo "   # Clean restart (removes volumes):"
+    echo "   docker-compose -f docker-compose-light.yml down -v"
+    echo "   .devcontainer/start-superset.sh"
+    echo ""
+    echo "   # Common issues:"
+    echo "   - Network timeouts: Just retry, often transient"
+    echo "   - Port conflicts: Check 'docker ps'"
+    echo "   - Database issues: Try clean restart with -v"
+fi

Dockerfile

@@ -59,7 +59,7 @@ RUN mkdir -p /app/superset/static/assets \
 # NOTE: we mount packages and plugins as they are referenced in package.json as workspaces
 # ideally we'd COPY only their package.json. Here npm ci will be cached as long
 # as the full content of these folders don't change, yielding a decent cache reuse rate.
-# Note that's it's not possible selectively COPY of mount using blobs.
+# Note that it's not possible to selectively COPY or mount using blobs.
 RUN --mount=type=bind,source=./superset-frontend/package.json,target=./package.json \
     --mount=type=bind,source=./superset-frontend/package-lock.json,target=./package-lock.json \
     --mount=type=cache,target=/root/.cache \
@@ -74,7 +74,7 @@ RUN --mount=type=bind,source=./superset-frontend/package.json,target=./package.j
 COPY superset-frontend /app/superset-frontend
 
 ######################################################################
-# superset-node used for compile frontend assets
+# superset-node is used for compiling frontend assets
 ######################################################################
 FROM superset-node-ci AS superset-node
 
@@ -90,7 +90,7 @@ RUN --mount=type=cache,target=/root/.npm \
 # Copy translation files
 COPY superset/translations /app/superset/translations
 
-# Build the frontend if not in dev mode
+# Build translations if enabled, then cleanup localization files
 RUN if [ "$BUILD_TRANSLATIONS" = "true" ]; then \
         npm run build-translation; \
     fi; \

docker/frontend-mem-nag.sh

@@ -23,25 +23,57 @@ MIN_MEM_FREE_GB=3
 MIN_MEM_FREE_KB=$(($MIN_MEM_FREE_GB*1000000))
 
 echo_mem_warn() {
-  MEM_FREE_KB=$(awk '/MemFree/ { printf "%s \n", $2 }' /proc/meminfo)
-  MEM_FREE_GB=$(awk '/MemFree/ { printf "%s \n", $2/1024/1024 }' /proc/meminfo)
+  # Check if running in Codespaces first
+  if [[ -n "${CODESPACES}" ]]; then
+    echo "Memory available: Codespaces managed"
+    return
+  fi
 
-  if [[ "${MEM_FREE_KB}" -lt "${MIN_MEM_FREE_KB}" ]]; then
+  # Check platform and get memory accordingly
+  if [[ -f /proc/meminfo ]]; then
+    # Linux
+    if grep -q MemAvailable /proc/meminfo; then
+      MEM_AVAIL_KB=$(awk '/MemAvailable/ { printf "%s \n", $2 }' /proc/meminfo)
+      MEM_AVAIL_GB=$(awk '/MemAvailable/ { printf "%s \n", $2/1024/1024 }' /proc/meminfo)
+    else
+      MEM_AVAIL_KB=$(awk '/MemFree/ { printf "%s \n", $2 }' /proc/meminfo)
+      MEM_AVAIL_GB=$(awk '/MemFree/ { printf "%s \n", $2/1024/1024 }' /proc/meminfo)
+    fi
+  elif [[ "$(uname)" == "Darwin" ]]; then
+    # macOS - use vm_stat to get free memory
+    # vm_stat reports in pages, typically 4096 bytes per page
+    PAGE_SIZE=$(pagesize)
+    FREE_PAGES=$(vm_stat | awk '/Pages free:/ {print $3}' | tr -d '.')
+    INACTIVE_PAGES=$(vm_stat | awk '/Pages inactive:/ {print $3}' | tr -d '.')
+    # Free + inactive pages give us available memory (similar to MemAvailable on Linux)
+    AVAIL_PAGES=$((FREE_PAGES + INACTIVE_PAGES))
+    MEM_AVAIL_KB=$((AVAIL_PAGES * PAGE_SIZE / 1024))
+    MEM_AVAIL_GB=$(echo "scale=2; $MEM_AVAIL_KB / 1024 / 1024" | bc)
+  else
+    # Other platforms
+    echo "Memory available: Unable to determine"
+    return
+  fi
+
+  if [[ "${MEM_AVAIL_KB}" -lt "${MIN_MEM_FREE_KB}" ]]; then
     cat <<EOF
     ===============================================
     ========  Memory Insufficient Warning =========
     ===============================================
 
-    It looks like you only have ${MEM_FREE_GB}GB of
-    memory free. Please increase your Docker
+    It looks like you only have ${MEM_AVAIL_GB}GB of
+    memory ${MEM_TYPE}. Please increase your Docker
     resources to at least ${MIN_MEM_FREE_GB}GB
 
+    Note: During builds, available memory may be
+    temporarily low due to caching and compilation.
+
     ===============================================
     ========  Memory Insufficient Warning =========
     ===============================================
 EOF
   else
-    echo "Memory check Ok [${MEM_FREE_GB}GB free]"
+    echo "Memory available: ${MEM_AVAIL_GB} GB"
   fi
 }
 

docs/docs/configuration/theming.mdx

@@ -87,8 +87,66 @@ Restart Superset to apply changes.
 3. **Apply**: Assign themes to specific dashboards or configure instance-wide
 4. **Iterate**: Modify theme JSON directly in the CRUD interface or re-import from the theme editor
 
+## Custom Fonts
+
+Superset supports custom fonts through runtime configuration, allowing you to use branded or custom typefaces without rebuilding the application.
+
+### Configuring Custom Fonts
+
+Add font URLs to your `superset_config.py`:
+
+```python
+# Load fonts from Google Fonts, Adobe Fonts, or self-hosted sources
+CUSTOM_FONT_URLS = [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap",
+]
+
+# Update CSP to allow font sources
+TALISMAN_CONFIG = {
+    "content_security_policy": {
+        "font-src": ["'self'", "https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+        "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+    }
+}
+```
+
+### Using Custom Fonts in Themes
+
+Once configured, reference the fonts in your theme configuration:
+
+```python
+THEME_DEFAULT = {
+    "token": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontFamilyCode": "JetBrains Mono, Monaco, monospace",
+        # ... other theme tokens
+    }
+}
+```
+
+Or in the CRUD interface theme JSON:
+
+```json
+{
+  "token": {
+    "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+    "fontFamilyCode": "JetBrains Mono, Monaco, monospace"
+  }
+}
+```
+
+### Font Sources
+
+- **Google Fonts**: Free, CDN-hosted fonts with wide variety
+- **Adobe Fonts**: Premium fonts (requires subscription and kit ID)
+- **Self-hosted**: Place font files in `/static/assets/fonts/` and reference via CSS
+
+This feature works with the stock Docker image - no custom build required!
+
 ## Advanced Features
 
 - **System Themes**: Superset includes built-in light and dark themes
 - **Per-Dashboard Theming**: Each dashboard can have its own visual identity
 - **JSON Editor**: Edit theme configurations directly within Superset's interface
+- **Custom Fonts**: Load external fonts via configuration without rebuilding

docs/docs/contributing/development.mdx

@@ -120,6 +120,78 @@ docker volume rm superset_db_home
 docker-compose up
 ```
 
+## GitHub Codespaces (Cloud Development)
+
+GitHub Codespaces provides a complete, pre-configured development environment in the cloud. This is ideal for:
+- Quick contributions without local setup
+- Consistent development environments across team members
+- Working from devices that can't run Docker locally
+- Safe experimentation in isolated environments
+
+:::info
+We're grateful to GitHub for providing this excellent cloud development service that makes
+contributing to Apache Superset more accessible to developers worldwide.
+:::
+
+### Getting Started with Codespaces
+
+1. **Create a Codespace**: Use this pre-configured link that sets up everything you need:
+
+   [**Launch Superset Codespace →**](https://github.com/codespaces/new?skip_quickstart=true&machine=standardLinux32gb&repo=39464018&ref=master&devcontainer_path=.devcontainer%2Fdevcontainer.json&geo=UsWest)
+
+   :::caution
+   **Important**: You must select at least the **4 CPU / 16GB RAM** machine type (pre-selected in the link above).
+   Smaller instances will not have sufficient resources to run Superset effectively.
+   :::
+
+2. **Wait for Setup**: The initial setup takes several minutes. The Codespace will:
+   - Build the development container
+   - Install all dependencies
+   - Start all required services (PostgreSQL, Redis, etc.)
+   - Initialize the database with example data
+
+3. **Access Superset**: Once ready, check the **PORTS** tab in VS Code for port `9001`.
+   Click the globe icon to open Superset in your browser.
+   - Default credentials: `admin` / `admin`
+
+### Key Features
+
+- **Auto-reload**: Both Python and TypeScript files auto-refresh on save
+- **Pre-installed Extensions**: VS Code extensions for Python, TypeScript, and database tools
+- **Multiple Instances**: Run multiple Codespaces for different branches/features
+- **SSH Access**: Connect via terminal using `gh cs ssh` or through the GitHub web UI
+- **VS Code Integration**: Works seamlessly with VS Code desktop app
+
+### Managing Codespaces
+
+- **List active Codespaces**: `gh cs list`
+- **SSH into a Codespace**: `gh cs ssh`
+- **Stop a Codespace**: Via GitHub UI or `gh cs stop`
+- **Delete a Codespace**: Via GitHub UI or `gh cs delete`
+
+### Debugging and Logs
+
+Since Codespaces uses `docker-compose-light.yml`, you can monitor all services:
+
+```bash
+# Stream logs from all services
+docker compose -f docker-compose-light.yml logs -f
+
+# Stream logs from a specific service
+docker compose -f docker-compose-light.yml logs -f superset
+
+# View last 100 lines and follow
+docker compose -f docker-compose-light.yml logs --tail=100 -f
+
+# List all running services
+docker compose -f docker-compose-light.yml ps
+```
+
+:::tip
+Codespaces automatically stop after 30 minutes of inactivity to save resources.
+Your work is preserved and you can restart anytime.
+:::
+
 ## Installing Development Tools
 
 :::note

pyproject.toml

@@ -111,7 +111,7 @@ athena = ["pyathena[pandas]>=2, <3"]
 aurora-data-api = ["preset-sqlalchemy-aurora-data-api>=0.2.8,<0.3"]
 bigquery = [
     "pandas-gbq>=0.19.1",
-    "sqlalchemy-bigquery>=1.6.1",
+    "sqlalchemy-bigquery>=1.15.0",
     "google-cloud-bigquery>=3.10.0",
 ]
 clickhouse = ["clickhouse-connect>=0.5.14, <1.0"]

requirements/development.txt

@@ -795,7 +795,7 @@ sqlalchemy==1.4.54
     #   shillelagh
     #   sqlalchemy-bigquery
     #   sqlalchemy-utils
-sqlalchemy-bigquery==1.12.0
+sqlalchemy-bigquery==1.15.0
     # via apache-superset
 sqlalchemy-utils==0.38.3
     # via

superset-frontend/.eslintrc.js

@@ -403,6 +403,7 @@ module.exports = {
     'theme-colors/no-literal-colors': 'error',
     'icons/no-fa-icons-usage': 'error',
     'i18n-strings/no-template-vars': ['error', true],
+    'i18n-strings/no-title-case': 'error',
     camelcase: [
       'error',
       {

superset-frontend/cypress-base/cypress/e2e/explore/chart.test.js

@@ -68,11 +68,13 @@ function verifyDashboardSearch() {
 function verifyDashboardLink() {
   interceptDashboardGet();
   openDashboardsAddedTo();
-  cy.get('.ant-dropdown-menu-submenu-popup').trigger('mouseover');
+  cy.get('.ant-dropdown-menu-submenu-popup').trigger('mouseover', {
+    force: true,
+  });
   cy.get('.ant-dropdown-menu-submenu-popup a')
     .first()
     .invoke('removeAttr', 'target')
-    .click();
+    .click({ force: true });
   cy.wait('@get');
 }
 

superset-frontend/eslint-rules/eslint-plugin-i18n-strings/index.js

@@ -41,7 +41,7 @@ module.exports = {
               context.report({
                 node,
                 message:
-                  "Don't use variables in translation string templates. Flask-babel is a static translation service, so it can’t handle strings that include variables",
+                  "Don't use variables in translation string templates. Flask-babel is a static translation service, so it can't handle strings that include variables",
               });
             }
           }
@@ -52,5 +52,134 @@ module.exports = {
         };
       },
     },
+    'no-title-case': {
+      create(context) {
+        function checkTitleCase(str) {
+          // Skip strings with placeholders like %s, %d, %(name)s, etc.
+          if (/%[sdf]|%\([^)]+\)[sdf]/.test(str)) {
+            return false;
+          }
+
+          // Skip strings that are all uppercase (likely acronyms)
+          if (str === str.toUpperCase()) {
+            return false;
+          }
+
+          // Skip strings with periods (likely multiple sentences)
+          if (str.includes('.')) {
+            return false;
+          }
+
+          // Skip single words
+          const words = str.trim().split(/\s+/);
+          if (words.length <= 1) {
+            return false;
+          }
+
+          // Whitelist of words that are commonly capitalized in product names
+          // but should not trigger title case warnings
+          const productWords = [
+            'Lab',
+            'Server',
+            'Studio',
+            'Pro',
+            'Plus',
+            'Max',
+            'Mini',
+          ];
+
+          // Common prepositions and articles that should be lowercase (unless at start)
+          const lowercaseWords = [
+            'a',
+            'an',
+            'the',
+            'and',
+            'or',
+            'but',
+            'for',
+            'with',
+            'to',
+            'from',
+            'in',
+            'on',
+            'at',
+            'by',
+            'of',
+          ];
+
+          // Check if the string uses title case (multiple words with first letter capitalized)
+          const hasTitleCase = words.some((word, index) => {
+            // Skip first word
+            if (index === 0) {
+              return false;
+            }
+
+            // Skip acronyms (all uppercase)
+            if (word === word.toUpperCase()) {
+              return false;
+            }
+
+            // Skip whitelisted product words when preceded by an uppercase word
+            if (
+              productWords.includes(word) &&
+              index > 0 &&
+              words[index - 1] === words[index - 1].toUpperCase()
+            ) {
+              return false;
+            }
+
+            // Check if it's a lowercase word that's incorrectly capitalized
+            if (
+              lowercaseWords.includes(word.toLowerCase()) &&
+              /^[A-Z]/.test(word)
+            ) {
+              return true;
+            }
+
+            // For other words, check if they start with capital letter
+            return (
+              word.length > 1 &&
+              /^[A-Z]/.test(word) &&
+              !productWords.includes(word)
+            );
+          });
+
+          return hasTitleCase;
+        }
+
+        function handler(node) {
+          if (node.arguments.length) {
+            const firstArg = node.arguments[0];
+            let stringValue = null;
+
+            // Extract string value based on node type
+            if (
+              firstArg.type === 'Literal' &&
+              typeof firstArg.value === 'string'
+            ) {
+              stringValue = firstArg.value;
+            } else if (
+              firstArg.type === 'TemplateLiteral' &&
+              firstArg.quasis.length === 1
+            ) {
+              // Handle template literals without expressions
+              stringValue = firstArg.quasis[0].value.raw;
+            }
+
+            if (stringValue && checkTitleCase(stringValue)) {
+              context.report({
+                node: firstArg,
+                message: `Avoid title case in i18n strings: "${stringValue}". Use sentence case instead.`,
+              });
+            }
+          }
+        }
+
+        return {
+          "CallExpression[callee.name='t']": handler,
+          "CallExpression[callee.name='tn']": handler,
+        };
+      },
+    },
   },
 };

superset-frontend/eslint-rules/eslint-plugin-i18n-strings/no-title-case.test.js

@@ -0,0 +1,152 @@
+/**
+ * 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.
+ */
+
+const { RuleTester } = require('eslint');
+const plugin = require('./index');
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 6,
+  },
+});
+
+const rule = plugin.rules['no-title-case'];
+
+ruleTester.run('no-title-case', rule, {
+  valid: [
+    // Sentence case (correct)
+    {
+      code: "t('Add a divider')",
+    },
+    {
+      code: "t('Create new dashboard')",
+    },
+    {
+      code: "t('Save and continue')",
+    },
+    // Single words
+    {
+      code: "t('Save')",
+    },
+    {
+      code: "t('Delete')",
+    },
+    // All uppercase (acronyms)
+    {
+      code: "t('SQL')",
+    },
+    {
+      code: "t('API KEY')",
+    },
+    // With placeholders
+    {
+      code: "t('Deleted: %s', name)",
+    },
+    {
+      code: "t('User %(username)s added', { username })",
+    },
+    // Template literals without expressions
+    {
+      code: 't(`Add a new filter`)',
+    },
+    // Mixed case but not title case
+    {
+      code: "t('Use SQL Lab')",
+    },
+    // tn function
+    {
+      code: "tn('Add a filter', 'Add filters', count)",
+    },
+    // Multiple sentences with period
+    {
+      code: "t('Welcome Back. Please Login.')",
+    },
+    {
+      code: "t('Save Changes. This Will Update All Records.')",
+    },
+  ],
+  invalid: [
+    // Title case (incorrect)
+    {
+      code: "t('Add Divider')",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Add Divider". Use sentence case instead.',
+        },
+      ],
+    },
+    {
+      code: "t('Create New Dashboard')",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Create New Dashboard". Use sentence case instead.',
+        },
+      ],
+    },
+    {
+      code: "t('Save And Continue')",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Save And Continue". Use sentence case instead.',
+        },
+      ],
+    },
+    {
+      code: "t('Add Filter')",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Add Filter". Use sentence case instead.',
+        },
+      ],
+    },
+    {
+      code: "t('Edit User')",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Edit User". Use sentence case instead.',
+        },
+      ],
+    },
+    // Template literals
+    {
+      code: 't(`Add Layer`)',
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Add Layer". Use sentence case instead.',
+        },
+      ],
+    },
+    // tn function
+    {
+      code: "tn('Delete Item', 'Delete Items', count)",
+      errors: [
+        {
+          message:
+            'Avoid title case in i18n strings: "Delete Item". Use sentence case instead.',
+        },
+      ],
+    },
+  ],
+});

superset-frontend/package-lock.json

@@ -53,8 +53,8 @@
         "@visx/scale": "^3.5.0",
         "@visx/tooltip": "^3.0.0",
         "@visx/xychart": "^3.5.1",
-        "ag-grid-community": "33.1.1",
-        "ag-grid-react": "33.1.1",
+        "ag-grid-community": "^34.0.2",
+        "ag-grid-react": "34.0.2",
         "antd": "^5.24.6",
         "chrono-node": "^2.7.8",
         "classnames": "^2.2.5",
@@ -10877,6 +10877,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/@reduxjs/toolkit/node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+      "license": "MIT"
+    },
     "node_modules/@rjsf/core": {
       "version": "5.24.1",
       "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.24.1.tgz",
@@ -18747,27 +18753,27 @@
       }
     },
     "node_modules/ag-charts-types": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.1.1.tgz",
-      "integrity": "sha512-bRmUcf5VVhEEekhX8Vk0NSwa8Te8YM/zchjyYKR2CX4vDYiwoohM1Jg9RFvbIhVbLC1S6QrPEbx5v2C6RDfpSA==",
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-12.0.2.tgz",
+      "integrity": "sha512-AWM1Y+XW+9VMmV3AbzdVEnreh/I2C9Pmqpc2iLmtId3Xbvmv7O56DqnuDb9EXjK5uPxmyUerTP+utL13UGcztw==",
       "license": "MIT"
     },
     "node_modules/ag-grid-community": {
-      "version": "33.1.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.1.1.tgz",
-      "integrity": "sha512-CNubIro0ipj4nfQ5WJPG9Isp7UI6MMDvNzrPdHNf3W+IoM8Uv3RUhjEn7xQqpQHuu6o/tMjrqpacipMUkhzqnw==",
+      "version": "34.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-34.0.2.tgz",
+      "integrity": "sha512-hVJp5vrmwHRB10YjfSOVni5YJkO/v+asLjT72S4YnIFSx8lAgyPmByNJgtojk1aJ5h6Up93jTEmGDJeuKiWWLA==",
       "license": "MIT",
       "dependencies": {
-        "ag-charts-types": "11.1.1"
+        "ag-charts-types": "12.0.2"
       }
     },
     "node_modules/ag-grid-react": {
-      "version": "33.1.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-33.1.1.tgz",
-      "integrity": "sha512-xJ+t2gpqUUwpFqAeDvKz/GLVR4unkOghfQBr8iIY9RAdGFarYFClJavsOa8XPVVUqEB9OIuPVFnOdtocbX0jeA==",
+      "version": "34.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-34.0.2.tgz",
+      "integrity": "sha512-1KBXkTvwtZiYVlSuDzBkiqfHjZgsATOmpLZdAtdmsCSOOOEWai0F9zHHgBuHfyciAE4nrbQWfojkx8IdnwsKFw==",
       "license": "MIT",
       "dependencies": {
-        "ag-grid-community": "33.1.1",
+        "ag-grid-community": "34.0.2",
         "prop-types": "^15.8.1"
       },
       "peerDependencies": {
@@ -24605,6 +24611,12 @@
         "d3-time": "1 - 2"
       }
     },
+    "node_modules/encodable/node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+      "license": "MIT"
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -50629,9 +50641,9 @@
       "license": "MIT"
     },
     "node_modules/reselect": {
-      "version": "4.1.8",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
-      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
     "node_modules/resize-observer-polyfill": {
@@ -59085,7 +59097,7 @@
         "csstype": "^3.1.3",
         "d3-format": "^1.3.2",
         "d3-interpolate": "^3.0.1",
-        "d3-scale": "^3.0.0",
+        "d3-scale": "^4.0.2",
         "d3-time": "^3.1.0",
         "d3-time-format": "^4.1.0",
         "dayjs": "^1.11.13",
@@ -59108,7 +59120,7 @@
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^4.0.1",
-        "reselect": "^4.0.0",
+        "reselect": "^5.1.1",
         "rison": "^0.1.1",
         "seedrandom": "^3.0.5",
         "xss": "^1.0.14"
@@ -59187,16 +59199,19 @@
       "license": "BSD-3-Clause"
     },
     "packages/superset-ui-core/node_modules/d3-scale": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
-      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
-      "license": "BSD-3-Clause",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
       "dependencies": {
-        "d3-array": "^2.3.0",
-        "d3-format": "1 - 2",
-        "d3-interpolate": "1.2.0 - 2",
-        "d3-time": "^2.1.1",
-        "d3-time-format": "2 - 3"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "packages/superset-ui-core/node_modules/d3-scale/node_modules/d3-interpolate": {
@@ -61168,8 +61183,8 @@
         "@react-icons/all-files": "^4.1.0",
         "@types/d3-array": "^2.9.0",
         "@types/react-table": "^7.7.20",
-        "ag-grid-community": "^33.1.1",
-        "ag-grid-react": "^33.1.1",
+        "ag-grid-community": "^34.0.2",
+        "ag-grid-react": "^34.0.2",
         "classnames": "^2.5.1",
         "d3-array": "^2.4.0",
         "lodash": "^4.17.21",
@@ -61205,8 +61220,10 @@
       },
       "peerDependencies": {
         "@ant-design/icons": "^5.2.6",
+        "@reduxjs/toolkit": "*",
         "@superset-ui/chart-controls": "*",
         "@superset-ui/core": "*",
+        "@types/react-redux": "*",
         "geostyler": "^14.1.3",
         "geostyler-data": "^1.0.0",
         "geostyler-openlayers-parser": "^4.0.0",

superset-frontend/package.json

@@ -121,8 +121,8 @@
     "@visx/scale": "^3.5.0",
     "@visx/tooltip": "^3.0.0",
     "@visx/xychart": "^3.5.1",
-    "ag-grid-community": "33.1.1",
-    "ag-grid-react": "33.1.1",
+    "ag-grid-community": "^34.0.2",
+    "ag-grid-react": "34.0.2",
     "antd": "^5.24.6",
     "chrono-node": "^2.7.8",
     "classnames": "^2.2.5",

superset-frontend/packages/superset-ui-chart-controls/src/constants.ts

@@ -30,10 +30,10 @@ export const DEFAULT_MAX_ROW_TABLE_SERVER = 500000;
 
 // eslint-disable-next-line import/prefer-default-export
 export const TIME_FILTER_LABELS = {
-  time_range: t('Time Range'),
-  granularity_sqla: t('Time Column'),
-  time_grain_sqla: t('Time Grain'),
-  granularity: t('Time Granularity'),
+  time_range: t('Time range'),
+  granularity_sqla: t('Time column'),
+  time_grain_sqla: t('Time grain'),
+  granularity: t('Time granularity'),
 };
 
 export const COLUMN_NAME_ALIASES: Record<string, string> = {

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx

@@ -41,6 +41,53 @@ import {
 import { checkColumnType } from '../utils/checkColumnType';
 import { isSortable } from '../utils/isSortable';
 
+// Aggregation choices with computation methods for plugins and controls
+export const aggregationChoices = {
+  raw: {
+    label: 'Overall value',
+    compute: (data: number[]) => {
+      if (!data.length) return null;
+      return data[0];
+    },
+  },
+  LAST_VALUE: {
+    label: 'Last Value',
+    compute: (data: number[]) => {
+      if (!data.length) return null;
+      return data[0];
+    },
+  },
+  sum: {
+    label: 'Total (Sum)',
+    compute: (data: number[]) =>
+      data.length ? data.reduce((a, b) => a + b, 0) : null,
+  },
+  mean: {
+    label: 'Average (Mean)',
+    compute: (data: number[]) =>
+      data.length ? data.reduce((a, b) => a + b, 0) / data.length : null,
+  },
+  min: {
+    label: 'Minimum',
+    compute: (data: number[]) => (data.length ? Math.min(...data) : null),
+  },
+  max: {
+    label: 'Maximum',
+    compute: (data: number[]) => (data.length ? Math.max(...data) : null),
+  },
+  median: {
+    label: 'Median',
+    compute: (data: number[]) => {
+      if (!data.length) return null;
+      const sorted = [...data].sort((a, b) => a - b);
+      const mid = Math.floor(sorted.length / 2);
+      return sorted.length % 2 === 0
+        ? (sorted[mid - 1] + sorted[mid]) / 2
+        : sorted[mid];
+    },
+  },
+} as const;
+
 export const contributionModeControl = {
   name: 'contributionMode',
   config: {
@@ -69,17 +116,12 @@ export const aggregationControl = {
     default: 'LAST_VALUE',
     clearable: false,
     renderTrigger: false,
-    choices: [
-      ['raw', t('None')],
-      ['LAST_VALUE', t('Last Value')],
-      ['sum', t('Total (Sum)')],
-      ['mean', t('Average (Mean)')],
-      ['min', t('Minimum')],
-      ['max', t('Maximum')],
-      ['median', t('Median')],
-    ],
+    choices: Object.entries(aggregationChoices).map(([value, { label }]) => [
+      value,
+      t(label),
+    ]),
     description: t(
-      'Aggregation method used to compute the Big Number from the Trendline.For non-additive metrics like ratios, averages, distinct counts, etc use NONE.',
+      'Method to compute the displayed value. "Overall value" calculates a single metric across the entire filtered time period, ideal for non-additive metrics like ratios, averages, or distinct counts. Other methods operate over the time series data points.',
     ),
     provideFormDataToProps: true,
     mapStateToProps: ({ form_data }: ControlPanelState) => ({

superset-frontend/packages/superset-ui-core/package.json

@@ -37,7 +37,7 @@
     "d3-format": "^1.3.2",
     "dayjs": "^1.11.13",
     "d3-interpolate": "^3.0.1",
-    "d3-scale": "^3.0.0",
+    "d3-scale": "^4.0.2",
     "d3-time": "^3.1.0",
     "d3-time-format": "^4.1.0",
     "dompurify": "^3.2.4",
@@ -59,7 +59,7 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "reselect": "^4.0.0",
+    "reselect": "^5.1.1",
     "rison": "^0.1.1",
     "seedrandom": "^3.0.5",
     "@visx/responsive": "^3.12.0",

superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts

@@ -17,11 +17,8 @@
  * under the License.
  */
 
-/** Type checking is disabled for this file due to reselect only supporting
- * TS declarations for selectors with up to 12 arguments. */
-// @ts-nocheck
 import { RefObject } from 'react';
-import { createSelector } from 'reselect';
+import { createSelector, lruMemoize } from 'reselect';
 import {
   AppSection,
   Behavior,
@@ -37,7 +34,7 @@ import {
   SetDataMaskHook,
 } from '../types/Base';
 import { QueryData, DataRecordFilters } from '..';
-import { SupersetTheme } from '../../theme';
+import { supersetTheme, SupersetTheme } from '../../theme';
 
 // TODO: more specific typing for these fields of ChartProps
 type AnnotationData = PlainObject;
@@ -109,6 +106,8 @@ export interface ChartPropsConfig {
   theme: SupersetTheme;
   /* legend index */
   legendIndex?: number;
+  inContextMenu?: boolean;
+  emitCrossFilters?: boolean;
 }
 
 const DEFAULT_WIDTH = 800;
@@ -161,7 +160,11 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   theme: SupersetTheme;
 
-  constructor(config: ChartPropsConfig & { formData?: FormData } = {}) {
+  constructor(
+    config: ChartPropsConfig & { formData?: FormData } = {
+      theme: supersetTheme,
+    },
+  ) {
     const {
       annotationData = {},
       datasource = {},
@@ -276,5 +279,16 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         emitCrossFilters,
         theme,
       }),
+    // Below config is to retain usage of 1-sized `lruMemoize` object in Reselect v4
+    // Reselect v5 introduces `weakMapMemoize` which is more performant but potentially memory-leaky
+    // due to infinite cache size.
+    // Source: https://github.com/reduxjs/reselect/releases/tag/v5.0.1
+    {
+      memoize: lruMemoize,
+      argsMemoize: lruMemoize,
+      memoizeOptions: {
+        maxSize: 10,
+      },
+    },
   );
 };

superset-frontend/packages/superset-ui-core/src/components/TelemetryPixel/TelemetryPixel.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { render } from '@superset-ui/core/spec';
-import TelemetryPixel from '.';
+import { TelemetryPixel } from '.';
 
 const OLD_ENV = process.env;
 

superset-frontend/packages/superset-ui-core/src/components/TelemetryPixel/index.tsx

@@ -39,7 +39,7 @@ interface TelemetryPixelProps {
 
 const PIXEL_ID = '0d3461e1-abb1-4691-a0aa-5ed50de66af0';
 
-const TelemetryPixel = ({
+export const TelemetryPixel = ({
   version = 'unknownVersion',
   sha = 'unknownSHA',
   build = 'unknownBuild',
@@ -56,4 +56,3 @@ const TelemetryPixel = ({
     />
   );
 };
-export default TelemetryPixel;

superset-frontend/packages/superset-ui-core/src/components/ThemeSelect/index.tsx

@@ -1,116 +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 { Dropdown, Icons } from '@superset-ui/core/components';
-import type { MenuItem } from '@superset-ui/core/components/Menu';
-import { t, useTheme } from '@superset-ui/core';
-import { ThemeAlgorithm, ThemeMode } from '../../theme/types';
-
-export interface ThemeSelectProps {
-  setThemeMode: (newMode: ThemeMode) => void;
-  tooltipTitle?: string;
-  themeMode: ThemeMode;
-  hasLocalOverride?: boolean;
-  onClearLocalSettings?: () => void;
-  allowOSPreference?: boolean;
-}
-
-const ThemeSelect: React.FC<ThemeSelectProps> = ({
-  setThemeMode,
-  tooltipTitle = 'Select theme',
-  themeMode,
-  hasLocalOverride = false,
-  onClearLocalSettings,
-  allowOSPreference = true,
-}) => {
-  const theme = useTheme();
-
-  const handleSelect = (mode: ThemeMode) => {
-    setThemeMode(mode);
-  };
-
-  const themeIconMap: Record<ThemeAlgorithm | ThemeMode, React.ReactNode> = {
-    [ThemeAlgorithm.DEFAULT]: <Icons.SunOutlined />,
-    [ThemeAlgorithm.DARK]: <Icons.MoonOutlined />,
-    [ThemeMode.SYSTEM]: <Icons.FormatPainterOutlined />,
-    [ThemeAlgorithm.COMPACT]: <Icons.CompressOutlined />,
-  };
-
-  // Use different icon when local theme is active
-  const triggerIcon = hasLocalOverride ? (
-    <Icons.FormatPainterOutlined style={{ color: theme.colorErrorText }} />
-  ) : (
-    themeIconMap[themeMode] || <Icons.FormatPainterOutlined />
-  );
-
-  const menuItems: MenuItem[] = [
-    {
-      type: 'group',
-      label: t('Theme'),
-    },
-    {
-      key: ThemeMode.DEFAULT,
-      label: t('Light'),
-      icon: <Icons.SunOutlined />,
-      onClick: () => handleSelect(ThemeMode.DEFAULT),
-    },
-    {
-      key: ThemeMode.DARK,
-      label: t('Dark'),
-      icon: <Icons.MoonOutlined />,
-      onClick: () => handleSelect(ThemeMode.DARK),
-    },
-    ...(allowOSPreference
-      ? [
-          {
-            key: ThemeMode.SYSTEM,
-            label: t('Match system'),
-            icon: <Icons.FormatPainterOutlined />,
-            onClick: () => handleSelect(ThemeMode.SYSTEM),
-          },
-        ]
-      : []),
-  ];
-
-  // Add clear settings option only when there's a local theme active
-  if (onClearLocalSettings && hasLocalOverride) {
-    menuItems.push(
-      { type: 'divider' } as MenuItem,
-      {
-        key: 'clear-local',
-        label: t('Clear local theme'),
-        icon: <Icons.ClearOutlined />,
-        onClick: onClearLocalSettings,
-      } as MenuItem,
-    );
-  }
-
-  return (
-    <Dropdown
-      menu={{
-        items: menuItems,
-        selectedKeys: [themeMode],
-      }}
-      trigger={['hover']}
-    >
-      {triggerIcon}
-    </Dropdown>
-  );
-};
-
-export default ThemeSelect;

superset-frontend/packages/superset-ui-core/src/components/ThemeSubMenu/ThemeSubMenu.test.tsx

@@ -0,0 +1,273 @@
+/**
+ * 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,
+  userEvent,
+  waitFor,
+  within,
+} from '@superset-ui/core/spec';
+import { ThemeMode } from '@superset-ui/core';
+import { Menu } from '@superset-ui/core/components';
+import { ThemeSubMenu } from '.';
+
+// Mock the translation function
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  t: (key: string) => key,
+}));
+
+describe('ThemeSubMenu', () => {
+  const defaultProps = {
+    allowOSPreference: true,
+    setThemeMode: jest.fn(),
+    themeMode: ThemeMode.DEFAULT,
+    hasLocalOverride: false,
+    onClearLocalSettings: jest.fn(),
+  };
+
+  const renderThemeSubMenu = (props = defaultProps) =>
+    render(
+      <Menu>
+        <ThemeSubMenu {...props} />
+      </Menu>,
+    );
+
+  const findMenuWithText = async (text: string) => {
+    await waitFor(() => {
+      const found = screen
+        .getAllByRole('menu')
+        .some(m => within(m).queryByText(text));
+
+      if (!found) throw new Error(`Menu with text "${text}" not yet rendered`);
+    });
+
+    return screen.getAllByRole('menu').find(m => within(m).queryByText(text))!;
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders Light and Dark theme options by default', async () => {
+    renderThemeSubMenu();
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Light');
+
+    expect(within(menu!).getByText('Light')).toBeInTheDocument();
+    expect(within(menu!).getByText('Dark')).toBeInTheDocument();
+  });
+
+  it('does not render Match system option when allowOSPreference is false', async () => {
+    renderThemeSubMenu({ ...defaultProps, allowOSPreference: false });
+    userEvent.hover(await screen.findByRole('menuitem'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Match system')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders with allowOSPreference as true by default', async () => {
+    renderThemeSubMenu();
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Match system');
+
+    expect(within(menu).getByText('Match system')).toBeInTheDocument();
+  });
+
+  it('renders clear option when both hasLocalOverride and onClearLocalSettings are provided', async () => {
+    const mockClear = jest.fn();
+    renderThemeSubMenu({
+      ...defaultProps,
+      hasLocalOverride: true,
+      onClearLocalSettings: mockClear,
+    });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Clear local theme');
+
+    expect(within(menu).getByText('Clear local theme')).toBeInTheDocument();
+  });
+
+  it('does not render clear option when hasLocalOverride is false', async () => {
+    const mockClear = jest.fn();
+    renderThemeSubMenu({
+      ...defaultProps,
+      hasLocalOverride: false,
+      onClearLocalSettings: mockClear,
+    });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Clear local theme')).not.toBeInTheDocument();
+    });
+  });
+
+  it('calls setThemeMode with DEFAULT when Light is clicked', async () => {
+    const mockSet = jest.fn();
+    renderThemeSubMenu({ ...defaultProps, setThemeMode: mockSet });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Light');
+    userEvent.click(within(menu).getByText('Light'));
+
+    expect(mockSet).toHaveBeenCalledWith(ThemeMode.DEFAULT);
+  });
+
+  it('calls setThemeMode with DARK when Dark is clicked', async () => {
+    const mockSet = jest.fn();
+    renderThemeSubMenu({ ...defaultProps, setThemeMode: mockSet });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Dark');
+    userEvent.click(within(menu).getByText('Dark'));
+
+    expect(mockSet).toHaveBeenCalledWith(ThemeMode.DARK);
+  });
+
+  it('calls setThemeMode with SYSTEM when Match system is clicked', async () => {
+    const mockSet = jest.fn();
+    renderThemeSubMenu({ ...defaultProps, setThemeMode: mockSet });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Match system');
+    userEvent.click(within(menu).getByText('Match system'));
+
+    expect(mockSet).toHaveBeenCalledWith(ThemeMode.SYSTEM);
+  });
+
+  it('calls onClearLocalSettings when Clear local theme is clicked', async () => {
+    const mockClear = jest.fn();
+    renderThemeSubMenu({
+      ...defaultProps,
+      hasLocalOverride: true,
+      onClearLocalSettings: mockClear,
+    });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Clear local theme');
+    userEvent.click(within(menu).getByText('Clear local theme'));
+
+    expect(mockClear).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays sun icon for DEFAULT theme', () => {
+    renderThemeSubMenu({ ...defaultProps, themeMode: ThemeMode.DEFAULT });
+    expect(screen.getByTestId('sun')).toBeInTheDocument();
+  });
+
+  it('displays moon icon for DARK theme', () => {
+    renderThemeSubMenu({ ...defaultProps, themeMode: ThemeMode.DARK });
+    expect(screen.getByTestId('moon')).toBeInTheDocument();
+  });
+
+  it('displays format-painter icon for SYSTEM theme', () => {
+    renderThemeSubMenu({ ...defaultProps, themeMode: ThemeMode.SYSTEM });
+    expect(screen.getByTestId('format-painter')).toBeInTheDocument();
+  });
+
+  it('displays override icon when hasLocalOverride is true', () => {
+    renderThemeSubMenu({ ...defaultProps, hasLocalOverride: true });
+    expect(screen.getByTestId('format-painter')).toBeInTheDocument();
+  });
+
+  it('renders Theme group header', async () => {
+    renderThemeSubMenu();
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Theme');
+
+    expect(within(menu).getByText('Theme')).toBeInTheDocument();
+  });
+
+  it('renders sun icon for Light theme option', async () => {
+    renderThemeSubMenu();
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Light');
+    const lightOption = within(menu).getByText('Light').closest('li');
+
+    expect(within(lightOption!).getByTestId('sun')).toBeInTheDocument();
+  });
+
+  it('renders moon icon for Dark theme option', async () => {
+    renderThemeSubMenu();
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Dark');
+    const darkOption = within(menu).getByText('Dark').closest('li');
+
+    expect(within(darkOption!).getByTestId('moon')).toBeInTheDocument();
+  });
+
+  it('renders format-painter icon for Match system option', async () => {
+    renderThemeSubMenu({ ...defaultProps, allowOSPreference: true });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Match system');
+    const matchOption = within(menu).getByText('Match system').closest('li');
+
+    expect(
+      within(matchOption!).getByTestId('format-painter'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders clear icon for Clear local theme option', async () => {
+    renderThemeSubMenu({
+      ...defaultProps,
+      hasLocalOverride: true,
+      onClearLocalSettings: jest.fn(),
+    });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const menu = await findMenuWithText('Clear local theme');
+    const clearOption = within(menu)
+      .getByText('Clear local theme')
+      .closest('li');
+
+    expect(within(clearOption!).getByTestId('clear')).toBeInTheDocument();
+  });
+
+  it('renders divider before clear option when clear option is present', async () => {
+    renderThemeSubMenu({
+      ...defaultProps,
+      hasLocalOverride: true,
+      onClearLocalSettings: jest.fn(),
+    });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+
+    const menu = await findMenuWithText('Clear local theme');
+    const divider = within(menu).queryByRole('separator');
+
+    expect(divider).toBeInTheDocument();
+  });
+
+  it('does not render divider when clear option is not present', async () => {
+    renderThemeSubMenu({ ...defaultProps });
+
+    userEvent.hover(await screen.findByRole('menuitem'));
+    const divider = document.querySelector('.ant-menu-item-divider');
+
+    expect(divider).toBeNull();
+  });
+});

superset-frontend/packages/superset-ui-core/src/components/ThemeSubMenu/index.tsx

@@ -0,0 +1,170 @@
+/**
+ * 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 { useMemo } from 'react';
+import { Icons, Menu } from '@superset-ui/core/components';
+import {
+  css,
+  styled,
+  t,
+  ThemeMode,
+  useTheme,
+  ThemeAlgorithm,
+} from '@superset-ui/core';
+
+const StyledThemeSubMenu = styled(Menu.SubMenu)`
+  ${({ theme }) => css`
+    [data-icon='caret-down'] {
+      color: ${theme.colorIcon};
+      font-size: ${theme.fontSizeXS}px;
+      margin-left: ${theme.sizeUnit}px;
+    }
+    &.ant-menu-submenu-active {
+      .ant-menu-title-content {
+        color: ${theme.colorPrimary};
+      }
+    }
+  `}
+`;
+
+const StyledThemeSubMenuItem = styled(Menu.Item)<{ selected: boolean }>`
+  ${({ theme, selected }) => css`
+    &:hover {
+      color: ${theme.colorPrimary} !important;
+      cursor: pointer !important;
+    }
+    ${selected &&
+    css`
+      background-color: ${theme.colors.primary.light4} !important;
+      color: ${theme.colors.primary.dark1} !important;
+    `}
+  `}
+`;
+
+export interface ThemeSubMenuOption {
+  key: ThemeMode;
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export interface ThemeSubMenuProps {
+  setThemeMode: (newMode: ThemeMode) => void;
+  themeMode: ThemeMode;
+  hasLocalOverride?: boolean;
+  onClearLocalSettings?: () => void;
+  allowOSPreference?: boolean;
+}
+
+export const ThemeSubMenu: React.FC<ThemeSubMenuProps> = ({
+  setThemeMode,
+  themeMode,
+  hasLocalOverride = false,
+  onClearLocalSettings,
+  allowOSPreference = true,
+}: ThemeSubMenuProps) => {
+  const theme = useTheme();
+
+  const handleSelect = (mode: ThemeMode) => {
+    setThemeMode(mode);
+  };
+
+  const themeIconMap: Record<ThemeAlgorithm | ThemeMode, React.ReactNode> =
+    useMemo(
+      () => ({
+        [ThemeAlgorithm.DEFAULT]: <Icons.SunOutlined />,
+        [ThemeAlgorithm.DARK]: <Icons.MoonOutlined />,
+        [ThemeMode.SYSTEM]: <Icons.FormatPainterOutlined />,
+        [ThemeAlgorithm.COMPACT]: <Icons.CompressOutlined />,
+      }),
+      [],
+    );
+
+  const selectedThemeModeIcon = useMemo(
+    () =>
+      hasLocalOverride ? (
+        <Icons.FormatPainterOutlined
+          style={{ color: theme.colors.error.base }}
+        />
+      ) : (
+        themeIconMap[themeMode]
+      ),
+    [hasLocalOverride, theme.colors.error.base, themeIconMap, themeMode],
+  );
+
+  const themeOptions: ThemeSubMenuOption[] = [
+    {
+      key: ThemeMode.DEFAULT,
+      label: t('Light'),
+      icon: <Icons.SunOutlined />,
+      onClick: () => handleSelect(ThemeMode.DEFAULT),
+    },
+    {
+      key: ThemeMode.DARK,
+      label: t('Dark'),
+      icon: <Icons.MoonOutlined />,
+      onClick: () => handleSelect(ThemeMode.DARK),
+    },
+    ...(allowOSPreference
+      ? [
+          {
+            key: ThemeMode.SYSTEM,
+            label: t('Match system'),
+            icon: <Icons.FormatPainterOutlined />,
+            onClick: () => handleSelect(ThemeMode.SYSTEM),
+          },
+        ]
+      : []),
+  ];
+
+  // Add clear settings option only when there's a local theme active
+  const clearOption =
+    onClearLocalSettings && hasLocalOverride
+      ? {
+          key: 'clear-local',
+          label: t('Clear local theme'),
+          icon: <Icons.ClearOutlined />,
+          onClick: onClearLocalSettings,
+        }
+      : null;
+
+  return (
+    <StyledThemeSubMenu
+      key="theme-sub-menu"
+      title={selectedThemeModeIcon}
+      icon={<Icons.CaretDownOutlined iconSize="xs" />}
+    >
+      <Menu.ItemGroup title={t('Theme')} />
+      {themeOptions.map(option => (
+        <StyledThemeSubMenuItem
+          key={option.key}
+          onClick={option.onClick}
+          selected={option.key === themeMode}
+        >
+          {option.icon} {option.label}
+        </StyledThemeSubMenuItem>
+      ))}
+      {clearOption && [
+        <Menu.Divider key="theme-divider" />,
+        <Menu.Item key={clearOption.key} onClick={clearOption.onClick}>
+          {clearOption.icon} {clearOption.label}
+        </Menu.Item>,
+      ]}
+    </StyledThemeSubMenu>
+  );
+};

superset-frontend/packages/superset-ui-core/src/components/UnsavedChangesModal/index.tsx

@@ -16,14 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, css, useTheme } from '@superset-ui/core';
-import {
-  Icons,
-  Modal,
-  Typography,
-  Button,
-  Flex,
-} from '@superset-ui/core/components';
+import { t } from '@superset-ui/core';
+import { Icons, Modal, Typography, Button } from '@superset-ui/core/components';
 import type { FC, ReactElement } from 'react';
 
 export type UnsavedChangesModalProps = {
@@ -42,66 +36,30 @@ export const UnsavedChangesModal: FC<UnsavedChangesModalProps> = ({
   onConfirmNavigation,
   title = 'Unsaved Changes',
   body = "If you don't save, changes will be lost.",
-}): ReactElement => {
-  const theme = useTheme();
-
-  return (
-    <Modal
-      name={title}
-      centered
-      responsive
-      onHide={onHide}
-      show={showModal}
-      width="444px"
-      title={
-        <Flex>
-          <Icons.WarningOutlined
-            iconColor={theme.colorWarning}
-            css={css`
-              margin-right: ${theme.sizeUnit * 2}px;
-            `}
-            iconSize="l"
-          />
-          <Typography.Title
-            css={css`
-              && {
-                margin: 0;
-                margin-bottom: 0;
-              }
-            `}
-            level={5}
-          >
-            {title}
-          </Typography.Title>
-        </Flex>
-      }
-      footer={
-        <Flex
-          justify="flex-end"
-          css={css`
-            width: 100%;
-          `}
-        >
-          <Button
-            htmlType="button"
-            buttonSize="small"
-            buttonStyle="secondary"
-            onClick={onConfirmNavigation}
-          >
-            {t('Discard')}
-          </Button>
-          <Button
-            htmlType="button"
-            buttonSize="small"
-            buttonStyle="primary"
-            onClick={handleSave}
-          >
-            {t('Save')}
-          </Button>
-        </Flex>
-      }
-    >
-      <Typography.Text>{body}</Typography.Text>
-    </Modal>
-  );
-};
+}: UnsavedChangesModalProps): ReactElement => (
+  <Modal
+    centered
+    responsive
+    onHide={onHide}
+    show={showModal}
+    width="444px"
+    title={
+      <>
+        <Icons.WarningOutlined iconSize="m" style={{ marginRight: 8 }} />
+        {title}
+      </>
+    }
+    footer={
+      <>
+        <Button buttonStyle="secondary" onClick={onConfirmNavigation}>
+          {t('Discard')}
+        </Button>
+        <Button buttonStyle="primary" onClick={handleSave}>
+          {t('Save')}
+        </Button>
+      </>
+    }
+  >
+    <Typography.Text>{body}</Typography.Text>
+  </Modal>
+);

superset-frontend/packages/superset-ui-core/src/components/index.ts

@@ -164,6 +164,8 @@ export * from './Steps';
 export * from './Table';
 export * from './TableView';
 export * from './Tag';
+export * from './TelemetryPixel';
+export * from './ThemeSubMenu';
 export * from './UnsavedChangesModal';
 export * from './constants';
 export * from './Result';

superset-frontend/packages/superset-ui-core/src/theme/index.tsx

@@ -26,7 +26,9 @@ import {
   type ThemeStorage,
   type ThemeControllerOptions,
   type ThemeContextType,
+  type SupersetThemeConfig,
   ThemeAlgorithm,
+  ThemeMode,
 } from './types';
 
 export {
@@ -66,7 +68,16 @@ const themeObject: Theme = Theme.fromConfig({
 const { theme } = themeObject;
 const supersetTheme = theme;
 
-export { Theme, themeObject, styled, theme, supersetTheme };
+export {
+  Theme,
+  ThemeAlgorithm,
+  ThemeMode,
+  themeObject,
+  styled,
+  theme,
+  supersetTheme,
+};
+
 export type {
   SupersetTheme,
   SerializableThemeConfig,
@@ -74,6 +85,7 @@ export type {
   ThemeStorage,
   ThemeControllerOptions,
   ThemeContextType,
+  SupersetThemeConfig,
 };
 
 // Export theme utility functions

superset-frontend/packages/superset-ui-core/src/theme/types.ts

@@ -429,3 +429,16 @@ export interface ThemeContextType {
   canDetectOSPreference: () => boolean;
   createDashboardThemeProvider: (themeId: string) => Promise<Theme | null>;
 }
+
+/**
+ * Configuration object for complete theme setup including default, dark themes and settings
+ */
+export interface SupersetThemeConfig {
+  theme_default: AnyThemeConfig;
+  theme_dark?: AnyThemeConfig;
+  theme_settings?: {
+    enforced?: boolean;
+    allowSwitching?: boolean;
+    allowOSPreference?: boolean;
+  };
+}

superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts

@@ -119,7 +119,7 @@ describe('ChartProps', () => {
       });
       expect(props1).not.toBe(props2);
     });
-    it('selector returns a new chartProps if some input fields change', () => {
+    it('selector returns a new chartProps if some input fields change and returns memoized chart props', () => {
       const props1 = selector({
         width: 800,
         height: 600,
@@ -145,7 +145,7 @@ describe('ChartProps', () => {
         theme: supersetTheme,
       });
       expect(props1).not.toBe(props2);
-      expect(props1).not.toBe(props3);
+      expect(props1).toBe(props3);
     });
   });
 });

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.js

@@ -1385,7 +1385,7 @@ export default function (config) {
         p[0] = p[0] - __.margin.left;
         p[1] = p[1] - __.margin.top;
 
-        (dims = dimensionsForPoint(p)),
+        ((dims = dimensionsForPoint(p)),
           (strum = {
             p1: p,
             dims: dims,
@@ -1393,7 +1393,7 @@ export default function (config) {
             maxX: xscale(dims.right),
             minY: 0,
             maxY: h(),
-          });
+          }));
 
         strums[dims.i] = strum;
         strums.active = dims.i;
@@ -1942,7 +1942,7 @@ export default function (config) {
         p[0] = p[0] - __.margin.left;
         p[1] = p[1] - __.margin.top;
 
-        (dims = dimensionsForPoint(p)),
+        ((dims = dimensionsForPoint(p)),
           (arc = {
             p1: p,
             dims: dims,
@@ -1953,7 +1953,7 @@ export default function (config) {
             startAngle: undefined,
             endAngle: undefined,
             arc: d3.svg.arc().innerRadius(0),
-          });
+          }));
 
         arcs[dims.i] = arc;
         arcs.active = dims.i;

superset-frontend/plugins/plugin-chart-ag-grid-table/package.json

@@ -27,8 +27,8 @@
     "@react-icons/all-files": "^4.1.0",
     "@types/d3-array": "^2.9.0",
     "@types/react-table": "^7.7.20",
-    "ag-grid-community": "^33.1.1",
-    "ag-grid-react": "^33.1.1",
+    "ag-grid-community": "^34.0.2",
+    "ag-grid-react": "^34.0.2",
     "classnames": "^2.5.1",
     "d3-array": "^2.4.0",
     "lodash": "^4.17.21",

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/TimeComparisonVisibility.tsx

@@ -18,7 +18,7 @@
  */
 /* eslint-disable import/no-extraneous-dependencies */
 import { useState } from 'react';
-import { Dropdown, Menu } from 'antd';
+import { Dropdown } from 'antd';
 import { TableOutlined, DownOutlined, CheckOutlined } from '@ant-design/icons';
 import { t } from '@superset-ui/core';
 import { InfoText, ColumnLabel, CheckIconWrapper } from '../../styles';
@@ -69,34 +69,42 @@ const TimeComparisonVisibility: React.FC<TimeComparisonVisibilityProps> = ({
   return (
     <Dropdown
       placement="bottomRight"
-      visible={showComparisonDropdown}
-      onVisibleChange={(flag: boolean) => {
+      open={showComparisonDropdown}
+      onOpenChange={(flag: boolean) => {
         setShowComparisonDropdown(flag);
       }}
-      overlay={
-        <Menu
-          multiple
-          onClick={handleOnClick}
-          onBlur={handleOnBlur}
-          selectedKeys={selectedComparisonColumns}
-        >
-          <InfoText>
-            {t(
-              'Select columns that will be displayed in the table. You can multiselect columns.',
-            )}
-          </InfoText>
-          {comparisonColumns.map((column: ComparisonColumn) => (
-            <Menu.Item key={column.key}>
-              <ColumnLabel>{column.label}</ColumnLabel>
-              <CheckIconWrapper>
-                {selectedComparisonColumns.includes(column.key) && (
-                  <CheckOutlined />
+      menu={{
+        multiple: true,
+        onClick: handleOnClick,
+        onBlur: handleOnBlur,
+        selectedKeys: selectedComparisonColumns,
+        items: [
+          {
+            key: 'all',
+            label: (
+              <InfoText>
+                {t(
+                  'Select columns that will be displayed in the table. You can multiselect columns.',
                 )}
-              </CheckIconWrapper>
-            </Menu.Item>
-          ))}
-        </Menu>
-      }
+              </InfoText>
+            ),
+            type: 'group',
+            children: comparisonColumns.map((column: ComparisonColumn) => ({
+              key: column.key,
+              label: (
+                <>
+                  <ColumnLabel>{column.label}</ColumnLabel>
+                  <CheckIconWrapper>
+                    {selectedComparisonColumns.includes(column.key) && (
+                      <CheckOutlined />
+                    )}
+                  </CheckIconWrapper>
+                </>
+              ),
+            })),
+          },
+        ],
+      }}
       trigger={['click']}
     >
       <span>

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.test.ts

@@ -49,38 +49,53 @@ describe('BigNumberWithTrendline buildQuery', () => {
     aggregation: null,
   };
 
-  it('creates raw metric query when aggregation is null', () => {
-    const queryContext = buildQuery({ ...baseFormData });
+  it('creates raw metric query when aggregation is "raw"', () => {
+    const queryContext = buildQuery({ ...baseFormData, aggregation: 'raw' });
     const bigNumberQuery = queryContext.queries[1];
 
-    expect(bigNumberQuery.post_processing).toEqual([{ operation: 'pivot' }]);
-    expect(bigNumberQuery.is_timeseries).toBe(true);
+    expect(bigNumberQuery.post_processing).toEqual([]);
+    expect(bigNumberQuery.is_timeseries).toBe(false);
+    expect(bigNumberQuery.columns).toEqual([]);
   });
 
-  it('adds aggregation operator when aggregation is "sum"', () => {
+  it('returns single query for aggregation methods that can be computed client-side', () => {
     const queryContext = buildQuery({ ...baseFormData, aggregation: 'sum' });
-    const bigNumberQuery = queryContext.queries[1];
 
-    expect(bigNumberQuery.post_processing).toEqual([
+    expect(queryContext.queries.length).toBe(1);
+    expect(queryContext.queries[0].post_processing).toEqual([
       { operation: 'pivot' },
-      { operation: 'aggregation', options: { operator: 'sum' } },
+      { operation: 'rolling' },
+      { operation: 'resample' },
+      { operation: 'flatten' },
     ]);
-    expect(bigNumberQuery.is_timeseries).toBe(true);
   });
 
-  it('skips aggregation when aggregation is LAST_VALUE', () => {
+  it('returns single query for LAST_VALUE aggregation', () => {
     const queryContext = buildQuery({
       ...baseFormData,
       aggregation: 'LAST_VALUE',
     });
-    const bigNumberQuery = queryContext.queries[1];
 
-    expect(bigNumberQuery.post_processing).toEqual([{ operation: 'pivot' }]);
-    expect(bigNumberQuery.is_timeseries).toBe(true);
+    expect(queryContext.queries.length).toBe(1);
+    expect(queryContext.queries[0].post_processing).toEqual([
+      { operation: 'pivot' },
+      { operation: 'rolling' },
+      { operation: 'resample' },
+      { operation: 'flatten' },
+    ]);
   });
 
-  it('always returns two queries', () => {
-    const queryContext = buildQuery({ ...baseFormData });
+  it('returns two queries only for raw aggregation', () => {
+    const queryContext = buildQuery({ ...baseFormData, aggregation: 'raw' });
     expect(queryContext.queries.length).toBe(2);
+
+    const queryContextLastValue = buildQuery({
+      ...baseFormData,
+      aggregation: 'LAST_VALUE',
+    });
+    expect(queryContextLastValue.queries.length).toBe(1);
+
+    const queryContextSum = buildQuery({ ...baseFormData, aggregation: 'sum' });
+    expect(queryContextSum.queries.length).toBe(1);
   });
 });

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts

@@ -39,28 +39,37 @@ export default function buildQuery(formData: QueryFormData) {
     ? ensureIsArray(getXAxisColumn(formData))
     : [];
 
-  return buildQueryContext(formData, baseQueryObject => [
-    {
-      ...baseQueryObject,
-      columns: [...timeColumn],
-      ...(timeColumn.length ? {} : { is_timeseries: true }),
-      post_processing: [
-        pivotOperator(formData, baseQueryObject),
-        rollingWindowOperator(formData, baseQueryObject),
-        resampleOperator(formData, baseQueryObject),
-        flattenOperator(formData, baseQueryObject),
-      ],
-    },
-    {
-      ...baseQueryObject,
-      columns: [...(isRawMetric ? [] : timeColumn)],
-      is_timeseries: !isRawMetric,
-      post_processing: isRawMetric
-        ? []
-        : [
-            pivotOperator(formData, baseQueryObject),
-            aggregationOperator(formData, baseQueryObject),
-          ],
-    },
-  ]);
+  return buildQueryContext(formData, baseQueryObject => {
+    const queries = [
+      {
+        ...baseQueryObject,
+        columns: [...timeColumn],
+        ...(timeColumn.length ? {} : { is_timeseries: true }),
+        post_processing: [
+          pivotOperator(formData, baseQueryObject),
+          rollingWindowOperator(formData, baseQueryObject),
+          resampleOperator(formData, baseQueryObject),
+          flattenOperator(formData, baseQueryObject),
+        ].filter(Boolean),
+      },
+    ];
+
+    // Only add second query for raw metrics which need different query structure
+    // All other aggregations (sum, mean, min, max, median, LAST_VALUE) can be computed client-side from trendline data
+    if (formData.aggregation === 'raw') {
+      queries.push({
+        ...baseQueryObject,
+        columns: [...(isRawMetric ? [] : timeColumn)],
+        is_timeseries: !isRawMetric,
+        post_processing: isRawMetric
+          ? []
+          : ([
+              pivotOperator(formData, baseQueryObject),
+              aggregationOperator(formData, baseQueryObject),
+            ].filter(Boolean) as any[]),
+      });
+    }
+
+    return queries;
+  });
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts

@@ -20,6 +20,41 @@ import { GenericDataType } from '@superset-ui/core';
 import transformProps from './transformProps';
 import { BigNumberWithTrendlineChartProps, BigNumberDatum } from '../types';
 
+// Mock chart-controls to avoid styled-components issues in Jest
+jest.mock('@superset-ui/chart-controls', () => ({
+  aggregationChoices: {
+    raw: {
+      label: 'Force server-side aggregation',
+      compute: (data: number[]) => data[0] ?? null,
+    },
+    LAST_VALUE: {
+      label: 'Last Value',
+      compute: (data: number[]) => data[0] ?? null,
+    },
+    sum: {
+      label: 'Total (Sum)',
+      compute: (data: number[]) => data.reduce((a, b) => a + b, 0),
+    },
+    mean: {
+      label: 'Average (Mean)',
+      compute: (data: number[]) =>
+        data.reduce((a, b) => a + b, 0) / data.length,
+    },
+    min: { label: 'Minimum', compute: (data: number[]) => Math.min(...data) },
+    max: { label: 'Maximum', compute: (data: number[]) => Math.max(...data) },
+    median: {
+      label: 'Median',
+      compute: (data: number[]) => {
+        const sorted = [...data].sort((a, b) => a - b);
+        const mid = Math.floor(sorted.length / 2);
+        return sorted.length % 2 === 0
+          ? (sorted[mid - 1] + sorted[mid]) / 2
+          : sorted[mid];
+      },
+    },
+  },
+}));
+
 jest.mock('@superset-ui/core', () => ({
   GenericDataType: { Temporal: 2, String: 1 },
   extractTimegrain: jest.fn(() => 'P1D'),
@@ -218,7 +253,7 @@ describe('BigNumberWithTrendline transformProps', () => {
           coltypes: ['NUMERIC'],
         },
       ],
-      formData: { ...baseFormData, aggregation: 'SUM' },
+      formData: { ...baseFormData, aggregation: 'sum' },
       rawFormData: baseRawFormData,
       hooks: baseHooks,
       datasource: baseDatasource,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -29,6 +29,7 @@ import {
   tooltipHtml,
 } from '@superset-ui/core';
 import { EChartsCoreOption, graphic } from 'echarts/core';
+import { aggregationChoices } from '@superset-ui/chart-controls';
 import {
   BigNumberVizProps,
   BigNumberDatum,
@@ -43,6 +44,31 @@ const formatPercentChange = getNumberFormatter(
   NumberFormats.PERCENT_SIGNED_1_POINT,
 );
 
+// Client-side aggregation function using shared aggregationChoices
+function computeClientSideAggregation(
+  data: [number | null, number | null][],
+  aggregation: string | undefined | null,
+): number | null {
+  if (!data.length) return null;
+
+  // Find the aggregation method, handling case variations
+  const methodKey = Object.keys(aggregationChoices).find(
+    key => key.toLowerCase() === (aggregation || '').toLowerCase(),
+  );
+
+  // Use the compute method from aggregationChoices, fallback to LAST_VALUE
+  const selectedMethod = methodKey
+    ? aggregationChoices[methodKey as keyof typeof aggregationChoices]
+    : aggregationChoices.LAST_VALUE;
+
+  // Extract values from tuple array and filter out nulls
+  const values = data
+    .map(([, value]) => value)
+    .filter((v): v is number => v !== null);
+
+  return selectedMethod.compute(values);
+}
+
 export default function transformProps(
   chartProps: BigNumberWithTrendlineChartProps,
 ): BigNumberVizProps {
@@ -126,27 +152,33 @@ export default function transformProps(
       // sort in time descending order
       .sort((a, b) => (a[0] !== null && b[0] !== null ? b[0] - a[0] : 0));
   }
-  if (hasAggregatedData && aggregatedData) {
-    if (
-      aggregatedData[metricName] !== null &&
-      aggregatedData[metricName] !== undefined
-    ) {
-      bigNumber = aggregatedData[metricName];
-    } else {
-      const metricKeys = Object.keys(aggregatedData).filter(
-        key =>
-          key !== xAxisLabel &&
-          aggregatedData[key] !== null &&
-          typeof aggregatedData[key] === 'number',
-      );
-      bigNumber = metricKeys.length > 0 ? aggregatedData[metricKeys[0]] : null;
-    }
-
-    timestamp = sortedData.length > 0 ? sortedData[0][0] : null;
-  } else if (sortedData.length > 0) {
-    bigNumber = sortedData[0][1];
+  if (sortedData.length > 0) {
     timestamp = sortedData[0][0];
 
+    // Raw aggregation uses server-side data, all others use client-side
+    if (aggregation === 'raw' && hasAggregatedData && aggregatedData) {
+      // Use server-side aggregation for raw
+      if (
+        aggregatedData[metricName] !== null &&
+        aggregatedData[metricName] !== undefined
+      ) {
+        bigNumber = aggregatedData[metricName];
+      } else {
+        const metricKeys = Object.keys(aggregatedData).filter(
+          key =>
+            key !== xAxisLabel &&
+            aggregatedData[key] !== null &&
+            typeof aggregatedData[key] === 'number',
+        );
+        bigNumber =
+          metricKeys.length > 0 ? aggregatedData[metricKeys[0]] : null;
+      }
+    } else {
+      // Use client-side aggregation for all other methods
+      bigNumber = computeClientSideAggregation(sortedData, aggregation);
+    }
+
+    // Handle null bigNumber case
     if (bigNumber === null) {
       bigNumberFallback = sortedData.find(d => d[1] !== null);
       bigNumber = bigNumberFallback ? bigNumberFallback[1] : null;

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx

@@ -358,7 +358,22 @@ const config: ControlPanelConfig = {
         ['x_axis_time_format'],
         [xAxisLabelRotation],
         [xAxisLabelInterval],
-        ...richTooltipSection,
+        [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
+        [
+          {
+            name: 'show_query_identifiers',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show query identifiers'),
+              description: t(
+                'Add Query A and Query B identifiers to tooltips to help differentiate series',
+              ),
+              default: false,
+              renderTrigger: true,
+            },
+          },
+        ],
+        ...richTooltipSection.slice(1), // Skip the tooltip header since we added our own
         // eslint-disable-next-line react/jsx-key
         [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
         [

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -212,6 +212,7 @@ export default function transformProps(
     sortSeriesAscendingB,
     timeGrainSqla,
     percentageThreshold,
+    showQueryIdentifiers = false,
     metrics = [],
     metricsB = [],
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
@@ -395,10 +396,17 @@ export default function transformProps(
     const seriesName = inverted[entryName] || entryName;
     const colorScaleKey = getOriginalSeries(seriesName, array);
 
-    let displayName = `${entryName} (Query A)`;
+    let displayName: string;
 
     if (groupby.length > 0) {
-      displayName = `${MetricDisplayNameA} (Query A), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = showQueryIdentifiers
+        ? `${MetricDisplayNameA} (Query A)`
+        : MetricDisplayNameA;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = showQueryIdentifiers ? `${entryName} (Query A)` : entryName;
     }
 
     const seriesFormatter = getFormatter(
@@ -453,10 +461,17 @@ export default function transformProps(
     const seriesName = `${seriesEntry} (1)`;
     const colorScaleKey = getOriginalSeries(seriesEntry, array);
 
-    let displayName = `${entryName} (Query B)`;
+    let displayName: string;
 
     if (groupbyB.length > 0) {
-      displayName = `${MetricDisplayNameB} (Query B), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = showQueryIdentifiers
+        ? `${MetricDisplayNameB} (Query B)`
+        : MetricDisplayNameB;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = showQueryIdentifiers ? `${entryName} (Query B)` : entryName;
     }
 
     const seriesFormatter = getFormatter(
@@ -696,14 +711,13 @@ export default function transformProps(
         zoomable,
       ),
       // @ts-ignore
-      data: rawSeriesA
-        .concat(rawSeriesB)
+      data: series
         .filter(
           entry =>
             extractForecastSeriesContext((entry.name || '') as string).type ===
             ForecastSeriesEnum.Observation,
         )
-        .map(entry => entry.name || '')
+        .map(entry => entry.id || entry.name || '')
         .concat(extractAnnotationLabels(annotationLayers, annotationData)),
     },
     series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts

@@ -60,6 +60,7 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   tooltipTimeFormat?: string;
   zoomable: boolean;
   richTooltip: boolean;
+  showQueryIdentifiers?: boolean;
   xAxisLabelRotation: number;
   xAxisLabelInterval?: number | string;
   colorScheme?: string;
@@ -133,6 +134,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
   groupbyB: [],
   zoomable: TIMESERIES_DEFAULTS.zoomable,
   richTooltip: TIMESERIES_DEFAULTS.richTooltip,
+  showQueryIdentifiers: false,
   xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation,
   xAxisLabelInterval: TIMESERIES_DEFAULTS.xAxisLabelInterval,
   ...DEFAULT_TITLE_FORM_DATA,

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx

@@ -39,7 +39,6 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
     width,
     echartOptions,
     setDataMask,
-    labelMap,
     selectedValues,
     formData,
     onContextMenu,
@@ -52,45 +51,47 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
   const getCrossFilterDataMask = useCallback(
     (treePathInfo: TreePathInfo[]) => {
       const treePath = extractTreePathInfo(treePathInfo);
-      const name = treePath.join(',');
-      const selected = Object.values(selectedValues);
-      let values: string[];
-      if (selected.includes(name)) {
-        values = selected.filter(v => v !== name);
-      } else {
-        values = [name];
+      const joinedTreePath = treePath.join(',');
+      const value = treePath[treePath.length - 1];
+
+      const isCurrentValueSelected =
+        Object.values(selectedValues).includes(joinedTreePath);
+
+      if (!columns?.length || isCurrentValueSelected) {
+        return {
+          dataMask: {
+            extraFormData: {
+              filters: [],
+            },
+            filterState: {
+              value: null,
+              selectedValues: [],
+            },
+          },
+          isCurrentValueSelected,
+        };
       }
-      const labels = values.map(value => labelMap[value]);
 
       return {
         dataMask: {
           extraFormData: {
-            filters:
-              values.length === 0 || !columns
-                ? []
-                : columns.slice(0, treePath.length).map((col, idx) => {
-                    const val = labels.map(v => v[idx]);
-                    if (val === null || val === undefined)
-                      return {
-                        col,
-                        op: 'IS NULL' as const,
-                      };
-                    return {
-                      col,
-                      op: 'IN' as const,
-                      val: val as (string | number | boolean)[],
-                    };
-                  }),
+            filters: [
+              {
+                col: columns[treePath.length - 1],
+                op: '==' as const,
+                val: value,
+              },
+            ],
           },
           filterState: {
-            value: labels.length ? labels : null,
-            selectedValues: values.length ? values : null,
+            value,
+            selectedValues: [joinedTreePath],
           },
         },
-        isCurrentValueSelected: selected.includes(name),
+        isCurrentValueSelected,
       };
     },
-    [columns, labelMap, selectedValues],
+    [columns, selectedValues],
   );
 
   const handleChange = useCallback(
@@ -101,7 +102,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
 
       setDataMask(getCrossFilterDataMask(treePathInfo).dataMask);
     },
-    [emitCrossFilters, setDataMask, getCrossFilterDataMask],
+    [emitCrossFilters, columns?.length, setDataMask, getCrossFilterDataMask],
   );
 
   const eventHandlers: EventHandlers = {

superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts

@@ -128,9 +128,10 @@ describe('BigNumberWithTrendline', () => {
       expect(lastDatum?.[0]).toStrictEqual(100);
       expect(lastDatum?.[1]).toBeNull();
 
-      // should note this is a fallback
+      // should get the last non-null value
       expect(transformed.bigNumber).toStrictEqual(1.2345);
-      expect(transformed.bigNumberFallback).not.toBeNull();
+      // bigNumberFallback is only set when bigNumber is null after aggregation
+      expect(transformed.bigNumberFallback).toBeNull();
 
       // should successfully formatTime by granularity
       // @ts-ignore

superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts

@@ -116,49 +116,48 @@ const chartPropsConfig = {
   theme: supersetTheme,
 };
 
-it('should transform chart props for viz', () => {
-  const chartProps = new ChartProps(chartPropsConfig);
+it('should transform chart props for viz with showQueryIdentifiers=false', () => {
+  const chartPropsConfigWithoutIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      showQueryIdentifiers: false,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers);
   const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
 
-  expect(transformed).toEqual(
-    expect.objectContaining({
-      echartOptions: expect.objectContaining({
-        series: expect.arrayContaining([
-          expect.objectContaining({
-            data: [
-              [599616000000, 1],
-              [599916000000, 3],
-            ],
-            id: 'sum__num (Query A), boy',
-            stack: 'obs\na',
-          }),
-          expect.objectContaining({
-            data: [
-              [599616000000, 2],
-              [599916000000, 4],
-            ],
-            id: 'sum__num (Query A), girl',
-            stack: 'obs\na',
-          }),
-          // Query B — Bar series
-          expect.objectContaining({
-            data: [
-              [599616000000, 1],
-              [599916000000, 3],
-            ],
-            id: 'sum__num (Query B), boy',
-            stack: 'obs\nb',
-          }),
-          expect.objectContaining({
-            data: [
-              [599616000000, 2],
-              [599916000000, 4],
-            ],
-            id: 'sum__num (Query B), girl',
-            stack: 'obs\nb',
-          }),
-        ]),
-      }),
-    }),
+  // Check that series IDs don't include query identifiers
+  const seriesIds = (transformed.echartOptions.series as any[]).map(
+    (s: any) => s.id,
   );
+  expect(seriesIds).toContain('sum__num, girl');
+  expect(seriesIds).toContain('sum__num, boy');
+  expect(seriesIds).not.toContain('sum__num (Query A), girl');
+  expect(seriesIds).not.toContain('sum__num (Query A), boy');
+  expect(seriesIds).not.toContain('sum__num (Query B), girl');
+  expect(seriesIds).not.toContain('sum__num (Query B), boy');
+});
+
+it('should transform chart props for viz with showQueryIdentifiers=true', () => {
+  const chartPropsConfigWithIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      showQueryIdentifiers: true,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithIdentifiers);
+  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
+
+  // Check that series IDs include query identifiers
+  const seriesIds = (transformed.echartOptions.series as any[]).map(
+    (s: any) => s.id,
+  );
+  expect(seriesIds).toContain('sum__num (Query A), girl');
+  expect(seriesIds).toContain('sum__num (Query A), boy');
+  expect(seriesIds).toContain('sum__num (Query B), girl');
+  expect(seriesIds).toContain('sum__num (Query B), boy');
+  expect(seriesIds).not.toContain('sum__num, girl');
+  expect(seriesIds).not.toContain('sum__num, boy');
 });

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx

@@ -34,6 +34,12 @@ const parseLabel = value => {
   return String(value);
 };
 
+function displayCell(value, allowRenderHtml) {
+  if (allowRenderHtml && typeof value === 'string') {
+    return safeHtmlSpan(value);
+  }
+  return parseLabel(value);
+}
 function displayHeaderCell(
   needToggle,
   ArrowIcon,
@@ -742,7 +748,7 @@ export class TableRenderer extends Component {
           onContextMenu={e => this.props.onContextMenu(e, colKey, rowKey)}
           style={style}
         >
-          {agg.format(aggValue)}
+          {displayCell(agg.format(aggValue), allowRenderHtml)}
         </td>
       );
     });
@@ -759,7 +765,7 @@ export class TableRenderer extends Component {
           onClick={rowTotalCallbacks[flatRowKey]}
           onContextMenu={e => this.props.onContextMenu(e, undefined, rowKey)}
         >
-          {agg.format(aggValue)}
+          {displayCell(agg.format(aggValue), allowRenderHtml)}
         </td>
       );
     }
@@ -823,7 +829,7 @@ export class TableRenderer extends Component {
           onContextMenu={e => this.props.onContextMenu(e, colKey, undefined)}
           style={{ padding: '5px' }}
         >
-          {agg.format(aggValue)}
+          {displayCell(agg.format(aggValue), this.props.allowRenderHtml)}
         </td>
       );
     });
@@ -840,7 +846,7 @@ export class TableRenderer extends Component {
           onClick={grandTotalCallback}
           onContextMenu={e => this.props.onContextMenu(e, undefined, undefined)}
         >
-          {agg.format(aggValue)}
+          {displayCell(agg.format(aggValue), this.props.allowRenderHtml)}
         </td>
       );
     }

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -59,7 +59,6 @@ import {
   Space,
   RawAntdSelect as Select,
   Dropdown,
-  Menu,
   Tooltip,
 } from '@superset-ui/core/components';
 import {
@@ -564,52 +563,62 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     return (
       <Dropdown
         placement="bottomRight"
-        visible={showComparisonDropdown}
-        onVisibleChange={(flag: boolean) => {
+        open={showComparisonDropdown}
+        onOpenChange={(flag: boolean) => {
           setShowComparisonDropdown(flag);
         }}
-        overlay={
-          <Menu
-            multiple
-            onClick={handleOnClick}
-            onBlur={handleOnBlur}
-            selectedKeys={selectedComparisonColumns}
-          >
-            <div
-              css={css`
-                max-width: 242px;
-                padding: 0 ${theme.sizeUnit * 2}px;
-                color: ${theme.colorText};
-                font-size: ${theme.fontSizeSM}px;
-              `}
-            >
-              {t(
-                'Select columns that will be displayed in the table. You can multiselect columns.',
-              )}
-            </div>
-            {comparisonColumns.map(column => (
-              <Menu.Item key={column.key}>
-                <span
+        menu={{
+          multiple: true,
+          onClick: handleOnClick,
+          onBlur: handleOnBlur,
+          selectedKeys: selectedComparisonColumns,
+          items: [
+            {
+              key: 'all',
+              label: (
+                <div
                   css={css`
+                    max-width: 242px;
+                    padding: 0 ${theme.sizeUnit * 2}px;
                     color: ${theme.colorText};
-                  `}
-                >
-                  {column.label}
-                </span>
-                <span
-                  css={css`
-                    float: right;
                     font-size: ${theme.fontSizeSM}px;
                   `}
                 >
-                  {selectedComparisonColumns.includes(column.key) && (
-                    <CheckOutlined />
+                  {t(
+                    'Select columns that will be displayed in the table. You can multiselect columns.',
                   )}
-                </span>
-              </Menu.Item>
-            ))}
-          </Menu>
-        }
+                </div>
+              ),
+              type: 'group',
+              children: comparisonColumns.map(
+                (column: { key: string; label: string }) => ({
+                  key: column.key,
+                  label: (
+                    <>
+                      <span
+                        css={css`
+                          color: ${theme.colorText};
+                        `}
+                      >
+                        {column.label}
+                      </span>
+                      <span
+                        css={css`
+                          float: right;
+                          font-size: ${theme.fontSizeSM}px;
+                        `}
+                      >
+                        {selectedComparisonColumns.includes(column.key) && (
+                          <CheckOutlined />
+                        )}
+                      </span>
+                    </>
+                  ),
+                }),
+              ),
+            },
+          ],
+        }}
         trigger={['click']}
       >
         <span>

superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx

@@ -46,7 +46,7 @@ const ExploreResultsButton = ({
       tooltip={t('Explore the result set in the data exploration view')}
       data-test="explore-results-button"
     >
-      {t('Create Chart')}
+      {t('Create chart')}
     </Button>
   );
 };

superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx

@@ -51,7 +51,7 @@ export const KEY_MAP: Record<KeyboardShortcut, string | undefined> = {
   [KeyboardShortcut.CtrlE]: userOS !== 'MacOS' ? t('Stop query') : undefined,
   [KeyboardShortcut.CtrlQ]: userOS === 'Windows' ? t('New tab') : undefined,
   [KeyboardShortcut.CtrlT]: userOS !== 'Windows' ? t('New tab') : undefined,
-  [KeyboardShortcut.CtrlP]: t('Previous Line'),
+  [KeyboardShortcut.CtrlP]: t('Previous line'),
   [KeyboardShortcut.CtrlShiftF]: t('Format SQL'),
   [KeyboardShortcut.CtrlLeft]: t('Switch to the previous tab'),
   [KeyboardShortcut.CtrlRight]: t('Switch to the next tab'),

superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx

@@ -158,7 +158,7 @@ const updateDataset = async (
   return data.json.result;
 };
 
-const UNTITLED = t('Untitled Dataset');
+const UNTITLED = t('Untitled dataset');
 
 export const SaveDatasetModal = ({
   visible,
@@ -374,10 +374,10 @@ export const SaveDatasetModal = ({
   return (
     <Modal
       show={visible}
-      name={t('Save or Overwrite Dataset')}
+      name={t('Save or overwrite dataset')}
       title={
         <ModalTitleWithIcon
-          title={t('Save or Overwrite Dataset')}
+          title={t('Save or overwrite dataset')}
           icon={<Icons.SaveOutlined />}
           data-test="save-or-overwrite-dataset-title"
         />
@@ -394,7 +394,7 @@ export const SaveDatasetModal = ({
                 }
               />
               <span style={{ marginLeft: '5px' }}>
-                {t('Include Template Parameters')}
+                {t('Include template parameters')}
               </span>
             </div>
           )}

superset-frontend/src/components/Chart/DrillDetail/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { default as DrillDetailMenuItems } from './DrillDetailMenuItems';
+export { useDrillDetailMenuItems } from './useDrillDetailMenuItems';

superset-frontend/src/components/Chart/DrillDetail/useDrillDetailMenuItems.tsx

@@ -0,0 +1,269 @@
+/**
+ * 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 {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useMemo,
+} from 'react';
+import { isEmpty } from 'lodash';
+import {
+  Behavior,
+  BinaryQueryObjectFilterClause,
+  css,
+  extractQueryFields,
+  getChartMetadataRegistry,
+  QueryFormData,
+  removeHTMLTags,
+  styled,
+  t,
+} from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import { MenuItem } from '@superset-ui/core/components/Menu';
+import { RootState } from 'src/dashboard/types';
+import { getSubmenuYOffset } from '../utils';
+import { MenuItemTooltip } from '../DisabledMenuItemTooltip';
+import { useMenuItemWithTruncation } from '../MenuItemWithTruncation';
+
+const DRILL_TO_DETAIL = t('Drill to detail');
+const DRILL_TO_DETAIL_BY = t('Drill to detail by');
+const DISABLED_REASONS = {
+  DATABASE: t(
+    'Drill to detail is disabled for this database. Change the database settings to enable it.',
+  ),
+  NO_AGGREGATIONS: t(
+    'Drill to detail is disabled because this chart does not group data by dimension value.',
+  ),
+  NO_FILTERS: t(
+    'Right-click on a dimension value to drill to detail by that value.',
+  ),
+  NOT_SUPPORTED: t(
+    'Drill to detail by value is not yet supported for this chart type.',
+  ),
+};
+
+function getDisabledMenuItem(
+  children: ReactNode,
+  menuKey: string,
+  ...rest: unknown[]
+): MenuItem {
+  return {
+    disabled: true,
+    key: menuKey,
+    label: (
+      <div
+        css={css`
+          white-space: normal;
+          max-width: 160px;
+        `}
+      >
+        {children}
+      </div>
+    ),
+    ...rest,
+  };
+}
+
+const Filter = ({
+  children,
+  stripHTML = false,
+}: {
+  children: ReactNode;
+  stripHTML: boolean;
+}) => {
+  const content =
+    stripHTML && typeof children === 'string'
+      ? removeHTMLTags(children)
+      : children;
+  return <span>{content}</span>;
+};
+
+const StyledFilter = styled(Filter)`
+  ${({ theme }) => `
+     font-weight: ${theme.fontWeightStrong};
+     color: ${theme.colorPrimary};
+   `}
+`;
+
+export type DrillDetailMenuItemsArgs = {
+  formData: QueryFormData;
+  filters?: BinaryQueryObjectFilterClause[];
+  setFilters: Dispatch<SetStateAction<BinaryQueryObjectFilterClause[]>>;
+  isContextMenu?: boolean;
+  contextMenuY?: number;
+  onSelection?: () => void;
+  onClick?: (event: MouseEvent) => void;
+  submenuIndex?: number;
+  setShowModal: (show: boolean) => void;
+  key?: string;
+  forceSubmenuRender?: boolean;
+};
+
+export const useDrillDetailMenuItems = ({
+  formData,
+  filters = [],
+  isContextMenu = false,
+  contextMenuY = 0,
+  onSelection = () => null,
+  onClick = () => null,
+  submenuIndex = 0,
+  setFilters,
+  setShowModal,
+  key,
+  ...props
+}: DrillDetailMenuItemsArgs) => {
+  const drillToDetailDisabled = useSelector<RootState, boolean | undefined>(
+    ({ datasources }) =>
+      datasources[formData.datasource]?.database?.disable_drill_to_detail,
+  );
+
+  const openModal = useCallback(
+    (filters, event) => {
+      onClick(event);
+      onSelection();
+      setFilters(filters);
+      setShowModal(true);
+    },
+    [onClick, onSelection],
+  );
+
+  // Check for Behavior.DRILL_TO_DETAIL to tell if plugin handles the `contextmenu`
+  // event for dimensions.  If it doesn't, tell the user that drill to detail by
+  // dimension is not supported.  If it does, and the `contextmenu` handler didn't
+  // pass any filters, tell the user that they didn't select a dimension.
+  const handlesDimensionContextMenu = useMemo(
+    () =>
+      getChartMetadataRegistry()
+        .get(formData.viz_type)
+        ?.behaviors.find(behavior => behavior === Behavior.DrillToDetail),
+    [formData.viz_type],
+  );
+
+  // Check metrics to see if chart's current configuration lacks
+  // aggregations, in which case Drill to Detail should be disabled.
+  const noAggregations = useMemo(() => {
+    const { metrics } = extractQueryFields(formData);
+    return isEmpty(metrics);
+  }, [formData]);
+
+  // Ensure submenu doesn't appear offscreen
+  const submenuYOffset = useMemo(
+    () =>
+      getSubmenuYOffset(
+        contextMenuY,
+        filters.length > 1 ? filters.length + 1 : filters.length,
+        submenuIndex,
+      ),
+    [contextMenuY, filters.length, submenuIndex],
+  );
+
+  let drillDisabled;
+  let drillByDisabled;
+  if (drillToDetailDisabled) {
+    drillDisabled = DISABLED_REASONS.DATABASE;
+    drillByDisabled = DISABLED_REASONS.DATABASE;
+  } else if (handlesDimensionContextMenu) {
+    if (noAggregations) {
+      drillDisabled = DISABLED_REASONS.NO_AGGREGATIONS;
+      drillByDisabled = DISABLED_REASONS.NO_AGGREGATIONS;
+    } else if (!filters?.length) {
+      drillByDisabled = DISABLED_REASONS.NO_FILTERS;
+    }
+  } else {
+    drillByDisabled = DISABLED_REASONS.NOT_SUPPORTED;
+  }
+
+  const drillToDetailMenuItem: MenuItem = drillDisabled
+    ? getDisabledMenuItem(
+        <>
+          {DRILL_TO_DETAIL}
+          <MenuItemTooltip title={drillDisabled} />
+        </>,
+        'drill-to-detail-disabled',
+        props,
+      )
+    : {
+        key: 'drill-to-detail',
+        label: DRILL_TO_DETAIL,
+        onClick: openModal.bind(null, []),
+        ...props,
+      };
+
+  const getMenuItemWithTruncation = useMenuItemWithTruncation();
+
+  const drillToDetailByMenuItem: MenuItem = drillByDisabled
+    ? getDisabledMenuItem(
+        <>
+          {DRILL_TO_DETAIL_BY}
+          <MenuItemTooltip title={drillByDisabled} />
+        </>,
+        'drill-to-detail-by-disabled',
+        props,
+      )
+    : {
+        key: key || 'drill-to-detail-by',
+        label: DRILL_TO_DETAIL_BY,
+        children: [
+          ...filters.map((filter, i) => ({
+            key: `drill-detail-filter-${i}`,
+            label: getMenuItemWithTruncation({
+              tooltipText: `${DRILL_TO_DETAIL_BY} ${filter.formattedVal}`,
+              onClick: openModal.bind(null, [filter]),
+              key: `drill-detail-filter-${i}`,
+              children: (
+                <>
+                  {`${DRILL_TO_DETAIL_BY} `}
+                  <StyledFilter stripHTML>{filter.formattedVal}</StyledFilter>
+                </>
+              ),
+            }),
+          })),
+          filters.length > 1 && {
+            key: 'drill-detail-filter-all',
+            label: getMenuItemWithTruncation({
+              tooltipText: `${DRILL_TO_DETAIL_BY} ${t('all')}`,
+              onClick: openModal.bind(null, filters),
+              key: 'drill-detail-filter-all',
+              children: (
+                <>
+                  {`${DRILL_TO_DETAIL_BY} `}
+                  <StyledFilter stripHTML={false}>{t('all')}</StyledFilter>
+                </>
+              ),
+            }),
+          },
+        ].filter(Boolean) as MenuItem[],
+        onClick: openModal.bind(null, filters),
+        forceSubmenuRender: true,
+        popupOffset: [0, submenuYOffset],
+        popupClassName: 'chart-context-submenu',
+        ...props,
+      };
+  if (isContextMenu) {
+    return {
+      drillToDetailMenuItem,
+      drillToDetailByMenuItem,
+    };
+  }
+  return {
+    drillToDetailMenuItem,
+  };
+};

superset-frontend/src/components/Chart/chartAction.js

@@ -164,7 +164,7 @@ const v1ChartDataRequest = async (
   ownState,
   parseMethod,
 ) => {
-  const payload = buildV1ChartDataPayload({
+  const payload = await buildV1ChartDataPayload({
     formData,
     resultType,
     resultFormat,
@@ -255,7 +255,7 @@ export function runAnnotationQuery({
   isDashboardRequest = false,
   force = false,
 }) {
-  return function (dispatch, getState) {
+  return async function (dispatch, getState) {
     const { charts, common } = getState();
     const sliceKey = key || Object.keys(charts)[0];
     const queryTimeout = timeout || common.conf.SUPERSET_WEBSERVER_TIMEOUT;
@@ -310,17 +310,19 @@ export function runAnnotationQuery({
       fd.annotation_layers[annotationIndex].overrides = sliceFormData;
     }
 
+    const payload = await buildV1ChartDataPayload({
+      formData: fd,
+      force,
+      resultFormat: 'json',
+      resultType: 'full',
+    });
+
     return SupersetClient.post({
       url,
       signal,
       timeout: queryTimeout * 1000,
       headers: { 'Content-Type': 'application/json' },
-      jsonPayload: buildV1ChartDataPayload({
-        formData: fd,
-        force,
-        resultFormat: 'json',
-        resultType: 'full',
-      }),
+      jsonPayload: payload,
     })
       .then(({ json }) => {
         const data = json?.result?.[0]?.annotation_data?.[annotation.name];
@@ -420,6 +422,8 @@ export function exploreJSON(
     const setDataMask = dataMask => {
       dispatch(updateDataMask(formData.slice_id, dataMask));
     };
+    dispatch(chartUpdateStarted(controller, formData, key));
+
     const chartDataRequest = getChartDataRequest({
       setDataMask,
       formData,
@@ -431,8 +435,6 @@ export function exploreJSON(
       ownState,
     });
 
-    dispatch(chartUpdateStarted(controller, formData, key));
-
     const [useLegacyApi] = getQuerySettings(formData);
     const chartDataRequestCaught = chartDataRequest
       .then(({ response, json }) =>

superset-frontend/src/components/Chart/chartActions.test.js

@@ -64,6 +64,7 @@ describe('chart actions', () => {
   let dispatch;
   let getExploreUrlStub;
   let getChartDataUriStub;
+  let buildV1ChartDataPayloadStub;
   let waitForAsyncDataStub;
   let fakeMetadata;
 
@@ -85,6 +86,13 @@ describe('chart actions', () => {
     getChartDataUriStub = sinon
       .stub(exploreUtils, 'getChartDataUri')
       .callsFake(({ qs }) => URI(MOCK_URL).query(qs));
+    buildV1ChartDataPayloadStub = sinon
+      .stub(exploreUtils, 'buildV1ChartDataPayload')
+      .resolves({
+        some_param: 'fake query!',
+        result_type: 'full',
+        result_format: 'json',
+      });
     fakeMetadata = { useLegacyApi: true };
     getChartMetadataRegistry.mockImplementation(() => ({
       get: () => fakeMetadata,
@@ -104,6 +112,7 @@ describe('chart actions', () => {
   afterEach(() => {
     getExploreUrlStub.restore();
     getChartDataUriStub.restore();
+    buildV1ChartDataPayloadStub.restore();
     fetchMock.resetHistory();
     waitForAsyncDataStub.restore();
 
@@ -362,7 +371,7 @@ describe('chart actions timeout', () => {
     jest.clearAllMocks();
   });
 
-  it('should use the timeout from arguments when given', () => {
+  it('should use the timeout from arguments when given', async () => {
     const postSpy = jest.spyOn(SupersetClient, 'post');
     postSpy.mockImplementation(() => Promise.resolve({ json: { result: [] } }));
     const timeout = 10; // Set the timeout value here
@@ -370,7 +379,7 @@ describe('chart actions timeout', () => {
     const key = 'chartKey'; // Set the chart key here
 
     const store = mockStore(initialState);
-    store.dispatch(
+    await store.dispatch(
       actions.runAnnotationQuery({
         annotation: {
           value: 'annotationValue',
@@ -394,14 +403,14 @@ describe('chart actions timeout', () => {
     expect(postSpy).toHaveBeenCalledWith(expectedPayload);
   });
 
-  it('should use the timeout from common.conf when not passed as an argument', () => {
+  it('should use the timeout from common.conf when not passed as an argument', async () => {
     const postSpy = jest.spyOn(SupersetClient, 'post');
     postSpy.mockImplementation(() => Promise.resolve({ json: { result: [] } }));
     const formData = { datasource: 'table__1' }; // Set the formData here
     const key = 'chartKey'; // Set the chart key here
 
     const store = mockStore(initialState);
-    store.dispatch(
+    await store.dispatch(
       actions.runAnnotationQuery({
         annotation: {
           value: 'annotationValue',

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

@@ -18,16 +18,16 @@
  */
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
 import { t } from '@superset-ui/core';
 import { isEmpty } from 'lodash';
 import { URL_PARAMS } from 'src/constants';
-import ShareMenuItems from 'src/dashboard/components/menu/ShareMenuItems';
-import DownloadMenuItems from 'src/dashboard/components/menu/DownloadMenuItems';
+import { useShareMenuItems } from 'src/dashboard/components/menu/ShareMenuItems';
+import { useDownloadMenuItems } from 'src/dashboard/components/menu/DownloadMenuItems';
+import { useHeaderReportMenuItems } from 'src/features/reports/ReportModal/HeaderReportDropdown';
 import CssEditor from 'src/dashboard/components/CssEditor';
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
 import SaveModal from 'src/dashboard/components/SaveModal';
-import HeaderReportDropdown from 'src/features/reports/ReportModal/HeaderReportDropdown';
 import injectCustomCss from 'src/dashboard/util/injectCustomCss';
 import { SAVE_TYPE_NEWDASHBOARD } from 'src/dashboard/util/constants';
 import FilterScopeModal from 'src/dashboard/components/filterscope/FilterScopeModal';
@@ -74,9 +74,6 @@ export const useHeaderActionsMenu = ({
 }: HeaderDropdownProps) => {
   const dispatch = useDispatch();
   const [css, setCss] = useState(customCss || '');
-  const [showReportSubMenu, setShowReportSubMenu] = useState<boolean | null>(
-    null,
-  );
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const directPathToChild = useSelector(
     (state: RootState) => state.dashboardState.directPathToChild,
@@ -172,163 +169,220 @@ export const useHeaderActionsMenu = ({
     [directPathToChild],
   );
 
+  const shareMenuItems = useShareMenuItems({
+    title: t('Share'),
+    disabled: isLoading,
+    url,
+    dashboardId,
+    dashboardComponentId,
+    copyMenuItemTitle: t('Copy permalink to clipboard'),
+    emailMenuItemTitle: t('Share permalink by email'),
+    emailSubject,
+    emailBody: t('Check out this dashboard: '),
+    addSuccessToast,
+    addDangerToast,
+  });
+
+  const downloadMenuItem = useDownloadMenuItems({
+    pdfMenuItemTitle: t('Export to PDF'),
+    imageMenuItemTitle: t('Download as Image'),
+    dashboardTitle,
+    dashboardId,
+    title: t('Download'),
+    disabled: isLoading,
+    logEvent,
+  });
+
+  const reportMenuItem = useHeaderReportMenuItems({
+    dashboardId: dashboardInfo?.id,
+    showReportModal,
+    setCurrentReportDeleting,
+  });
+
+  // Helper function to create menu items for components with triggerNode
+  const createModalMenuItem = (
+    key: string,
+    modalComponent: React.ReactElement,
+  ): MenuItem => ({
+    key,
+    label: modalComponent,
+  });
+
   const menu = useMemo(() => {
     const isEmbedded = !dashboardInfo?.userId;
     const refreshIntervalOptions =
-      dashboardInfo.common?.conf?.DASHBOARD_AUTO_REFRESH_INTERVALS;
+      dashboardInfo?.common?.conf?.DASHBOARD_AUTO_REFRESH_INTERVALS;
+
+    const menuItems: MenuItem[] = [];
+
+    // Refresh dashboard
+    if (!editMode) {
+      menuItems.push({
+        key: MenuKeys.RefreshDashboard,
+        label: t('Refresh dashboard'),
+        disabled: isLoading,
+      });
+    }
+
+    // Toggle fullscreen
+    if (!editMode && !isEmbedded) {
+      menuItems.push({
+        key: MenuKeys.ToggleFullscreen,
+        label: getUrlParam(URL_PARAMS.standalone)
+          ? t('Exit fullscreen')
+          : t('Enter fullscreen'),
+      });
+    }
+
+    // Edit properties
+    if (editMode) {
+      menuItems.push({
+        key: MenuKeys.EditProperties,
+        label: t('Edit properties'),
+      });
+    }
+
+    // Edit CSS
+    if (editMode) {
+      menuItems.push(
+        createModalMenuItem(
+          MenuKeys.EditCss,
+          <CssEditor
+            triggerNode={<div>{t('Theme & CSS')}</div>}
+            initialCss={css}
+            onChange={changeCss}
+            addDangerToast={addDangerToast}
+            currentThemeId={dashboardInfo.theme?.id || null}
+            onThemeChange={handleThemeChange}
+          />,
+        ),
+      );
+    }
+
+    // Divider
+    menuItems.push({ type: 'divider' });
+
+    // Save as
+    if (userCanSave) {
+      menuItems.push(
+        createModalMenuItem(
+          MenuKeys.SaveModal,
+          <SaveModal
+            addSuccessToast={addSuccessToast}
+            addDangerToast={addDangerToast}
+            dashboardId={dashboardId}
+            dashboardTitle={dashboardTitle}
+            dashboardInfo={dashboardInfo}
+            saveType={SAVE_TYPE_NEWDASHBOARD}
+            layout={layout}
+            expandedSlices={expandedSlices}
+            refreshFrequency={refreshFrequency}
+            shouldPersistRefreshFrequency={shouldPersistRefreshFrequency}
+            lastModifiedTime={lastModifiedTime}
+            customCss={customCss}
+            colorNamespace={colorNamespace}
+            colorScheme={colorScheme}
+            onSave={onSave}
+            triggerNode={
+              <div data-test="save-as-menu-item">{t('Save as')}</div>
+            }
+            canOverwrite={userCanEdit}
+          />,
+        ),
+      );
+    }
+
+    // Download submenu
+    menuItems.push(downloadMenuItem);
+
+    // Share submenu
+    if (userCanShare) {
+      menuItems.push(shareMenuItems);
+    }
+
+    // Embed dashboard
+    if (!editMode && userCanCurate) {
+      menuItems.push({
+        key: MenuKeys.ManageEmbedded,
+        label: t('Embed dashboard'),
+      });
+    }
+
+    // Divider
+    menuItems.push({ type: 'divider' });
+
+    // Report dropdown
+    if (!editMode && reportMenuItem) {
+      menuItems.push(reportMenuItem);
+    }
+
+    // Set filter mapping
+    if (editMode && !isEmpty(dashboardInfo?.metadata?.filter_scopes)) {
+      menuItems.push(
+        createModalMenuItem(
+          MenuKeys.SetFilterMapping,
+          <FilterScopeModal
+            triggerNode={<div>{t('Set filter mapping')}</div>}
+          />,
+        ),
+      );
+    }
+
+    // Auto-refresh interval
+    menuItems.push(
+      createModalMenuItem(
+        MenuKeys.AutorefreshModal,
+        <RefreshIntervalModal
+          addSuccessToast={addSuccessToast}
+          refreshFrequency={refreshFrequency}
+          refreshLimit={refreshLimit}
+          refreshWarning={refreshWarning}
+          onChange={changeRefreshInterval}
+          editMode={editMode}
+          refreshIntervalOptions={refreshIntervalOptions}
+          triggerNode={<div>{t('Set auto-refresh interval')}</div>}
+        />,
+      ),
+    );
+
     return (
       <Menu
         selectable={false}
         data-test="header-actions-menu"
         onClick={handleMenuClick}
-      >
-        {!editMode && (
-          <Menu.Item
-            key={MenuKeys.RefreshDashboard}
-            data-test="refresh-dashboard-menu-item"
-            disabled={isLoading}
-          >
-            {t('Refresh dashboard')}
-          </Menu.Item>
-        )}
-        {!editMode && !isEmbedded && (
-          <Menu.Item key={MenuKeys.ToggleFullscreen}>
-            {getUrlParam(URL_PARAMS.standalone)
-              ? t('Exit fullscreen')
-              : t('Enter fullscreen')}
-          </Menu.Item>
-        )}
-        {editMode && (
-          <Menu.Item key={MenuKeys.EditProperties}>
-            {t('Edit properties')}
-          </Menu.Item>
-        )}
-        {editMode && (
-          <Menu.Item key={MenuKeys.EditCss}>
-            <CssEditor
-              triggerNode={<div>{t('Theme & CSS')}</div>}
-              initialCss={css}
-              onChange={changeCss}
-              addDangerToast={addDangerToast}
-              currentThemeId={dashboardInfo.theme?.id || null}
-              onThemeChange={handleThemeChange}
-            />
-          </Menu.Item>
-        )}
-        <Menu.Divider />
-        {userCanSave && (
-          <Menu.Item key={MenuKeys.SaveModal}>
-            <SaveModal
-              addSuccessToast={addSuccessToast}
-              addDangerToast={addDangerToast}
-              dashboardId={dashboardId}
-              dashboardTitle={dashboardTitle}
-              dashboardInfo={dashboardInfo}
-              saveType={SAVE_TYPE_NEWDASHBOARD}
-              layout={layout}
-              expandedSlices={expandedSlices}
-              refreshFrequency={refreshFrequency}
-              shouldPersistRefreshFrequency={shouldPersistRefreshFrequency}
-              lastModifiedTime={lastModifiedTime}
-              customCss={customCss}
-              colorNamespace={colorNamespace}
-              colorScheme={colorScheme}
-              onSave={onSave}
-              triggerNode={
-                <div data-test="save-as-menu-item">{t('Save as')}</div>
-              }
-              canOverwrite={userCanEdit}
-            />
-          </Menu.Item>
-        )}
-        <DownloadMenuItems
-          submenuKey={MenuKeys.Download}
-          disabled={isLoading}
-          title={t('Download')}
-          pdfMenuItemTitle={t('Export to PDF')}
-          imageMenuItemTitle={t('Download as Image')}
-          dashboardTitle={dashboardTitle}
-          dashboardId={dashboardId}
-          logEvent={logEvent}
-        />
-        {userCanShare && (
-          <ShareMenuItems
-            disabled={isLoading}
-            data-test="share-dashboard-menu-item"
-            title={t('Share')}
-            url={url}
-            copyMenuItemTitle={t('Copy permalink to clipboard')}
-            emailMenuItemTitle={t('Share permalink by email')}
-            emailSubject={emailSubject}
-            emailBody={t('Check out this dashboard: ')}
-            addSuccessToast={addSuccessToast}
-            addDangerToast={addDangerToast}
-            dashboardId={dashboardId}
-            dashboardComponentId={dashboardComponentId}
-          />
-        )}
-        {!editMode && userCanCurate && (
-          <Menu.Item key={MenuKeys.ManageEmbedded}>
-            {t('Embed dashboard')}
-          </Menu.Item>
-        )}
-        <Menu.Divider />
-        {!editMode ? (
-          showReportSubMenu ? (
-            <>
-              <HeaderReportDropdown
-                submenuTitle={t('Manage email report')}
-                dashboardId={dashboardInfo.id}
-                setShowReportSubMenu={setShowReportSubMenu}
-                showReportModal={showReportModal}
-                showReportSubMenu={showReportSubMenu}
-                setCurrentReportDeleting={setCurrentReportDeleting}
-                useTextMenu
-              />
-              <Menu.Divider />
-            </>
-          ) : (
-            <HeaderReportDropdown
-              dashboardId={dashboardInfo.id}
-              setShowReportSubMenu={setShowReportSubMenu}
-              showReportModal={showReportModal}
-              setCurrentReportDeleting={setCurrentReportDeleting}
-              useTextMenu
-            />
-          )
-        ) : null}
-        {editMode && !isEmpty(dashboardInfo?.metadata?.filter_scopes) && (
-          <Menu.Item key={MenuKeys.SetFilterMapping}>
-            <FilterScopeModal
-              triggerNode={<div>{t('Set filter mapping')}</div>}
-            />
-          </Menu.Item>
-        )}
-        <Menu.Item key={MenuKeys.AutorefreshModal}>
-          <RefreshIntervalModal
-            addSuccessToast={addSuccessToast}
-            refreshFrequency={refreshFrequency}
-            refreshLimit={refreshLimit}
-            refreshWarning={refreshWarning}
-            onChange={changeRefreshInterval}
-            editMode={editMode}
-            refreshIntervalOptions={refreshIntervalOptions}
-            triggerNode={<div>{t('Set auto-refresh interval')}</div>}
-          />
-        </Menu.Item>
-      </Menu>
+        items={menuItems}
+      />
     );
   }, [
-    css,
-    showReportSubMenu,
-    isDropdownVisible,
-    directPathToChild,
-    handleMenuClick,
-    changeCss,
+    addDangerToast,
+    addSuccessToast,
     changeRefreshInterval,
-    emailSubject,
-    url,
-    dashboardComponentId,
+    changeCss,
+    colorNamespace,
+    colorScheme,
+    css,
+    customCss,
+    dashboardId,
+    dashboardInfo,
+    dashboardTitle,
+    downloadMenuItem,
+    editMode,
+    expandedSlices,
+    handleMenuClick,
+    isLoading,
+    lastModifiedTime,
+    layout,
+    onSave,
+    refreshFrequency,
+    refreshLimit,
+    refreshWarning,
+    reportMenuItem,
+    shareMenuItems,
+    shouldPersistRefreshFrequency,
+    userCanCurate,
+    userCanEdit,
+    userCanSave,
+    userCanShare,
   ]);
 
   return [menu, isDropdownVisible, setIsDropdownVisible];

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

@@ -438,10 +438,9 @@ describe('PropertiesModal', () => {
     const props = createProps();
     const propsWithDashboardInfo = { ...props, dashboardInfo };
 
-    const open = () => waitFor(() => userEvent.click(getSelect()));
     const getSelect = () =>
       screen.getByRole('combobox', { name: SupersetCore.t('Owners') });
-
+    const open = () => waitFor(() => userEvent.click(getSelect()));
     const getElementsByClassName = (className: string) =>
       document.querySelectorAll(className)! as NodeListOf<HTMLElement>;
 

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

@@ -41,20 +41,20 @@ import {
   QueryFormData,
 } from '@superset-ui/core';
 import { useSelector } from 'react-redux';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
 import {
   NoAnimationDropdown,
   Tooltip,
   Button,
   ModalTrigger,
 } from '@superset-ui/core/components';
-import ShareMenuItems from 'src/dashboard/components/menu/ShareMenuItems';
+import { useShareMenuItems } from 'src/dashboard/components/menu/ShareMenuItems';
 import downloadAsImage from 'src/utils/downloadAsImage';
 import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
 import { Icons } from '@superset-ui/core/components/Icons';
 import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
 import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
-import { DrillDetailMenuItems } from 'src/components/Chart/DrillDetail';
+import { useDrillDetailMenuItems } from 'src/components/Chart/DrillDetail';
 import { LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
 import { MenuKeys, RootState } from 'src/dashboard/types';
 import DrillDetailModal from 'src/components/Chart/DrillDetail/DrillDetailModal';
@@ -334,183 +334,199 @@ const SliceHeaderControls = (
     animationDuration: '0s',
   };
 
-  const menu = (
-    <Menu
-      onClick={handleMenuClick}
-      data-test={`slice_${slice.slice_id}-menu`}
-      id={`slice_${slice.slice_id}-menu`}
-      selectable={false}
-    >
-      <Menu.Item
-        key={MenuKeys.ForceRefresh}
-        disabled={props.chartStatus === 'loading'}
-        style={{ height: 'auto', lineHeight: 'initial' }}
-        data-test="refresh-chart-menu-item"
-      >
-        {t('Force refresh')}
-        <RefreshTooltip data-test="dashboard-slice-refresh-tooltip">
-          {refreshTooltip}
-        </RefreshTooltip>
-      </Menu.Item>
+  const newMenuItems: MenuItem[] = [
+    {
+      key: MenuKeys.ForceRefresh,
+      label: (
+        <>
+          {t('Force refresh')}
+          <RefreshTooltip data-test="dashboard-slice-refresh-tooltip">
+            {refreshTooltip}
+          </RefreshTooltip>
+        </>
+      ),
+      disabled: props.chartStatus === 'loading',
+      style: { height: 'auto', lineHeight: 'initial' },
+      ...{ 'data-test': 'refresh-chart-menu-item' }, // Typescript hack to get around MenuItem type
+    },
+    {
+      key: MenuKeys.Fullscreen,
+      label: fullscreenLabel,
+    },
+    {
+      type: 'divider',
+    },
+  ];
 
-      <Menu.Item key={MenuKeys.Fullscreen}>{fullscreenLabel}</Menu.Item>
+  if (slice.description) {
+    newMenuItems.push({
+      key: MenuKeys.ToggleChartDescription,
+      label: props.isDescriptionExpanded
+        ? t('Hide chart description')
+        : t('Show chart description'),
+    });
+  }
 
-      <Menu.Divider />
+  if (canExplore) {
+    newMenuItems.push({
+      key: MenuKeys.ExploreChart,
+      label: (
+        <Tooltip title={getSliceHeaderTooltip(props.slice.slice_name)}>
+          {t('Edit chart')}
+        </Tooltip>
+      ),
+      ...{ 'data-test-edit-chart-name': slice.slice_name },
+    });
+  }
 
-      {slice.description && (
-        <Menu.Item key={MenuKeys.ToggleChartDescription}>
-          {props.isDescriptionExpanded
-            ? t('Hide chart description')
-            : t('Show chart description')}
-        </Menu.Item>
-      )}
+  if (canEditCrossFilters) {
+    newMenuItems.push({
+      key: MenuKeys.CrossFilterScoping,
+      label: t('Cross-filtering scoping'),
+    });
+  }
 
-      {canExplore && (
-        <Menu.Item
-          key={MenuKeys.ExploreChart}
-          data-test-edit-chart-name={slice.slice_name}
-        >
-          <Tooltip title={getSliceHeaderTooltip(props.slice.slice_name)}>
-            {t('Edit chart')}
-          </Tooltip>
-        </Menu.Item>
-      )}
+  if (canExplore || canEditCrossFilters) {
+    newMenuItems.push({ type: 'divider' });
+  }
 
-      {canEditCrossFilters && (
-        <Menu.Item key={MenuKeys.CrossFilterScoping}>
-          {t('Cross-filtering scoping')}
-        </Menu.Item>
-      )}
-
-      {(canExplore || canEditCrossFilters) && <Menu.Divider />}
-
-      {(canExplore || canViewQuery) && (
-        <Menu.Item key={MenuKeys.ViewQuery}>
-          <ModalTrigger
-            triggerNode={
-              <div data-test="view-query-menu-item">{t('View query')}</div>
-            }
-            modalTitle={t('View query')}
-            modalBody={<ViewQueryModal latestQueryFormData={props.formData} />}
-            draggable
-            resizable
-            responsive
-            ref={queryMenuRef}
-          />
-        </Menu.Item>
-      )}
-
-      {(canExplore || canViewTable) && (
-        <Menu.Item key={MenuKeys.ViewResults}>
-          <ViewResultsModalTrigger
-            canExplore={props.supersetCanExplore}
-            exploreUrl={props.exploreUrl}
-            triggerNode={
-              <div data-test="view-query-menu-item">{t('View as table')}</div>
-            }
-            modalRef={resultsMenuRef}
-            modalTitle={t('Chart Data: %s', slice.slice_name)}
-            modalBody={
-              <ResultsPaneOnDashboard
-                queryFormData={props.formData}
-                queryForce={false}
-                dataSize={20}
-                isRequest
-                isVisible
-                canDownload={!!props.supersetCanCSV}
-              />
-            }
-          />
-        </Menu.Item>
-      )}
-
-      {isFeatureEnabled(FeatureFlag.DrillToDetail) && canDrillToDetail && (
-        <DrillDetailMenuItems
-          setFilters={setFilters}
-          filters={modalFilters}
-          formData={props.formData}
-          key={MenuKeys.DrillToDetail}
-          setShowModal={setDrillModalIsOpen}
+  if (canExplore || canViewQuery) {
+    newMenuItems.push({
+      key: MenuKeys.ViewQuery,
+      label: (
+        <ModalTrigger
+          triggerNode={
+            <div data-test="view-query-menu-item">{t('View query')}</div>
+          }
+          modalTitle={t('View query')}
+          modalBody={<ViewQueryModal latestQueryFormData={props.formData} />}
+          draggable
+          resizable
+          responsive
+          ref={queryMenuRef}
         />
-      )}
+      ),
+    });
+  }
 
-      {(slice.description || canExplore) && <Menu.Divider />}
-
-      {supersetCanShare && (
-        <ShareMenuItems
-          dashboardId={dashboardId}
-          dashboardComponentId={componentId}
-          copyMenuItemTitle={t('Copy permalink to clipboard')}
-          emailMenuItemTitle={t('Share chart by email')}
-          emailSubject={t('Superset chart')}
-          emailBody={t('Check out this chart: ')}
-          addSuccessToast={addSuccessToast}
-          addDangerToast={addDangerToast}
-          title={t('Share')}
+  if (canExplore || canViewTable) {
+    newMenuItems.push({
+      key: MenuKeys.ViewResults,
+      label: (
+        <ViewResultsModalTrigger
+          canExplore={props.supersetCanExplore}
+          exploreUrl={props.exploreUrl}
+          triggerNode={
+            <div data-test="view-query-menu-item">{t('View as table')}</div>
+          }
+          modalRef={resultsMenuRef}
+          modalTitle={t('Chart Data: %s', slice.slice_name)}
+          modalBody={
+            <ResultsPaneOnDashboard
+              queryFormData={props.formData}
+              queryForce={false}
+              dataSize={20}
+              isRequest
+              isVisible
+              canDownload={!!props.supersetCanCSV}
+            />
+          }
         />
-      )}
+      ),
+    });
+  }
 
-      {props.supersetCanCSV && (
-        <Menu.SubMenu title={t('Download')} key={MenuKeys.Download}>
-          <Menu.Item
-            key={MenuKeys.ExportCsv}
-            icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-          >
-            {t('Export to .CSV')}
-          </Menu.Item>
-          {isPivotTable && (
-            <Menu.Item
-              key={MenuKeys.ExportPivotCsv}
-              icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-            >
-              {t('Export to Pivoted .CSV')}
-            </Menu.Item>
-          )}
-          <Menu.Item
-            key={MenuKeys.ExportXlsx}
-            icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-          >
-            {t('Export to Excel')}
-          </Menu.Item>
+  const { drillToDetailMenuItem, drillToDetailByMenuItem } =
+    useDrillDetailMenuItems({
+      formData: props.formData,
+      filters: modalFilters,
+      setFilters,
+      setShowModal: setDrillModalIsOpen,
+      key: MenuKeys.DrillToDetail,
+    });
 
-          {isPivotTable && (
-            <Menu.Item
-              key={MenuKeys.ExportPivotXlsx}
-              icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-            >
-              {t('Export to Pivoted Excel')}
-            </Menu.Item>
-          )}
+  const shareMenuItems = useShareMenuItems({
+    dashboardId,
+    dashboardComponentId: componentId,
+    copyMenuItemTitle: t('Copy permalink to clipboard'),
+    emailMenuItemTitle: t('Share chart by email'),
+    emailSubject: t('Superset chart'),
+    emailBody: t('Check out this chart: '),
+    addSuccessToast,
+    addDangerToast,
+    title: t('Share'),
+  });
 
-          {isFeatureEnabled(FeatureFlag.AllowFullCsvExport) &&
-            props.supersetCanCSV &&
-            isTable && (
-              <>
-                <Menu.Item
-                  key={MenuKeys.ExportFullCsv}
-                  icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-                >
-                  {t('Export to full .CSV')}
-                </Menu.Item>
-                <Menu.Item
-                  key={MenuKeys.ExportFullXlsx}
-                  icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
-                >
-                  {t('Export to full Excel')}
-                </Menu.Item>
-              </>
-            )}
+  if (isFeatureEnabled(FeatureFlag.DrillToDetail) && canDrillToDetail) {
+    newMenuItems.push(drillToDetailMenuItem);
+    if (drillToDetailByMenuItem) {
+      newMenuItems.push(drillToDetailByMenuItem);
+    }
+  }
+
+  if (slice.description || canExplore) {
+    newMenuItems.push({ type: 'divider' });
+  }
+
+  if (supersetCanShare) {
+    newMenuItems.push(shareMenuItems);
+  }
+
+  if (props.supersetCanCSV) {
+    newMenuItems.push({
+      type: 'submenu',
+      key: MenuKeys.Download,
+      label: t('Download'),
+      children: [
+        {
+          key: MenuKeys.ExportCsv,
+          label: t('Export to .CSV'),
+          icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+        },
+        ...(isPivotTable
+          ? [
+              {
+                key: MenuKeys.ExportPivotCsv,
+                label: t('Export to Pivoted .CSV'),
+                icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+              },
+              {
+                key: MenuKeys.ExportPivotXlsx,
+                label: t('Export to Pivoted Excel'),
+                icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+              },
+            ]
+          : []),
+        {
+          key: MenuKeys.ExportXlsx,
+          label: t('Export to Excel'),
+          icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+        },
+        ...(isFeatureEnabled(FeatureFlag.AllowFullCsvExport) &&
+        props.supersetCanCSV &&
+        isTable
+          ? [
+              {
+                key: MenuKeys.ExportFullCsv,
+                label: t('Export to full .CSV'),
+                icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+              },
+              {
+                key: MenuKeys.ExportFullXlsx,
+                label: t('Export to full Excel'),
+                icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+              },
+            ]
+          : []),
+        {
+          key: MenuKeys.DownloadAsImage,
+          label: t('Download as image'),
+          icon: <Icons.FileImageOutlined css={dropdownIconsStyles} />,
+        },
+      ],
+    });
+  }
 
-          <Menu.Item
-            key={MenuKeys.DownloadAsImage}
-            icon={<Icons.FileImageOutlined css={dropdownIconsStyles} />}
-          >
-            {t('Download as image')}
-          </Menu.Item>
-        </Menu.SubMenu>
-      )}
-    </Menu>
-  );
   return (
     <>
       {isFullSize && (
@@ -522,7 +538,15 @@ const SliceHeaderControls = (
         />
       )}
       <NoAnimationDropdown
-        popupRender={() => menu}
+        popupRender={() => (
+          <Menu
+            onClick={handleMenuClick}
+            data-test={`slice_${slice.slice_id}-menu`}
+            id={`slice_${slice.slice_id}-menu`}
+            selectable={false}
+            items={newMenuItems}
+          />
+        )}
         overlayStyle={dropdownOverlayStyle}
         trigger={['click']}
         placement="bottomRight"

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

@@ -17,8 +17,8 @@
  * under the License.
  */
 import { render, screen } from 'spec/helpers/testing-library';
-import { Menu } from '@superset-ui/core/components/Menu';
-import DownloadMenuItems from '.';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
+import { useDownloadMenuItems } from '.';
 
 const createProps = () => ({
   pdfMenuItemTitle: 'Export to PDF',
@@ -30,19 +30,17 @@ const createProps = () => ({
   submenuKey: 'download',
 });
 
-const renderComponent = () => {
-  render(
-    <Menu forceSubMenuRender>
-      <DownloadMenuItems {...createProps()} />
-    </Menu>,
-    {
-      useRedux: true,
-    },
-  );
+const MenuWrapper = () => {
+  const downloadMenuItem = useDownloadMenuItems(createProps());
+  const menuItems: MenuItem[] = [downloadMenuItem];
+  return <Menu forceSubMenuRender items={menuItems} />;
 };
 
 test('Should render menu items', () => {
-  renderComponent();
+  render(<MenuWrapper />, {
+    useRedux: true,
+  });
+
   expect(screen.getByText('Export to PDF')).toBeInTheDocument();
   expect(screen.getByText('Download as Image')).toBeInTheDocument();
 });

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/index.tsx

@@ -16,16 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { SyntheticEvent } from 'react';
+import { FeatureFlag, isFeatureEnabled, logging, t } from '@superset-ui/core';
+import { MenuItem } from '@superset-ui/core/components/Menu';
 import { useDownloadScreenshot } from 'src/dashboard/hooks/useDownloadScreenshot';
-import { ComponentProps } from 'react';
+import { MenuKeys } from 'src/dashboard/types';
+import downloadAsPdf from 'src/utils/downloadAsPdf';
+import downloadAsImage from 'src/utils/downloadAsImage';
+import {
+  LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_PDF,
+  LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE,
+} from 'src/logger/LogUtils';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { DownloadScreenshotFormat } from './types';
-import DownloadAsPdf from './DownloadAsPdf';
-import DownloadAsImage from './DownloadAsImage';
 
-export interface DownloadMenuItemProps
-  extends ComponentProps<typeof Menu.SubMenu> {
+export interface UseDownloadMenuItemsProps {
   pdfMenuItemTitle: string;
   imageMenuItemTitle: string;
   dashboardTitle: string;
@@ -33,56 +38,81 @@ export interface DownloadMenuItemProps
   dashboardId: number;
   title: string;
   disabled?: boolean;
-  submenuKey: string;
 }
 
-const DownloadMenuItems = (props: DownloadMenuItemProps) => {
+export const useDownloadMenuItems = (
+  props: UseDownloadMenuItemsProps,
+): MenuItem => {
   const {
     pdfMenuItemTitle,
     imageMenuItemTitle,
     logEvent,
     dashboardId,
     dashboardTitle,
-    submenuKey,
     disabled,
     title,
-    ...rest
   } = props;
+
+  const { addDangerToast } = useToasts();
+  const SCREENSHOT_NODE_SELECTOR = '.dashboard';
+
   const isWebDriverScreenshotEnabled =
     isFeatureEnabled(FeatureFlag.EnableDashboardScreenshotEndpoints) &&
     isFeatureEnabled(FeatureFlag.EnableDashboardDownloadWebDriverScreenshot);
 
   const downloadScreenshot = useDownloadScreenshot(dashboardId, logEvent);
 
-  return isWebDriverScreenshotEnabled ? (
-    <Menu.SubMenu key={submenuKey} title={title} disabled={disabled} {...rest}>
-      <Menu.Item
-        key={DownloadScreenshotFormat.PDF}
-        onClick={() => downloadScreenshot(DownloadScreenshotFormat.PDF)}
-      >
-        {pdfMenuItemTitle}
-      </Menu.Item>
-      <Menu.Item
-        key={DownloadScreenshotFormat.PNG}
-        onClick={() => downloadScreenshot(DownloadScreenshotFormat.PNG)}
-      >
-        {imageMenuItemTitle}
-      </Menu.Item>
-    </Menu.SubMenu>
-  ) : (
-    <Menu.SubMenu key={submenuKey} title={title} disabled={disabled} {...rest}>
-      <DownloadAsPdf
-        text={pdfMenuItemTitle}
-        dashboardTitle={dashboardTitle}
-        logEvent={logEvent}
-      />
-      <DownloadAsImage
-        text={imageMenuItemTitle}
-        dashboardTitle={dashboardTitle}
-        logEvent={logEvent}
-      />
-    </Menu.SubMenu>
-  );
-};
+  const onDownloadPdf = async (e: SyntheticEvent) => {
+    try {
+      downloadAsPdf(SCREENSHOT_NODE_SELECTOR, dashboardTitle, true)(e);
+    } catch (error) {
+      logging.error(error);
+      addDangerToast(t('Sorry, something went wrong. Try again later.'));
+    }
+    logEvent?.(LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_PDF);
+  };
 
-export default DownloadMenuItems;
+  const onDownloadImage = async (e: SyntheticEvent) => {
+    try {
+      downloadAsImage(SCREENSHOT_NODE_SELECTOR, dashboardTitle, true)(e);
+    } catch (error) {
+      logging.error(error);
+      addDangerToast(t('Sorry, something went wrong. Try again later.'));
+    }
+    logEvent?.(LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE);
+  };
+
+  const children: MenuItem[] = isWebDriverScreenshotEnabled
+    ? [
+        {
+          key: DownloadScreenshotFormat.PDF,
+          label: pdfMenuItemTitle,
+          onClick: () => downloadScreenshot(DownloadScreenshotFormat.PDF),
+        },
+        {
+          key: DownloadScreenshotFormat.PNG,
+          label: imageMenuItemTitle,
+          onClick: () => downloadScreenshot(DownloadScreenshotFormat.PNG),
+        },
+      ]
+    : [
+        {
+          key: 'download-pdf',
+          label: pdfMenuItemTitle,
+          onClick: (e: any) => onDownloadPdf(e.domEvent),
+        },
+        {
+          key: 'download-image',
+          label: imageMenuItemTitle,
+          onClick: (e: any) => onDownloadImage(e.domEvent),
+        },
+      ];
+
+  return {
+    key: MenuKeys.Download,
+    type: 'submenu',
+    label: title,
+    disabled,
+    children,
+  };
+};

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Menu } from '@superset-ui/core/components/Menu';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
 import {
   render,
   screen,
@@ -26,7 +26,8 @@ import {
 } from 'spec/helpers/testing-library';
 import * as copyTextToClipboard from 'src/utils/copy';
 import fetchMock from 'fetch-mock';
-import ShareMenuItems from '.';
+import { ComponentProps } from 'react';
+import { useShareMenuItems, ShareMenuItemProps } from '.';
 
 const spy = jest.spyOn(copyTextToClipboard, 'default');
 
@@ -69,17 +70,23 @@ afterAll((): void => {
   window.location = location;
 });
 
+const MenuWrapper = (
+  props: ComponentProps<typeof Menu> & { shareProps: ShareMenuItemProps },
+) => {
+  const shareMenuItems = useShareMenuItems(props.shareProps);
+  const menuItems: MenuItem[] = [shareMenuItems];
+  return <Menu {...props} items={menuItems} />;
+};
+
 test('Should render menu items', () => {
-  const props = createProps();
   render(
-    <Menu
+    <MenuWrapper
       onClick={jest.fn()}
       selectable={false}
       data-test="main-menu"
       forceSubMenuRender
-    >
-      <ShareMenuItems {...props} />
-    </Menu>,
+      shareProps={createProps()}
+    />,
     { useRedux: true },
   );
   expect(screen.getByText('Copy dashboard URL')).toBeInTheDocument();
@@ -90,14 +97,13 @@ test('Click on "Copy dashboard URL" and succeed', async () => {
   spy.mockResolvedValue(undefined);
   const props = createProps();
   render(
-    <Menu
+    <MenuWrapper
       onClick={jest.fn()}
       selectable={false}
       data-test="main-menu"
       forceSubMenuRender
-    >
-      <ShareMenuItems {...props} />
-    </Menu>,
+      shareProps={props}
+    />,
     { useRedux: true },
   );
 
@@ -123,14 +129,13 @@ test('Click on "Copy dashboard URL" and fail', async () => {
   spy.mockRejectedValue(undefined);
   const props = createProps();
   render(
-    <Menu
+    <MenuWrapper
       onClick={jest.fn()}
       selectable={false}
       data-test="main-menu"
       forceSubMenuRender
-    >
-      <ShareMenuItems {...props} />
-    </Menu>,
+      shareProps={props}
+    />,
     { useRedux: true },
   );
 
@@ -157,14 +162,13 @@ test('Click on "Copy dashboard URL" and fail', async () => {
 test('Click on "Share dashboard by email" and succeed', async () => {
   const props = createProps();
   render(
-    <Menu
+    <MenuWrapper
       onClick={jest.fn()}
       selectable={false}
       data-test="main-menu"
       forceSubMenuRender
-    >
-      <ShareMenuItems {...props} />
-    </Menu>,
+      shareProps={props}
+    />,
     { useRedux: true },
   );
 
@@ -191,14 +195,13 @@ test('Click on "Share dashboard by email" and fail', async () => {
   );
   const props = createProps();
   render(
-    <Menu
+    <MenuWrapper
       onClick={jest.fn()}
       selectable={false}
       data-test="main-menu"
       forceSubMenuRender
-    >
-      <ShareMenuItems {...props} />
-    </Menu>,
+      shareProps={props}
+    />,
     { useRedux: true },
   );
 

superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx

@@ -19,12 +19,13 @@
 import { ComponentProps, RefObject } from 'react';
 import copyTextToClipboard from 'src/utils/copy';
 import { t, logging } from '@superset-ui/core';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
 import { getDashboardPermalink } from 'src/utils/urlUtils';
 import { MenuKeys, RootState } from 'src/dashboard/types';
 import { shallowEqual, useSelector } from 'react-redux';
 
-interface ShareMenuItemProps extends ComponentProps<typeof Menu.SubMenu> {
+export interface ShareMenuItemProps
+  extends ComponentProps<typeof Menu.SubMenu> {
   url?: string;
   copyMenuItemTitle: string;
   emailMenuItemTitle: string;
@@ -40,9 +41,10 @@ interface ShareMenuItemProps extends ComponentProps<typeof Menu.SubMenu> {
   setOpenKeys?: Function;
   title: string;
   disabled?: boolean;
+  [key: string]: any;
 }
 
-const ShareMenuItems = (props: ShareMenuItemProps) => {
+export const useShareMenuItems = (props: ShareMenuItemProps): MenuItem => {
   const {
     copyMenuItemTitle,
     emailMenuItemTitle,
@@ -96,20 +98,23 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
     }
   }
 
-  return (
-    <Menu.SubMenu
-      title={title}
-      key={MenuKeys.Share}
-      disabled={disabled}
-      {...rest}
-    >
-      <Menu.Item key={MenuKeys.CopyLink} onClick={() => onCopyLink()}>
-        {copyMenuItemTitle}
-      </Menu.Item>
-      <Menu.Item key={MenuKeys.ShareByEmail} onClick={() => onShareByEmail()}>
-        {emailMenuItemTitle}
-      </Menu.Item>
-    </Menu.SubMenu>
-  );
+  return {
+    ...rest,
+    type: 'submenu',
+    label: title,
+    key: MenuKeys.Share,
+    disabled,
+    children: [
+      {
+        key: MenuKeys.CopyLink,
+        label: copyMenuItemTitle,
+        onClick: onCopyLink,
+      },
+      {
+        key: MenuKeys.ShareByEmail,
+        label: emailMenuItemTitle,
+        onClick: onShareByEmail,
+      },
+    ],
+  };
 };
-export default ShareMenuItems;

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

@@ -96,14 +96,14 @@ test('remove filter', async () => {
 test('add filter', async () => {
   defaultRender();
   // First trash icon
-  const addFilterButton = await screen.findByText('Add Filter');
+  const addFilterButton = await screen.findByText('Add filter');
   userEvent.click(addFilterButton);
   expect(defaultProps.onAdd).toHaveBeenCalledWith('NATIVE_FILTER');
 });
 
 test('add divider', async () => {
   defaultRender();
-  const addFilterButton = await screen.findByText('Add Divider');
+  const addFilterButton = await screen.findByText('Add divider');
   userEvent.click(addFilterButton);
   expect(defaultProps.onAdd).toHaveBeenCalledWith('DIVIDER');
 });
@@ -128,7 +128,7 @@ test('filter container should scroll to bottom when adding items', async () => {
 
   defaultRender(state, props);
 
-  const addFilterButton = await screen.findByText('Add Filter');
+  const addFilterButton = await screen.findByText('Add filter');
 
   userEvent.click(addFilterButton);
 

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

@@ -111,7 +111,7 @@ const FilterTitlePane: FC<Props> = ({
           data-test="add-new-filter-button"
           onClick={() => handleOnAdd(NativeFilterType.NativeFilter)}
         >
-          {t('Add Filter')}
+          {t('Add filter')}
         </Button>
         <Button
           buttonSize="default"
@@ -125,7 +125,7 @@ const FilterTitlePane: FC<Props> = ({
           data-test="add-new-divider-button"
           onClick={() => handleOnAdd(NativeFilterType.Divider)}
         >
-          {t('Add Divider')}
+          {t('Add divider')}
         </Button>
       </div>
     </TabsContainer>

superset-frontend/src/embedded/EmbeddedContextProviders.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 { Route } from 'react-router-dom';
+import { getExtensionsRegistry } from '@superset-ui/core';
+import { Provider as ReduxProvider } from 'react-redux';
+import { QueryParamProvider } from 'use-query-params';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { FlashProvider, DynamicPluginProvider } from 'src/components';
+import { EmbeddedUiConfigProvider } from 'src/components/UiConfigContext';
+import { SupersetThemeProvider } from 'src/theme/ThemeProvider';
+import { ThemeController } from 'src/theme/ThemeController';
+import type { ThemeStorage } from '@superset-ui/core';
+import { store } from 'src/views/store';
+import getBootstrapData from 'src/utils/getBootstrapData';
+
+/**
+ * In-memory implementation of ThemeStorage interface for embedded contexts.
+ * Persistent storage is not required for embedded dashboards.
+ */
+class ThemeMemoryStorageAdapter implements ThemeStorage {
+  private storage = new Map<string, string>();
+
+  getItem(key: string): string | null {
+    return this.storage.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.storage.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.storage.delete(key);
+  }
+}
+
+const themeController = new ThemeController({
+  storage: new ThemeMemoryStorageAdapter(),
+});
+
+export const getThemeController = (): ThemeController => themeController;
+
+const { common } = getBootstrapData();
+const extensionsRegistry = getExtensionsRegistry();
+
+export const EmbeddedContextProviders: React.FC = ({ children }) => {
+  const RootContextProviderExtension = extensionsRegistry.get(
+    'root.context.provider',
+  );
+
+  return (
+    <SupersetThemeProvider themeController={themeController}>
+      <ReduxProvider store={store}>
+        <DndProvider backend={HTML5Backend}>
+          <FlashProvider messages={common.flash_messages}>
+            <EmbeddedUiConfigProvider>
+              <DynamicPluginProvider>
+                <QueryParamProvider
+                  ReactRouterRoute={Route}
+                  stringifyOptions={{ encode: false }}
+                >
+                  {RootContextProviderExtension ? (
+                    <RootContextProviderExtension>
+                      {children}
+                    </RootContextProviderExtension>
+                  ) : (
+                    children
+                  )}
+                </QueryParamProvider>
+              </DynamicPluginProvider>
+            </EmbeddedUiConfigProvider>
+          </FlashProvider>
+        </DndProvider>
+      </ReduxProvider>
+    </SupersetThemeProvider>
+  );
+};

superset-frontend/src/embedded/index.tsx

@@ -21,20 +21,27 @@ import 'src/public-path';
 import { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { makeApi, t, logging, themeObject } from '@superset-ui/core';
+import {
+  type SupersetThemeConfig,
+  makeApi,
+  t,
+  logging,
+} from '@superset-ui/core';
 import Switchboard from '@superset-ui/switchboard';
 import getBootstrapData, { applicationRoot } from 'src/utils/getBootstrapData';
 import setupClient from 'src/setup/setupClient';
 import setupPlugins from 'src/setup/setupPlugins';
 import { useUiConfig } from 'src/components/UiConfigContext';
-import { RootContextProviders } from 'src/views/RootContextProviders';
 import { store, USER_LOADED } from 'src/views/store';
 import { Loading } from '@superset-ui/core/components';
 import { ErrorBoundary } from 'src/components';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
-import { AnyThemeConfig } from 'packages/superset-ui-core/src/theme/types';
+import {
+  EmbeddedContextProviders,
+  getThemeController,
+} from './EmbeddedContextProviders';
 import { embeddedApi } from './api';
 import { getDataMaskChangeTrigger } from './utils';
 
@@ -44,9 +51,7 @@ const debugMode = process.env.WEBPACK_MODE === 'development';
 const bootstrapData = getBootstrapData();
 
 function log(...info: unknown[]) {
-  if (debugMode) {
-    logging.debug(`[superset]`, ...info);
-  }
+  if (debugMode) logging.debug(`[superset]`, ...info);
 }
 
 const LazyDashboardPage = lazy(
@@ -85,12 +90,12 @@ const EmbededLazyDashboardPage = () => {
 
 const EmbeddedRoute = () => (
   <Suspense fallback={<Loading />}>
-    <RootContextProviders>
+    <EmbeddedContextProviders>
       <ErrorBoundary>
         <EmbededLazyDashboardPage />
       </ErrorBoundary>
       <ToastContainer position="top" />
-    </RootContextProviders>
+    </EmbeddedContextProviders>
   </Suspense>
 );
 
@@ -245,12 +250,13 @@ window.addEventListener('message', function embeddedPageInitializer(event) {
     Switchboard.defineMethod('getDataMask', embeddedApi.getDataMask);
     Switchboard.defineMethod(
       'setThemeConfig',
-      (payload: { themeConfig: AnyThemeConfig }) => {
+      (payload: { themeConfig: SupersetThemeConfig }) => {
         const { themeConfig } = payload;
         log('Received setThemeConfig request:', themeConfig);
 
         try {
-          themeObject.setConfig(themeConfig);
+          const themeController = getThemeController();
+          themeController.setThemeConfig(themeConfig);
           return { success: true, message: 'Theme applied' };
         } catch (error) {
           logging.error('Failed to apply theme config:', error);
@@ -258,8 +264,22 @@ window.addEventListener('message', function embeddedPageInitializer(event) {
         }
       },
     );
+
     Switchboard.start();
   }
 });
 
+// Clean up theme controller on page unload
+window.addEventListener('beforeunload', () => {
+  try {
+    const controller = getThemeController();
+    if (controller) {
+      log('Destroying theme controller');
+      controller.destroy();
+    }
+  } catch (error) {
+    logging.warn('Failed to destroy theme controller:', error);
+  }
+});
+
 log('embed page is ready to receive messages');

superset-frontend/src/explore/components/ExploreViewContainer/index.jsx

@@ -637,7 +637,7 @@ function ExploreViewContainer(props) {
           }
         >
           <div className="title-container">
-            <span className="horizontal-text">{t('Chart Source')}</span>
+            <span className="horizontal-text">{t('Chart source')}</span>
             <span
               role="button"
               tabIndex={0}
@@ -672,7 +672,7 @@ function ExploreViewContainer(props) {
             tabIndex={0}
           >
             <span role="button" tabIndex={0} className="action-button">
-              <Tooltip title={t('Open Datasource tab')}>
+              <Tooltip title={t('Open datasource tab')}>
                 <Icons.VerticalAlignTopOutlined
                   iconSize="xl"
                   css={css`

superset-frontend/src/explore/components/SaveModal.tsx

@@ -370,7 +370,7 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
           />
         </FormItem>
         {this.props.datasource?.type === 'query' && (
-          <FormItem label={t('Dataset Name')} required>
+          <FormItem label={t('Dataset name')} required>
             <InfoTooltip
               tooltip={t('A reusable dataset will be saved with your chart.')}
               placement="right"

superset-frontend/src/explore/components/controls/ViewQuery.test.tsx

@@ -91,7 +91,7 @@ afterEach(() => {
 });
 
 const getFormatSwitch = () =>
-  screen.getByRole('switch', { name: 'Show original SQL' });
+  screen.getByRole('switch', { name: 'formatted original' });
 
 test('renders the component with Formatted SQL and buttons', async () => {
   const { container } = setup(mockProps);

superset-frontend/src/explore/components/controls/ViewQuery.tsx

@@ -26,11 +26,17 @@ import {
 } from 'react';
 import { useSelector } from 'react-redux';
 import rison from 'rison';
-import { styled, SupersetClient, t } from '@superset-ui/core';
-import { Icons, Switch, Button, Skeleton } from '@superset-ui/core/components';
+import { styled, SupersetClient, t, useTheme } from '@superset-ui/core';
+import {
+  Icons,
+  Switch,
+  Button,
+  Skeleton,
+  Card,
+  Space,
+} from '@superset-ui/core/components';
 import { CopyToClipboard } from 'src/components';
 import { RootState } from 'src/dashboard/types';
-import { CopyButton } from 'src/explore/components/DataTableControl';
 import { findPermission } from 'src/utils/findPermission';
 import CodeSyntaxHighlighter, {
   SupportedLanguage,
@@ -38,14 +44,6 @@ import CodeSyntaxHighlighter, {
 } from '@superset-ui/core/components/CodeSyntaxHighlighter';
 import { useHistory } from 'react-router-dom';
 
-const CopyButtonViewQuery = styled(CopyButton)`
-  ${({ theme }) => `
-		&& {
-			margin: 0 0 ${theme.sizeUnit}px;
-		}
-  `}
-`;
-
 export interface ViewQueryProps {
   sql: string;
   datasource: string;
@@ -58,26 +56,14 @@ const StyledSyntaxContainer = styled.div`
   flex-direction: column;
 `;
 
-const StyledHeaderMenuContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: ${({ theme }) => -theme.sizeUnit * 4}px;
-  align-items: flex-end;
-`;
-
-const StyledHeaderActionContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${({ theme }) => theme.sizeUnit * 2}px;
-`;
-
 const StyledThemedSyntaxHighlighter = styled(CodeSyntaxHighlighter)`
   flex: 1;
 `;
 
-const StyledLabel = styled.label`
-  font-size: ${({ theme }) => theme.fontSize}px;
+const StyledFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const DATASET_BACKEND_QUERY = {
@@ -87,6 +73,7 @@ const DATASET_BACKEND_QUERY = {
 
 const ViewQuery: FC<ViewQueryProps> = props => {
   const { sql, language = 'sql', datasource } = props;
+  const theme = useTheme();
   const datasetId = datasource.split('__')[0];
   const [formattedSQL, setFormattedSQL] = useState<string>();
   const [showFormatSQL, setShowFormatSQL] = useState(true);
@@ -153,46 +140,57 @@ const ViewQuery: FC<ViewQueryProps> = props => {
   }, [sql]);
 
   return (
-    <StyledSyntaxContainer key={sql}>
-      <StyledHeaderMenuContainer>
-        <StyledHeaderActionContainer>
-          <CopyToClipboard
-            text={currentSQL}
-            shouldShowText={false}
-            copyNode={
-              <CopyButtonViewQuery
+    <Card bodyStyle={{ padding: theme.sizeUnit * 4 }}>
+      <StyledSyntaxContainer key={sql}>
+        {!formattedSQL && <Skeleton active />}
+        {formattedSQL && (
+          <StyledThemedSyntaxHighlighter
+            language={language}
+            customStyle={{ flex: 1, marginBottom: theme.sizeUnit * 3 }}
+          >
+            {currentSQL}
+          </StyledThemedSyntaxHighlighter>
+        )}
+
+        <StyledFooter>
+          <Space size={theme.sizeUnit * 2}>
+            <CopyToClipboard
+              text={currentSQL}
+              shouldShowText={false}
+              copyNode={
+                <Button
+                  buttonStyle="secondary"
+                  buttonSize="small"
+                  icon={<Icons.CopyOutlined />}
+                >
+                  {t('Copy')}
+                </Button>
+              }
+            />
+            {canAccessSQLLab && (
+              <Button
+                buttonStyle="secondary"
                 buttonSize="small"
-                icon={<Icons.CopyOutlined />}
+                onClick={navToSQLLab}
               >
-                {t('Copy')}
-              </CopyButtonViewQuery>
-            }
-          />
-          {canAccessSQLLab && (
-            <Button onClick={navToSQLLab}>{t('View in SQL Lab')}</Button>
-          )}
-        </StyledHeaderActionContainer>
-        <StyledHeaderActionContainer>
-          <Switch
-            id="formatSwitch"
-            checked={!showFormatSQL}
-            onChange={formatCurrentQuery}
-          />
-          <StyledLabel htmlFor="formatSwitch">
-            {t('Show original SQL')}
-          </StyledLabel>
-        </StyledHeaderActionContainer>
-      </StyledHeaderMenuContainer>
-      {!formattedSQL && <Skeleton active />}
-      {formattedSQL && (
-        <StyledThemedSyntaxHighlighter
-          language={language}
-          customStyle={{ flex: 1 }}
-        >
-          {currentSQL}
-        </StyledThemedSyntaxHighlighter>
-      )}
-    </StyledSyntaxContainer>
+                {t('View in SQL Lab')}
+              </Button>
+            )}
+          </Space>
+
+          <Space size={theme.sizeUnit * 2} align="center">
+            <Icons.ConsoleSqlOutlined />
+            <Switch
+              id="formatSwitch"
+              checked={showFormatSQL}
+              onChange={formatCurrentQuery}
+              checkedChildren={t('formatted')}
+              unCheckedChildren={t('original')}
+            />
+          </Space>
+        </StyledFooter>
+      </StyledSyntaxContainer>
+    </Card>
   );
 };
 

superset-frontend/src/explore/components/controls/ViewQueryModal.tsx

@@ -42,6 +42,7 @@ const ViewQueryModalContainer = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
+  gap: ${({ theme }) => theme.sizeUnit * 4}px;
 `;
 
 const ViewQueryModal: FC<Props> = ({ latestQueryFormData }) => {
@@ -86,9 +87,10 @@ const ViewQueryModal: FC<Props> = ({ latestQueryFormData }) => {
 
   return (
     <ViewQueryModalContainer>
-      {result.map(item =>
+      {result.map((item, index) =>
         item.query ? (
           <ViewQuery
+            key={`query-${index}`}
             datasource={latestQueryFormData.datasource}
             sql={item.query}
             language="sql"

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx

@@ -41,6 +41,9 @@ import {
 import TableChartPlugin from '../../../../../plugins/plugin-chart-table/src';
 import VizTypeControl, { VIZ_TYPE_CONTROL_TEST_ID } from './index';
 
+// Mock scrollIntoView to avoid errors in test environment
+jest.mock('scroll-into-view-if-needed', () => jest.fn());
+
 jest.useFakeTimers();
 
 class MainPreset extends Preset {
@@ -256,4 +259,22 @@ describe('VizTypeControl', () => {
 
     expect(defaultProps.onChange).toHaveBeenCalledWith(VizType.Line);
   });
+
+  it('Search input is focused when modal opens', async () => {
+    // Mock the focus method to track if it was called
+    const focusSpy = jest.fn();
+    const originalFocus = HTMLInputElement.prototype.focus;
+    HTMLInputElement.prototype.focus = focusSpy;
+
+    await waitForRenderWrapper();
+
+    const searchInput = screen.getByTestId(getTestId('search-input'));
+
+    // Verify that focus() was called on the search input
+    expect(focusSpy).toHaveBeenCalled();
+    expect(searchInput).toBeInTheDocument();
+
+    // Restore the original focus method
+    HTMLInputElement.prototype.focus = originalFocus;
+  });
 });

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx

@@ -575,6 +575,13 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
     setIsSearchFocused(true);
   }, []);
 
+  // Auto-focus the search input when the modal opens
+  useEffect(() => {
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, []);
+
   const changeSearch: ChangeEventHandler<HTMLInputElement> = useCallback(
     event => setSearchInputValue(event.target.value),
     [],

superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx

@@ -34,7 +34,7 @@ import { exportChart, getChartKey } from 'src/explore/exploreUtils';
 import downloadAsImage from 'src/utils/downloadAsImage';
 import { getChartPermalink } from 'src/utils/urlUtils';
 import copyTextToClipboard from 'src/utils/copy';
-import HeaderReportDropDown from 'src/features/reports/ReportModal/HeaderReportDropdown';
+import { useHeaderReportMenuItems } from 'src/features/reports/ReportModal/HeaderReportDropdown';
 import { logEvent } from 'src/logger/actions';
 import {
   LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE,
@@ -123,12 +123,18 @@ export const useExploreAdditionalActionsMenu = (
   const theme = useTheme();
   const { addDangerToast, addSuccessToast } = useToasts();
   const dispatch = useDispatch();
-  const [showReportSubMenu, setShowReportSubMenu] = useState(null);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const chart = useSelector(
     state => state.charts?.[getChartKey(state.explore)],
   );
 
+  // Use the updated report menu items hook
+  const reportMenuItem = useHeaderReportMenuItems({
+    chart,
+    showReportModal,
+    setCurrentReportDeleting,
+  });
+
   const { datasource } = latestQueryFormData;
 
   const shareByEmail = useCallback(async () => {
@@ -203,14 +209,106 @@ export const useExploreAdditionalActionsMenu = (
     }
   }, [addDangerToast, addSuccessToast, latestQueryFormData]);
 
-  const handleMenuClick = useCallback(
-    ({ key, domEvent }) => {
-      switch (key) {
-        case MENU_KEYS.EDIT_PROPERTIES:
+  const menu = useMemo(() => {
+    const menuItems = [];
+
+    // Edit chart properties
+    if (slice) {
+      menuItems.push({
+        key: MENU_KEYS.EDIT_PROPERTIES,
+        label: t('Edit chart properties'),
+        onClick: () => {
           onOpenPropertiesModal();
           setIsDropdownVisible(false);
-          break;
-        case MENU_KEYS.EXPORT_TO_CSV:
+        },
+      });
+    }
+
+    // On dashboards submenu
+    menuItems.push({
+      key: MENU_KEYS.DASHBOARDS_ADDED_TO,
+      type: 'submenu',
+      label: t('On dashboards'),
+      children: [
+        {
+          key: 'dashboards-content',
+          label: (
+            <DashboardsSubMenu
+              chartId={slice?.slice_id}
+              dashboards={dashboards}
+            />
+          ),
+        },
+      ],
+    });
+
+    // Divider
+    menuItems.push({ type: 'divider' });
+
+    // Download submenu
+    const downloadChildren = [];
+
+    if (VIZ_TYPES_PIVOTABLE.includes(latestQueryFormData.viz_type)) {
+      downloadChildren.push(
+        {
+          key: MENU_KEYS.EXPORT_TO_CSV,
+          label: t('Export to original .CSV'),
+          icon: <Icons.FileOutlined />,
+          disabled: !canDownloadCSV,
+          onClick: () => {
+            exportCSV();
+            setIsDropdownVisible(false);
+            dispatch(
+              logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV, {
+                chartId: slice?.slice_id,
+                chartName: slice?.slice_name,
+              }),
+            );
+          },
+        },
+        {
+          key: MENU_KEYS.EXPORT_TO_CSV_PIVOTED,
+          label: t('Export to pivoted .CSV'),
+          icon: <Icons.FileOutlined />,
+          disabled: !canDownloadCSV,
+          onClick: () => {
+            exportCSVPivoted();
+            setIsDropdownVisible(false);
+            dispatch(
+              logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV_PIVOTED, {
+                chartId: slice?.slice_id,
+                chartName: slice?.slice_name,
+              }),
+            );
+          },
+        },
+        {
+          key: MENU_KEYS.EXPORT_TO_PIVOT_XLSX,
+          label: t('Export to Pivoted Excel'),
+          icon: <Icons.FileOutlined />,
+          disabled: !canDownloadCSV,
+          onClick: () => {
+            exportPivotExcel(
+              '.pvtTable',
+              slice?.slice_name ?? t('pivoted_xlsx'),
+            );
+            setIsDropdownVisible(false);
+            dispatch(
+              logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_XLS, {
+                chartId: slice?.slice_id,
+                chartName: slice?.slice_name,
+              }),
+            );
+          },
+        },
+      );
+    } else {
+      downloadChildren.push({
+        key: MENU_KEYS.EXPORT_TO_CSV,
+        label: t('Export to .CSV'),
+        icon: <Icons.FileOutlined />,
+        disabled: !canDownloadCSV,
+        onClick: () => {
           exportCSV();
           setIsDropdownVisible(false);
           dispatch(
@@ -219,18 +317,17 @@ export const useExploreAdditionalActionsMenu = (
               chartName: slice?.slice_name,
             }),
           );
-          break;
-        case MENU_KEYS.EXPORT_TO_CSV_PIVOTED:
-          exportCSVPivoted();
-          setIsDropdownVisible(false);
-          dispatch(
-            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV_PIVOTED, {
-              chartId: slice?.slice_id,
-              chartName: slice?.slice_name,
-            }),
-          );
-          break;
-        case MENU_KEYS.EXPORT_TO_JSON:
+        },
+      });
+    }
+
+    downloadChildren.push(
+      {
+        key: MENU_KEYS.EXPORT_TO_JSON,
+        label: t('Export to .JSON'),
+        icon: <Icons.FileOutlined />,
+        disabled: !canDownloadCSV,
+        onClick: () => {
           exportJson();
           setIsDropdownVisible(false);
           dispatch(
@@ -239,8 +336,33 @@ export const useExploreAdditionalActionsMenu = (
               chartName: slice?.slice_name,
             }),
           );
-          break;
-        case MENU_KEYS.EXPORT_TO_XLSX:
+        },
+      },
+      {
+        key: MENU_KEYS.DOWNLOAD_AS_IMAGE,
+        label: t('Download as image'),
+        icon: <Icons.FileImageOutlined />,
+        onClick: e => {
+          downloadAsImage(
+            '.panel-body .chart-container',
+            slice?.slice_name ?? t('New chart'),
+            true,
+          )(e.domEvent);
+          setIsDropdownVisible(false);
+          dispatch(
+            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE, {
+              chartId: slice?.slice_id,
+              chartName: slice?.slice_name,
+            }),
+          );
+        },
+      },
+      {
+        key: MENU_KEYS.EXPORT_TO_XLSX,
+        label: t('Export to Excel'),
+        icon: <Icons.FileOutlined />,
+        disabled: !canDownloadCSV,
+        onClick: () => {
           exportExcel();
           setIsDropdownVisible(false);
           dispatch(
@@ -249,225 +371,128 @@ export const useExploreAdditionalActionsMenu = (
               chartName: slice?.slice_name,
             }),
           );
-          break;
-        case MENU_KEYS.EXPORT_TO_PIVOT_XLSX:
-          exportPivotExcel('.pvtTable', slice?.slice_name ?? t('pivoted_xlsx'));
-          setIsDropdownVisible(false);
-          dispatch(
-            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_XLS, {
-              chartId: slice?.slice_id,
-              chartName: slice?.slice_name,
-            }),
-          );
-          break;
-        case MENU_KEYS.DOWNLOAD_AS_IMAGE:
-          downloadAsImage(
-            '.panel-body .chart-container',
-            // eslint-disable-next-line camelcase
-            slice?.slice_name ?? t('New chart'),
-            true,
-          )(domEvent);
-          setIsDropdownVisible(false);
-          dispatch(
-            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE, {
-              chartId: slice?.slice_id,
-              chartName: slice?.slice_name,
-            }),
-          );
-          break;
-        case MENU_KEYS.COPY_PERMALINK:
+        },
+      },
+    );
+
+    menuItems.push({
+      key: MENU_KEYS.DOWNLOAD_SUBMENU,
+      type: 'submenu',
+      label: t('Download'),
+      children: downloadChildren,
+    });
+
+    // Share submenu
+    const shareChildren = [
+      {
+        key: MENU_KEYS.COPY_PERMALINK,
+        label: t('Copy permalink to clipboard'),
+        onClick: () => {
           copyLink();
           setIsDropdownVisible(false);
-          break;
-        case MENU_KEYS.EMBED_CODE:
-          setIsDropdownVisible(false);
-          break;
-        case MENU_KEYS.SHARE_BY_EMAIL:
+        },
+      },
+      {
+        key: MENU_KEYS.SHARE_BY_EMAIL,
+        label: t('Share chart by email'),
+        onClick: () => {
           shareByEmail();
           setIsDropdownVisible(false);
-          break;
-        case MENU_KEYS.VIEW_QUERY:
-          setIsDropdownVisible(false);
-          break;
-        case MENU_KEYS.RUN_IN_SQL_LAB:
-          onOpenInEditor(latestQueryFormData, domEvent.metaKey);
-          setIsDropdownVisible(false);
-          break;
-        default:
-          break;
-      }
-    },
-    [
-      copyLink,
-      exportCSV,
-      exportCSVPivoted,
-      exportJson,
-      latestQueryFormData,
-      onOpenInEditor,
-      onOpenPropertiesModal,
-      shareByEmail,
-      slice?.slice_name,
-    ],
-  );
+        },
+      },
+    ];
 
-  const menu = useMemo(
-    () => (
-      <Menu onClick={handleMenuClick} selectable={false} {...rest}>
-        <>
-          {slice && (
-            <Menu.Item key={MENU_KEYS.EDIT_PROPERTIES}>
-              {t('Edit chart properties')}
-            </Menu.Item>
-          )}
-          <Menu.SubMenu
-            title={t('On dashboards')}
-            key={MENU_KEYS.DASHBOARDS_ADDED_TO}
-          >
-            <DashboardsSubMenu
-              chartId={slice?.slice_id}
-              dashboards={dashboards}
-            />
-          </Menu.SubMenu>
-          <Menu.Divider />
-        </>
-        <Menu.SubMenu title={t('Download')} key={MENU_KEYS.DOWNLOAD_SUBMENU}>
-          {VIZ_TYPES_PIVOTABLE.includes(latestQueryFormData.viz_type) ? (
-            <>
-              <Menu.Item
-                key={MENU_KEYS.EXPORT_TO_CSV}
-                icon={<Icons.FileOutlined />}
-                disabled={!canDownloadCSV}
-              >
-                {t('Export to original .CSV')}
-              </Menu.Item>
-              <Menu.Item
-                key={MENU_KEYS.EXPORT_TO_CSV_PIVOTED}
-                icon={<Icons.FileOutlined />}
-                disabled={!canDownloadCSV}
-              >
-                {t('Export to pivoted .CSV')}
-              </Menu.Item>
-            </>
-          ) : (
-            <Menu.Item
-              key={MENU_KEYS.EXPORT_TO_CSV}
-              icon={<Icons.FileOutlined />}
-              disabled={!canDownloadCSV}
-            >
-              {t('Export to .CSV')}
-            </Menu.Item>
-          )}
-          <Menu.Item
-            key={MENU_KEYS.EXPORT_TO_JSON}
-            icon={<Icons.FileOutlined />}
-            disabled={!canDownloadCSV}
-          >
-            {t('Export to .JSON')}
-          </Menu.Item>
-          <Menu.Item
-            key={MENU_KEYS.DOWNLOAD_AS_IMAGE}
-            icon={<Icons.FileImageOutlined />}
-          >
-            {t('Download as image')}
-          </Menu.Item>
-          <Menu.Item
-            key={MENU_KEYS.EXPORT_TO_XLSX}
-            icon={<Icons.FileOutlined />}
-            disabled={!canDownloadCSV}
-          >
-            {t('Export to Excel')}
-          </Menu.Item>
-          <Menu.Item
-            key={MENU_KEYS.EXPORT_TO_PIVOT_XLSX}
-            icon={<Icons.FileOutlined />}
-            disabled={!canDownloadCSV}
-          >
-            {t('Export to Pivoted Excel')}
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu title={t('Share')} key={MENU_KEYS.SHARE_SUBMENU}>
-          <Menu.Item key={MENU_KEYS.COPY_PERMALINK}>
-            {t('Copy permalink to clipboard')}
-          </Menu.Item>
-          <Menu.Item key={MENU_KEYS.SHARE_BY_EMAIL}>
-            {t('Share chart by email')}
-          </Menu.Item>
-          {isFeatureEnabled(FeatureFlag.EmbeddableCharts) ? (
-            <Menu.Item key={MENU_KEYS.EMBED_CODE}>
-              <ModalTrigger
-                triggerNode={
-                  <div data-test="embed-code-button">{t('Embed code')}</div>
-                }
-                modalTitle={t('Embed code')}
-                modalBody={
-                  <EmbedCodeContent
-                    formData={latestQueryFormData}
-                    addDangerToast={addDangerToast}
-                  />
-                }
-                maxWidth={`${theme.sizeUnit * 100}px`}
-                destroyOnHidden
-                responsive
-              />
-            </Menu.Item>
-          ) : null}
-        </Menu.SubMenu>
-        <Menu.Divider />
-        {showReportSubMenu ? (
-          <>
-            <HeaderReportDropDown
-              submenuTitle={t('Manage email report')}
-              chart={chart}
-              setShowReportSubMenu={setShowReportSubMenu}
-              showReportSubMenu={showReportSubMenu}
-              showReportModal={showReportModal}
-              setCurrentReportDeleting={setCurrentReportDeleting}
-              useTextMenu
-            />
-            <Menu.Divider />
-          </>
-        ) : (
-          <HeaderReportDropDown
-            chart={chart}
-            setShowReportSubMenu={setShowReportSubMenu}
-            showReportModal={showReportModal}
-            setCurrentReportDeleting={setCurrentReportDeleting}
-            useTextMenu
-          />
-        )}
-        <Menu.Item key={MENU_KEYS.VIEW_QUERY}>
+    if (isFeatureEnabled(FeatureFlag.EmbeddableCharts)) {
+      shareChildren.push({
+        key: MENU_KEYS.EMBED_CODE,
+        label: (
           <ModalTrigger
             triggerNode={
-              <div data-test="view-query-menu-item">{t('View query')}</div>
+              <div data-test="embed-code-button">{t('Embed code')}</div>
             }
-            modalTitle={t('View query')}
+            modalTitle={t('Embed code')}
             modalBody={
-              <ViewQueryModal latestQueryFormData={latestQueryFormData} />
+              <EmbedCodeContent
+                formData={latestQueryFormData}
+                addDangerToast={addDangerToast}
+              />
             }
-            draggable
-            resizable
+            maxWidth={`${theme.sizeUnit * 100}px`}
+            destroyOnHidden
             responsive
           />
-        </Menu.Item>
-        {datasource && (
-          <Menu.Item key={MENU_KEYS.RUN_IN_SQL_LAB}>
-            {t('Run in SQL Lab')}
-          </Menu.Item>
-        )}
-      </Menu>
-    ),
-    [
-      addDangerToast,
-      canDownloadCSV,
-      chart,
-      dashboards,
-      handleMenuClick,
-      isDropdownVisible,
-      latestQueryFormData,
-      showReportSubMenu,
-      slice,
-      theme.sizeUnit,
-    ],
-  );
+        ),
+        onClick: () => setIsDropdownVisible(false),
+      });
+    }
+
+    menuItems.push({
+      key: MENU_KEYS.SHARE_SUBMENU,
+      type: 'submenu',
+      label: t('Share'),
+      children: shareChildren,
+    });
+
+    // Divider
+    menuItems.push({ type: 'divider' });
+
+    // Report menu item
+    if (reportMenuItem) {
+      menuItems.push(reportMenuItem);
+    }
+
+    // View query
+    menuItems.push({
+      key: MENU_KEYS.VIEW_QUERY,
+      label: (
+        <ModalTrigger
+          triggerNode={
+            <div data-test="view-query-menu-item">{t('View query')}</div>
+          }
+          modalTitle={t('View query')}
+          modalBody={
+            <ViewQueryModal latestQueryFormData={latestQueryFormData} />
+          }
+          draggable
+          resizable
+          responsive
+        />
+      ),
+      onClick: () => setIsDropdownVisible(false),
+    });
+
+    // Run in SQL Lab
+    if (datasource) {
+      menuItems.push({
+        key: MENU_KEYS.RUN_IN_SQL_LAB,
+        label: t('Run in SQL Lab'),
+        onClick: e => {
+          onOpenInEditor(latestQueryFormData, e.domEvent.metaKey);
+          setIsDropdownVisible(false);
+        },
+      });
+    }
+
+    return <Menu selectable={false} items={menuItems} {...rest} />;
+  }, [
+    addDangerToast,
+    canDownloadCSV,
+    copyLink,
+    dashboards,
+    datasource,
+    dispatch,
+    exportCSV,
+    exportCSVPivoted,
+    exportExcel,
+    exportJson,
+    latestQueryFormData,
+    onOpenInEditor,
+    onOpenPropertiesModal,
+    reportMenuItem,
+    shareByEmail,
+    slice,
+    theme.sizeUnit,
+  ]);
+
   return [menu, isDropdownVisible, setIsDropdownVisible];
 };

superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx

@@ -191,8 +191,8 @@ describe('exploreUtils', () => {
   });
 
   describe('buildV1ChartDataPayload', () => {
-    it('generate valid request payload despite no registered buildQuery', () => {
-      const v1RequestPayload = buildV1ChartDataPayload({
+    it('generate valid request payload despite no registered buildQuery', async () => {
+      const v1RequestPayload = await buildV1ChartDataPayload({
         formData: { ...formData, viz_type: 'my_custom_viz' },
       });
       expect(v1RequestPayload.hasOwnProperty('queries')).toBeTruthy();

superset-frontend/src/explore/exploreUtils/index.js

@@ -207,7 +207,7 @@ export const getQuerySettings = formData => {
   ];
 };
 
-export const buildV1ChartDataPayload = ({
+export const buildV1ChartDataPayload = async ({
   formData,
   force,
   resultFormat,
@@ -242,7 +242,7 @@ export const buildV1ChartDataPayload = ({
 export const getLegacyEndpointType = ({ resultType, resultFormat }) =>
   resultFormat === 'csv' ? resultFormat : resultType;
 
-export const exportChart = ({
+export const exportChart = async ({
   formData,
   resultFormat = 'json',
   resultType = 'full',
@@ -262,7 +262,7 @@ export const exportChart = ({
     payload = formData;
   } else {
     url = ensureAppRoot('/api/v1/chart/data');
-    payload = buildV1ChartDataPayload({
+    payload = await buildV1ChartDataPayload({
       formData,
       force,
       resultFormat,

superset-frontend/src/features/datasets/AddDataset/Footer/Footer.test.tsx

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  waitFor,
+  userEvent,
+} from 'spec/helpers/testing-library';
 import Footer from 'src/features/datasets/AddDataset/Footer';
 
 const mockHistoryPush = jest.fn();
@@ -27,6 +32,14 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+// Mock the API call
+const mockCreateResource = jest.fn();
+jest.mock('src/views/CRUD/hooks', () => ({
+  useSingleViewResource: () => ({
+    createResource: mockCreateResource,
+  }),
+}));
+
 const mockedProps = {
   url: 'realwebsite.com',
 };
@@ -34,7 +47,7 @@ const mockedProps = {
 const mockPropsWithDataset = {
   url: 'realwebsite.com',
   datasetObject: {
-    database: {
+    db: {
       id: '1',
       database_name: 'examples',
     },
@@ -47,6 +60,10 @@ const mockPropsWithDataset = {
 };
 
 describe('Footer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('renders a Footer with a cancel button and a disabled create button', () => {
     render(<Footer {...mockedProps} />, { useRedux: true });
 
@@ -55,21 +72,28 @@ describe('Footer', () => {
     });
 
     const createButton = screen.getByRole('button', {
-      name: /Create/i,
+      name: /Create dataset and create chart/i,
     });
 
     expect(saveButton).toBeVisible();
     expect(createButton).toBeDisabled();
   });
 
-  test('renders a Create Dataset button when a table is selected', () => {
+  test('renders a Create Dataset dropdown button when a table is selected', () => {
     render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
 
     const createButton = screen.getByRole('button', {
-      name: /Create/i,
+      name: /Create dataset and create chart/i,
     });
 
     expect(createButton).toBeEnabled();
+
+    // Check that it's a dropdown button with the correct text
+    expect(createButton).toHaveTextContent('Create dataset and create chart');
+
+    // Check for the dropdown arrow
+    const dropdownArrow = screen.getByRole('img', { hidden: true });
+    expect(dropdownArrow).toBeInTheDocument();
   });
 
   test('create button becomes disabled when table already has a dataset', () => {
@@ -78,9 +102,119 @@ describe('Footer', () => {
     });
 
     const createButton = screen.getByRole('button', {
-      name: /Create/i,
+      name: /Create dataset and create chart/i,
     });
 
     expect(createButton).toBeDisabled();
   });
+
+  test('shows dropdown menu when dropdown arrow is clicked', async () => {
+    render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
+
+    // Find and click the dropdown trigger (the arrow part)
+    const dropdownTrigger = screen.getByRole('button', { name: 'down' });
+    userEvent.click(dropdownTrigger);
+
+    // Check that the dropdown menu option is visible
+    await waitFor(() => {
+      expect(screen.getByText('Create dataset only')).toBeVisible();
+    });
+  });
+
+  test('navigates to chart creation when main button is clicked', async () => {
+    mockCreateResource.mockResolvedValue(123); // Mock successful dataset creation
+
+    render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create dataset and create chart/i,
+    });
+
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(mockCreateResource).toHaveBeenCalledWith({
+        database: '1',
+        catalog: undefined,
+        schema: 'public',
+        table_name: 'real_info',
+      });
+      expect(mockHistoryPush).toHaveBeenCalledWith(
+        '/chart/add/?dataset=real_info',
+      );
+    });
+  });
+
+  test('navigates to dataset list when "Create dataset only" menu option is clicked', async () => {
+    mockCreateResource.mockResolvedValue(123);
+
+    render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
+
+    // Open dropdown menu
+    const dropdownTrigger = screen.getByRole('button', { name: 'down' });
+    userEvent.click(dropdownTrigger);
+
+    // Click the "Create dataset only" option
+    await waitFor(() => {
+      const datasetOnlyOption = screen.getByText('Create dataset only');
+      userEvent.click(datasetOnlyOption);
+    });
+
+    await waitFor(() => {
+      expect(mockCreateResource).toHaveBeenCalledWith({
+        database: '1',
+        catalog: undefined,
+        schema: 'public',
+        table_name: 'real_info',
+      });
+      expect(mockHistoryPush).toHaveBeenCalledWith('/tablemodelview/list/');
+    });
+  });
+
+  test('handles dataset creation failure gracefully', async () => {
+    mockCreateResource.mockResolvedValue(null); // Mock failed dataset creation
+
+    render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create dataset and create chart/i,
+    });
+
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(mockCreateResource).toHaveBeenCalled();
+      // Should not navigate if creation failed
+      expect(mockHistoryPush).not.toHaveBeenCalled();
+    });
+  });
+
+  test('passes correct data to createResource with catalog', async () => {
+    const mockPropsWithCatalog = {
+      ...mockPropsWithDataset,
+      datasetObject: {
+        ...mockPropsWithDataset.datasetObject,
+        catalog: 'test_catalog',
+      },
+    };
+
+    mockCreateResource.mockResolvedValue(456);
+
+    render(<Footer {...mockPropsWithCatalog} />, { useRedux: true });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create dataset and create chart/i,
+    });
+
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(mockCreateResource).toHaveBeenCalledWith({
+        database: '1',
+        catalog: 'test_catalog',
+        schema: 'public',
+        table_name: 'real_info',
+      });
+    });
+  });
 });

superset-frontend/src/features/datasets/AddDataset/Footer/index.tsx

@@ -17,8 +17,14 @@
  * under the License.
  */
 import { useHistory } from 'react-router-dom';
-import { Button } from '@superset-ui/core/components';
-import { t } from '@superset-ui/core';
+import {
+  Button,
+  DropdownButton,
+  Menu,
+  Flex,
+} from '@superset-ui/core/components';
+import { t, useTheme } from '@superset-ui/core';
+import { Icons } from '@superset-ui/core/components/Icons';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import { logEvent } from 'src/logger/actions';
 import withToasts from 'src/components/MessageToasts/withToasts';
@@ -55,6 +61,7 @@ function Footer({
   datasets,
 }: FooterProps) {
   const history = useHistory();
+  const theme = useTheme();
   const { createResource } = useSingleViewResource<Partial<DatasetObject>>(
     'dataset',
     t('dataset'),
@@ -85,7 +92,7 @@ function Footer({
 
   const tooltipText = t('Select a database table.');
 
-  const onSave = () => {
+  const onSave = (createChart: boolean = true) => {
     if (datasetObject) {
       const data = {
         database: datasetObject.db?.id,
@@ -100,32 +107,57 @@ function Footer({
         if (typeof response === 'number') {
           logEvent(LOG_ACTIONS_DATASET_CREATION_SUCCESS, datasetObject);
           // When a dataset is created the response we get is its ID number
-          history.push(`/chart/add/?dataset=${datasetObject.table_name}`);
+          if (createChart) {
+            history.push(`/chart/add/?dataset=${datasetObject.table_name}`);
+          } else {
+            history.push('/tablemodelview/list/');
+          }
         }
       });
     }
   };
 
+  const onSaveOnly = () => {
+    onSave(false);
+  };
+
   const CREATE_DATASET_TEXT = t('Create dataset and create chart');
+  const CREATE_DATASET_ONLY_TEXT = t('Create dataset only');
   const disabledCheck =
     !datasetObject?.table_name ||
     !hasColumns ||
     datasets?.includes(datasetObject?.table_name);
 
+  const dropdownMenu = (
+    <Menu>
+      <Menu.Item key="create-only" onClick={onSaveOnly}>
+        {CREATE_DATASET_ONLY_TEXT}
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
-    <>
+    <Flex align="center" justify="flex-end" gap="8px">
       <Button buttonStyle="secondary" onClick={cancelButtonOnClick}>
         {t('Cancel')}
       </Button>
-      <Button
-        buttonStyle="primary"
+      <DropdownButton
+        type="primary"
         disabled={disabledCheck}
         tooltip={!datasetObject?.table_name ? tooltipText : undefined}
-        onClick={onSave}
+        onClick={() => onSave(true)}
+        popupRender={() => dropdownMenu}
+        icon={
+          <Icons.DownOutlined
+            iconSize="xs"
+            iconColor={theme.colors.grayscale.light5}
+          />
+        }
+        trigger={['click']}
       >
         {CREATE_DATASET_TEXT}
-      </Button>
-    </>
+      </DropdownButton>
+    </Flex>
   );
 }
 

superset-frontend/src/features/home/Menu.tsx

@@ -43,6 +43,7 @@ interface MenuProps {
 const StyledHeader = styled.header`
   ${({ theme }) => `
       background-color: ${theme.colorBgContainer};
+      border-bottom: 1px solid ${theme.colorBorderSecondary};
       z-index: 10;
 
       &:nth-last-of-type(2) nav {

superset-frontend/src/features/home/RightMenu.tsx

@@ -17,13 +17,11 @@
  * under the License.
  */
 import { Fragment, useState, useEffect, FC, PureComponent } from 'react';
-
 import rison from 'rison';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { useQueryParams, BooleanParam } from 'use-query-params';
 import { get, isEmpty } from 'lodash';
-
 import {
   t,
   styled,
@@ -33,10 +31,15 @@ import {
   getExtensionsRegistry,
   useTheme,
 } from '@superset-ui/core';
-import { Menu } from '@superset-ui/core/components/Menu';
-import { Label, Tooltip } from '@superset-ui/core/components';
-import { Icons } from '@superset-ui/core/components/Icons';
-import { Typography } from '@superset-ui/core/components/Typography';
+import {
+  Label,
+  Tooltip,
+  ThemeSubMenu,
+  Menu,
+  Icons,
+  Typography,
+  TelemetryPixel,
+} from '@superset-ui/core/components';
 import { ensureAppRoot } from 'src/utils/pathUtils';
 import { findPermission } from 'src/utils/findPermission';
 import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
@@ -49,9 +52,7 @@ import { RootState } from 'src/dashboard/types';
 import DatabaseModal from 'src/features/databases/DatabaseModal';
 import UploadDataModal from 'src/features/databases/UploadDataModel';
 import { uploadUserPerms } from 'src/views/CRUD/utils';
-import TelemetryPixel from '@superset-ui/core/components/TelemetryPixel';
 import { useThemeContext } from 'src/theme/ThemeProvider';
-import ThemeSelect from '@superset-ui/core/components/ThemeSelect';
 import LanguagePicker from './LanguagePicker';
 import {
   ExtensionConfigs,
@@ -138,6 +139,7 @@ const RightMenu = ({
     datasetAdded?: boolean;
   }) => void;
 }) => {
+  const theme = useTheme();
   const user = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
   );
@@ -371,7 +373,6 @@ const RightMenu = ({
     localStorage.removeItem('redux');
   };
 
-  const theme = useTheme();
   return (
     <StyledDiv align={align}>
       {canDatabase && (
@@ -493,16 +494,15 @@ const RightMenu = ({
             })}
           </StyledSubMenu>
         )}
+
         {canSetMode() && (
-          <span>
-            <ThemeSelect
-              setThemeMode={setThemeMode}
-              themeMode={themeMode}
-              hasLocalOverride={hasDevOverride()}
-              onClearLocalSettings={clearLocalOverrides}
-              allowOSPreference={canDetectOSPreference()}
-            />
-          </span>
+          <ThemeSubMenu
+            setThemeMode={setThemeMode}
+            themeMode={themeMode}
+            hasLocalOverride={hasDevOverride()}
+            onClearLocalSettings={clearLocalOverrides}
+            allowOSPreference={canDetectOSPreference()}
+          />
         )}
 
         <StyledSubMenu

superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx

@@ -18,12 +18,11 @@
  */
 import { act, render, screen, userEvent } from 'spec/helpers/testing-library';
 import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
-import { Menu } from '@superset-ui/core/components/Menu';
-import HeaderReportDropdown, { HeaderReportProps } from '.';
+import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
+import { useHeaderReportMenuItems, HeaderReportProps } from './index';
 
 const createProps = () => ({
   dashboardId: 1,
-  useTextMenu: false,
   setShowReportSubMenu: jest.fn,
   showReportModal: jest.fn,
   setCurrentReportDeleting: jest.fn,
@@ -115,13 +114,14 @@ const stateWithUserAndReport = {
   },
 };
 
+const MenuWrapper = (props: HeaderReportProps) => {
+  const reportMenuItems = useHeaderReportMenuItems(props);
+  const menuItems: MenuItem[] = [reportMenuItems];
+  return <Menu items={menuItems} forceSubMenuRender />;
+};
+
 function setup(props: HeaderReportProps, initialState = {}) {
-  render(
-    <Menu>
-      <HeaderReportDropdown {...props} />
-    </Menu>,
-    { useRedux: true, initialState },
-  );
+  render(<MenuWrapper {...props} />, { useRedux: true, initialState });
 }
 
 jest.mock('@superset-ui/core', () => ({
@@ -147,7 +147,7 @@ describe('Header Report Dropdown', () => {
     act(() => {
       setup(mockedProps, stateWithUserAndReport);
     });
-    expect(screen.getByRole('menuitem')).toBeInTheDocument();
+    expect(screen.getAllByRole('menuitem')[0]).toBeInTheDocument();
   });
 
   it('renders the dropdown correctly', async () => {
@@ -155,8 +155,6 @@ describe('Header Report Dropdown', () => {
     act(() => {
       setup(mockedProps, stateWithUserAndReport);
     });
-    const emailReportModalButton = screen.getByRole('menuitem');
-    userEvent.hover(emailReportModalButton);
     expect(await screen.findByText('Email reports active')).toBeInTheDocument();
     expect(screen.getByText('Edit email report')).toBeInTheDocument();
     expect(screen.getByText('Delete email report')).toBeInTheDocument();
@@ -168,8 +166,6 @@ describe('Header Report Dropdown', () => {
     act(() => {
       setup(mockedProps, stateWithUserAndReport);
     });
-    const emailReportModalButton = screen.getByRole('menuitem');
-    userEvent.click(emailReportModalButton);
     const editModal = await screen.findByText('Edit email report');
     userEvent.click(editModal);
     expect(mockedProps.showReportModal).toHaveBeenCalled();
@@ -181,49 +177,34 @@ describe('Header Report Dropdown', () => {
     act(() => {
       setup(mockedProps, stateWithUserAndReport);
     });
-    const emailReportModalButton = screen.getByRole('menuitem');
-    userEvent.click(emailReportModalButton);
     const deleteModal = await screen.findByText('Delete email report');
     userEvent.click(deleteModal);
     expect(mockedProps.setCurrentReportDeleting).toHaveBeenCalled();
   });
 
-  it('renders Manage Email Reports Menu if textMenu is set to true and there is a report', async () => {
-    let mockedProps = createProps();
-    mockedProps = {
-      ...mockedProps,
-      useTextMenu: true,
-    };
+  it('renders Manage Email Reports Menu if there is a report', async () => {
+    const mockedProps = createProps();
     act(() => {
       setup(mockedProps, stateWithUserAndReport);
     });
-    userEvent.click(screen.getByRole('menuitem'));
     expect(await screen.findByText('Email reports active')).toBeInTheDocument();
     expect(screen.getByText('Edit email report')).toBeInTheDocument();
     expect(screen.getByText('Delete email report')).toBeInTheDocument();
   });
 
-  it('renders Schedule Email Reports if textMenu is set to true and there is a report', async () => {
-    let mockedProps = createProps();
-    mockedProps = {
-      ...mockedProps,
-      useTextMenu: true,
-    };
+  it('renders Schedule Email Reports if there is a report', async () => {
+    const mockedProps = createProps();
+
     act(() => {
       setup(mockedProps, stateWithOnlyUser);
     });
-    userEvent.click(screen.getByRole('menuitem'));
     expect(
       await screen.findByText('Set up an email report'),
     ).toBeInTheDocument();
   });
 
   it('renders Schedule Email Reports as long as user has permission through any role', async () => {
-    let mockedProps = createProps();
-    mockedProps = {
-      ...mockedProps,
-      useTextMenu: true,
-    };
+    const mockedProps = createProps();
     act(() => {
       setup(mockedProps, stateWithNonAdminUser);
     });
@@ -234,11 +215,8 @@ describe('Header Report Dropdown', () => {
   });
 
   it('do not render Schedule Email Reports if user no permission', () => {
-    let mockedProps = createProps();
-    mockedProps = {
-      ...mockedProps,
-      useTextMenu: true,
-    };
+    const mockedProps = createProps();
+
     act(() => {
       setup(mockedProps, stateWithNonMenuAccessOnManage);
     });

superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx

@@ -16,24 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactNode, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { isEmpty } from 'lodash';
 import {
   t,
-  SupersetTheme,
-  css,
   styled,
   FeatureFlag,
   isFeatureEnabled,
   getExtensionsRegistry,
   usePrevious,
+  css,
 } from '@superset-ui/core';
-import { Icons } from '@superset-ui/core/components/Icons';
-import { Switch } from '@superset-ui/core/components/Switch';
-import { AlertObject } from 'src/features/alerts/types';
-import { Menu } from '@superset-ui/core/components/Menu';
+import { MenuItem } from '@superset-ui/core/components/Menu';
 import { Checkbox } from '@superset-ui/core/components';
+import { AlertObject } from 'src/features/alerts/types';
 import { noOp } from 'src/utils/common';
 import { ChartState } from 'src/explore/types';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
@@ -41,35 +37,14 @@ import {
   fetchUISpecificReport,
   toggleActive,
 } from 'src/features/reports/ReportModal/actions';
-import { reportSelector } from 'src/views/CRUD/hooks';
 import { MenuItemWithCheckboxContainer } from 'src/explore/components/useExploreAdditionalActionsMenu/index';
 
 const extensionsRegistry = getExtensionsRegistry();
 
-const deleteColor = (theme: SupersetTheme) => css`
-  color: ${theme.colorError};
-`;
-
-const onMenuHover = (theme: SupersetTheme) => css`
-  & .ant-menu-item {
-    padding: 5px 12px;
-    margin-top: 0px;
-    margin-bottom: 4px;
-    :hover {
-      color: ${theme.colorText};
-    }
-  }
-  :hover {
-    background-color: ${theme.colorPrimaryBg};
-  }
-`;
-
-const onMenuItemHover = (theme: SupersetTheme) => css`
-  &:hover {
-    color: ${theme.colorText};
-    background-color: ${theme.colorPrimaryBg};
-  }
-`;
+export enum CreationMethod {
+  Charts = 'charts',
+  Dashboards = 'dashboards',
+}
 
 const StyledDropdownItemWithIcon = styled.div`
   display: flex;
@@ -85,63 +60,59 @@ const DropdownItemExtension = extensionsRegistry.get(
   'report-modal.dropdown.item.icon',
 );
 
-export enum CreationMethod {
-  Charts = 'charts',
-  Dashboards = 'dashboards',
-}
 export interface HeaderReportProps {
   dashboardId?: number;
   chart?: ChartState;
-  useTextMenu?: boolean;
-  setShowReportSubMenu?: (show: boolean) => void;
-  showReportSubMenu?: boolean;
-  submenuTitle?: string;
   showReportModal: () => void;
   setCurrentReportDeleting: (report: AlertObject | null) => void;
 }
 
-// Same instance to be used in useEffects
-const EMPTY_OBJECT = {};
-
-export default function HeaderReportDropDown({
+export const useHeaderReportMenuItems = ({
   dashboardId,
   chart,
-  useTextMenu = false,
-  setShowReportSubMenu,
-  submenuTitle,
   showReportModal,
   setCurrentReportDeleting,
-}: HeaderReportProps) {
+}: HeaderReportProps): MenuItem | null => {
   const dispatch = useDispatch();
-  const report = useSelector<any, AlertObject>(state => {
-    const resourceType = dashboardId
-      ? CreationMethod.Dashboards
-      : CreationMethod.Charts;
-    return (
-      reportSelector(state, resourceType, dashboardId || chart?.id) ||
-      EMPTY_OBJECT
-    );
+  const resourceId = dashboardId || chart?.id;
+  const resourceType = dashboardId
+    ? CreationMethod.Dashboards
+    : CreationMethod.Charts;
+
+  // Select the reports state and specific report with proper reactivity
+  const report = useSelector<any, AlertObject | null>(state => {
+    if (!resourceId) return null;
+    // Select directly from the reports state to ensure reactivity
+    const reportsState = state.reports || {};
+    const resourceTypeReports = reportsState[resourceType] || {};
+    const reportData = resourceTypeReports[resourceId];
+
+    // Debug logging to understand what's happening
+    console.log('Report selector called:', {
+      resourceId,
+      resourceType,
+      reportsState: Object.keys(reportsState),
+      resourceTypeReports: Object.keys(resourceTypeReports),
+      reportData: reportData
+        ? { id: reportData.id, name: reportData.name }
+        : null,
+    });
+
+    return reportData || null;
   });
 
-  const isReportActive: boolean = report?.active || false;
   const user: UserWithPermissionsAndRoles = useSelector<
     any,
     UserWithPermissionsAndRoles
   >(state => state.user);
+
+  const prevDashboard = usePrevious(dashboardId);
+
+  // Check if user can add reports
   const canAddReports = () => {
-    if (!isFeatureEnabled(FeatureFlag.AlertReports)) {
-      return false;
-    }
-
-    if (!user?.userId) {
-      // this is in the case that there is an anonymous user.
-      return false;
-    }
-
-    // Cannot add reports if the resource is not saved
-    if (!(dashboardId || chart?.id)) {
-      return false;
-    }
+    if (!isFeatureEnabled(FeatureFlag.AlertReports)) return false;
+    if (!user?.userId) return false;
+    if (!resourceId) return false;
 
     const roles = Object.keys(user.roles || []);
     const permissions = roles.map(key =>
@@ -152,17 +123,11 @@ export default function HeaderReportDropDown({
     return permissions.some(permission => permission.length > 0);
   };
 
-  const prevDashboard = usePrevious(dashboardId);
-  const toggleActiveKey = async (data: AlertObject, checked: boolean) => {
-    if (data?.id) {
-      dispatch(toggleActive(data, checked));
-    }
-  };
-
   const shouldFetch =
     canAddReports() &&
     !!((dashboardId && prevDashboard !== dashboardId) || chart?.id);
 
+  // Fetch report data when needed
   useEffect(() => {
     if (shouldFetch) {
       dispatch(
@@ -170,113 +135,82 @@ export default function HeaderReportDropDown({
           userId: user.userId,
           filterField: dashboardId ? 'dashboard_id' : 'chart_id',
           creationMethod: dashboardId ? 'dashboards' : 'charts',
-          resourceId: dashboardId || chart?.id,
+          resourceId,
         }),
       );
     }
-  }, []);
+  }, [dispatch, shouldFetch, user?.userId, dashboardId, resourceId]);
 
-  const showReportSubMenu = report && setShowReportSubMenu && canAddReports();
+  // Don't show anything if user can't add reports
+  if (!canAddReports()) {
+    return null;
+  }
 
-  useEffect(() => {
-    if (showReportSubMenu) {
-      setShowReportSubMenu(true);
-    } else if (!report && setShowReportSubMenu) {
-      setShowReportSubMenu(false);
+  // Handler functions
+  const handleShowModal = () => showReportModal();
+  const handleDeleteReport = () => setCurrentReportDeleting(report);
+  const handleToggleActive = () => {
+    if (report?.id) {
+      dispatch(toggleActive(report, !report.active));
     }
-  }, [report]);
-
-  const handleShowMenu = () => {
-    showReportModal();
   };
 
-  const handleDeleteMenuClick = () => {
-    setCurrentReportDeleting(report);
-  };
-
-  const textMenu = () =>
-    isEmpty(report) ? (
-      <Menu.SubMenu title={submenuTitle} css={onMenuHover}>
-        <Menu.Item onClick={handleShowMenu}>
-          {DropdownItemExtension ? (
+  // If no report exists, show "Set up email report" option
+  if (!report || !report.id) {
+    return {
+      key: 'email-report-setup',
+      type: 'submenu',
+      label: t('Manage email report'),
+      children: [
+        {
+          key: 'set-up-report',
+          label: DropdownItemExtension ? (
             <StyledDropdownItemWithIcon>
               <div>{t('Set up an email report')}</div>
               <DropdownItemExtension />
             </StyledDropdownItemWithIcon>
           ) : (
             t('Set up an email report')
-          )}
-        </Menu.Item>
-        <Menu.Divider />
-      </Menu.SubMenu>
-    ) : (
-      <Menu.SubMenu
-        title={submenuTitle}
-        css={css`
-          border: none;
-        `}
-      >
-        <Menu.Item
-          css={onMenuItemHover}
-          onClick={() => toggleActiveKey(report, !isReportActive)}
-        >
+          ),
+          onClick: handleShowModal,
+        },
+      ],
+    };
+  }
+
+  // If report exists, show management options
+  return {
+    key: 'email-report-manage',
+    type: 'submenu',
+    label: t('Manage email report'),
+    children: [
+      {
+        key: 'toggle-active',
+        label: (
           <MenuItemWithCheckboxContainer>
-            <Checkbox checked={isReportActive} onChange={noOp} />
+            <Checkbox
+              checked={report.active || false}
+              onChange={noOp}
+              css={theme => css`
+                margin-right: ${theme.sizeUnit}px;
+              `}
+            />
             {t('Email reports active')}
           </MenuItemWithCheckboxContainer>
-        </Menu.Item>
-        <Menu.Item css={onMenuItemHover} onClick={handleShowMenu}>
-          {t('Edit email report')}
-        </Menu.Item>
-        <Menu.Item css={onMenuItemHover} onClick={handleDeleteMenuClick}>
-          {t('Delete email report')}
-        </Menu.Item>
-      </Menu.SubMenu>
-    );
-  const menu = (title: ReactNode) => (
-    <Menu.SubMenu
-      title={title}
-      css={css`
-        width: 200px;
-      `}
-    >
-      <Menu.Item>
-        {t('Email reports active')}
-        <Switch
-          data-test="toggle-active"
-          checked={isReportActive}
-          onClick={(checked: boolean) => toggleActiveKey(report, checked)}
-          size="small"
-          css={theme => css`
-            margin-left: ${theme.sizeUnit * 2}px;
-          `}
-        />
-      </Menu.Item>
-      <Menu.Item onClick={() => showReportModal()}>
-        {t('Edit email report')}
-      </Menu.Item>
-      <Menu.Item
-        onClick={() => setCurrentReportDeleting(report)}
-        css={deleteColor}
-      >
-        {t('Delete email report')}
-      </Menu.Item>
-    </Menu.SubMenu>
-  );
-
-  const iconMenu = () =>
-    isEmpty(report) ? (
-      <span
-        role="button"
-        title={t('Schedule email report')}
-        tabIndex={0}
-        className="action-button action-schedule-report"
-        onClick={() => showReportModal()}
-      >
-        <Icons.CalendarOutlined />
-      </span>
-    ) : (
-      menu(<Icons.CalendarOutlined />)
-    );
-  return <>{canAddReports() && (useTextMenu ? textMenu() : iconMenu())}</>;
-}
+        ),
+        onClick: handleToggleActive,
+      },
+      {
+        key: 'edit-report',
+        label: t('Edit email report'),
+        onClick: handleShowModal,
+      },
+      {
+        key: 'delete-report',
+        label: t('Delete email report'),
+        onClick: handleDeleteReport,
+        danger: true,
+      },
+    ],
+  };
+};

superset-frontend/src/pages/ChartList/index.tsx

@@ -575,8 +575,8 @@ function ChartList(props: ChartListProps) {
       operator: FilterOperator.ChartIsFav,
       unfilteredLabel: t('Any'),
       selects: [
-        { label: t('Yes'), value: true },
-        { label: t('No'), value: false },
+        { label: t('yes'), value: true },
+        { label: t('no'), value: false },
       ],
     }),
     [],

superset-frontend/src/pages/DashboardList/index.tsx

@@ -530,8 +530,8 @@ function DashboardList(props: DashboardListProps) {
       operator: FilterOperator.DashboardIsFav,
       unfilteredLabel: t('Any'),
       selects: [
-        { label: t('Yes'), value: true },
-        { label: t('No'), value: false },
+        { label: t('yes'), value: true },
+        { label: t('no'), value: false },
       ],
     }),
     [],
@@ -604,8 +604,8 @@ function DashboardList(props: DashboardListProps) {
         operator: FilterOperator.DashboardIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
-          { label: t('Yes'), value: true },
-          { label: t('No'), value: false },
+          { label: t('yes'), value: true },
+          { label: t('no'), value: false },
         ],
       },
       {

superset-frontend/src/pages/DatasetList/index.tsx

@@ -530,8 +530,8 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         operator: FilterOperator.DatasetIsNullOrEmpty,
         unfilteredLabel: 'All',
         selects: [
-          { label: t('Virtual'), value: false },
-          { label: t('Physical'), value: true },
+          { label: t('virtual'), value: false },
+          { label: t('physical'), value: true },
         ],
       },
       {
@@ -598,8 +598,8 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         operator: FilterOperator.DatasetIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
-          { label: t('Yes'), value: true },
-          { label: t('No'), value: false },
+          { label: t('yes'), value: true },
+          { label: t('no'), value: false },
         ],
       },
       {
@@ -764,7 +764,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
               </p>
               {datasetCurrentlyDeleting.dashboards.count >= 1 && (
                 <>
-                  <h4>{t('Affected Dashboards')}</h4>
+                  <h4>{t('Affected dashboards')}</h4>
                   <List
                     split={false}
                     size="small"
@@ -807,7 +807,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
               )}
               {datasetCurrentlyDeleting.charts.count >= 1 && (
                 <>
-                  <h4>{t('Affected Charts')}</h4>
+                  <h4>{t('Affected charts')}</h4>
                   <List
                     split={false}
                     size="small"
@@ -860,7 +860,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
           }}
           onHide={closeDatasetDeleteModal}
           open
-          title={t('Delete Dataset?')}
+          title={t('Delete dataset?')}
         />
       )}
       {datasetCurrentlyEditing && (
@@ -931,7 +931,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                 );
 
                 if (!selected.length) {
-                  return t('0 Selected');
+                  return t('0 selected');
                 }
                 if (virtualCount && !physicalCount) {
                   return t(

superset-frontend/src/pages/RowLevelSecurityList/index.tsx

@@ -65,7 +65,7 @@ function RowLevelSecurityList(props: RLSProps) {
     toggleBulkSelect,
   } = useListViewResource<RLSObject>(
     'rowlevelsecurity',
-    t('Row Level Security'),
+    t('Row level security'),
     addDangerToast,
     true,
     undefined,
@@ -130,13 +130,13 @@ function RowLevelSecurityList(props: RLSProps) {
       },
       {
         accessor: 'filter_type',
-        Header: t('Filter Type'),
+        Header: t('Filter type'),
         size: 'xl',
         id: 'filter_type',
       },
       {
         accessor: 'group_key',
-        Header: t('Group Key'),
+        Header: t('Group key'),
         size: 'xl',
         id: 'group_key',
       },
@@ -246,7 +246,7 @@ function RowLevelSecurityList(props: RLSProps) {
   );
 
   const emptyState = {
-    title: t('No Rules yet'),
+    title: t('No rules yet'),
     image: 'filter-results.svg',
     buttonAction: () => handleRuleEdit(null),
     buttonIcon: canEdit ? (
@@ -265,7 +265,7 @@ function RowLevelSecurityList(props: RLSProps) {
         operator: FilterOperator.StartsWith,
       },
       {
-        Header: t('Filter Type'),
+        Header: t('Filter type'),
         key: 'filter_type',
         id: 'filter_type',
         input: 'select',
@@ -277,7 +277,7 @@ function RowLevelSecurityList(props: RLSProps) {
         ],
       },
       {
-        Header: t('Group Key'),
+        Header: t('Group key'),
         key: 'search',
         id: 'group_key',
         input: 'search',
@@ -329,7 +329,7 @@ function RowLevelSecurityList(props: RLSProps) {
 
   return (
     <>
-      <SubMenu name={t('Row Level Security')} buttons={subMenuButtons} />
+      <SubMenu name={t('Row level security')} buttons={subMenuButtons} />
       <ConfirmStatusChange
         title={t('Please confirm')}
         description={t('Are you sure you want to delete the selected rules?')}

superset-frontend/src/pages/ThemeList/index.tsx

@@ -338,6 +338,22 @@ function ThemesList({
 
   const subMenuButtons: SubMenuProps['buttons'] = [];
 
+  if (canImport) {
+    subMenuButtons.push({
+      name: (
+        <Tooltip
+          id="import-tooltip"
+          title={t('Import themes')}
+          placement="bottomRight"
+        >
+          <Icons.DownloadOutlined iconSize="l" data-test="import-button" />
+        </Tooltip>
+      ),
+      buttonStyle: 'link',
+      onClick: openThemeImportModal,
+    });
+  }
+
   if (canDelete || canExport) {
     subMenuButtons.push({
       name: t('Bulk select'),
@@ -358,22 +374,6 @@ function ThemesList({
     });
   }
 
-  if (canImport) {
-    subMenuButtons.push({
-      name: (
-        <Tooltip
-          id="import-tooltip"
-          title={t('Import themes')}
-          placement="bottomRight"
-        >
-          <Icons.DownloadOutlined iconSize="l" data-test="import-button" />
-        </Tooltip>
-      ),
-      buttonStyle: 'link',
-      onClick: openThemeImportModal,
-    });
-  }
-
   menuData.buttons = subMenuButtons;
 
   const filters: ListViewFilters = useMemo(

superset-frontend/src/pages/UsersList/index.tsx

@@ -519,7 +519,7 @@ function UsersList({ user }: UsersListProps) {
 
   return (
     <>
-      <SubMenu name={t('List Users')} buttons={subMenuButtons} />
+      <SubMenu name={t('List users')} buttons={subMenuButtons} />
       <UserListAddModal
         onHide={() => closeModal(ModalType.ADD)}
         show={modalState.add}
@@ -554,7 +554,7 @@ function UsersList({ user }: UsersListProps) {
           }}
           onHide={() => setUserCurrentlyDeleting(null)}
           open
-          title={t('Delete User?')}
+          title={t('Delete user?')}
         />
       )}
       <ConfirmStatusChange

superset-frontend/src/theme/ThemeController.ts

@@ -17,13 +17,15 @@
  * under the License.
  */
 import {
+  type AnyThemeConfig,
+  type SupersetTheme,
+  type SupersetThemeConfig,
+  type ThemeControllerOptions,
+  type ThemeStorage,
   Theme,
-  AnyThemeConfig,
-  ThemeStorage,
-  ThemeControllerOptions,
+  ThemeMode,
   themeObject as supersetThemeObject,
 } from '@superset-ui/core';
-import { SupersetTheme, ThemeMode } from '@superset-ui/core/theme/types';
 import {
   getAntdConfig,
   normalizeThemeConfig,
@@ -94,7 +96,7 @@ export class ThemeController {
 
   private currentMode: ThemeMode;
 
-  private readonly hasBootstrapThemes: boolean;
+  private hasCustomThemes: boolean;
 
   private onChangeCallbacks: Set<(theme: Theme) => void> = new Set();
 
@@ -109,15 +111,13 @@ export class ThemeController {
 
   private dashboardCrudTheme: AnyThemeConfig | null = null;
 
-  constructor(options: ThemeControllerOptions = {}) {
-    const {
-      storage = new LocalStorageAdapter(),
-      modeStorageKey = STORAGE_KEYS.THEME_MODE,
-      themeObject = supersetThemeObject,
-      defaultTheme = (supersetThemeObject.theme as AnyThemeConfig) ?? {},
-      onChange = null,
-    } = options;
-
+  constructor({
+    storage = new LocalStorageAdapter(),
+    modeStorageKey = STORAGE_KEYS.THEME_MODE,
+    themeObject = supersetThemeObject,
+    defaultTheme = (supersetThemeObject.theme as AnyThemeConfig) ?? {},
+    onChange = undefined,
+  }: ThemeControllerOptions = {}) {
     this.storage = storage;
     this.modeStorageKey = modeStorageKey;
 
@@ -129,14 +129,14 @@ export class ThemeController {
       bootstrapDefaultTheme,
       bootstrapDarkTheme,
       bootstrapThemeSettings,
-      hasBootstrapThemes,
+      hasCustomThemes,
     }: BootstrapThemeData = this.loadBootstrapData();
 
-    this.hasBootstrapThemes = hasBootstrapThemes;
+    this.hasCustomThemes = hasCustomThemes;
     this.themeSettings = bootstrapThemeSettings || {};
 
     // Set themes based on bootstrap data availability
-    if (this.hasBootstrapThemes) {
+    if (this.hasCustomThemes) {
       this.darkTheme = bootstrapDarkTheme || bootstrapDefaultTheme || null;
       this.defaultTheme =
         bootstrapDefaultTheme || bootstrapDarkTheme || defaultTheme;
@@ -424,6 +424,42 @@ export class ThemeController {
     return allowOSPreference === true;
   }
 
+  /**
+   * Sets an entire new theme configuration, replacing all existing theme data and settings.
+   * This method is designed for use cases like embedded dashboards where themes are provided
+   * dynamically from external sources.
+   * @param config - The complete theme configuration object
+   */
+  public setThemeConfig(config: SupersetThemeConfig): void {
+    this.defaultTheme = config.theme_default;
+    this.darkTheme = config.theme_dark || null;
+    this.hasCustomThemes = true;
+
+    this.themeSettings = {
+      enforced: config.theme_settings?.enforced ?? false,
+      allowSwitching: config.theme_settings?.allowSwitching ?? true,
+      allowOSPreference: config.theme_settings?.allowOSPreference ?? true,
+    };
+
+    let newMode: ThemeMode;
+    try {
+      this.validateModeUpdatePermission(this.currentMode);
+      const hasRequiredTheme = this.isValidThemeMode(this.currentMode);
+      newMode = hasRequiredTheme
+        ? this.currentMode
+        : this.determineInitialMode();
+    } catch {
+      newMode = this.determineInitialMode();
+    }
+
+    this.currentMode = newMode;
+
+    const themeToApply =
+      this.getThemeForMode(this.currentMode) || this.defaultTheme;
+
+    this.updateTheme(themeToApply);
+  }
+
   /**
    * Handles system theme changes with error recovery.
    */
@@ -547,7 +583,7 @@ export class ThemeController {
       bootstrapDefaultTheme: hasValidDefault ? defaultTheme : null,
       bootstrapDarkTheme: hasValidDark ? darkTheme : null,
       bootstrapThemeSettings: hasValidSettings ? themeSettings : null,
-      hasBootstrapThemes: hasValidDefault || hasValidDark,
+      hasCustomThemes: hasValidDefault || hasValidDark,
     };
   }
 
@@ -607,7 +643,7 @@ export class ThemeController {
       resolvedMode = ThemeController.getSystemPreferredMode();
     }
 
-    if (!this.hasBootstrapThemes) {
+    if (!this.hasCustomThemes) {
       const baseTheme = this.defaultTheme.token as Partial<SupersetTheme>;
       return getAntdConfig(baseTheme, resolvedMode === ThemeMode.DARK);
     }

superset-frontend/src/theme/ThemeProvider.tsx

@@ -24,8 +24,12 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { Theme, AnyThemeConfig, ThemeContextType } from '@superset-ui/core';
-import { ThemeMode } from '@superset-ui/core/theme/types';
+import {
+  type AnyThemeConfig,
+  type ThemeContextType,
+  Theme,
+  ThemeMode,
+} from '@superset-ui/core';
 import { ThemeController } from './ThemeController';
 
 const ThemeContext = createContext<ThemeContextType | null>(null);

superset-frontend/src/theme/tests/ThemeController.test.ts

@@ -17,12 +17,17 @@
  * under the License.
  */
 import { theme as antdThemeImport } from 'antd';
-import { Theme } from '@superset-ui/core';
+import {
+  type AnyThemeConfig,
+  type SupersetThemeConfig,
+  Theme,
+  ThemeAlgorithm,
+  ThemeMode,
+} from '@superset-ui/core';
 import type {
   BootstrapThemeDataConfig,
   CommonBootstrapData,
 } from 'src/types/bootstrapTypes';
-import { ThemeAlgorithm, ThemeMode } from '@superset-ui/core/theme/types';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import { LocalStorageAdapter, ThemeController } from '../ThemeController';
 
@@ -43,7 +48,7 @@ const mockThemeFromConfig = jest.fn();
 const mockSetConfig = jest.fn();
 
 // Mock data constants
-const DEFAULT_THEME = {
+const DEFAULT_THEME: AnyThemeConfig = {
   token: {
     colorBgBase: '#ededed',
     colorTextBase: '#120f0f',
@@ -55,7 +60,7 @@ const DEFAULT_THEME = {
   },
 };
 
-const DARK_THEME = {
+const DARK_THEME: AnyThemeConfig = {
   token: {
     colorBgBase: '#141118',
     colorTextBase: '#fdc7c7',
@@ -65,7 +70,7 @@ const DARK_THEME = {
     colorSuccess: '#3c7c1b',
     colorWarning: '#dc9811',
   },
-  algorithm: ThemeMode.DARK,
+  algorithm: ThemeAlgorithm.DARK,
 };
 
 const THEME_SETTINGS = {
@@ -1049,4 +1054,298 @@ describe('ThemeController', () => {
       );
     });
   });
+
+  describe('setThemeConfig', () => {
+    beforeEach(() => {
+      mockGetBootstrapData.mockReturnValue(
+        createMockBootstrapData({
+          default: {},
+          dark: {},
+          settings: {},
+        }),
+      );
+
+      controller = new ThemeController({
+        themeObject: mockThemeObject,
+        defaultTheme: { token: {} },
+      });
+
+      jest.clearAllMocks();
+    });
+
+    it('should set complete theme configuration', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+        theme_settings: {
+          enforced: false,
+          allowSwitching: true,
+          allowOSPreference: true,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining(DEFAULT_THEME.token),
+          algorithm: antdThemeImport.defaultAlgorithm,
+        }),
+      );
+
+      expect(controller.getCurrentMode()).toBe(ThemeMode.SYSTEM);
+      expect(controller.canSetTheme()).toBe(true);
+      expect(controller.canSetMode()).toBe(true);
+    });
+
+    it('should handle theme_default only', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining(DEFAULT_THEME.token),
+          algorithm: antdThemeImport.defaultAlgorithm,
+        }),
+      );
+
+      expect(controller.canSetTheme()).toBe(true);
+      expect(controller.canSetMode()).toBe(true);
+    });
+
+    it('should handle theme_default and theme_dark without settings', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining(DEFAULT_THEME.token),
+        }),
+      );
+
+      jest.clearAllMocks();
+      controller.setThemeMode(ThemeMode.DARK);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining(DARK_THEME.token),
+          algorithm: antdThemeImport.darkAlgorithm,
+        }),
+      );
+    });
+
+    it('should handle enforced theme settings', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+        theme_settings: {
+          enforced: true,
+          allowSwitching: false,
+          allowOSPreference: false,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(controller.canSetTheme()).toBe(false);
+      expect(controller.canSetMode()).toBe(false);
+      expect(controller.getCurrentMode()).toBe(ThemeMode.DEFAULT);
+
+      expect(() => {
+        controller.setThemeMode(ThemeMode.DARK);
+      }).toThrow('User does not have permission to update the theme mode');
+    });
+
+    it('should handle allowOSPreference: false setting', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+        theme_settings: {
+          enforced: false,
+          allowSwitching: true,
+          allowOSPreference: false,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(controller.getCurrentMode()).toBe(ThemeMode.DEFAULT);
+      expect(controller.canSetMode()).toBe(true);
+
+      expect(() => {
+        controller.setThemeMode(ThemeMode.SYSTEM);
+      }).toThrow('System theme mode is not allowed');
+    });
+
+    it('should re-determine initial mode based on new settings', () => {
+      mockMatchMedia.mockReturnValue({
+        matches: true,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      });
+
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+        theme_settings: {
+          enforced: false,
+          allowSwitching: false,
+          allowOSPreference: true,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(controller.getCurrentMode()).toBe(ThemeMode.SYSTEM);
+      expect(controller.canSetMode()).toBe(false);
+    });
+
+    it('should apply appropriate theme after configuration', () => {
+      controller.setThemeMode(ThemeMode.DARK);
+      jest.clearAllMocks();
+
+      const themeConfig = {
+        theme_default: {
+          token: {
+            colorPrimary: '#00ff00',
+          },
+        },
+        theme_dark: {
+          token: {
+            colorPrimary: '#ff0000',
+            colorBgBase: '#000000',
+          },
+          algorithm: 'dark',
+        },
+      };
+
+      controller.setThemeConfig(themeConfig as SupersetThemeConfig);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining({
+            colorPrimary: '#ff0000',
+            colorBgBase: '#000000',
+          }),
+          algorithm: antdThemeImport.darkAlgorithm,
+        }),
+      );
+    });
+
+    it('should handle missing theme_dark gracefully', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_settings: {
+          allowSwitching: true,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      jest.clearAllMocks();
+      controller.setThemeMode(ThemeMode.DARK);
+
+      expect(mockSetConfig).toHaveBeenCalledTimes(1);
+      expect(mockSetConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          token: expect.objectContaining(DEFAULT_THEME.token),
+          algorithm: antdThemeImport.defaultAlgorithm,
+        }),
+      );
+    });
+
+    it('should preserve existing theme mode when possible', () => {
+      controller.setThemeMode(ThemeMode.DARK);
+      const initialMode = controller.getCurrentMode();
+
+      jest.clearAllMocks();
+
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+        theme_settings: {
+          allowSwitching: true,
+          allowOSPreference: false,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(controller.getCurrentMode()).toBe(initialMode);
+    });
+
+    it('should trigger onChange callbacks', () => {
+      const changeCallback = jest.fn();
+      controller.onChange(changeCallback);
+
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(changeCallback).toHaveBeenCalledTimes(1);
+      expect(changeCallback).toHaveBeenCalledWith(mockThemeObject);
+    });
+
+    it('should handle partial theme_settings', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_settings: {
+          enforced: true,
+        },
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(controller.canSetTheme()).toBe(false);
+      expect(controller.canSetMode()).toBe(false);
+    });
+
+    it('should handle error in theme application', () => {
+      mockSetConfig.mockImplementationOnce(() => {
+        throw new Error('Theme application error');
+      });
+
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+      };
+
+      expect(() => {
+        controller.setThemeConfig(themeConfig);
+      }).not.toThrow();
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Failed to apply theme:',
+        expect.any(Error),
+      );
+    });
+
+    it('should update stored theme mode', () => {
+      const themeConfig = {
+        theme_default: DEFAULT_THEME,
+        theme_dark: DARK_THEME,
+      };
+
+      controller.setThemeConfig(themeConfig);
+
+      expect(mockLocalStorage.setItem).toHaveBeenCalledWith(
+        'superset-theme-mode',
+        expect.any(String),
+      );
+    });
+  });
 });

superset-frontend/src/theme/tests/ThemeProvider.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 import { ReactNode } from 'react';
-import { Theme } from '@superset-ui/core';
-import { ThemeContextType, ThemeMode } from '@superset-ui/core/theme/types';
+import { type ThemeContextType, Theme, ThemeMode } from '@superset-ui/core';
 import { act, render, screen } from '@superset-ui/core/spec';
 import { renderHook } from '@testing-library/react-hooks';
 import { SupersetThemeProvider, useThemeContext } from '../ThemeProvider';

superset-frontend/src/types/bootstrapTypes.ts

@@ -16,14 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  ColorSchemeConfig,
-  FeatureFlagMap,
-  JsonObject,
-  LanguagePack,
-  Locale,
-  SequentialSchemeConfig,
-} from '@superset-ui/core';
 import { FormatLocaleDefinition } from 'd3-format';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { isPlainObject } from 'lodash';
@@ -31,8 +23,14 @@ import { Languages } from 'src/features/home/LanguagePicker';
 import type { FlashMessage } from 'src/components';
 import type {
   AnyThemeConfig,
+  ColorSchemeConfig,
+  FeatureFlagMap,
+  JsonObject,
+  LanguagePack,
+  Locale,
+  SequentialSchemeConfig,
   SerializableThemeConfig,
-} from '@superset-ui/core/theme/types';
+} from '@superset-ui/core';
 
 export type User = {
   createdOn?: string;
@@ -189,7 +187,7 @@ export interface BootstrapThemeData {
   bootstrapDefaultTheme: AnyThemeConfig | null;
   bootstrapDarkTheme: AnyThemeConfig | null;
   bootstrapThemeSettings: SerializableThemeSettings | null;
-  hasBootstrapThemes: boolean;
+  hasCustomThemes: boolean;
 }
 
 export function isUser(user: any): user is User {

superset-websocket/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "Apache-2.0",
       "dependencies": {
-        "cookie": "^0.7.0",
+        "cookie": "^1.0.2",
         "hot-shots": "^11.1.0",
         "ioredis": "^5.6.1",
         "jsonwebtoken": "^9.0.2",
@@ -20,7 +20,6 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.25.1",
-        "@types/cookie": "^0.6.0",
         "@types/eslint__js": "^8.42.3",
         "@types/ioredis": "^4.27.8",
         "@types/jest": "^29.5.14",
@@ -1721,12 +1720,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "dev": true
-    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -3045,11 +3038,11 @@
       "dev": true
     },
     "node_modules/cookie": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.0.tgz",
-      "integrity": "sha512-qCf+V4dtlNhSRXGAZatc1TasyFO6GjohcOul807YOb5ik3+kQSnb4d7iajeCL8QHaJ4uZEjCgiCJerKXwdRVlQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
       }
     },
     "node_modules/create-jest": {
@@ -8402,12 +8395,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "dev": true
-    },
     "@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -9317,9 +9304,9 @@
       "dev": true
     },
     "cookie": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.0.tgz",
-      "integrity": "sha512-qCf+V4dtlNhSRXGAZatc1TasyFO6GjohcOul807YOb5ik3+kQSnb4d7iajeCL8QHaJ4uZEjCgiCJerKXwdRVlQ=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
     },
     "create-jest": {
       "version": "29.7.0",

superset-websocket/package.json

@@ -17,7 +17,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "cookie": "^0.7.0",
+    "cookie": "^1.0.2",
     "hot-shots": "^11.1.0",
     "ioredis": "^5.6.1",
     "jsonwebtoken": "^9.0.2",
@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
-    "@types/cookie": "^0.6.0",
     "@types/eslint__js": "^8.42.3",
     "@types/ioredis": "^4.27.8",
     "@types/jest": "^29.5.14",
@@ -52,7 +51,7 @@
     "typescript-eslint": "^8.19.0"
   },
   "engines": {
-    "node": "^16.9.1",
-    "npm": "^7.5.4 || ^8.1.2"
+    "node": "^20.19.4",
+    "npm": "^10.8.2"
   }
 }

superset-websocket/spec/config.test.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { buildConfig } from '../src/config';
+import { expect, test } from '@jest/globals';
 
 test('buildConfig() builds configuration and applies env var overrides', () => {
   let config = buildConfig();

superset-websocket/spec/index.test.ts

@@ -19,15 +19,26 @@
 const jwt = require('jsonwebtoken');
 const config = require('../config.test.json');
 
-import { describe, expect, test, beforeEach, afterEach } from '@jest/globals';
+import {
+  describe,
+  expect,
+  test,
+  beforeEach,
+  afterEach,
+  jest,
+} from '@jest/globals';
 import * as http from 'http';
 import * as net from 'net';
 import { WebSocket } from 'ws';
 
+interface MockedRedisXrange {
+  (): Promise<server.StreamResult[]>;
+}
+
 // NOTE: these mock variables needs to start with "mock" due to
 // calls to `jest.mock` being hoisted to the top of the file.
 // https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter
-const mockRedisXrange = jest.fn();
+const mockRedisXrange = jest.fn() as jest.MockedFunction<MockedRedisXrange>;
 
 jest.mock('ws');
 jest.mock('ioredis', () => {
@@ -59,7 +70,7 @@ import * as server from '../src/index';
 import { statsd } from '../src/index';
 
 describe('server', () => {
-  let statsdIncrementMock: jest.SpyInstance;
+  let statsdIncrementMock: jest.SpiedFunction<typeof statsd.increment>;
 
   beforeEach(() => {
     mockRedisXrange.mockClear();
@@ -319,10 +330,12 @@ describe('server', () => {
 
   describe('wsConnection', () => {
     let ws: WebSocket;
-    let wsEventMock: jest.SpyInstance;
-    let trackClientSpy: jest.SpyInstance;
-    let fetchRangeFromStreamSpy: jest.SpyInstance;
-    let dateNowSpy: jest.SpyInstance;
+    let wsEventMock: jest.SpiedFunction<typeof ws.on>;
+    let trackClientSpy: jest.SpiedFunction<typeof server.trackClient>;
+    let fetchRangeFromStreamSpy: jest.SpiedFunction<
+      typeof server.fetchRangeFromStream
+    >;
+    let dateNowSpy: jest.SpiedFunction<typeof Date.now>;
     let socketInstanceExpected: server.SocketInstance;
 
     const getRequest = (token: string, url: string): http.IncomingMessage => {
@@ -431,8 +444,8 @@ describe('server', () => {
 
   describe('httpUpgrade', () => {
     let socket: net.Socket;
-    let socketDestroySpy: jest.SpyInstance;
-    let wssUpgradeSpy: jest.SpyInstance;
+    let socketDestroySpy: jest.SpiedFunction<typeof socket.destroy>;
+    let wssUpgradeSpy: jest.SpiedFunction<typeof server.wss.handleUpgrade>;
 
     const getRequest = (token: string, url: string): http.IncomingMessage => {
       const request = new http.IncomingMessage(new net.Socket());
@@ -496,8 +509,8 @@ describe('server', () => {
 
   describe('checkSockets', () => {
     let ws: WebSocket;
-    let pingSpy: jest.SpyInstance;
-    let terminateSpy: jest.SpyInstance;
+    let pingSpy: jest.SpiedFunction<typeof ws.ping>;
+    let terminateSpy: jest.SpiedFunction<typeof ws.terminate>;
     let socketInstance: server.SocketInstance;
 
     beforeEach(() => {

superset-websocket/src/index.ts

@@ -21,7 +21,7 @@ import * as net from 'net';
 import WebSocket from 'ws';
 import { v4 as uuidv4 } from 'uuid';
 import jwt, { Algorithm } from 'jsonwebtoken';
-import cookie from 'cookie';
+import { parse } from 'cookie';
 import Redis, { RedisOptions } from 'ioredis';
 import StatsD from 'hot-shots';
 
@@ -285,7 +285,7 @@ export const processStreamResults = (results: StreamResult[]): void => {
  * configured via 'jwtCookieName' in the config.
  */
 const readChannelId = (request: http.IncomingMessage): string => {
-  const cookies = cookie.parse(request.headers.cookie || '');
+  const cookies = parse(request.headers.cookie || '');
   const token = cookies[opts.jwtCookieName];
 
   if (!token) throw new Error('JWT not present');

superset/commands/dataset/importers/v1/utils.py

@@ -199,6 +199,11 @@ def load_data(data_uri: str, dataset: SqlaTable, database: Database) -> None:
     :raises DatasetUnAllowedDataURI: If a dataset is trying
     to load data from a URI that is not allowed.
     """
+    from superset.examples.helpers import normalize_example_data_url
+
+    # Convert example URLs to align with configuration
+    data_uri = normalize_example_data_url(data_uri)
+
     validate_data_uri(data_uri)
     logger.info("Downloading data from %s", data_uri)
     data = request.urlopen(data_uri)  # pylint: disable=consider-using-with  # noqa: S310

superset/commands/importers/v1/utils.py

@@ -190,6 +190,12 @@ def load_configs(
                         db_ssh_tunnel_priv_key_passws[config["uuid"]]
                     )
 
+                # Normalize example data URLs before schema validation
+                if prefix == "datasets" and "data" in config:
+                    from superset.examples.helpers import normalize_example_data_url
+
+                    config["data"] = normalize_example_data_url(config["data"])
+
                 schema.load(config)
                 configs[file_name] = config
             except ValidationError as exc: