(Claude, ChatGPT, etc.)"] -- "MCP protocol
(HTTP + JSON-RPC)" --> B["MCP Server
(:5008/mcp)"] + B -- "Superset context
(app, db, RBAC)" --> C["Superset
(:8088)"] + C --> D[("Database
(Postgres)")] +``` + +--- + +## Quick Start + +Get the MCP server running locally and connect an AI client in three steps. + +### 1. Start the MCP server + +The MCP server runs as a separate process alongside Superset: + +```bash +superset mcp run --host 127.0.0.1 --port 5008 +``` + +| Flag | Default | Description | +|------|---------|-------------| +| `--host` | `127.0.0.1` | Host to bind to | +| `--port` | `5008` | Port to bind to | +| `--debug` | off | Enable debug logging | + +The endpoint is available at `http://
set?"} + F -- Yes --> CF["Custom Auth Provider"] + F -- No --> AE{"MCP_AUTH_ENABLED?"} + AE -- "True" --> JWT["JWT Validation"] + AE -- "False" --> DU["Dev Mode
(MCP_DEV_USERNAME)"] + + JWT --> ALG{"MCP_JWT_ALGORITHM"} + ALG -- "RS256 + JWKS" --> JWKS["Fetch keys from
MCP_JWKS_URI"] + ALG -- "RS256 + static" --> PK["Use
MCP_JWT_PUBLIC_KEY"] + ALG -- "HS256" --> SEC["Use
MCP_JWT_SECRET"] + + JWKS --> V["Validate token
(exp, iss, aud, scopes)"] + PK --> V + SEC --> V + V --> UR["Resolve Superset user
from token claims"] + UR --> OK["Authenticated request"] + CF --> OK + DU --> OK +``` + +### Development Mode (No Auth) + +Disable authentication and use a fixed user: + +```python +# superset_config.py +MCP_AUTH_ENABLED = False +MCP_DEV_USERNAME = "admin" +``` + +All operations run as the configured user. + +:::warning +Never use development mode in production. Always enable authentication for any internet-facing deployment. +::: + +### JWT Authentication + +For production, enable JWT-based authentication. The MCP server validates a Bearer token on every request. + +#### Option A: RS256 with JWKS endpoint + +The most common setup for OAuth 2.0 / OIDC providers that publish a JWKS (JSON Web Key Set) endpoint: + +```python +# superset_config.py +MCP_AUTH_ENABLED = True +MCP_JWT_ALGORITHM = "RS256" +MCP_JWKS_URI = "https://your-identity-provider.com/.well-known/jwks.json" +MCP_JWT_ISSUER = "https://your-identity-provider.com/" +MCP_JWT_AUDIENCE = "your-superset-instance" +``` + +#### Option B: RS256 with static public key + +Use this when you have a fixed RSA key pair (e.g., self-signed tokens): + +```python +# superset_config.py +MCP_AUTH_ENABLED = True +MCP_JWT_ALGORITHM = "RS256" +MCP_JWT_PUBLIC_KEY = """-----BEGIN PUBLIC KEY----- +MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA... +-----END PUBLIC KEY-----""" +MCP_JWT_ISSUER = "your-issuer" +MCP_JWT_AUDIENCE = "your-audience" +``` + +#### Option C: HS256 with shared secret + +Use this when both the token issuer and the MCP server share a symmetric secret: + +```python +# superset_config.py +MCP_AUTH_ENABLED = True +MCP_JWT_ALGORITHM = "HS256" +MCP_JWT_SECRET = "your-shared-secret-key" +MCP_JWT_ISSUER = "your-issuer" +MCP_JWT_AUDIENCE = "your-audience" +``` + +:::warning +Store `MCP_JWT_SECRET` securely. Never commit it to version control. Use environment variables: +```python +import os +MCP_JWT_SECRET = os.environ.get("MCP_JWT_SECRET") +``` +::: + +#### JWT claims + +The MCP server validates these standard claims: + +| Claim | Config Key | Description | +|-------|-----------|-------------| +| `exp` | -- | Expiration time (always validated) | +| `iss` | `MCP_JWT_ISSUER` | Token issuer (optional but recommended) | +| `aud` | `MCP_JWT_AUDIENCE` | Token audience (optional but recommended) | +| `sub` | -- | Subject -- primary claim used to resolve the Superset user | + +#### User resolution + +After validating the token, the MCP server resolves a Superset username from the claims. It checks these in order, using the first non-empty value: + +1. `subject` -- the standard `sub` claim (via the access token object) +2. `client_id` -- for machine-to-machine tokens +3. `payload["sub"]` -- fallback to raw payload +4. `payload["email"]` -- email-based lookup +5. `payload["username"]` -- explicit username claim + +The resolved value must match a `username` in the Superset `ab_user` table. + +#### Scoped access + +Require specific scopes in the JWT to limit what MCP operations a token can perform: + +```python +# superset_config.py +MCP_REQUIRED_SCOPES = ["mcp:read", "mcp:write"] +``` + +Only tokens that include **all** required scopes are accepted. + +### Custom Auth Provider + +For advanced scenarios (e.g., a proprietary auth system), provide a factory function. This takes precedence over all built-in JWT configuration: + +```python +# superset_config.py +def my_custom_auth_factory(app): + """Return a FastMCP auth provider instance.""" + from fastmcp.server.auth.providers.jwt import JWTVerifier + return JWTVerifier( + jwks_uri="https://my-auth.example.com/.well-known/jwks.json", + issuer="https://my-auth.example.com/", + audience="superset-mcp", + ) + +MCP_AUTH_FACTORY = my_custom_auth_factory +``` + +--- + +## Connecting AI Clients + +### Claude Desktop + +**Local development (no auth):** + +```json +{ + "mcpServers": { + "superset": { + "url": "http://localhost:5008/mcp" + } + } +} +``` + +**With JWT authentication:** + +```json +{ + "mcpServers": { + "superset": { + "command": "npx", + "args": [ + "-y", + "mcp-remote@latest", + "http://your-superset-host:5008/mcp", + "--header", + "Authorization: Bearer YOUR_TOKEN" + ] + } + } +} +``` + +### Claude Code (CLI) + +Add to your project's `.mcp.json`: + +```json +{ + "mcpServers": { + "superset": { + "type": "url", + "url": "http://localhost:5008/mcp" + } + } +} +``` + +With authentication: + +```json +{ + "mcpServers": { + "superset": { + "type": "url", + "url": "http://localhost:5008/mcp", + "headers": { + "Authorization": "Bearer YOUR_TOKEN" + } + } + } +} +``` + +### Claude Web (claude.ai) + +1. Open [claude.ai](https://claude.ai) +2. Click the **+** button (or your profile icon) +3. Select **Connectors** +4. Click **Manage Connectors** > **Add custom connector** +5. Enter a name and your MCP URL (e.g., `https://your-superset-host/mcp`) +6. Click **Add** + +:::info +Custom connectors on Claude Web require a Pro, Max, Team, or Enterprise plan. +::: + +### ChatGPT + +1. Click your profile icon > **Settings** > **Apps and Connectors** +2. Enable **Developer Mode** in Advanced Settings +3. In the chat composer, press **+** > **Add sources** > **App** > **Connect more** > **Create app** +4. Enter a name and your MCP server URL +5. Click **I understand and continue** + +:::info +ChatGPT MCP connectors require a Pro, Team, Enterprise, or Edu plan. +::: + +### Direct HTTP requests + +Call the MCP server directly with any HTTP client: + +```bash +curl -X POST http://localhost:5008/mcp \ + -H 'Content-Type: application/json' \ + -H 'Authorization: Bearer YOUR_JWT_TOKEN' \ + -d '{"jsonrpc": "2.0", "method": "tools/list", "id": 1}' +``` + +--- + +## Deployment + +### Single Process + +The simplest setup: run the MCP server alongside Superset on the same host. + +```mermaid +flowchart TD + subgraph host["Host / VM"] + direction TB + S["Superset
:8088"] --> DB[("Postgres")] + M["MCP Server
:5008"] --> DB + end + C["AI Client"] -- "HTTPS" --> P["Reverse Proxy
(Nginx / Caddy)"] + U["Browser"] -- "HTTPS" --> P + P -- ":8088" --> S + P -- ":5008/mcp" --> M +``` + +**superset_config.py:** + +```python +MCP_SERVICE_HOST = "0.0.0.0" +MCP_SERVICE_PORT = 5008 +MCP_DEV_USERNAME = "admin" # or enable JWT auth + +# If behind a reverse proxy, set the public-facing URL so +# MCP-generated links (chart previews, SQL Lab URLs) resolve correctly: +MCP_SERVICE_URL = "https://superset.example.com" +``` + +**Start both processes:** + +```bash +# Terminal 1 -- Superset web server +superset run -h 0.0.0.0 -p 8088 + +# Terminal 2 -- MCP server +superset mcp run --host 0.0.0.0 --port 5008 +``` + +**Nginx reverse proxy with TLS:** + +```nginx +server { + listen 443 ssl; + server_name superset.example.com; + + ssl_certificate /path/to/cert.pem; + ssl_certificate_key /path/to/key.pem; + + # Superset web UI + location / { + proxy_pass http://127.0.0.1:8088; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + } + + # MCP endpoint + location /mcp { + proxy_pass http://127.0.0.1:5008/mcp; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header Authorization $http_authorization; + } +} +``` + +### Docker Compose + +Run Superset and the MCP server as separate containers sharing the same config: + +```yaml +# docker-compose.yml +services: + superset: + image: apache/superset:latest + ports: + - "8088:8088" + volumes: + - ./superset_config.py:/app/superset_config.py + environment: + - SUPERSET_CONFIG_PATH=/app/superset_config.py + + mcp: + image: apache/superset:latest + command: ["superset", "mcp", "run", "--host", "0.0.0.0", "--port", "5008"] + ports: + - "5008:5008" + volumes: + - ./superset_config.py:/app/superset_config.py + environment: + - SUPERSET_CONFIG_PATH=/app/superset_config.py + depends_on: + - superset +``` + +Both containers share the same `superset_config.py`, so authentication settings, database connections, and feature flags stay in sync. + +### Multi-Pod (Kubernetes) + +For high-availability deployments, configure Redis so that replicas share session state: + +```mermaid +flowchart TD + LB["Load Balancer"] --> M1["MCP Pod 1"] + LB --> M2["MCP Pod 2"] + LB --> M3["MCP Pod 3"] + M1 --> R[("Redis
(session store)")] + M2 --> R + M3 --> R + M1 --> DB[("Postgres")] + M2 --> DB + M3 --> DB +``` + +**superset_config.py:** + +```python +MCP_STORE_CONFIG = { + "enabled": True, + "CACHE_REDIS_URL": "redis://redis-host:6379/0", + "event_store_max_events": 100, + "event_store_ttl": 3600, +} +``` + +When `CACHE_REDIS_URL` is set, the MCP server uses a Redis-backed EventStore for session management, allowing replicas to share state. Without Redis, each pod manages its own in-memory sessions and stateful MCP interactions may fail when requests hit different replicas. + +--- + +## Configuration Reference + +All MCP settings go in `superset_config.py`. Defaults are defined in `superset/mcp_service/mcp_config.py`. + +### Core + +| Setting | Default | Description | +|---------|---------|-------------| +| `MCP_SERVICE_HOST` | `"localhost"` | Host the MCP server binds to | +| `MCP_SERVICE_PORT` | `5008` | Port the MCP server binds to | +| `MCP_SERVICE_URL` | `None` | Public base URL for MCP-generated links (set this when behind a reverse proxy) | +| `MCP_DEBUG` | `False` | Enable debug logging | +| `MCP_DEV_USERNAME` | -- | Superset username for development mode (no auth) | + +### Authentication + +| Setting | Default | Description | +|---------|---------|-------------| +| `MCP_AUTH_ENABLED` | `False` | Enable JWT authentication | +| `MCP_JWT_ALGORITHM` | `"RS256"` | JWT signing algorithm (`RS256` or `HS256`) | +| `MCP_JWKS_URI` | `None` | JWKS endpoint URL (RS256) | +| `MCP_JWT_PUBLIC_KEY` | `None` | Static RSA public key string (RS256) | +| `MCP_JWT_SECRET` | `None` | Shared secret string (HS256) | +| `MCP_JWT_ISSUER` | `None` | Expected `iss` claim | +| `MCP_JWT_AUDIENCE` | `None` | Expected `aud` claim | +| `MCP_REQUIRED_SCOPES` | `[]` | Required JWT scopes | +| `MCP_JWT_DEBUG_ERRORS` | `False` | Log detailed JWT errors server-side (never exposed in HTTP responses per RFC 6750) | +| `MCP_AUTH_FACTORY` | `None` | Custom auth provider factory `(flask_app) -> auth_provider`. Takes precedence over built-in JWT | + +### Response Size Guard + +Limits response sizes to prevent exceeding LLM context windows: + +```python +MCP_RESPONSE_SIZE_CONFIG = { + "enabled": True, + "token_limit": 25000, + "warn_threshold_pct": 80, + "excluded_tools": [ + "health_check", + "get_chart_preview", + "generate_explore_link", + "open_sql_lab_with_context", + ], +} +``` + +| Key | Default | Description | +|-----|---------|-------------| +| `enabled` | `True` | Enable response size checking | +| `token_limit` | `25000` | Maximum estimated token count per response | +| `warn_threshold_pct` | `80` | Warn when response exceeds this percentage of the limit | +| `excluded_tools` | See above | Tools exempt from size checking (e.g., tools that return URLs, not data) | + +### Caching + +Optional response caching for read-heavy workloads. Requires Redis when used with multiple replicas. + +```python +MCP_CACHE_CONFIG = { + "enabled": False, + "CACHE_KEY_PREFIX": None, + "list_tools_ttl": 300, # 5 min + "list_resources_ttl": 300, + "list_prompts_ttl": 300, + "read_resource_ttl": 3600, # 1 hour + "get_prompt_ttl": 3600, + "call_tool_ttl": 3600, + "max_item_size": 1048576, # 1 MB + "excluded_tools": [ + "execute_sql", + "generate_dashboard", + "generate_chart", + "update_chart", + ], +} +``` + +| Key | Default | Description | +|-----|---------|-------------| +| `enabled` | `False` | Enable response caching | +| `CACHE_KEY_PREFIX` | `None` | Optional prefix for cache keys (useful for shared Redis) | +| `list_tools_ttl` | `300` | Cache TTL in seconds for `tools/list` | +| `list_resources_ttl` | `300` | Cache TTL for `resources/list` | +| `list_prompts_ttl` | `300` | Cache TTL for `prompts/list` | +| `read_resource_ttl` | `3600` | Cache TTL for `resources/read` | +| `get_prompt_ttl` | `3600` | Cache TTL for `prompts/get` | +| `call_tool_ttl` | `3600` | Cache TTL for `tools/call` | +| `max_item_size` | `1048576` | Maximum cached item size in bytes (1 MB) | +| `excluded_tools` | See above | Tools that are never cached (mutating or non-deterministic) | + +### Redis Store (Multi-Pod) + +Enables Redis-backed session and event storage for multi-replica deployments: + +```python +MCP_STORE_CONFIG = { + "enabled": False, + "CACHE_REDIS_URL": None, + "event_store_max_events": 100, + "event_store_ttl": 3600, +} +``` + +| Key | Default | Description | +|-----|---------|-------------| +| `enabled` | `False` | Enable Redis-backed store | +| `CACHE_REDIS_URL` | `None` | Redis connection URL (e.g., `redis://redis-host:6379/0`) | +| `event_store_max_events` | `100` | Maximum events retained per session | +| `event_store_ttl` | `3600` | Event TTL in seconds | + +### Session & CSRF + +These values are flat-merged into the Flask app config used by the MCP server process: + +```python +MCP_SESSION_CONFIG = { + "SESSION_COOKIE_HTTPONLY": True, + "SESSION_COOKIE_SECURE": False, + "SESSION_COOKIE_SAMESITE": "Lax", + "SESSION_COOKIE_NAME": "superset_session", + "PERMANENT_SESSION_LIFETIME": 86400, +} + +MCP_CSRF_CONFIG = { + "WTF_CSRF_ENABLED": True, + "WTF_CSRF_TIME_LIMIT": None, +} +``` + +--- + +## Troubleshooting + +### Server won't start + +- Verify `fastmcp` is installed: `pip install fastmcp` +- Check that `MCP_DEV_USERNAME` is set if auth is disabled -- the server requires a user identity +- Confirm the port is not already in use: `lsof -i :5008` + +### 401 Unauthorized + +- Verify your JWT token has not expired (`exp` claim) +- Check that `MCP_JWT_ISSUER` and `MCP_JWT_AUDIENCE` match the token's `iss` and `aud` claims exactly +- For RS256 with JWKS: confirm the JWKS URI is reachable from the MCP server +- For RS256 with static key: confirm the public key string includes the `BEGIN`/`END` markers +- For HS256: confirm the secret matches between the token issuer and `MCP_JWT_SECRET` +- Enable `MCP_JWT_DEBUG_ERRORS = True` for detailed server-side logging (errors are never leaked to the client) + +### Tool not found + +- Ensure the MCP server and Superset share the same `superset_config.py` +- Check server logs at startup -- tool registration errors are logged with the tool name and reason + +### Client can't connect + +- Verify the MCP server URL is reachable from the client machine +- For Claude Desktop: fully quit the app (not just close the window) and restart after config changes +- For remote access: ensure your firewall and reverse proxy allow traffic to the MCP port +- Confirm the URL path ends with `/mcp` (e.g., `http://localhost:5008/mcp`) + +### Permission errors on tool calls + +- The MCP server enforces Superset's RBAC permissions -- the authenticated user must have the required roles +- In development mode, ensure `MCP_DEV_USERNAME` maps to a user with appropriate roles (e.g., Admin) +- Check `superset/security/manager.py` for the specific permission tuples required by each tool domain (e.g., `("can_execute_sql_query", "SQLLab")`) + +### Response too large + +- If a tool call returns an error about exceeding token limits, the response size guard is blocking an oversized result +- Reduce `page_size` or `limit` parameters, use `select_columns` to exclude large fields, or add filters to narrow results +- To adjust the threshold, change `token_limit` in `MCP_RESPONSE_SIZE_CONFIG` +- To disable the guard entirely, set `MCP_RESPONSE_SIZE_CONFIG = {"enabled": False}` + +--- + +## Security Best Practices + +- **Use TLS** for all production MCP endpoints -- place the server behind a reverse proxy with HTTPS +- **Enable JWT authentication** for any internet-facing deployment +- **RBAC enforcement** -- The MCP server respects Superset's role-based access control. Users can only access data their roles permit +- **Secrets management** -- Store `MCP_JWT_SECRET`, database credentials, and API keys in environment variables or a secrets manager, never in config files committed to version control +- **Scoped tokens** -- Use `MCP_REQUIRED_SCOPES` to limit what operations a token can perform +- **Network isolation** -- In Kubernetes, restrict MCP pod network policies to only allow traffic from your AI client endpoints +- Review the **[Security documentation](./security)** for additional extension security guidance + +--- + +## Next Steps + +- **[MCP Integration](./mcp)** -- Build custom MCP tools and prompts via Superset extensions +- **[Security](./security)** -- Security best practices for extensions +- **[Deployment](./deployment)** -- Package and deploy Superset extensions diff --git a/docs/developer_docs/extensions/mcp.md b/docs/developer_docs/extensions/mcp.md index ad9b10e6e85..4ba74e3540a 100644 --- a/docs/developer_docs/extensions/mcp.md +++ b/docs/developer_docs/extensions/mcp.md @@ -61,7 +61,7 @@ Prompts provide interactive guidance and context to AI agents. They help agents The simplest way to create an MCP tool is using the `@tool` decorator: ```python -from superset_core.api.mcp import tool +from superset_core.mcp.decorators import tool @tool def hello_world() -> dict: @@ -94,7 +94,7 @@ Here's a more comprehensive example showing best practices: import random from datetime import datetime, timezone from pydantic import BaseModel, Field -from superset_core.api.mcp import tool +from superset_core.mcp.decorators import tool class RandomNumberRequest(BaseModel): """Request schema for random number generation.""" @@ -253,7 +253,7 @@ The AI agent sees your tool's: Create interactive prompts using the `@prompt` decorator: ```python -from superset_core.api.mcp import prompt +from superset_core.mcp.decorators import prompt from fastmcp import Context @prompt("my_extension.workflow_guide") diff --git a/docs/developer_docs/extensions/overview.md b/docs/developer_docs/extensions/overview.md index 2a6bce06c96..74ee7ac98c3 100644 --- a/docs/developer_docs/extensions/overview.md +++ b/docs/developer_docs/extensions/overview.md @@ -43,7 +43,7 @@ Extensions can provide: ## UI Components for Extensions -Extension developers have access to pre-built UI components via `@apache-superset/core/ui`. Browse all available components on the [UI Components](/docs/components/) page and filter by **Extension Compatible** to see components available to extensions. +Extension developers have access to pre-built UI components via `@apache-superset/core/components`. Browse all available components on the [UI Components](/docs/components/) page and filter by **Extension Compatible** to see components available to extensions. ## Next Steps diff --git a/docs/developer_docs/extensions/quick-start.md b/docs/developer_docs/extensions/quick-start.md index 1f0e97720b2..d43e4be6e62 100644 --- a/docs/developer_docs/extensions/quick-start.md +++ b/docs/developer_docs/extensions/quick-start.md @@ -64,10 +64,11 @@ Include backend? [Y/n]: Y ``` **Publisher Namespaces**: Extensions use organizational namespaces similar to VS Code extensions, providing collision-safe naming across organizations: + - **NPM package**: `@my-org/hello-world` (scoped package for frontend distribution) - **Module Federation name**: `myOrg_helloWorld` (collision-safe JavaScript identifier) - **Backend package**: `my_org-hello_world` (collision-safe Python distribution name) -- **Python namespace**: `superset_extensions.my_org.hello_world` +- **Python namespace**: `my_org.hello_world` This approach ensures that extensions from different organizations cannot conflict, even if they use the same technical name (e.g., both `acme.dashboard-widgets` and `corp.dashboard-widgets` can coexist). @@ -78,12 +79,9 @@ my-org.hello-world/ ├── extension.json # Extension metadata and configuration ├── backend/ # Backend Python code │ ├── src/ -│ │ └── superset_extensions/ -│ │ └── my_org/ -│ │ ├── __init__.py -│ │ └── hello_world/ -│ │ ├── __init__.py -│ │ └── entrypoint.py # Backend registration +│ │ └── my_org/ +│ │ └── hello_world/ +│ │ └── entrypoint.py # Backend registration │ └── pyproject.toml └── frontend/ # Frontend TypeScript/React code ├── src/ @@ -95,7 +93,7 @@ my-org.hello-world/ ## Step 3: Configure Extension Metadata -The generated `extension.json` contains the extension's metadata. It is used to identify the extension and declare its backend entry points. Frontend contributions are registered directly in code (see Step 5). +The generated `extension.json` contains the extension's metadata. ```json { @@ -104,10 +102,6 @@ The generated `extension.json` contains the extension's metadata. It is used to "displayName": "Hello World", "version": "0.1.0", "license": "Apache-2.0", - "backend": { - "entryPoints": ["superset_extensions.my_org.hello_world.entrypoint"], - "files": ["backend/src/superset_extensions/my_org/hello_world/**/*.py"] - }, "permissions": ["can_read"] } ``` @@ -117,19 +111,19 @@ The generated `extension.json` contains the extension's metadata. It is used to - `publisher`: Organizational namespace for the extension - `name`: Technical identifier (kebab-case) - `displayName`: Human-readable name shown to users -- `backend.entryPoints`: Python modules to load eagerly when the extension starts -- `backend.files`: Glob patterns for Python source files to include in the bundle +- `permissions`: List of permissions the extension requires ## Step 4: Create Backend API -The CLI generated a basic `backend/src/superset_extensions/my_org/hello_world/entrypoint.py`. We'll create an API endpoint. +The CLI generated a basic `backend/src/my_org/hello_world/entrypoint.py`. We'll create an API endpoint. -**Create `backend/src/superset_extensions/my_org/hello_world/api.py`** +**Create `backend/src/my_org/hello_world/api.py`** ```python from flask import Response from flask_appbuilder.api import expose, protect, safe -from superset_core.api.rest_api import RestApi, api +from superset_core.rest_api.api import RestApi +from superset_core.rest_api.decorators import api @api( @@ -174,25 +168,23 @@ class HelloWorldAPI(RestApi): **Key points:** -- Uses [`@api`](superset-core/src/superset_core/api/rest_api.py:59) decorator with automatic context detection -- Extends `RestApi` from `superset_core.api.rest_api` +- Uses [`@api`](superset-core/src/superset_core/rest_api/decorators.py) decorator with automatic context detection +- Extends `RestApi` from `superset_core.rest_api.api` - Uses Flask-AppBuilder decorators (`@expose`, `@protect`, `@safe`) - Returns responses using `self.response(status_code, result=data)` - The endpoint will be accessible at `/extensions/my-org/hello-world/message` (automatic extension context) - OpenAPI docstrings are crucial - Flask-AppBuilder uses them to automatically generate interactive API documentation at `/swagger/v1`, allowing developers to explore endpoints, understand schemas, and test the API directly from the browser -**Update `backend/src/superset_extensions/my_org/hello_world/entrypoint.py`** +**Update `backend/src/my_org/hello_world/entrypoint.py`** Replace the generated print statement with API import to trigger registration: ```python # Importing the API class triggers the @api decorator registration -from .api import HelloWorldAPI - -print("Hello World extension loaded successfully!") +from .api import HelloWorldAPI # noqa: F401 ``` -The [`@api`](superset-core/src/superset_core/api/rest_api.py:59) decorator automatically detects extension context and registers your API with proper namespacing. +The [`@api`](superset-core/src/superset_core/rest_api/decorators.py) decorator automatically detects extension context and registers your API with proper namespacing. ## Step 5: Create Frontend Component @@ -236,52 +228,53 @@ The webpack configuration requires specific settings for Module Federation. Key **Convention**: Superset always loads extensions by requesting the `./index` module from the Module Federation container. The `exposes` entry must be exactly `'./index': './src/index.tsx'` — do not rename or add additional entries. All API registrations must be reachable from that file. See [Architecture](./architecture#module-federation) for a full explanation. ```javascript -const path = require("path"); -const { ModuleFederationPlugin } = require("webpack").container; -const packageConfig = require("./package.json"); +const path = require('path'); +const { ModuleFederationPlugin } = require('webpack').container; +const packageConfig = require('./package'); +const extensionConfig = require('../extension.json'); module.exports = (env, argv) => { - const isProd = argv.mode === "production"; + const isProd = argv.mode === 'production'; return { - entry: isProd ? {} : "./src/index.tsx", - mode: isProd ? "production" : "development", + entry: isProd ? {} : './src/index.tsx', + mode: isProd ? 'production' : 'development', devServer: { - port: 3001, + port: 3000, headers: { - "Access-Control-Allow-Origin": "*", + 'Access-Control-Allow-Origin': '*', }, }, output: { - filename: isProd ? undefined : "[name].[contenthash].js", - chunkFilename: "[name].[contenthash].js", clean: true, - path: path.resolve(__dirname, "dist"), - publicPath: `/api/v1/extensions/my-org/hello-world/`, + filename: isProd ? undefined : '[name].[contenthash].js', + chunkFilename: '[name].[contenthash].js', + path: path.resolve(__dirname, 'dist'), + publicPath: `/api/v1/extensions/${extensionConfig.publisher}/${extensionConfig.name}/`, }, resolve: { - extensions: [".ts", ".tsx", ".js", ".jsx"], + extensions: ['.ts', '.tsx', '.js', '.jsx'], }, // Map @apache-superset/core imports to window.superset at runtime - externalsType: "window", + externalsType: 'window', externals: { - "@apache-superset/core": "superset", + '@apache-superset/core': 'superset', }, module: { rules: [ { test: /\.tsx?$/, - use: "ts-loader", + use: 'ts-loader', exclude: /node_modules/, }, ], }, plugins: [ new ModuleFederationPlugin({ - name: "myOrg_helloWorld", - filename: "remoteEntry.[contenthash].js", + name: 'myOrg_helloWorld', + filename: 'remoteEntry.[contenthash].js', exposes: { - "./index": "./src/index.tsx", + './index': './src/index.tsx', }, shared: { react: { @@ -289,9 +282,14 @@ module.exports = (env, argv) => { requiredVersion: packageConfig.peerDependencies.react, import: false, // Use host's React, don't bundle }, - "react-dom": { + 'react-dom': { singleton: true, - requiredVersion: packageConfig.peerDependencies["react-dom"], + requiredVersion: packageConfig.peerDependencies['react-dom'], + import: false, + }, + antd: { + singleton: true, + requiredVersion: packageConfig.peerDependencies['antd'], import: false, }, }, @@ -306,8 +304,9 @@ module.exports = (env, argv) => { ```json { "compilerOptions": { - "baseUrl": ".", - "moduleResolution": "node", + "target": "es5", + "module": "esnext", + "moduleResolution": "node10", "jsx": "react", "strict": true, "esModuleInterop": true, @@ -332,16 +331,16 @@ const HelloWorldPanel: React.FC = () => { const [error, setError] = useState
|
+| [Extensions API Explorer](https://github.com/michael-s-molina/superset-extensions/tree/main/api-explorer) | A SQL Lab panel that demonstrates the Extensions API by providing an interactive explorer for testing commands like getTabs, getCurrentTab, and getDatabases. Useful for extension developers to understand and experiment with the available APIs. | Michael S. Molina | |
| [SQL Query Flow Visualizer](https://github.com/msyavuz/superset-sql-visualizer) | A SQL Lab panel that transforms SQL queries into interactive flow diagrams, helping developers and analysts understand query execution paths and data relationships. | Mehmet Salih Yavuz | 
|
-| [SQL Lab Export to Google Sheets](https://github.com/michael-s-molina/superset-extensions/tree/main/sqllab_gsheets) | A Superset extension that allows users to export SQL Lab query results directly to Google Sheets. | Michael S. Molina | 
|
+| [SQL Lab Export to Google Sheets](https://github.com/michael-s-molina/superset-extensions/tree/main/sqllab-gsheets) | A Superset extension that allows users to export SQL Lab query results directly to Google Sheets. | Michael S. Molina | |
| [SQL Lab Export to Parquet](https://github.com/rusackas/superset-extensions/tree/main/sqllab_parquet) | Export SQL Lab query results directly to Apache Parquet format with Snappy compression. | Evan Rusackas | 
|
-| [SQL Lab Query Comparison](https://github.com/michael-s-molina/superset-extensions/tree/main/query_comparison) | A SQL Lab extension that enables side-by-side comparison of query results across different tabs, with GitHub-style diff visualization showing added/removed rows and columns. | Michael S. Molina | 
|
-| [SQL Lab Result Stats](https://github.com/michael-s-molina/superset-extensions/tree/main/result_stats) | A SQL Lab extension that automatically computes statistics for query results, providing type-aware analysis including numeric metrics (min, max, mean, median, std dev), string analysis (length, empty counts), and date range information. | Michael S. Molina | 
|
-| [SQL Snippets](https://github.com/michael-s-molina/superset-extensions/tree/main/sql_snippets) | A SQL Lab extension that provides reusable SQL code snippets, enabling quick insertion of commonly used code blocks such as license headers, author information, and frequently used SQL patterns. | Michael S. Molina | 
|
-| [SQL Lab Query Estimator](https://github.com/michael-s-molina/superset-extensions/tree/main/query_estimator) | A SQL Lab panel that analyzes query execution plans to estimate resource impact, detect performance issues like Cartesian products and high-cost operations, and visualize the query plan tree. | Michael S. Molina | 
|
-| [Editors Bundle](https://github.com/michael-s-molina/superset-extensions/tree/main/editors_bundle) | A Superset extension that demonstrates how to provide custom code editors for different languages. This extension showcases the editor contribution system by registering alternative editors that can replace Superset's default Ace editor. | Michael S. Molina | 
|
+| [SQL Lab Query Comparison](https://github.com/michael-s-molina/superset-extensions/tree/main/query-comparison) | A SQL Lab extension that enables side-by-side comparison of query results across different tabs, with GitHub-style diff visualization showing added/removed rows and columns. | Michael S. Molina | |
+| [SQL Lab Result Stats](https://github.com/michael-s-molina/superset-extensions/tree/main/result-stats) | A SQL Lab extension that automatically computes statistics for query results, providing type-aware analysis including numeric metrics (min, max, mean, median, std dev), string analysis (length, empty counts), and date range information. | Michael S. Molina | |
+| [Editor Snippets](https://github.com/michael-s-molina/superset-extensions/tree/main/editor-snippets) | A SQL Lab extension for managing and inserting reusable code snippets into the editor, with server-side persistence per user. | Michael S. Molina | 
|
+| [SQL Lab Query Estimator](https://github.com/michael-s-molina/superset-extensions/tree/main/query-estimator) | A SQL Lab panel that analyzes query execution plans to estimate resource impact, detect performance issues like Cartesian products and high-cost operations, and visualize the query plan tree. | Michael S. Molina | |
+| [Editors Bundle](https://github.com/michael-s-molina/superset-extensions/tree/main/editors-bundle) | A Superset extension that demonstrates how to provide custom code editors for different languages. This extension showcases the editor contribution system by registering alternative editors that can replace Superset's default Ace editor. | Michael S. Molina | |
## How to Add Your Extension
diff --git a/docs/developer_docs/extensions/tasks.md b/docs/developer_docs/extensions/tasks.md
index 47e0e7cf562..c36fa9aaba1 100644
--- a/docs/developer_docs/extensions/tasks.md
+++ b/docs/developer_docs/extensions/tasks.md
@@ -50,7 +50,7 @@ When GTF is considered stable, it will replace legacy Celery tasks for built-in
### Define a Task
```python
-from superset_core.api.tasks import task, get_context
+from superset_core.tasks.decorators import task, get_context
@task
def process_data(dataset_id: int) -> None:
@@ -245,7 +245,8 @@ Always implement an abort handler for long-running tasks. This allows users to c
Set a timeout to automatically abort tasks that run too long:
```python
-from superset_core.api.tasks import task, get_context, TaskOptions
+from superset_core.tasks.decorators import task, get_context
+from superset_core.tasks.types import TaskOptions
# Set default timeout in decorator
@task(timeout=300) # 5 minutes
@@ -299,7 +300,7 @@ Timeouts require an abort handler to be effective. Without one, the timeout trig
Use `task_key` to prevent duplicate task execution:
```python
-from superset_core.api.tasks import TaskOptions
+from superset_core.tasks.types import TaskOptions
# Without key - creates new task each time (random UUID)
task1 = my_task.schedule(x=1)
@@ -331,7 +332,8 @@ print(task2.status) # "success" (terminal status)
## Task Scopes
```python
-from superset_core.api.tasks import task, TaskScope
+from superset_core.tasks.decorators import task
+from superset_core.tasks.types import TaskScope
@task # Private by default
def private_task(): ...
diff --git a/docs/developer_docs/sidebars.js b/docs/developer_docs/sidebars.js
index 7926d80cf61..babdcd41025 100644
--- a/docs/developer_docs/sidebars.js
+++ b/docs/developer_docs/sidebars.js
@@ -52,6 +52,7 @@ module.exports = {
'extensions/development',
'extensions/deployment',
'extensions/mcp',
+ 'extensions/mcp-server',
'extensions/security',
'extensions/tasks',
'extensions/registry',
diff --git a/docs/package.json b/docs/package.json
index 0d11ac24179..e4a31bf1294 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -55,20 +55,20 @@
"@fontsource/inter": "^5.2.8",
"@mdx-js/react": "^3.1.1",
"@saucelabs/theme-github-codeblock": "^0.3.0",
- "@storybook/addon-docs": "^8.6.17",
+ "@storybook/addon-docs": "^8.6.18",
"@storybook/blocks": "^8.6.15",
- "@storybook/channels": "^8.6.17",
- "@storybook/client-logger": "^8.6.17",
- "@storybook/components": "^8.6.17",
- "@storybook/core": "^8.6.17",
- "@storybook/core-events": "^8.6.17",
+ "@storybook/channels": "^8.6.18",
+ "@storybook/client-logger": "^8.6.18",
+ "@storybook/components": "^8.6.18",
+ "@storybook/core": "^8.6.18",
+ "@storybook/core-events": "^8.6.18",
"@storybook/csf": "^0.1.13",
- "@storybook/docs-tools": "^8.6.17",
- "@storybook/preview-api": "^8.6.17",
+ "@storybook/docs-tools": "^8.6.18",
+ "@storybook/preview-api": "^8.6.18",
"@storybook/theming": "^8.6.15",
"@superset-ui/core": "^0.20.4",
"@swc/core": "^1.15.17",
- "antd": "^6.3.1",
+ "antd": "^6.3.2",
"baseline-browser-mapping": "^2.10.0",
"caniuse-lite": "^1.0.30001775",
"docusaurus-plugin-openapi-docs": "^4.6.0",
@@ -85,7 +85,7 @@
"react-table": "^7.8.0",
"remark-import-partial": "^0.0.2",
"reselect": "^5.1.1",
- "storybook": "^8.6.17",
+ "storybook": "^8.6.18",
"swagger-ui-react": "^5.32.0",
"swc-loader": "^0.2.7",
"tinycolor2": "^1.4.2",
@@ -107,7 +107,7 @@
"prettier": "^3.8.1",
"typescript": "~5.9.3",
"typescript-eslint": "^8.56.1",
- "webpack": "^5.105.3"
+ "webpack": "^5.105.4"
},
"browserslist": {
"production": [
diff --git a/docs/scripts/generate-superset-components.mjs b/docs/scripts/generate-superset-components.mjs
index 55ee639293f..b3de2ba1dad 100644
--- a/docs/scripts/generate-superset-components.mjs
+++ b/docs/scripts/generate-superset-components.mjs
@@ -152,8 +152,8 @@ const SOURCES = [
{
name: 'Extension Components',
path: 'packages/superset-core/src',
- importPrefix: '@apache-superset/core/ui',
- docImportPrefix: '@apache-superset/core/ui',
+ importPrefix: '@apache-superset/core/components',
+ docImportPrefix: '@apache-superset/core/components',
category: 'extension',
enabled: true,
extensionCompatible: true,
@@ -1155,7 +1155,7 @@ Help improve it by [editing the story file](https://github.com/apache/superset/e
const CATEGORY_LABELS = {
ui: { title: 'Core Components', sidebarLabel: 'Core Components', description: 'Buttons, inputs, modals, selects, and other fundamental UI elements.' },
'design-system': { title: 'Layout Components', sidebarLabel: 'Layout Components', description: 'Grid, Layout, Table, Flex, Space, and container components for page structure.' },
- extension: { title: 'Extension Components', sidebarLabel: 'Extension Components', description: 'Components available to extension developers via @apache-superset/core/ui.' },
+ extension: { title: 'Extension Components', sidebarLabel: 'Extension Components', description: 'Components available to extension developers via @apache-superset/core/components.' },
};
/**
@@ -1463,7 +1463,7 @@ function generateExtensionTypeDeclarations(extensionComponents) {
*/
/**
- * Type declarations for @apache-superset/core/ui
+ * Type declarations for @apache-superset/core/components
*
* AUTO-GENERATED by scripts/generate-superset-components.mjs
* Do not edit manually - regenerate by running: yarn generate:superset-components
diff --git a/docs/src/components/StorybookWrapper.jsx b/docs/src/components/StorybookWrapper.jsx
index 86b1569a872..1220b56add5 100644
--- a/docs/src/components/StorybookWrapper.jsx
+++ b/docs/src/components/StorybookWrapper.jsx
@@ -39,7 +39,7 @@ function getComponentRegistry() {
// eslint-disable-next-line @typescript-eslint/no-require-imports
const SupersetComponents = require('@superset/components');
// eslint-disable-next-line @typescript-eslint/no-require-imports
- const CoreUI = require('@apache-superset/core/ui');
+ const CoreUI = require('@apache-superset/core/components');
// Build component registry with antd as base fallback layer.
// Some Superset components (e.g., Typography) use styled-components that may
@@ -65,7 +65,7 @@ function getProviders() {
try {
// eslint-disable-next-line @typescript-eslint/no-require-imports
- const { themeObject } = require('@apache-superset/core/ui');
+ const { themeObject } = require('@apache-superset/core/theme');
// eslint-disable-next-line @typescript-eslint/no-require-imports
const { App, ConfigProvider } = require('antd');
diff --git a/docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx b/docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx
new file mode 100644
index 00000000000..276331db547
--- /dev/null
+++ b/docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx
@@ -0,0 +1,120 @@
+/**
+ * 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.
+ *
+ * Swizzled from docusaurus-theme-openapi-docs to fix SSG crash.
+ *
+ * The original component calls useTypedSelector (Redux) at the top level,
+ * which fails during static site generation because no Redux store is
+ * available. This version moves the hook into a browser-only child component
+ * so SSG can render the page without a store context.
+ */
+
+import React from "react";
+
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { useSelector } from "react-redux";
+
+interface ServerVariable {
+ default?: string;
+}
+
+interface ServerValue {
+ url: string;
+ variables?: Record+ + {method === "event" ? "Webhook" : method.toUpperCase()} + {" "} + {method !== "event" && ( ++ + + ); +} + +export default MethodEndpoint; diff --git a/docs/src/theme/Playground/Preview/index.tsx b/docs/src/theme/Playground/Preview/index.tsx index 42552c185b3..f3af23389bf 100644 --- a/docs/src/theme/Playground/Preview/index.tsx +++ b/docs/src/theme/Playground/Preview/index.tsx @@ -35,7 +35,7 @@ function getThemeWrapper() { try { // eslint-disable-next-line @typescript-eslint/no-require-imports - const { themeObject } = require('@apache-superset/core/ui'); + const { themeObject } = require('@apache-superset/core/theme'); // eslint-disable-next-line @typescript-eslint/no-require-imports const { App } = require('antd'); diff --git a/docs/src/theme/ReactLiveScope/index.tsx b/docs/src/theme/ReactLiveScope/index.tsx index 27d35cd6052..fade92f93cf 100644 --- a/docs/src/theme/ReactLiveScope/index.tsx +++ b/docs/src/theme/ReactLiveScope/index.tsx @@ -50,7 +50,7 @@ if (isBrowser) { // eslint-disable-next-line @typescript-eslint/no-require-imports const SupersetComponents = require('@superset/components'); // eslint-disable-next-line @typescript-eslint/no-require-imports - const { Alert } = require('@apache-superset/core/ui'); + const { Alert } = require('@apache-superset/core/components'); console.log('[ReactLiveScope] SupersetComponents keys:', Object.keys(SupersetComponents || {}).slice(0, 10)); console.log('[ReactLiveScope] Has Button?', 'Button' in (SupersetComponents || {})); diff --git a/docs/src/types/apache-superset-core/index.d.ts b/docs/src/types/apache-superset-core/index.d.ts index 6e3a121e1b6..8dbc096ef75 100644 --- a/docs/src/types/apache-superset-core/index.d.ts +++ b/docs/src/types/apache-superset-core/index.d.ts @@ -18,7 +18,7 @@ */ /** - * Type declarations for @apache-superset/core/ui + * Type declarations for @apache-superset/core/components * * AUTO-GENERATED by scripts/generate-superset-components.mjs * Do not edit manually - regenerate by running: yarn generate:superset-components diff --git a/docs/src/webpack.extend.ts b/docs/src/webpack.extend.ts index 0a96ce2d1f5..c86498f09c0 100644 --- a/docs/src/webpack.extend.ts +++ b/docs/src/webpack.extend.ts @@ -156,9 +156,9 @@ export default function webpackExtendPlugin(): Plugin+ {renderServerUrl()} + {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`} +
+ )} +
-
- )
- );
-
- // Cleanup registration
- context.subscriptions.push(commandDisposable, eventDisposable, viewDisposable);
-}
-
-export function deactivate() {
- // Cleanup handled automatically via disposables
-}
+views.registerView(
+ { id: 'my-extension.main', name: 'My Panel Name' },
+ 'sqllab.panels',
+ () => My Extension
- -
+ {t('%s ENCRYPTED EXTRA', fileName.slice(10))}
+
+ {fields.map(field => (
+
+
+ setEncryptedExtraSecrets({
+ ...encryptedExtraSecrets,
+ [fileName]: {
+ ...encryptedExtraSecrets[fileName],
+ [field.path]: event.target.value,
+ },
+ })
+ }
+ data-test="encrypted_extra_secret"
+ />
+
+ ))}
+
+ {field.label}
+ *
+
+
+ const headerContent = useMemo(
+ () => (
+ <>
{!hideDashboardHeader && css`
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index 41b2e2fd813..a1df06aa1d7 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -29,14 +29,14 @@ import {
import { useDispatch, useSelector } from 'react-redux';
import { uniqWith } from 'lodash';
import cx from 'classnames';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
DataMaskStateWithId,
Filters,
JsonObject,
usePrevious,
} from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
import { useChartLayoutItems } from 'src/dashboard/util/useChartLayoutItems';
diff --git a/superset-frontend/src/dashboard/components/Header/index.tsx b/superset-frontend/src/dashboard/components/Header/index.tsx
index 547bd6f5fc2..417c332fd2a 100644
--- a/superset-frontend/src/dashboard/components/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/Header/index.tsx
@@ -23,7 +23,8 @@ import {
FeatureFlag,
getExtensionsRegistry,
} from '@superset-ui/core';
-import { styled, css, SupersetTheme, t } from '@apache-superset/core/ui';
+import { styled, css, SupersetTheme } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { Global } from '@emotion/react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
diff --git a/superset-frontend/src/dashboard/components/Header/useDashboardMetadataBar.tsx b/superset-frontend/src/dashboard/components/Header/useDashboardMetadataBar.tsx
index d5819a14faa..f9556464d7b 100644
--- a/superset-frontend/src/dashboard/components/Header/useDashboardMetadataBar.tsx
+++ b/superset-frontend/src/dashboard/components/Header/useDashboardMetadataBar.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useMemo } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { DashboardInfo } from 'src/dashboard/types';
import MetadataBar, {
MetadataType,
diff --git a/superset-frontend/src/dashboard/components/Header/useHeaderActionsDropdownMenu.tsx b/superset-frontend/src/dashboard/components/Header/useHeaderActionsDropdownMenu.tsx
index 5eeff33dd65..7c648458024 100644
--- a/superset-frontend/src/dashboard/components/Header/useHeaderActionsDropdownMenu.tsx
+++ b/superset-frontend/src/dashboard/components/Header/useHeaderActionsDropdownMenu.tsx
@@ -21,7 +21,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { isEmpty } from 'lodash';
import { URL_PARAMS } from 'src/constants';
import { useShareMenuItems } from 'src/dashboard/components/menu/ShareMenuItems';
diff --git a/superset-frontend/src/dashboard/components/IconButton.tsx b/superset-frontend/src/dashboard/components/IconButton.tsx
index df1298097ca..a70d7c3d217 100644
--- a/superset-frontend/src/dashboard/components/IconButton.tsx
+++ b/superset-frontend/src/dashboard/components/IconButton.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { MouseEventHandler } from 'react';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
interface IconButtonProps {
icon: JSX.Element;
diff --git a/superset-frontend/src/dashboard/components/MissingChart.tsx b/superset-frontend/src/dashboard/components/MissingChart.tsx
index 6ff520af789..4f3a56042b4 100644
--- a/superset-frontend/src/dashboard/components/MissingChart.tsx
+++ b/superset-frontend/src/dashboard/components/MissingChart.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
interface MissingChartProps {
height: number;
diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
index 39f27192ab9..af03f2c1190 100644
--- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
+++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
@@ -27,8 +27,8 @@ import {
saveDashboardRequest,
setOverrideConfirm,
} from 'src/dashboard/actions/dashboardState';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { SAVE_TYPE_OVERWRITE_CONFIRMED } from 'src/dashboard/util/constants';
const STICKY_HEADER_TOP = 16;
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
index 23d37cfc9c7..d7e4b8e1ec8 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
@@ -26,7 +26,7 @@ import fetchMock from 'fetch-mock';
import * as ColorSchemeSelect from 'src/dashboard/components/ColorSchemeSelect';
import * as SupersetCore from '@superset-ui/core';
import { isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
-import { t } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
import PropertiesModal from '.';
// Increase timeout for CI environment
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 786d9fc7b1e..8fbcbb690b8 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -27,7 +27,7 @@ import {
import { useJsonValidation } from '@superset-ui/core/components/AsyncAceEditor';
import { type TagType } from 'src/components';
import rison from 'rison';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
ensureIsArray,
isFeatureEnabled,
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/AccessSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/AccessSection.tsx
index 1ef452d8bf7..d2bd52f760e 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/AccessSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/AccessSection.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useMemo } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
import { AsyncSelect } from '@superset-ui/core/components';
import { type TagType } from 'src/components';
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx
index 9717a2de9ba..e9fd5d869d7 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import type { editors } from '@apache-superset/core';
import { EditorHost } from 'src/core/editors';
import { ModalFormField } from 'src/components/Modal';
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/BasicInfoSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/BasicInfoSection.tsx
index 1da89e8534a..1aafc74fb8d 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/BasicInfoSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/BasicInfoSection.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { FormItem, Input, FormInstance } from '@superset-ui/core/components';
import { ModalFormField } from 'src/components/Modal';
import { ValidationObject } from 'src/components/Modal/useModalValidation';
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/CertificationSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/CertificationSection.tsx
index c5ceaeacad4..c5dbe124296 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/CertificationSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/CertificationSection.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { FormItem, Input } from '@superset-ui/core/components';
import { ModalFormField } from 'src/components/Modal';
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/RefreshSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/RefreshSection.tsx
index 6f9bfa746db..87eac044c69 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/RefreshSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/RefreshSection.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { ModalFormField } from 'src/components/Modal';
import { RefreshFrequencySelect } from '../../RefreshFrequency/RefreshFrequencySelect';
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/sections/StylingSection.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/sections/StylingSection.tsx
index 1aa5e4b5412..5194b910282 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/sections/StylingSection.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/sections/StylingSection.tsx
@@ -17,13 +17,14 @@
* under the License.
*/
import { useCallback, useEffect, useState } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
SupersetClient,
isFeatureEnabled,
FeatureFlag,
} from '@superset-ui/core';
-import { styled, Alert } from '@apache-superset/core/ui';
+import { Alert } from '@apache-superset/core/components';
+import { styled } from '@apache-superset/core/theme';
import { Select, Switch } from '@superset-ui/core/components';
import { EditorHost } from 'src/core/editors';
import rison from 'rison';
diff --git a/superset-frontend/src/dashboard/components/PublishedStatus/index.tsx b/superset-frontend/src/dashboard/components/PublishedStatus/index.tsx
index b05cd30bf3b..8696fbbbb67 100644
--- a/superset-frontend/src/dashboard/components/PublishedStatus/index.tsx
+++ b/superset-frontend/src/dashboard/components/PublishedStatus/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { Component } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Tooltip, PublishedLabel } from '@superset-ui/core/components';
import { HeaderProps, HeaderDropdownProps } from '../Header/types';
diff --git a/superset-frontend/src/dashboard/components/RefreshButton/index.tsx b/superset-frontend/src/dashboard/components/RefreshButton/index.tsx
index a16d11d8fbd..1240753ce69 100644
--- a/superset-frontend/src/dashboard/components/RefreshButton/index.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshButton/index.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
import { FC, useState, useCallback } from 'react';
-import { css, useTheme, t } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { Tooltip } from '@superset-ui/core/components';
import { Icons } from '@superset-ui/core/components/Icons';
diff --git a/superset-frontend/src/dashboard/components/RefreshFrequency/RefreshFrequencySelect.tsx b/superset-frontend/src/dashboard/components/RefreshFrequency/RefreshFrequencySelect.tsx
index c1d918fc5b2..6f5736d9078 100644
--- a/superset-frontend/src/dashboard/components/RefreshFrequency/RefreshFrequencySelect.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshFrequency/RefreshFrequencySelect.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import { ChangeEvent, useEffect, useState } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { Input } from '@superset-ui/core/components';
import { Radio, RadioChangeEvent } from '@superset-ui/core/components/Radio';
diff --git a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
index a0ae4aa959c..a4ec52d7313 100644
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
@@ -18,8 +18,8 @@
*/
import { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { Form, Checkbox } from '@superset-ui/core/components';
import { StandardModal } from 'src/components/Modal';
import { RootState } from 'src/dashboard/types';
diff --git a/superset-frontend/src/dashboard/components/SaveModal.tsx b/superset-frontend/src/dashboard/components/SaveModal.tsx
index 4daf944df69..0e451d3f3af 100644
--- a/superset-frontend/src/dashboard/components/SaveModal.tsx
+++ b/superset-frontend/src/dashboard/components/SaveModal.tsx
@@ -27,8 +27,8 @@ import {
Divider,
Flex,
} from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { useTheme } from '@apache-superset/core/theme';
import {
ModalTrigger,
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.tsx b/superset-frontend/src/dashboard/components/SliceAdder.tsx
index afe5d2056fb..8ad34e3c065 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.tsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx
@@ -22,8 +22,8 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList as List } from 'react-window';
// @ts-expect-error
import { createFilter } from 'react-search-input';
-import { t } from '@apache-superset/core';
-import { styled, css } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled, css } from '@apache-superset/core/theme';
import {
Button,
Checkbox,
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index 77da178b246..be29e3c8e89 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -24,9 +24,14 @@ import {
useRef,
useState,
} from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { getExtensionsRegistry, QueryData } from '@superset-ui/core';
-import { css, styled, SupersetTheme, useTheme } from '@apache-superset/core/ui';
+import {
+ css,
+ styled,
+ SupersetTheme,
+ useTheme,
+} from '@apache-superset/core/theme';
import { useUiConfig } from 'src/components/UiConfigContext';
import { isEmbedded } from 'src/dashboard/util/isEmbedded';
import { Tooltip, EditableTitle, Icons } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
index c7295ce8be4..c9c9845cc5a 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
@@ -18,8 +18,8 @@
*/
import { ReactChild, RefObject, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
-import { t } from '@apache-superset/core';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { css, useTheme } from '@apache-superset/core/theme';
import { Button, ModalTrigger } from '@superset-ui/core/components';
export const ViewResultsModalTrigger = ({
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index cec1ed1b5e3..9fcf2ab0096 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -27,7 +27,7 @@ import {
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { extendedDayjs } from '@superset-ui/core/utils/dates';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
Behavior,
isFeatureEnabled,
@@ -37,7 +37,7 @@ import {
BinaryQueryObjectFilterClause,
QueryFormData,
} from '@superset-ui/core';
-import { css, useTheme, styled } from '@apache-superset/core/ui';
+import { css, useTheme, styled } from '@apache-superset/core/theme';
import { useSelector } from 'react-redux';
import { Menu, MenuItem } from '@superset-ui/core/components/Menu';
import {
diff --git a/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx b/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
index 49e6de249f9..136c44425b9 100644
--- a/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
+++ b/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useState } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { getClientErrorObject } from '@superset-ui/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { useTheme } from '@apache-superset/core/theme';
import {
Button,
Icons,
diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx
index 7b1d60e59ff..cd603b6af6d 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.tsx
@@ -32,7 +32,7 @@ import {
ConnectDropTarget,
} from 'react-dnd';
import cx from 'classnames';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
import { dragConfig, dropConfig } from './dragDroppableConfig';
import type { DragDroppableProps as BaseDragDroppableProps } from './dragDroppableConfig';
@@ -92,6 +92,15 @@ const DragDroppableStyles = styled.div`
&.dragdroppable-row {
width: 100%;
}
+ /* workaround to avoid a bug in react-dnd where the drag
+ preview expands outside of the bounds of the drag source card, see:
+ https://github.com/react-dnd/react-dnd/issues/832 */
+ &.dragdroppable-column {
+ /* for chrome */
+ transform: translate3d(0, 0, 0);
+ /* for safari */
+ backface-visibility: hidden;
+ }
&.dragdroppable-column .resizable-container span div {
z-index: 10;
diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
index caa947d902a..4d3023e72d5 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { LegacyRef } from 'react';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
interface DragHandleProps {
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx
index 35f544f18c8..2c18ba4a208 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { supersetTheme } from '@apache-superset/core/ui';
+import { supersetTheme } from '@apache-superset/core/theme';
import {
cleanup,
render,
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
index 428daf4ec33..5dd6b01ee54 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { createRef, PureComponent } from 'react';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import {
ModalTrigger,
ModalTriggerRef,
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx
index 0e4eca61ee9..7d10c1b691d 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx
@@ -19,7 +19,8 @@
import { PureComponent, ChangeEvent, type ReactElement } from 'react';
import cx from 'classnames';
import { Button, Input } from '@superset-ui/core/components';
-import { css, styled, t } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import buildFilterScopeTreeEntry from 'src/dashboard/util/buildFilterScopeTreeEntry';
import getFilterScopeNodesTree from 'src/dashboard/util/getFilterScopeNodesTree';
diff --git a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.tsx b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.tsx
index 3867a69aad9..8930868d21a 100644
--- a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.tsx
@@ -18,7 +18,7 @@
*/
import { ReactNode } from 'react';
import cx from 'classnames';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/filterscope/treeIcons.tsx b/superset-frontend/src/dashboard/components/filterscope/treeIcons.tsx
index 294faf968ba..c77a69e3b44 100644
--- a/superset-frontend/src/dashboard/components/filterscope/treeIcons.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/treeIcons.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
import {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx b/superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx
index cbf930183be..3c6c136159c 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx
@@ -19,7 +19,8 @@
import cx from 'classnames';
import { useCallback, useEffect, useRef, useMemo, useState, memo } from 'react';
import type { ChartCustomization, JsonObject } from '@superset-ui/core';
-import { styled, t } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { debounce } from 'lodash';
import { bindActionCreators } from 'redux';
import { useDispatch, useSelector } from 'react-redux';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx
index 6b7560d3613..597f8887796 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx
@@ -21,7 +21,7 @@ import { useState, useMemo, useCallback, useEffect, memo } from 'react';
import { ResizeCallback, ResizeStartCallback } from 're-resizable';
import cx from 'classnames';
import { useSelector } from 'react-redux';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
import { LayoutItem, RootState } from 'src/dashboard/types';
import AnchorLink from 'src/dashboard/components/AnchorLink';
import Chart from 'src/dashboard/components/gridComponents/Chart';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx b/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
index 6d8d5871abf..4f8baf16a69 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
@@ -18,7 +18,8 @@
*/
import { Fragment, useCallback, useState, useMemo, memo } from 'react';
import cx from 'classnames';
-import { t, css, styled, SupersetTheme } from '@apache-superset/core/ui';
+import { css, styled, SupersetTheme } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components/Icons';
import type { LayoutItem } from 'src/dashboard/types';
import type { DropResult } from 'src/dashboard/components/dnd/dragDroppableConfig';
@@ -109,6 +110,8 @@ const ColumnStyles = styled.div<{ editMode: boolean }>`
}
&:first-child:not(.droptarget-edge) {
position: absolute;
+ top: 0;
+ left: 0;
z-index: ${EMPTY_CONTAINER_Z_INDEX};
width: 100%;
height: 100%;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
index a241f3dd627..f6b26b48928 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
@@ -18,7 +18,7 @@
*/
import { PureComponent } from 'react';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
import { Draggable } from '../../dnd/DragDroppable';
import HoverMenu from '../../menu/HoverMenu';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent/DynamicComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent/DynamicComponent.tsx
index c2233dfda79..124b91dbf1f 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent/DynamicComponent.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent/DynamicComponent.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { FC, Suspense } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { DashboardComponentMetadata, JsonObject } from '@superset-ui/core';
import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
import cx from 'classnames';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx b/superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx
index f61a2d1de14..dd9b2a6a6d6 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Header/Header.tsx
@@ -18,7 +18,7 @@
*/
import { PureComponent } from 'react';
import cx from 'classnames';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
import PopoverDropdown from '@superset-ui/core/components/PopoverDropdown';
import { EditableTitle } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.test.tsx
index 4794cba0fd6..ea2848bbf43 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.test.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.test.tsx
@@ -25,7 +25,7 @@ import {
userEvent,
RenderResult,
} from 'spec/helpers/testing-library';
-import { supersetTheme } from '@apache-superset/core/ui';
+import { supersetTheme } from '@apache-superset/core/theme';
import { mockStore } from 'spec/fixtures/mockStore';
import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';
import MarkdownConnected from './Markdown';
@@ -403,6 +403,27 @@ test('shouldFocusMarkdown returns false when clicking outside markdown container
expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
});
+test('should re-enter edit mode on a single click after clicking outside', async () => {
+ await setup({ editMode: true });
+
+ const markdownContainer = screen.getByTestId(
+ 'dashboard-component-chart-holder',
+ );
+
+ // Click to enter edit mode
+ userEvent.click(markdownContainer);
+ expect(await screen.findByRole('textbox')).toBeInTheDocument();
+
+ // Click outside to exit edit mode
+ userEvent.click(document.body);
+ await new Promise(resolve => setTimeout(resolve, 50));
+ expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+
+ // Click back inside — editor should appear on a single click
+ userEvent.click(markdownContainer);
+ expect(await screen.findByRole('textbox')).toBeInTheDocument();
+});
+
test('shouldFocusMarkdown keeps focus when clicking on menu items', async () => {
await setup({ editMode: true });
@@ -417,9 +438,8 @@ test('shouldFocusMarkdown keeps focus when clicking on menu items', async () =>
const editButton = screen.getByText('Edit');
userEvent.click(editButton);
- await new Promise(resolve => setTimeout(resolve, 50));
- expect(screen.queryByRole('textbox')).toBeInTheDocument();
+ expect(await screen.findByRole('textbox')).toBeInTheDocument();
});
test('should exit edit mode when clicking outside in same row', async () => {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx
index fd931625d69..b10e4e23224 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx
@@ -22,7 +22,8 @@ import cx from 'classnames';
import type { JsonObject } from '@superset-ui/core';
import type { ResizeStartCallback, ResizeCallback } from 're-resizable';
-import { t, css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { SafeMarkdown } from '@superset-ui/core/components';
import { EditorHost } from 'src/core/editors';
import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx b/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
index 5651712e29d..707370d4050 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
@@ -22,15 +22,16 @@ import {
useCallback,
useRef,
useEffect,
+ useLayoutEffect,
useMemo,
memo,
RefObject,
} from 'react';
import cx from 'classnames';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { FeatureFlag, isFeatureEnabled, JsonObject } from '@superset-ui/core';
-import { css, styled, SupersetTheme } from '@apache-superset/core/ui';
-import { Icons, Constants } from '@superset-ui/core/components';
+import { css, styled, SupersetTheme } from '@apache-superset/core/theme';
+import { Icons } from '@superset-ui/core/components';
import {
Draggable,
Droppable,
@@ -47,7 +48,6 @@ import { BACKGROUND_TRANSPARENT } from 'src/dashboard/util/constants';
import { isEmbedded } from 'src/dashboard/util/isEmbedded';
import { EMPTY_CONTAINER_Z_INDEX } from 'src/dashboard/constants';
import { isCurrentUserBot } from 'src/utils/isBot';
-import { useDebouncedEffect } from '../../../../explore/exploreUtils';
export type RowProps = {
id: string;
@@ -215,20 +215,13 @@ const Row = memo((props: RowProps) => {
};
}, []);
- useDebouncedEffect(
- () => {
- const updatedHeight = containerRef.current?.clientHeight;
- if (
- editMode &&
- containerRef.current &&
- updatedHeight !== containerHeight
- ) {
- setContainerHeight(updatedHeight ?? null);
- }
- },
- Constants.FAST_DEBOUNCE,
- [editMode, containerHeight],
- );
+ useLayoutEffect(() => {
+ if (!editMode) return;
+ const updatedHeight = containerRef.current?.clientHeight;
+ if (updatedHeight !== undefined && updatedHeight !== containerHeight) {
+ setContainerHeight(updatedHeight);
+ }
+ });
const handleChangeFocus = useCallback((nextFocus: boolean) => {
setIsFocused(Boolean(nextFocus));
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.tsx b/superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.tsx
index 6b2fe507e91..60c0da870c1 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.tsx
@@ -27,7 +27,8 @@ import {
} from 'react';
import classNames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
-import { t, styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { EditableTitle, EmptyState } from '@superset-ui/core/components';
import { setEditMode, onRefresh } from 'src/dashboard/actions/dashboardState';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs/Tabs.tsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs/Tabs.tsx
index 33f91af1b1b..d3eacb0cf7d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs/Tabs.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs/Tabs.tsx
@@ -25,7 +25,8 @@ import {
ReactElement,
} from 'react';
import { usePrevious } from '@superset-ui/core';
-import { t, useTheme, styled } from '@apache-superset/core/ui';
+import { useTheme, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { useSelector } from 'react-redux';
import { Icons } from '@superset-ui/core/components/Icons';
import { LOG_ACTIONS_SELECT_DASHBOARD_TAB } from 'src/logger/LogUtils';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx b/superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx
index 72761e6d914..6d030b06a56 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx
@@ -25,7 +25,7 @@ import {
useRef,
useState,
} from 'react';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import {
LineEditableTabs,
TabsProps as AntdTabsProps,
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
index 542de90040e..8426521d4e0 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx
@@ -18,7 +18,7 @@
*/
import { PureComponent } from 'react';
import cx from 'classnames';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable';
import type { ConnectDragSource } from 'react-dnd';
import { NEW_COMPONENTS_SOURCE_ID } from 'src/dashboard/util/constants';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.tsx
index 11f38b468b9..7040ad40675 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { COLUMN_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.tsx
index b95fa1c30b5..ae7a161ef09 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { DIVIDER_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.tsx
index 0513cb6fa58..835e4bea46f 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { HEADER_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewMarkdown.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewMarkdown.tsx
index 96dedf76880..39b70f3c1c5 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewMarkdown.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewMarkdown.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { MARKDOWN_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewRow.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewRow.tsx
index c8a87fabb7c..e62bf032421 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewRow.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewRow.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { ROW_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.tsx
index 71145550492..f66add5f392 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components';
import { TABS_TYPE } from '../../../util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
index 6c20491a5c0..46d8eb2f5f3 100644
--- a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
+++ b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
@@ -18,8 +18,8 @@
*/
import { PureComponent } from 'react';
import cx from 'classnames';
-import { t } from '@apache-superset/core';
-import { css, styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { css, styled } from '@apache-superset/core/theme';
import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
import PopoverDropdown, {
diff --git a/superset-frontend/src/dashboard/components/menu/DownloadMenuItems/index.tsx b/superset-frontend/src/dashboard/components/menu/DownloadMenuItems/index.tsx
index a3511e3cb83..d30d552974d 100644
--- a/superset-frontend/src/dashboard/components/menu/DownloadMenuItems/index.tsx
+++ b/superset-frontend/src/dashboard/components/menu/DownloadMenuItems/index.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
import { SyntheticEvent } from 'react';
-import { logging, t } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
+import { t } from '@apache-superset/core/translation';
import {
FeatureFlag,
isFeatureEnabled,
diff --git a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
index 4ee784fd2ba..9e45c96b986 100644
--- a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
+++ b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
@@ -19,7 +19,7 @@
*/
import { RefObject, ReactNode, PureComponent } from 'react';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import cx from 'classnames';
interface HoverMenuProps {
diff --git a/superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx b/superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx
index 3cd434aaae4..8dccc4921df 100644
--- a/superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx
+++ b/superset-frontend/src/dashboard/components/menu/MarkdownModeDropdown.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { PureComponent } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import PopoverDropdown, {
OnChangeHandler,
diff --git a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
index 42a321ebc0a..37f6ebf6c1f 100644
--- a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
@@ -18,7 +18,8 @@
*/
import { ComponentProps, RefObject } from 'react';
import copyTextToClipboard from 'src/utils/copy';
-import { t, logging } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
+import { t } from '@apache-superset/core/translation';
import {
FeatureFlag,
isFeatureEnabled,
diff --git a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
index 4644bc3a7d8..3fb061ed15b 100644
--- a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
+++ b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
@@ -19,7 +19,7 @@
import { ReactNode, CSSProperties, PureComponent } from 'react';
import cx from 'classnames';
import { addAlpha } from '@superset-ui/core';
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
type ShouldFocusContainer = HTMLDivElement & {
contains: (event_target: EventTarget & HTMLElement) => boolean;
@@ -112,6 +112,8 @@ export default class WithPopoverMenu extends PureComponent<
menuRef: HTMLDivElement | null;
+ focusEvent: Event | null;
+
static defaultProps = {
children: null,
disableClick: false,
@@ -136,6 +138,7 @@ export default class WithPopoverMenu extends PureComponent<
isFocused: props.isFocused!,
};
this.menuRef = null;
+ this.focusEvent = null;
this.setRef = this.setRef.bind(this);
this.setMenuRef = this.setMenuRef.bind(this);
this.handleClick = this.handleClick.bind(this);
@@ -181,6 +184,17 @@ export default class WithPopoverMenu extends PureComponent<
return;
}
+ // Skip if this is the same event that just triggered focus via onClick.
+ // The document-level listener registered during focus will see the same
+ // event bubble up; by that time a re-render may have detached the
+ // original event.target, causing shouldFocus to return false and
+ // immediately undoing the focus.
+ const nativeEvent = event.nativeEvent || event;
+ if (this.focusEvent === nativeEvent) {
+ this.focusEvent = null;
+ return;
+ }
+
const {
onChangeFocus,
shouldFocus: shouldFocusFunc,
@@ -194,6 +208,7 @@ export default class WithPopoverMenu extends PureComponent<
if (!disableClick && shouldFocus && !this.state.isFocused) {
document.addEventListener('click', this.handleClick);
document.addEventListener('drag', this.handleClick);
+ this.focusEvent = event.nativeEvent || event;
this.setState(() => ({ isFocused: true }));
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/ModalFooter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/ModalFooter.tsx
index 5675c2ec807..133918665a6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/ModalFooter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/ModalFooter.tsx
@@ -23,8 +23,9 @@ import {
Icons,
Flex,
} from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
-import { styled, css, useTheme, Alert } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { Alert } from '@apache-superset/core/components';
+import { styled, css, useTheme } from '@apache-superset/core/theme';
import { BaseExpandButtonWrapper } from './SharedStyles';
const StyledAlert = styled(Alert)`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/SharedStyles.tsx b/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/SharedStyles.tsx
index 51ee24051a3..b51ac560722 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/SharedStyles.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/ConfigModal/SharedStyles.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled, css } from '@apache-superset/core/ui';
+import { styled, css } from '@apache-superset/core/theme';
import { Form, StyledModal } from '@superset-ui/core/components';
const MODAL_MARGIN = 16;
@@ -39,8 +39,23 @@ export const BaseModalWrapper = styled(StyledModal)`
min-width: auto;
}
+ .ant-modal-header {
+ margin-bottom: 0;
+ }
+
.ant-modal-body {
- padding: 0px;
+ overflow: hidden;
+ padding: 0;
+ flex: 1 1 auto;
+ min-height: 0;
+ }
+
+ .ant-collapse {
+ border-bottom: 0;
+
+ .ant-collapse-item:last-child > .ant-collapse-content {
+ border-radius: 0;
+ }
}
${({ expanded }) =>
@@ -59,7 +74,7 @@ export const BaseModalWrapper = styled(StyledModal)`
export const BaseModalBody = styled.div`
display: flex;
- height: ${({ expanded }) => (expanded ? '100%' : '700px')};
+ height: 100%;
flex-direction: row;
flex: 1;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
index 24fe7a30a1e..7c685842946 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useMemo } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
DataMaskState,
DataMaskStateWithId,
@@ -25,8 +25,8 @@ import {
ChartCustomization,
ChartCustomizationDivider,
} from '@superset-ui/core';
-import { css, SupersetTheme, styled } from '@apache-superset/core/ui';
-import { Button } from '@superset-ui/core/components';
+import { css, SupersetTheme, styled } from '@apache-superset/core/theme';
+import { Button, Tooltip, Icons, Flex } from '@superset-ui/core/components';
import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
import tinycolor from 'tinycolor2';
import { FilterBarOrientation } from 'src/dashboard/types';
@@ -41,14 +41,47 @@ interface ActionButtonsProps {
chartCustomizationItems?: (ChartCustomization | ChartCustomizationDivider)[];
isApplyDisabled: boolean;
filterBarOrientation?: FilterBarOrientation;
+ hasOutOfScopeRequiredFilters?: boolean;
}
-const containerStyle = (theme: SupersetTheme) => css`
- display: flex;
+const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>`
+ ${({ theme, isVertical, width }) => css`
+ display: flex;
- && > .filter-clear-all-button {
+ ${isVertical
+ ? css`
+ flex-direction: column;
+ align-items: center;
+ position: fixed;
+ z-index: 100;
+ width: ${width - 1}px;
+ bottom: 0;
+ padding: ${theme.sizeUnit * 4}px;
+ padding-top: ${theme.sizeUnit * 6}px;
+ background: linear-gradient(
+ ${tinycolor(theme.colorBgLayout).setAlpha(0).toRgbString()},
+ ${theme.colorBgContainer} 20%
+ );
+ `
+ : css`
+ align-items: center;
+ margin-left: auto;
+ `}
+ `}
+`;
+
+const applyButtonStyle = (theme: SupersetTheme, isVertical: boolean) => css`
+ ${isVertical &&
+ css`
+ margin-bottom: ${theme.sizeUnit * 3}px;
+ `}
+`;
+
+const clearAllButtonStyle = (theme: SupersetTheme, isVertical: boolean) => css`
+ && {
color: ${theme.colorTextSecondary};
margin-left: 0;
+
&:hover {
color: ${theme.colorPrimaryText};
}
@@ -57,48 +90,15 @@ const containerStyle = (theme: SupersetTheme) => css`
&[disabled]:hover {
color: ${theme.colorTextDisabled};
}
+
+ ${!isVertical &&
+ css`
+ text-transform: capitalize;
+ font-weight: ${theme.fontWeightNormal};
+ `}
}
`;
-const verticalStyle = (theme: SupersetTheme, width: number) => css`
- flex-direction: column;
- align-items: center;
- position: fixed;
- z-index: 100;
-
- // filter bar width minus 1px for border
- width: ${width - 1}px;
- bottom: 0;
-
- padding: ${theme.sizeUnit * 4}px;
- padding-top: ${theme.sizeUnit * 6}px;
-
- background: linear-gradient(
- ${tinycolor(theme.colorBgLayout).setAlpha(0).toRgbString()},
- ${theme.colorBgContainer} 20%
- );
-
- & > .filter-apply-button {
- margin-bottom: ${theme.sizeUnit * 3}px;
- }
-`;
-
-const horizontalStyle = (theme: SupersetTheme) => css`
- align-items: center;
- margin-left: auto;
- && > .filter-clear-all-button {
- text-transform: capitalize;
- font-weight: ${theme.fontWeightNormal};
- }
-`;
-
-const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>`
- ${({ theme, isVertical, width }) => css`
- ${containerStyle(theme)};
- ${isVertical ? verticalStyle(theme, width) : horizontalStyle(theme)};
- `}
-`;
-
const ActionButtons = ({
width = OPEN_FILTER_BAR_WIDTH,
onApply,
@@ -108,7 +108,10 @@ const ActionButtons = ({
isApplyDisabled,
filterBarOrientation = FilterBarOrientation.Vertical,
chartCustomizationItems,
+ hasOutOfScopeRequiredFilters = false,
}: ActionButtonsProps) => {
+ const isVertical = filterBarOrientation === FilterBarOrientation.Vertical;
+
const isClearAllEnabled = useMemo(() => {
const hasSelectedChanges = Object.entries(dataMaskSelected).some(
([, mask]) => {
@@ -136,7 +139,6 @@ const ActionButtons = ({
return hasSelectedChanges || hasAppliedChanges || hasChartCustomizations;
}, [dataMaskSelected, dataMaskApplied, chartCustomizationItems]);
- const isVertical = filterBarOrientation === FilterBarOrientation.Vertical;
return (
applyButtonStyle(theme, isVertical)}
onClick={onApply}
{...getFilterBarTestId('apply-button')}
>
{isVertical ? t('Apply filters') : t('Apply')}
-
+
+
+ {hasOutOfScopeRequiredFilters && (
+
+ css`
+ margin-left: ${theme.sizeUnit}px;
+ `}
+ />
+
+ )}
+
);
};
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
index dfc40e11b80..fd43a6b4beb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
@@ -18,7 +18,7 @@
*/
import { useCallback } from 'react';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
import { CrossFilterIndicator } from 'src/dashboard/components/nativeFilters/selectors';
import { useDispatch } from 'react-redux';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index eb81cd13b87..81b76579579 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
@@ -18,7 +18,7 @@
*/
import { getColumnLabel, useCSSTextTruncation } from '@superset-ui/core';
-import { styled, css, useTheme } from '@apache-superset/core/ui';
+import { styled, css, useTheme } from '@apache-superset/core/theme';
import { CrossFilterIndicator } from 'src/dashboard/components/nativeFilters/selectors';
import { Tag } from 'src/components/Tag';
import { Tooltip } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
index dc97928471d..459551f125b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { useCSSTextTruncation } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { Tooltip } from '@superset-ui/core/components';
import { FilterBarOrientation } from 'src/dashboard/types';
import { Icons } from '@superset-ui/core/components/Icons';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
index 58df9ddc141..9775de8022e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
@@ -18,8 +18,8 @@
*/
import { ReactNode, useMemo } from 'react';
-import { t } from '@apache-superset/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import {
ChartConfiguration,
DashboardLayout,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.tsx
index 132f6319963..395c6a4e271 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.tsx
@@ -18,7 +18,7 @@
*/
import { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { isDefined, NativeFilterScope } from '@superset-ui/core';
import { Modal } from '@superset-ui/core/components';
import {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
index 374a35690ab..41d2518c642 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { NativeFilterScope } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { ChartConfiguration } from 'src/dashboard/types';
import { ScopingTreePanel } from './ScopingTreePanel';
import { ChartsScopingListPanel } from './ChartsScopingListPanel';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
index bb1a547c448..6140bbb8aaa 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
@@ -18,9 +18,10 @@
*/
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { isDefined, NativeFilterScope } from '@superset-ui/core';
-import { css, styled, useTheme, Alert } from '@apache-superset/core/ui';
+import { Alert } from '@apache-superset/core/components';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { Select, Tooltip } from '@superset-ui/core/components';
import { noOp } from 'src/utils/common';
import ScopingTree from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/ScopingTree';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
index e2dcf047782..7389d70ede8 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
@@ -18,8 +18,8 @@
*/
import { useMemo, useState, useCallback } from 'react';
-import { t } from '@apache-superset/core';
-import { css, useTheme, SupersetTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { css, useTheme, SupersetTheme } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { FilterBarOrientation } from 'src/dashboard/types';
import CrossFilter from './CrossFilter';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/styles.ts
index ccd7e2c5f45..1ba2f182917 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/styles.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/styles.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import { css } from '@apache-superset/core/ui';
+import { css } from '@apache-superset/core/theme';
export const ellipsisCss = css`
white-space: nowrap;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CustomizationsOutOfScopeCollapsible/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CustomizationsOutOfScopeCollapsible/index.tsx
index b548d6ac41d..42bbf4f387d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CustomizationsOutOfScopeCollapsible/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CustomizationsOutOfScopeCollapsible/index.tsx
@@ -17,12 +17,12 @@
* under the License.
*/
import { ReactNode } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
ChartCustomization,
ChartCustomizationDivider,
} from '@superset-ui/core';
-import { css, SupersetTheme } from '@apache-superset/core/ui';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
import { Collapse } from '@superset-ui/core/components';
export interface CustomizationsOutOfScopeCollapsibleProps {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
index 43ffe05cdb4..2ece961fd33 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -42,6 +42,7 @@ jest.mock('@superset-ui/core', () => ({
const mockedMakeApi = makeApi as jest.Mock;
+// Register preset once for all tests
class MainPreset extends Preset {
constructor() {
super({
@@ -55,65 +56,41 @@ class MainPreset extends Preset {
}
}
+new MainPreset().register();
+
fetchMock.get('glob:*/api/v1/dataset/7', {
description_columns: {},
id: 1,
- label_columns: {
- columns: 'Columns',
- table_name: 'Table Name',
- },
+ label_columns: { columns: 'Columns', table_name: 'Table Name' },
result: {
metrics: [],
- columns: [
- {
- column_name: 'Column A',
- id: 1,
- },
- ],
+ columns: [{ column_name: 'Column A', id: 1 }],
table_name: 'birth_names',
id: 1,
},
show_columns: ['id', 'table_name'],
});
+// Cleanup between tests
+beforeEach(() => {
+ jest.clearAllMocks();
+});
+
const getTestId = testWithId(FILTER_BAR_TEST_ID, true);
const getModalTestId = testWithId(FILTERS_CONFIG_MODAL_TEST_ID, true);
-const FILTER_NAME = 'Time filter 1';
+function createClosedBarProps(toggleFiltersBar = jest.fn()) {
+ return { filtersOpen: false, toggleFiltersBar };
+}
-const addFilterFlow = async () => {
- // open filter config modals
- userEvent.click(screen.getByTestId(getTestId('collapsable')));
- userEvent.click(screen.getByLabelText('setting'));
- userEvent.click(screen.getByText('Add or edit filters and controls'));
- // select filter
- userEvent.click(screen.getByText('Value'));
- userEvent.click(screen.getByText('Time range'));
- userEvent.type(screen.getByTestId(getModalTestId('name-input')), FILTER_NAME);
- userEvent.click(screen.getByText('Save'));
- // TODO: fix this flaky test
- // await screen.findByText('All filters (1)');
-};
+function createOpenedBarProps(toggleFiltersBar = jest.fn()) {
+ return { filtersOpen: true, toggleFiltersBar };
+}
-// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
-describe('FilterBar', () => {
- new MainPreset().register();
- const toggleFiltersBar = jest.fn();
- const closedBarProps = {
- filtersOpen: false,
- toggleFiltersBar,
- };
- const openedBarProps = {
- filtersOpen: true,
- toggleFiltersBar,
- };
-
- const mockApi = jest.fn(async data => {
+function createMockApi(filterName = 'Time filter 1') {
+ return jest.fn(async data => {
if (!data?.modified?.length) {
- return {
- id: 1234,
- result: [],
- };
+ return { id: 1234, result: [] };
}
const filterId = data.modified[0].id;
return {
@@ -121,7 +98,7 @@ describe('FilterBar', () => {
result: [
{
id: filterId,
- name: FILTER_NAME,
+ name: filterName,
filterType: 'filter_time',
targets: [{ datasetId: 11, column: { name: 'color' } }],
defaultDataMask: { filterState: { value: null } },
@@ -132,540 +109,684 @@ describe('FilterBar', () => {
],
};
});
+}
- const getTimeRangeNoFilterMockUrl =
- 'glob:*/api/v1/time_range/?q=%27No%20filter%27';
- const getTimeRangeLastDayMockUrl =
- 'glob:*/api/v1/time_range/?q=%27Last%20day%27';
- const getTimeRangeLastWeekMockUrl =
- 'glob:*/api/v1/time_range/?q=%27Last%20week%27';
+function createFilter(overrides: Record = {}) {
+ const id = (overrides.id as string) || 'test-filter';
+ return {
+ id,
+ name: 'Test Filter',
+ filterType: 'filter_select',
+ targets: [{ datasetId: 1, column: { name: 'test_column' } }],
+ defaultDataMask: { filterState: { value: null }, extraFormData: {} },
+ controlValues: {},
+ cascadeParentIds: [],
+ scope: { rootPath: ['ROOT_ID'], excluded: [] },
+ type: 'NATIVE_FILTER',
+ description: '',
+ chartsInScope: [],
+ tabsInScope: [],
+ ...overrides,
+ };
+}
- beforeEach(() => {
- jest.clearAllMocks();
+function createDataMask(
+ filterId: string,
+ value: unknown = undefined,
+ extraFormData: Record = {},
+) {
+ return {
+ id: filterId,
+ filterState: { value },
+ extraFormData,
+ };
+}
- fetchMock.removeRoute(getTimeRangeNoFilterMockUrl);
- fetchMock.get(
- getTimeRangeNoFilterMockUrl,
- {
- result: { since: '', until: '', timeRange: 'No filter' },
+function createDivider(overrides: Record = {}) {
+ return {
+ id: 'NATIVE_FILTER_DIVIDER-1',
+ type: 'DIVIDER',
+ scope: { rootPath: ['ROOT_ID'], excluded: [] },
+ title: 'Select time range',
+ description: 'Select year/month etc..',
+ chartsInScope: [],
+ tabsInScope: [],
+ ...overrides,
+ };
+}
+
+function createStateWithFilter(
+ filter: ReturnType,
+ dataMask: ReturnType,
+ dashboardInfoOverrides: Record = {},
+) {
+ return {
+ ...stateWithoutNativeFilters,
+ dashboardInfo: {
+ id: 1,
+ dash_edit_perm: true,
+ metadata: {
+ native_filter_configuration: [filter],
},
- { name: getTimeRangeNoFilterMockUrl },
- );
+ ...dashboardInfoOverrides,
+ },
+ dashboardState: {
+ ...stateWithoutNativeFilters.dashboardState,
+ activeTabs: ['ROOT_ID'],
+ },
+ dataMask: { [filter.id]: dataMask },
+ nativeFilters: {
+ filters: { [filter.id]: filter },
+ filtersState: {},
+ },
+ };
+}
- fetchMock.removeRoute(getTimeRangeLastDayMockUrl);
- fetchMock.get(
- getTimeRangeLastDayMockUrl,
- {
- result: {
- since: '2021-04-13T00:00:00',
- until: '2021-04-14T00:00:00',
- timeRange: 'Last day',
- },
+function setupTimeRangeMocks() {
+ const urls = {
+ noFilter: 'glob:*/api/v1/time_range/?q=%27No%20filter%27',
+ lastDay: 'glob:*/api/v1/time_range/?q=%27Last%20day%27',
+ lastWeek: 'glob:*/api/v1/time_range/?q=%27Last%20week%27',
+ };
+
+ fetchMock.removeRoute(urls.noFilter);
+ fetchMock.get(
+ urls.noFilter,
+ { result: { since: '', until: '', timeRange: 'No filter' } },
+ { name: urls.noFilter },
+ );
+
+ fetchMock.removeRoute(urls.lastDay);
+ fetchMock.get(
+ urls.lastDay,
+ {
+ result: {
+ since: '2021-04-13T00:00:00',
+ until: '2021-04-14T00:00:00',
+ timeRange: 'Last day',
},
- { name: getTimeRangeLastDayMockUrl },
- );
+ },
+ { name: urls.lastDay },
+ );
- fetchMock.removeRoute(getTimeRangeLastWeekMockUrl);
- fetchMock.get(
- getTimeRangeLastWeekMockUrl,
- {
- result: {
- since: '2021-04-07T00:00:00',
- until: '2021-04-14T00:00:00',
- timeRange: 'Last week',
- },
+ fetchMock.removeRoute(urls.lastWeek);
+ fetchMock.get(
+ urls.lastWeek,
+ {
+ result: {
+ since: '2021-04-07T00:00:00',
+ until: '2021-04-14T00:00:00',
+ timeRange: 'Last week',
},
- { name: getTimeRangeLastWeekMockUrl },
- );
+ },
+ { name: urls.lastWeek },
+ );
+}
- mockedMakeApi.mockReturnValue(mockApi);
- });
+function renderFilterBar(
+ props: { filtersOpen: boolean; toggleFiltersBar: jest.Mock },
+ state?: object,
+) {
+ return render(
+ = ({
>(state => state.user);
const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);
+ const inScopeFilterIds = useMemo(
+ () => new Set(filtersInScope.map(f => f.id)),
+ [filtersInScope],
+ );
+
+ const hasOutOfScopeRequiredFilters = useMemo(
+ () =>
+ nativeFilterValues.some(
+ filter =>
+ !inScopeFilterIds.has(filter.id) &&
+ !!filter.controlValues?.enableEmptyFilter,
+ ),
+ [nativeFilterValues, inScopeFilterIds],
+ );
+
const [clearAllTriggers, setClearAllTriggers] = useState<
Record
>({});
@@ -238,7 +253,19 @@ const FilterBar: FC = ({
needsAutoApply);
if (shouldDispatch) {
- dispatch(updateDataMask(filter.id, dataMask));
+ // Strip validateStatus before dispatching to Redux
+ // validateStatus is UI-only state and shouldn't persist in Redux
+ const { filterState, ...restDataMask } = dataMask;
+ const dataMaskForRedux = filterState
+ ? {
+ ...restDataMask,
+ filterState: {
+ ...filterState,
+ validateStatus: undefined,
+ },
+ }
+ : dataMask;
+ dispatch(updateDataMask(filter.id, dataMaskForRedux));
}
// Mark filter as initialized after getting its first value WITH extraFormData
@@ -319,10 +346,49 @@ const FilterBar: FC = ({
}, [dashboardId, filters, previousDashboardId, setDataMaskSelected]);
const dataMaskAppliedText = JSON.stringify(dataMaskApplied);
+ const prevDataMaskAppliedRef = useRef(dataMaskApplied);
useEffect(() => {
- setDataMaskSelected(() => dataMaskApplied);
- }, [dataMaskAppliedText, setDataMaskSelected, dashboardId]);
+ const dashboardChanged = dashboardId !== previousDashboardId;
+
+ if (dashboardChanged) {
+ setDataMaskSelected(() => dataMaskApplied);
+ } else {
+ const prevApplied = prevDataMaskAppliedRef.current;
+
+ // Only sync filters whose applied state actually changed
+ setDataMaskSelected(prev => {
+ let hasChanges = false;
+ const updated = { ...prev };
+
+ Object.entries(dataMaskApplied).forEach(([filterId, appliedMask]) => {
+ const prevAppliedMask = prevApplied[filterId];
+ const appliedChanged = !isEqual(appliedMask, prevAppliedMask);
+ const notInitialized = !prev[filterId];
+
+ if (appliedChanged || notInitialized) {
+ updated[filterId] = appliedMask;
+ hasChanges = true;
+ }
+ });
+
+ // Remove stale entries that no longer exist in dataMaskApplied
+ Object.keys(updated).forEach(filterId => {
+ if (
+ !isChartCustomization(filterId) &&
+ !(filterId in dataMaskApplied)
+ ) {
+ delete updated[filterId];
+ hasChanges = true;
+ }
+ });
+
+ return hasChanges ? updated : prev;
+ });
+ }
+
+ prevDataMaskAppliedRef.current = dataMaskApplied;
+ }, [dataMaskApplied, setDataMaskSelected, dashboardId, previousDashboardId]);
useEffect(() => {
// embedded users can't persist filter combinations
@@ -351,7 +417,13 @@ const FilterBar: FC = ({
dispatch(logEvent(LOG_ACTIONS_CHANGE_DASHBOARD_FILTER, {}));
setUpdateKey(1);
- Object.entries(dataMaskSelected).forEach(([filterId, dataMask]) => {
+ const filtersToApply = getFiltersToApply(
+ dataMaskSelected,
+ inScopeFilterIds,
+ );
+
+ filtersToApply.forEach(filterId => {
+ const dataMask = dataMaskSelected[filterId];
if (dataMask) {
dispatch(updateDataMask(filterId, dataMask));
}
@@ -407,6 +479,7 @@ const FilterBar: FC = ({
}, [
dataMaskSelected,
dispatch,
+ inScopeFilterIds,
pendingChartCustomizations,
pendingCustomizationDataMasks,
hasClearedChartCustomizations,
@@ -415,8 +488,13 @@ const FilterBar: FC = ({
const handleClearAll = useCallback(() => {
const newClearAllTriggers = { ...clearAllTriggers };
+
nativeFilterValues.forEach(filter => {
const { id, filterType } = filter;
+
+ // Only clear in-scope filters
+ if (!inScopeFilterIds.has(id)) return;
+
// Range filters use [null, null] as the cleared value; others use undefined
const clearedValue =
filterType === 'filter_range' ? [null, null] : undefined;
@@ -468,6 +546,7 @@ const FilterBar: FC = ({
dataMaskSelected,
dataMaskApplied,
nativeFilterValues,
+ inScopeFilterIds,
setDataMaskSelected,
chartCustomizationValues,
clearAllTriggers,
@@ -506,6 +585,7 @@ const FilterBar: FC = ({
dataMaskSelected,
dataMaskApplied,
filtersInScope.filter(isNativeFilter),
+ nativeFilterValues,
);
const isApplyDisabled =
@@ -527,6 +607,7 @@ const FilterBar: FC = ({
dataMaskApplied={dataMaskApplied}
isApplyDisabled={isApplyDisabled}
chartCustomizationItems={chartCustomizationValues}
+ hasOutOfScopeRequiredFilters={hasOutOfScopeRequiredFilters}
/>
),
[
@@ -538,6 +619,7 @@ const FilterBar: FC = ({
dataMaskApplied,
isApplyDisabled,
chartCustomizationValues,
+ hasOutOfScopeRequiredFilters,
],
);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
index 9ba19fc15be..3dea16864d7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { SupersetClient } from '@superset-ui/core';
-import { logging } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
import { DashboardPermalinkValue } from 'src/dashboard/types';
const assembleEndpoint = (
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.test.ts
index e2ca95c5c67..accb766a7b2 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.test.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.test.ts
@@ -17,402 +17,771 @@
* under the License.
*/
-import { DataMaskStateWithId, Filter } from '@superset-ui/core';
+import {
+ DataMaskStateWithId,
+ DataRecordValue,
+ Filter,
+ FilterState,
+} from '@superset-ui/core';
import {
checkIsApplyDisabled,
checkIsValidateError,
checkIsMissingRequiredValue,
+ getOnlyExtraFormData,
+ getFiltersToApply,
} from './utils';
-// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
-describe('FilterBar Utils - Validation and Apply Logic', () => {
- // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
- describe('checkIsValidateError', () => {
- test('should return true when no filters have validation errors', () => {
- const dataMask: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined,
- value: ['CA'],
- },
- extraFormData: {},
- },
- 'filter-2': {
- id: 'filter-2',
- filterState: {
- validateStatus: undefined,
- value: ['NY'],
- },
- extraFormData: {},
- },
- };
+// Factory functions for test data
+function createDataMaskEntry(
+ id: string,
+ overrides: {
+ value?: unknown;
+ validateStatus?: 'error' | undefined;
+ extraFormData?: Record;
+ } = {},
+) {
+ const { value, validateStatus, extraFormData = {} } = overrides;
+ return {
+ id,
+ filterState: {
+ value,
+ validateStatus,
+ },
+ extraFormData,
+ };
+}
- expect(checkIsValidateError(dataMask)).toBe(true);
- });
+function createFilter(
+ id: string,
+ overrides: {
+ enableEmptyFilter?: boolean;
+ controlValues?: Record;
+ } = {},
+): Filter {
+ const { enableEmptyFilter, controlValues = {} } = overrides;
+ return {
+ id,
+ controlValues: {
+ ...(enableEmptyFilter !== undefined && { enableEmptyFilter }),
+ ...controlValues,
+ },
+ } as unknown as Filter;
+}
- test('should return false when any filter has validation error', () => {
- const dataMask: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: 'error',
- value: undefined,
- },
- extraFormData: {},
- },
- 'filter-2': {
- id: 'filter-2',
- filterState: {
- validateStatus: undefined,
- value: ['NY'],
- },
- extraFormData: {},
- },
- };
+function createExtraFormDataWithFilter(
+ col: string,
+ val: DataRecordValue[],
+ op: 'IN' | 'NOT IN' = 'IN',
+) {
+ return {
+ filters: [{ col, op, val }],
+ };
+}
- expect(checkIsValidateError(dataMask)).toBe(false);
- });
+// getOnlyExtraFormData tests
+test('getOnlyExtraFormData extracts extraFormData from all filters when no filterIds provided', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: { filters: [{ col: 'state', op: 'IN', val: ['CA'] }] },
+ },
+ 'filter-2': {
+ id: 'filter-2',
+ filterState: { value: ['NY'] },
+ extraFormData: { filters: [{ col: 'city', op: 'IN', val: ['NY'] }] },
+ },
+ };
- test('should handle empty dataMask', () => {
- const dataMask: DataMaskStateWithId = {};
- expect(checkIsValidateError(dataMask)).toBe(true);
- });
+ const result = getOnlyExtraFormData(dataMask);
- test('should handle filters without filterState', () => {
- const dataMask: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- extraFormData: {},
- },
- };
-
- expect(checkIsValidateError(dataMask)).toBe(true);
- });
- });
-
- // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
- describe('checkIsMissingRequiredValue', () => {
- test('should return true for required filter with undefined value', () => {
- const filter = {
- id: 'test-filter',
- controlValues: {
- enableEmptyFilter: true,
- },
- } as unknown as Filter;
-
- const filterState = {
- value: undefined,
- };
-
- expect(checkIsMissingRequiredValue(filter, filterState)).toBe(true);
- });
-
- test('should return true for required filter with null value', () => {
- const filter = {
- id: 'test-filter',
- controlValues: {
- enableEmptyFilter: true,
- },
- } as unknown as Filter;
-
- const filterState = {
- value: null,
- };
-
- expect(checkIsMissingRequiredValue(filter, filterState)).toBe(true);
- });
-
- test('should return false for required filter with valid value', () => {
- const filter = {
- id: 'test-filter',
- controlValues: {
- enableEmptyFilter: true,
- },
- } as unknown as Filter;
-
- const filterState = {
- value: ['CA'],
- };
-
- expect(checkIsMissingRequiredValue(filter, filterState)).toBe(false);
- });
-
- test('should return false for non-required filter with undefined value', () => {
- const filter = {
- id: 'test-filter',
- controlValues: {
- enableEmptyFilter: false,
- },
- } as unknown as Filter;
-
- const filterState = {
- value: undefined,
- };
-
- expect(checkIsMissingRequiredValue(filter, filterState)).toBe(false);
- });
-
- test('should return false for filter without controlValues', () => {
- const filter = {
- id: 'test-filter',
- } as Filter;
-
- const filterState = {
- value: undefined,
- };
-
- // checkIsMissingRequiredValue returns undefined when controlValues is missing
- // undefined is falsy, so we check for truthiness instead of exact false
- expect(checkIsMissingRequiredValue(filter, filterState)).toBeFalsy();
- });
- });
-
- // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
- describe('checkIsApplyDisabled', () => {
- test('should return true when filters have validation errors', () => {
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: 'error',
- value: undefined,
- },
- extraFormData: {},
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const filters: Filter[] = [
- {
- id: 'filter-1',
- controlValues: {
- enableEmptyFilter: true,
- },
- } as unknown as Filter,
- ];
-
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(true);
- });
-
- test('should return false when selected and applied states differ', () => {
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined,
- value: ['NY'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['NY'] }],
- },
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const filters: Filter[] = [
- {
- id: 'filter-1',
- controlValues: {
- enableEmptyFilter: false,
- },
- } as unknown as Filter,
- ];
-
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(false);
- });
-
- test('should return true when selected and applied states are identical', () => {
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined,
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const filters: Filter[] = [
- {
- id: 'filter-1',
- controlValues: {
- enableEmptyFilter: false,
- },
- } as unknown as Filter,
- ];
-
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(true);
- });
-
- test('should return true when required filter is missing value in selected state', () => {
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined,
- value: undefined,
- },
- extraFormData: {},
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const filters: Filter[] = [
- {
- id: 'filter-1',
- controlValues: {
- enableEmptyFilter: true, // Required filter
- },
- } as unknown as Filter,
- ];
-
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(true);
- });
-
- test('should handle filter count mismatch', () => {
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined,
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- 'filter-2': {
- id: 'filter-2',
- filterState: {
- validateStatus: undefined,
- value: ['Product A'],
- },
- extraFormData: {
- filters: [{ col: 'product', op: 'IN', val: ['Product A'] }],
- },
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- // Missing filter-2
- };
-
- const filters: Filter[] = [
- { id: 'filter-1', controlValues: {} } as unknown as Filter,
- { id: 'filter-2', controlValues: {} } as unknown as Filter,
- ];
-
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(true);
- });
-
- test('should handle validation status recalculation scenario', () => {
- // Scenario: Filter was required and had error, then user selected value
- // The validateStatus should be cleared and Apply should be enabled
-
- const dataMaskSelected: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- validateStatus: undefined, // Error cleared after selection
- value: ['CA'],
- },
- extraFormData: {
- filters: [{ col: 'state', op: 'IN', val: ['CA'] }],
- },
- },
- };
-
- const dataMaskApplied: DataMaskStateWithId = {
- 'filter-1': {
- id: 'filter-1',
- filterState: {
- value: undefined, // Previously cleared
- },
- extraFormData: {},
- },
- };
-
- const filters: Filter[] = [
- {
- id: 'filter-1',
- controlValues: {
- enableEmptyFilter: true,
- },
- } as unknown as Filter,
- ];
-
- // Should be enabled because states differ and no validation errors
- expect(
- checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters),
- ).toBe(false);
- });
+ expect(result).toEqual({
+ 'filter-1': { filters: [{ col: 'state', op: 'IN', val: ['CA'] }] },
+ 'filter-2': { filters: [{ col: 'city', op: 'IN', val: ['NY'] }] },
});
});
+
+test('getOnlyExtraFormData only extracts extraFormData for specified filterIds', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: { filters: [{ col: 'state', op: 'IN', val: ['CA'] }] },
+ },
+ 'filter-2': {
+ id: 'filter-2',
+ filterState: { value: ['NY'] },
+ extraFormData: { filters: [{ col: 'city', op: 'IN', val: ['NY'] }] },
+ },
+ 'filter-3': {
+ id: 'filter-3',
+ filterState: { value: ['Product'] },
+ extraFormData: {
+ filters: [{ col: 'product', op: 'IN', val: ['Product'] }],
+ },
+ },
+ };
+
+ const filterIds = new Set(['filter-1', 'filter-3']);
+ const result = getOnlyExtraFormData(dataMask, filterIds);
+
+ expect(result).toEqual({
+ 'filter-1': { filters: [{ col: 'state', op: 'IN', val: ['CA'] }] },
+ 'filter-3': { filters: [{ col: 'product', op: 'IN', val: ['Product'] }] },
+ });
+ expect(result).not.toHaveProperty('filter-2');
+});
+
+test('getOnlyExtraFormData returns empty object when filterIds is empty set', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: { filters: [{ col: 'state', op: 'IN', val: ['CA'] }] },
+ },
+ };
+
+ const filterIds = new Set();
+ const result = getOnlyExtraFormData(dataMask, filterIds);
+
+ expect(result).toEqual({});
+});
+
+// checkIsValidateError tests
+test('checkIsValidateError returns true when no filters have validation errors', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': createDataMaskEntry('filter-1', { value: ['CA'] }),
+ 'filter-2': createDataMaskEntry('filter-2', { value: ['NY'] }),
+ };
+
+ expect(checkIsValidateError(dataMask)).toBe(true);
+});
+
+test('checkIsValidateError returns false when any filter has validation error', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': createDataMaskEntry('filter-1', { validateStatus: 'error' }),
+ 'filter-2': createDataMaskEntry('filter-2', { value: ['NY'] }),
+ };
+
+ expect(checkIsValidateError(dataMask)).toBe(false);
+});
+
+test('checkIsValidateError handles empty dataMask', () => {
+ const dataMask: DataMaskStateWithId = {};
+ expect(checkIsValidateError(dataMask)).toBe(true);
+});
+
+test('checkIsValidateError handles filters without filterState', () => {
+ const dataMask: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ extraFormData: {},
+ },
+ };
+
+ expect(checkIsValidateError(dataMask)).toBe(true);
+});
+
+// checkIsMissingRequiredValue tests
+test('checkIsMissingRequiredValue returns true for required filter with undefined value', () => {
+ const filter = createFilter('test-filter', { enableEmptyFilter: true });
+ const filterState: FilterState = { value: undefined };
+
+ expect(checkIsMissingRequiredValue(filter, filterState)).toBe(true);
+});
+
+test('checkIsMissingRequiredValue returns true for required filter with null value', () => {
+ const filter = createFilter('test-filter', { enableEmptyFilter: true });
+ const filterState: FilterState = { value: null };
+
+ expect(checkIsMissingRequiredValue(filter, filterState)).toBe(true);
+});
+
+test('checkIsMissingRequiredValue returns false for required filter with valid value', () => {
+ const filter = createFilter('test-filter', { enableEmptyFilter: true });
+ const filterState: FilterState = { value: ['CA'] };
+
+ expect(checkIsMissingRequiredValue(filter, filterState)).toBe(false);
+});
+
+test('checkIsMissingRequiredValue returns false for non-required filter with undefined value', () => {
+ const filter = createFilter('test-filter', { enableEmptyFilter: false });
+ const filterState: FilterState = { value: undefined };
+
+ expect(checkIsMissingRequiredValue(filter, filterState)).toBe(false);
+});
+
+test('checkIsMissingRequiredValue returns falsy for filter without controlValues', () => {
+ const filter = { id: 'test-filter' } as Filter;
+ const filterState: FilterState = { value: undefined };
+
+ expect(checkIsMissingRequiredValue(filter, filterState)).toBeFalsy();
+});
+
+// checkIsApplyDisabled tests
+test('checkIsApplyDisabled returns true when filters have validation errors', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': createDataMaskEntry('filter-1', { validateStatus: 'error' }),
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const filters = [createFilter('filter-1', { enableEmptyFilter: true })];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ true,
+ );
+});
+
+test('checkIsApplyDisabled returns false when selected and applied states differ', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['NY'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['NY']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const filters = [createFilter('filter-1', { enableEmptyFilter: false })];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ false,
+ );
+});
+
+test('checkIsApplyDisabled returns true when selected and applied states are identical', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const filters = [createFilter('filter-1', { enableEmptyFilter: false })];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ true,
+ );
+});
+
+test('checkIsApplyDisabled returns true when required filter is missing value in selected state', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': createDataMaskEntry('filter-1', { value: undefined }),
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const filters = [createFilter('filter-1', { enableEmptyFilter: true })];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ true,
+ );
+});
+
+test('checkIsApplyDisabled handles filter count mismatch', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ 'filter-2': {
+ id: 'filter-2',
+ filterState: { value: ['Product A'] },
+ extraFormData: createExtraFormDataWithFilter('product', ['Product A']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const filters = [createFilter('filter-1'), createFilter('filter-2')];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ true,
+ );
+});
+
+test('checkIsApplyDisabled handles validation status recalculation scenario', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { validateStatus: undefined, value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-1': {
+ id: 'filter-1',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const filters = [createFilter('filter-1', { enableEmptyFilter: true })];
+
+ expect(checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filters)).toBe(
+ false,
+ );
+});
+
+test('checkIsApplyDisabled detects out-of-scope changes and enables Apply for explicit user changes', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ 'filter-out-of-scope': {
+ id: 'filter-out-of-scope',
+ filterState: { value: ['New Product'] },
+ extraFormData: createExtraFormDataWithFilter('product', ['New Product']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ 'filter-out-of-scope': {
+ id: 'filter-out-of-scope',
+ filterState: { value: ['Product A'] },
+ extraFormData: createExtraFormDataWithFilter('product', ['Product A']),
+ },
+ };
+ const filtersInScope = [createFilter('filter-in-scope')];
+
+ expect(
+ checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filtersInScope),
+ ).toBe(false);
+});
+
+test('checkIsApplyDisabled enables apply when in-scope filter has changes regardless of out-of-scope state', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ 'filter-out-of-scope': {
+ id: 'filter-out-of-scope',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['NY'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['NY']),
+ },
+ 'filter-out-of-scope': {
+ id: 'filter-out-of-scope',
+ filterState: { value: ['Product A'] },
+ extraFormData: createExtraFormDataWithFilter('product', ['Product A']),
+ },
+ };
+ const filtersInScope = [createFilter('filter-in-scope')];
+
+ expect(
+ checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filtersInScope),
+ ).toBe(false);
+});
+
+test('checkIsApplyDisabled only validates required filters that are in scope', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['CA'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['CA']),
+ },
+ 'filter-out-of-scope-required': {
+ id: 'filter-out-of-scope-required',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'filter-in-scope': {
+ id: 'filter-in-scope',
+ filterState: { value: ['NY'] },
+ extraFormData: createExtraFormDataWithFilter('state', ['NY']),
+ },
+ 'filter-out-of-scope-required': {
+ id: 'filter-out-of-scope-required',
+ filterState: { value: ['Product A'] },
+ extraFormData: createExtraFormDataWithFilter('product', ['Product A']),
+ },
+ };
+ const filtersInScope = [createFilter('filter-in-scope')];
+
+ expect(
+ checkIsApplyDisabled(dataMaskSelected, dataMaskApplied, filtersInScope),
+ ).toBe(false);
+});
+
+test('CRITICAL: checkIsApplyDisabled Apply button must be ENABLED when out-of-scope filter has explicit changes', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['same-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['same-value']),
+ },
+ 'tab-b-filter': {
+ id: 'tab-b-filter',
+ filterState: { value: ['new-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['new-value']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['same-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['same-value']),
+ },
+ 'tab-b-filter': {
+ id: 'tab-b-filter',
+ filterState: { value: ['old-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['old-value']),
+ },
+ };
+ const filtersInScope = [createFilter('tab-a-filter')];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ );
+ expect(result).toBe(false);
+});
+
+test('CRITICAL: checkIsApplyDisabled Apply button must only consider in-scope required filter validation', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-required': {
+ id: 'tab-a-required',
+ filterState: { value: ['has-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['has-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'tab-a-required': {
+ id: 'tab-a-required',
+ filterState: { value: ['old-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['old-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: ['had-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['had-value']),
+ },
+ };
+ const filtersInScope = [
+ createFilter('tab-a-required', { enableEmptyFilter: true }),
+ ];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ );
+ expect(result).toBe(false);
+});
+
+test('checkIsApplyDisabled disables Apply when in-scope required filter is empty', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'required-filter': {
+ id: 'required-filter',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'required-filter': {
+ id: 'required-filter',
+ filterState: { value: ['had-value'] },
+ extraFormData: createExtraFormDataWithFilter('col', ['had-value']),
+ },
+ };
+ const filtersInScope = [
+ createFilter('required-filter', { enableEmptyFilter: true }),
+ ];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ );
+ expect(result).toBe(true);
+});
+
+test('checkIsApplyDisabled enabled when in-scope filter has changes, even if out-of-scope required is empty', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['new-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['new-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['old-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['old-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: ['was-set'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['was-set']),
+ },
+ };
+ const filtersInScope = [createFilter('tab-a-filter')];
+ const allFilters = [
+ createFilter('tab-a-filter'),
+ createFilter('tab-b-required', { enableEmptyFilter: true }),
+ ];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ allFilters,
+ );
+ expect(result).toBe(false);
+});
+
+test('checkIsApplyDisabled disabled when ONLY out-of-scope changes exist and required filter is empty', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['same-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['same-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['same-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['same-value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: ['was-set'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['was-set']),
+ },
+ };
+ const filtersInScope = [createFilter('tab-a-filter')];
+ const allFilters = [
+ createFilter('tab-a-filter'),
+ createFilter('tab-b-required', { enableEmptyFilter: true }),
+ ];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ allFilters,
+ );
+ expect(result).toBe(true);
+});
+
+test('checkIsApplyDisabled enabled when user sets value for out-of-scope required filter', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: ['user-selected'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['user-selected']),
+ },
+ };
+ const dataMaskApplied: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['value'] },
+ extraFormData: createExtraFormDataWithFilter('col_a', ['value']),
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: ['old-value'] },
+ extraFormData: createExtraFormDataWithFilter('col_b', ['old-value']),
+ },
+ };
+ const filtersInScope = [createFilter('tab-a-filter')];
+ const allFilters = [
+ createFilter('tab-a-filter'),
+ createFilter('tab-b-required', { enableEmptyFilter: true }),
+ ];
+
+ const result = checkIsApplyDisabled(
+ dataMaskSelected,
+ dataMaskApplied,
+ filtersInScope,
+ allFilters,
+ );
+ expect(result).toBe(false);
+});
+
+// getFiltersToApply tests
+test('CRITICAL: getFiltersToApply includes in-scope filters regardless of value', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'in-scope-with-value': {
+ id: 'in-scope-with-value',
+ filterState: { value: ['CA'] },
+ extraFormData: {},
+ },
+ 'in-scope-empty': {
+ id: 'in-scope-empty',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const inScopeFilterIds = new Set(['in-scope-with-value', 'in-scope-empty']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).toContain('in-scope-with-value');
+ expect(result).toContain('in-scope-empty');
+});
+
+test('CRITICAL: getFiltersToApply includes out-of-scope filters ONLY if they have a value', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'in-scope': {
+ id: 'in-scope',
+ filterState: { value: ['CA'] },
+ extraFormData: {},
+ },
+ 'out-of-scope-with-value': {
+ id: 'out-of-scope-with-value',
+ filterState: { value: ['Product'] },
+ extraFormData: {},
+ },
+ 'out-of-scope-empty': {
+ id: 'out-of-scope-empty',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ 'out-of-scope-null': {
+ id: 'out-of-scope-null',
+ filterState: { value: null },
+ extraFormData: {},
+ },
+ };
+ const inScopeFilterIds = new Set(['in-scope']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).toContain('in-scope');
+ expect(result).toContain('out-of-scope-with-value');
+ expect(result).not.toContain('out-of-scope-empty');
+ expect(result).not.toContain('out-of-scope-null');
+});
+
+test('CRITICAL: getFiltersToApply scenario - Clear All on Tab B, then apply on Tab A', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['selected-value'] },
+ extraFormData: {},
+ },
+ 'tab-b-required': {
+ id: 'tab-b-required',
+ filterState: { value: undefined },
+ extraFormData: {},
+ },
+ };
+ const inScopeFilterIds = new Set(['tab-a-filter']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).toContain('tab-a-filter');
+ expect(result).not.toContain('tab-b-required');
+});
+
+test('CRITICAL: getFiltersToApply scenario - Change out-of-scope filter via "Filters out of scope" panel', () => {
+ const dataMaskSelected: DataMaskStateWithId = {
+ 'tab-a-filter': {
+ id: 'tab-a-filter',
+ filterState: { value: ['value-a'] },
+ extraFormData: {},
+ },
+ 'tab-b-filter': {
+ id: 'tab-b-filter',
+ filterState: { value: ['value-b'] },
+ extraFormData: {},
+ },
+ };
+ const inScopeFilterIds = new Set(['tab-a-filter']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).toContain('tab-a-filter');
+ expect(result).toContain('tab-b-filter');
+});
+
+test('getFiltersToApply handles empty dataMaskSelected', () => {
+ const dataMaskSelected: DataMaskStateWithId = {};
+ const inScopeFilterIds = new Set(['filter-1']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).toEqual([]);
+});
+
+test('getFiltersToApply handles null dataMask entries', () => {
+ const dataMaskSelected = {
+ 'filter-1': null,
+ 'filter-2': {
+ id: 'filter-2',
+ filterState: { value: ['CA'] },
+ extraFormData: {},
+ },
+ } as unknown as DataMaskStateWithId;
+ const inScopeFilterIds = new Set(['filter-1', 'filter-2']);
+
+ const result = getFiltersToApply(dataMaskSelected, inScopeFilterIds);
+
+ expect(result).not.toContain('filter-1');
+ expect(result).toContain('filter-2');
+});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts
index 78e0fbf05c6..b28a24bcf1d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts
@@ -17,7 +17,13 @@
* under the License.
*/
-import { DataMaskStateWithId, Filter, FilterState } from '@superset-ui/core';
+import {
+ DataMaskStateWithId,
+ ExtraFormData,
+ Filter,
+ FilterState,
+} from '@superset-ui/core';
+import { isEqual } from 'lodash';
import { useSelector } from 'react-redux';
import { createSelector } from '@reduxjs/toolkit';
import { areObjectsEqual } from 'src/reduxUtils';
@@ -25,9 +31,16 @@ import { testWithId } from 'src/utils/testUtils';
import { RootState } from 'src/dashboard/types';
import { FilterElement } from './FilterControls/types';
-export const getOnlyExtraFormData = (data: DataMaskStateWithId) =>
- Object.values(data).reduce(
- (prev, next) => ({ ...prev, [next.id]: next.extraFormData }),
+export const getOnlyExtraFormData = (
+ data: DataMaskStateWithId,
+ filterIds?: Set,
+): Record =>
+ Object.values(data).reduce>(
+ (prev, next) => {
+ // If filterIds is provided, only include those filters
+ if (filterIds && !filterIds.has(next.id)) return prev;
+ return { ...prev, [next.id]: next.extraFormData };
+ },
{},
);
@@ -40,11 +53,9 @@ export const checkIsMissingRequiredValue = (
if (!isRequired) return false;
const value = filterState?.value;
+
// TODO: this property should be unhardcoded
- return (
- filter.controlValues?.enableEmptyFilter &&
- (value === null || value === undefined)
- );
+ return value === null || value === undefined;
};
export const checkIsValidateError = (dataMask: DataMaskStateWithId) => {
@@ -55,37 +66,84 @@ export const checkIsValidateError = (dataMask: DataMaskStateWithId) => {
export const checkIsApplyDisabled = (
dataMaskSelected: DataMaskStateWithId,
dataMaskApplied: DataMaskStateWithId,
- filters: Filter[],
+ filtersInScope: Filter[],
+ allFilters?: Filter[],
) => {
- if (!checkIsValidateError(dataMaskSelected)) {
- return true;
- }
-
- const dataSelectedValues = Object.values(dataMaskSelected);
- const dataAppliedValues = Object.values(dataMaskApplied);
-
- const hasMissingRequiredFilter = filters.some(filter =>
- checkIsMissingRequiredValue(
- filter,
- dataMaskSelected?.[filter?.id]?.filterState,
- ),
- );
+ if (!checkIsValidateError(dataMaskSelected)) return true;
const selectedExtraFormData = getOnlyExtraFormData(dataMaskSelected);
const appliedExtraFormData = getOnlyExtraFormData(dataMaskApplied);
- const areEqual = areObjectsEqual(
+ // Check counts first
+ const selectedCount = Object.keys(selectedExtraFormData).length;
+ const appliedCount = Object.keys(appliedExtraFormData).length;
+
+ if (selectedCount !== appliedCount) return true;
+
+ // Check for changes
+ const dataEqual = areObjectsEqual(
selectedExtraFormData,
appliedExtraFormData,
{ ignoreUndefined: true },
);
- const result =
- areEqual ||
- dataSelectedValues.length !== dataAppliedValues.length ||
- hasMissingRequiredFilter;
+ // If no changes at all, Apply should be disabled
+ if (dataEqual) return true;
- return result;
+ // Determine which filters to validate for required values
+ const inScopeFilterIds = new Set(filtersInScope.map(f => f.id));
+
+ // Check if changes are in-scope or out-of-scope
+ const hasInScopeChanges = filtersInScope.some(filter => {
+ const selected = selectedExtraFormData[filter.id];
+ const applied = appliedExtraFormData[filter.id];
+ return !isEqual(selected, applied);
+ });
+
+ // Determine which filters to validate for required values
+ const hasOutOfScopeChanges =
+ !hasInScopeChanges &&
+ allFilters?.some(filter => {
+ if (inScopeFilterIds.has(filter.id)) return false;
+ const selected = selectedExtraFormData[filter.id];
+ const applied = appliedExtraFormData[filter.id];
+ return !isEqual(selected, applied);
+ });
+
+ const shouldValidateAllRequired =
+ hasOutOfScopeChanges && allFilters && allFilters.length > 0;
+ const filtersToValidateRequired = shouldValidateAllRequired
+ ? allFilters
+ : filtersInScope;
+
+ // Check if any required filter is missing a value
+ // For filters that may have been auto-applied (e.g., requiredFirst filters),
+ // check both selected and applied states to avoid false positives during initialization
+ const hasMissingRequiredFilter = filtersToValidateRequired.some(filter => {
+ const selectedDataMask = dataMaskSelected?.[filter?.id];
+ const selectedState = selectedDataMask?.filterState;
+ const appliedState = dataMaskApplied?.[filter?.id]?.filterState;
+
+ // If filter has value in selected state, it's not missing
+ if (selectedState?.value !== null && selectedState?.value !== undefined) {
+ return false;
+ }
+
+ // If filter is not in selected state at all (not initialized yet),
+ // check if it was auto-applied and has value in applied state
+ // This handles the case where auto-applied filters haven't synced to selected yet
+ if (!selectedDataMask) {
+ if (appliedState?.value !== null && appliedState?.value !== undefined) {
+ return false; // Not missing, it's auto-applied
+ }
+ }
+
+ // Otherwise, check if it's actually a required filter with missing value
+ // This includes cases where user explicitly cleared the value (selectedDataMask exists but value is undefined)
+ return checkIsMissingRequiredValue(filter, selectedState);
+ });
+
+ return hasMissingRequiredFilter;
};
const chartsVerboseMapSelector = createSelector(
@@ -111,5 +169,26 @@ export const useChartsVerboseMaps = () =>
chartsVerboseMapSelector,
);
+/**
+ * Determines which filters should be applied when the Apply button is clicked.
+ */
+export const getFiltersToApply = (
+ dataMaskSelected: DataMaskStateWithId,
+ inScopeFilterIds: Set,
+): string[] =>
+ Object.entries(dataMaskSelected)
+ .filter(([filterId, dataMask]) => {
+ if (!dataMask) return false;
+
+ const isInScope = inScopeFilterIds.has(filterId);
+ const hasValue =
+ dataMask.filterState?.value !== undefined &&
+ dataMask.filterState?.value !== null;
+
+ // Apply if in-scope OR if out-of-scope with a value
+ return isInScope || hasValue;
+ })
+ .map(([filterId]) => filterId);
+
export const FILTER_BAR_TEST_ID = 'filter-bar';
export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
index b02102dfd6e..d2e6b4d8e13 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
@@ -18,9 +18,9 @@
*/
import { memo, useCallback, useMemo } from 'react';
import { useDispatch } from 'react-redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { useTruncation } from '@superset-ui/core';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
import { List } from '@superset-ui/core/components/List';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 5e0f6c7678c..07292072cbf 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -18,7 +18,7 @@
*/
import { useSelector } from 'react-redux';
import { isChartCustomization, useTruncation } from '@superset-ui/core';
-import { css, SupersetTheme, useTheme } from '@apache-superset/core/ui';
+import { css, SupersetTheme, useTheme } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { useFilterConfigModal } from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink/useFilterConfigModal';
import { RootState } from 'src/dashboard/types';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
index 3761e6ae04c..fdd9e5ddc94 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { memo, useMemo } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { useTruncation } from '@superset-ui/core';
-import { css } from '@apache-superset/core/ui';
+import { css } from '@apache-superset/core/theme';
import { List } from '@superset-ui/core/components/List';
import { useFilterScope } from './useFilterScope';
import { Row, RowLabel, RowTruncationCount, RowValue } from './Styles';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
index 618937dbbee..c268a963f7a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { css, styled } from '@apache-superset/core/ui';
+import { css, styled } from '@apache-superset/core/theme';
export const Row = styled.div`
${({ theme }) => css`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TypeRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TypeRow.tsx
index 25b4b583bf9..fa6b7d83cdb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TypeRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TypeRow.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useMemo } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
getChartMetadataRegistry,
isChartCustomization,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
index 9b7cd356696..542ac07ed1a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
@@ -18,7 +18,7 @@
*/
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Layout, LayoutItem, RootState } from 'src/dashboard/types';
import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalContent/ConfigModalContent.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalContent/ConfigModalContent.tsx
index 30c7471010c..156a710e498 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalContent/ConfigModalContent.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalContent/ConfigModalContent.tsx
@@ -24,7 +24,7 @@ import {
ChartCustomizationDivider,
} from '@superset-ui/core';
import type { FormInstance } from '@superset-ui/core/components';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { Flex } from '@superset-ui/core/components';
import FilterContentRenderer from './FilterContentRenderer';
import CustomizationContentRenderer from './CustomizationContentRenderer';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
index a2b9fdc31d0..feb6ce87679 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { FC, ReactNode, useCallback, useState } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { NativeFilterType, ChartCustomizationType } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { Collapse, Flex } from '@superset-ui/core/components';
import type { DragEndEvent } from '@dnd-kit/core';
import {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
index da00b8dbe6c..11f511548cc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
@@ -18,9 +18,9 @@
*/
import { FC } from 'react';
import { FormItem, Input } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { NativeFilterType, ChartCustomizationType } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { CHART_CUSTOMIZATION_DIVIDER_PREFIX } from './utils';
interface Props {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
index 170c22566db..4cb66c2ed65 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import type { CSSProperties, FC, ReactNode } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
index 74567b95f76..d2ca28ef557 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
@@ -18,7 +18,7 @@
*/
import { FC, ReactNode } from 'react';
import { NativeFilterType } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import FilterTitlePane from './FilterTitlePane';
import { FilterRemoval } from './types';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
index a5414fd5b82..b04a63ecf6d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
@@ -18,8 +18,8 @@
*/
import { forwardRef, useCallback, useState } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import type { DragEndEvent } from '@dnd-kit/core';
import {
@@ -168,6 +168,7 @@ const FilterTitleContainer = forwardRef(
key={`filter-title-tab-${id}`}
onClick={() => onChange(id)}
className={classNames.join(' ')}
+ aria-selected={isActive}
>
{dropIndicatorProps && }
{!isReport && topLevelTabs && !uiConfig.hideNav && (
{
),
[
- nativeFiltersEnabled,
- filterBarOrientation,
editMode,
handleChangeTab,
handleDeleteTopLevelTabs,
- hideDashboardHeader,
isReport,
topLevelTabs,
uiConfig.hideNav,
@@ -622,6 +627,7 @@ const DashboardBuilder = () => {
ref={headerRef}
filterBarWidth={headerFilterBarWidth}
>
+ {headerContent}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index e7800e583c0..ab6a9f22e69 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -18,7 +18,7 @@
*/
/* eslint-disable react-hooks/rules-of-hooks */
import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
Behavior,
ChartDataResponseResult,
@@ -36,8 +36,8 @@ import {
getClientErrorObject,
getExtensionsRegistry,
} from '@superset-ui/core';
-import { styled, useTheme, css } from '@apache-superset/core/ui';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { styled, useTheme, css } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
import { debounce, isEqual } from 'lodash';
import {
forwardRef,
@@ -821,6 +821,11 @@ const FiltersConfigForm = (
);
return (
setActiveTabKey(activeKey)}
items={[
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx
index 52f0fd83565..a861d980abc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx
@@ -18,8 +18,8 @@
*/
import { Button, type OnClickHandler } from '@superset-ui/core/components';
import { FC } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
const RemovedContent = styled.div`
display: flex;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
index 52952a2d0f4..9fc2ce6dd91 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
export const INPUT_HEIGHT = 32;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
index 35ec66ad90a..23348694fdf 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
@@ -25,13 +25,13 @@ import {
Tooltip,
type FormInstance,
} from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
Filter,
ChartCustomization,
getChartControlPanelRegistry,
} from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import {
doesColumnMatchFilterType,
getControlItems,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
index 34cb567e07c..3c339b07042 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
@@ -18,7 +18,7 @@
*/
import { useEffect, useState } from 'react';
import type { FormInstance } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { ChartCustomization, Filter } from '@superset-ui/core';
import { NativeFiltersForm, NativeFiltersFormItem } from '../types';
import { setNativeFilterFieldValues, useForceUpdate } from './utils';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.test.ts
index 386eb87c718..65d5313d86e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.test.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.test.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { Column } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import {
ChartsState,
DatasourcesState,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
index 82c3319660e..7c05f393cee 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
@@ -21,7 +21,7 @@ import type { FormInstance } from '@superset-ui/core/components';
import { useState, useCallback } from 'react';
import { CustomControlItem, Dataset } from '@superset-ui/chart-controls';
import { Column, ensureIsArray } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import { DatasourcesState, ChartsState } from 'src/dashboard/types';
import { FILTER_SUPPORTED_TYPES } from './constants';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index c5c2143b480..3cfe83434fe 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -18,9 +18,9 @@
*/
import { memo, useEffect, useCallback, useMemo, useState, useRef } from 'react';
import { uniq, debounce } from 'lodash';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { ChartCustomizationType, NativeFilterType } from '@superset-ui/core';
-import { styled, css, useTheme } from '@apache-superset/core/ui';
+import { styled, css, useTheme } from '@apache-superset/core/theme';
import { Constants, Form, Icons, Flex } from '@superset-ui/core/components';
import { ErrorBoundary } from 'src/components';
import { testWithId } from 'src/utils/testUtils';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx
index 05eaa30969a..4b2f7925ebf 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/CancelConfirmationAlert.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { ReactNode } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Button, type OnClickHandler } from '@superset-ui/core/components';
-import { Alert } from '@apache-superset/core/ui';
+import { Alert } from '@apache-superset/core/components';
export interface ConfirmationAlertProps {
title: string;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/Footer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/Footer.tsx
index ce586b10c38..cdcc950b8ba 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/Footer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/Footer/Footer.tsx
@@ -18,7 +18,7 @@
*/
import { FC } from 'react';
import { Button, type OnClickHandler } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { CancelConfirmationAlert } from './CancelConfirmationAlert';
type FooterProps = {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
index 70c4692e1e0..1d00f81e77d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ItemTitleContainer.tsx
@@ -18,8 +18,8 @@
*/
import { forwardRef, useState } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { useDndMonitor } from '@dnd-kit/core';
import {
@@ -141,6 +141,7 @@ const ItemTitleContainer = forwardRef(
key={`item-title-tab-${id}`}
onClick={() => onChange(id)}
className={classNames.join(' ')}
+ aria-selected={isActive}
>
css`
body {
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
index 85df31047bc..49b05812468 100644
--- a/superset-frontend/src/dashboard/types.ts
+++ b/superset-frontend/src/dashboard/types.ts
@@ -29,7 +29,7 @@ import {
NativeFilterTarget,
ColumnOption,
} from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import { Dataset } from '@superset-ui/chart-controls';
import { chart } from 'src/components/Chart/chartReducer';
import componentTypes from 'src/dashboard/util/componentTypes';
diff --git a/superset-frontend/src/dashboard/util/backgroundStyleOptions.ts b/superset-frontend/src/dashboard/util/backgroundStyleOptions.ts
index ea055846210..2151891f255 100644
--- a/superset-frontend/src/dashboard/util/backgroundStyleOptions.ts
+++ b/superset-frontend/src/dashboard/util/backgroundStyleOptions.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { BACKGROUND_TRANSPARENT, BACKGROUND_WHITE } from './constants';
export default [
diff --git a/superset-frontend/src/dashboard/util/getFilterFieldNodesTree.ts b/superset-frontend/src/dashboard/util/getFilterFieldNodesTree.ts
index 21f84f4a129..8928f51ad51 100644
--- a/superset-frontend/src/dashboard/util/getFilterFieldNodesTree.ts
+++ b/superset-frontend/src/dashboard/util/getFilterFieldNodesTree.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { getDashboardFilterKey } from './getDashboardFilterKey';
import { ALL_FILTERS_ROOT } from './constants';
diff --git a/superset-frontend/src/dashboard/util/getFilterScopeNodesTree.ts b/superset-frontend/src/dashboard/util/getFilterScopeNodesTree.ts
index e5bf06421fb..ec9dbe78f13 100644
--- a/superset-frontend/src/dashboard/util/getFilterScopeNodesTree.ts
+++ b/superset-frontend/src/dashboard/util/getFilterScopeNodesTree.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { isEmpty } from 'lodash';
-import { t } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
import { DASHBOARD_ROOT_ID } from './constants';
import { CHART_TYPE, DASHBOARD_ROOT_TYPE, TAB_TYPE } from './componentTypes';
diff --git a/superset-frontend/src/dashboard/util/getSliceHeaderTooltip.tsx b/superset-frontend/src/dashboard/util/getSliceHeaderTooltip.tsx
index 1e2c10c9bfc..b266e23b151 100644
--- a/superset-frontend/src/dashboard/util/getSliceHeaderTooltip.tsx
+++ b/superset-frontend/src/dashboard/util/getSliceHeaderTooltip.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { detectOS } from 'src/utils/common';
export const getSliceHeaderTooltip = (sliceName: string | undefined) => {
diff --git a/superset-frontend/src/dashboard/util/headerStyleOptions.ts b/superset-frontend/src/dashboard/util/headerStyleOptions.ts
index 73afacb811c..d1f82290e47 100644
--- a/superset-frontend/src/dashboard/util/headerStyleOptions.ts
+++ b/superset-frontend/src/dashboard/util/headerStyleOptions.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { SMALL_HEADER, MEDIUM_HEADER, LARGE_HEADER } from './constants';
export default [
diff --git a/superset-frontend/src/dashboard/util/newComponentFactory.ts b/superset-frontend/src/dashboard/util/newComponentFactory.ts
index 1e33cdfc064..2855d4a63f1 100644
--- a/superset-frontend/src/dashboard/util/newComponentFactory.ts
+++ b/superset-frontend/src/dashboard/util/newComponentFactory.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { nanoid } from 'nanoid';
-import { t } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
import {
CHART_TYPE,
diff --git a/superset-frontend/src/dashboard/util/updateComponentParentsList.ts b/superset-frontend/src/dashboard/util/updateComponentParentsList.ts
index 5df87114efb..67499d642c6 100644
--- a/superset-frontend/src/dashboard/util/updateComponentParentsList.ts
+++ b/superset-frontend/src/dashboard/util/updateComponentParentsList.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { logging } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
interface LayoutComponent {
id: string;
diff --git a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
index 9bcf9d5e25c..0a32b3be57e 100644
--- a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
+++ b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
@@ -18,7 +18,7 @@
*/
import { useMemo } from 'react';
import { Filter, ChartCustomization } from '@superset-ui/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { useTheme } from '@apache-superset/core/theme';
import { useSelector } from 'react-redux';
import { RootState } from 'src/dashboard/types';
import { useChartCustomizationFromRedux } from 'src/dashboard/components/nativeFilters/state';
diff --git a/superset-frontend/src/embedded/EmbeddedContextProviders.tsx b/superset-frontend/src/embedded/EmbeddedContextProviders.tsx
index e233010e36d..9ea9c0744ab 100644
--- a/superset-frontend/src/embedded/EmbeddedContextProviders.tsx
+++ b/superset-frontend/src/embedded/EmbeddedContextProviders.tsx
@@ -26,7 +26,7 @@ import { 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 '@apache-superset/core/ui';
+import { type ThemeStorage } from '@apache-superset/core/theme';
import { store } from 'src/views/store';
import querystring from 'query-string';
diff --git a/superset-frontend/src/embedded/index.tsx b/superset-frontend/src/embedded/index.tsx
index 305b254e314..5609877f77c 100644
--- a/superset-frontend/src/embedded/index.tsx
+++ b/superset-frontend/src/embedded/index.tsx
@@ -21,10 +21,13 @@ import 'src/public-path';
import { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { makeApi } from '@superset-ui/core';
-import { logging } from '@apache-superset/core';
-import { type SupersetThemeConfig, ThemeMode } from '@apache-superset/core/ui';
+import { logging } from '@apache-superset/core/utils';
+import {
+ type SupersetThemeConfig,
+ ThemeMode,
+} from '@apache-superset/core/theme';
import Switchboard from '@superset-ui/switchboard';
import getBootstrapData, { applicationRoot } from 'src/utils/getBootstrapData';
import setupClient from 'src/setup/setupClient';
diff --git a/superset-frontend/src/embedded/utils.ts b/superset-frontend/src/embedded/utils.ts
index 404c493962c..cc9e8612f03 100644
--- a/superset-frontend/src/embedded/utils.ts
+++ b/superset-frontend/src/embedded/utils.ts
@@ -22,7 +22,7 @@ import {
JsonObject,
QueryFormData,
} from '@superset-ui/core';
-import { logging } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
import { isEmpty, isEqual } from 'lodash';
import { NATIVE_FILTER_PREFIX } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/utils';
import {
diff --git a/superset-frontend/src/explore/actions/exploreActions.ts b/superset-frontend/src/explore/actions/exploreActions.ts
index 3855e3b93bf..cfcbd8a524e 100644
--- a/superset-frontend/src/explore/actions/exploreActions.ts
+++ b/superset-frontend/src/explore/actions/exploreActions.ts
@@ -19,7 +19,7 @@
/* eslint camelcase: 0 */
import rison from 'rison';
import { Dataset } from '@superset-ui/chart-controls';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { SupersetClient, QueryFormData } from '@superset-ui/core';
import { Dispatch } from 'redux';
import {
diff --git a/superset-frontend/src/explore/actions/hydrateExplore.ts b/superset-frontend/src/explore/actions/hydrateExplore.ts
index b8e0375a648..0ceb1259b7b 100644
--- a/superset-frontend/src/explore/actions/hydrateExplore.ts
+++ b/superset-frontend/src/explore/actions/hydrateExplore.ts
@@ -29,9 +29,11 @@ import { Dispatch } from 'redux';
import {
Currency,
ensureIsArray,
+ FeatureFlag,
getCategoricalSchemeRegistry,
getColumnLabel,
getSequentialSchemeRegistry,
+ isFeatureEnabled,
NO_TIME_RANGE,
QueryFormColumn,
VizType,
@@ -142,11 +144,20 @@ export const hydrateExplore =
if (colorSchemeKey) verifyColorScheme(ColorSchemeType.CATEGORICAL);
if (linearColorSchemeKey) verifyColorScheme(ColorSchemeType.SEQUENTIAL);
+ const granularExport = isFeatureEnabled(FeatureFlag.GranularExportControls);
const exploreState = {
// note this will add `form_data` to state,
// which will be manipulable by future reducers.
can_add: findPermission('can_write', 'Chart', user?.roles),
- can_download: findPermission('can_csv', 'Superset', user?.roles),
+ can_download: granularExport
+ ? findPermission('can_export_data', 'Superset', user?.roles)
+ : findPermission('can_csv', 'Superset', user?.roles),
+ can_export_image: granularExport
+ ? findPermission('can_export_image', 'Superset', user?.roles)
+ : true,
+ can_copy_clipboard: granularExport
+ ? findPermission('can_copy_clipboard', 'Superset', user?.roles)
+ : true,
can_overwrite: ensureIsArray(slice?.owners).includes(
user?.userId as number,
),
diff --git a/superset-frontend/src/explore/actions/saveModalActions.ts b/superset-frontend/src/explore/actions/saveModalActions.ts
index c09f8e9b408..7c1df6ec8b7 100644
--- a/superset-frontend/src/explore/actions/saveModalActions.ts
+++ b/superset-frontend/src/explore/actions/saveModalActions.ts
@@ -18,7 +18,7 @@
*/
import rison from 'rison';
import { Dispatch } from 'redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
DatasourceType,
type QueryFormData,
diff --git a/superset-frontend/src/explore/components/ChartPills.tsx b/superset-frontend/src/explore/components/ChartPills.tsx
index 7794cf147d5..9531c8ba361 100644
--- a/superset-frontend/src/explore/components/ChartPills.tsx
+++ b/superset-frontend/src/explore/components/ChartPills.tsx
@@ -18,7 +18,7 @@
*/
import { forwardRef, RefObject } from 'react';
import { QueryData } from '@superset-ui/core';
-import { css, SupersetTheme } from '@apache-superset/core/ui';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
import {
CachedLabel,
type LabelType,
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index f6eed7623f4..794525111e9 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -23,7 +23,7 @@ import {
ControlComponentProps as BaseControlComponentProps,
} from '@superset-ui/chart-controls';
import { JsonValue, QueryFormData, usePrevious } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { ErrorBoundary } from 'src/components';
import { ExploreActions } from 'src/explore/actions/exploreActions';
import controlMap from './controls';
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 8213bf6267c..d4563a8dbbd 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import { FC, ReactNode } from 'react';
-import { t } from '@apache-superset/core';
-import { css, useTheme, SupersetTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { css, useTheme, SupersetTheme } from '@apache-superset/core/theme';
import { FormLabel, InfoTooltip, Tooltip } from '@superset-ui/core/components';
import { Icons } from '@superset-ui/core/components/Icons';
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
index 1945faae536..fe67e52eb6f 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx
@@ -23,7 +23,7 @@ import {
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
DatasourceType,
getChartControlPanelRegistry,
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index a7450ed7b6f..fba0cc3c0fd 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -28,7 +28,7 @@ import {
useRef,
useState,
} from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
ensureIsArray,
getChartControlPanelRegistry,
@@ -42,7 +42,12 @@ import {
FeatureFlag,
VizType,
} from '@superset-ui/core';
-import { styled, css, SupersetTheme, useTheme } from '@apache-superset/core/ui';
+import {
+ styled,
+ css,
+ SupersetTheme,
+ useTheme,
+} from '@apache-superset/core/theme';
import {
ControlPanelSectionConfig,
ControlState,
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index 2e9e11776d3..823da872857 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -17,10 +17,10 @@
* under the License.
*/
import { useMemo, useState, useEffect, useRef, RefObject } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { getTimeFormatter, safeHtmlSpan, TimeFormats } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
import { Column } from 'react-table';
import { debounce } from 'lodash';
import {
diff --git a/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts b/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
index acfb4987879..4304da6b748 100644
--- a/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
+++ b/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import { renderHook } from '@testing-library/react-hooks';
import { Constants } from '@superset-ui/core/components';
import { useTableColumns } from '.';
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 19300e29c57..22431227cb3 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useCallback, useEffect, useMemo, useState, MouseEvent } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import Tabs from '@superset-ui/core/components/Tabs';
import {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
index 88125ef32aa..5206032b03b 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled, css } from '@apache-superset/core/ui';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { styled, css } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
import { useMemo } from 'react';
import { zip } from 'lodash';
import {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
index 196bed0b1d9..70e4f755ebc 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import Tabs from '@superset-ui/core/components/Tabs';
import { ResultTypes, ResultsPaneProps } from '../types';
import { useResultsPane } from './useResultsPane';
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
index b48e19a44cc..1c58bd9ae69 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useState, useEffect, useMemo, useCallback } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { ensureIsArray } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import {
TableView,
TableSize,
@@ -27,7 +27,7 @@ import {
Loading,
EmptyWrapperType,
} from '@superset-ui/core/components';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import {
useFilteredTableData,
useTableColumns,
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
index 6e096182234..cf44d415538 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useState, useCallback } from 'react';
-import { t } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
import {
TableView,
TableSize,
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
index a25a7974101..9ba54e5b62e 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
@@ -18,13 +18,13 @@
*/
import { useState, useEffect, ReactElement, useCallback } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
ensureIsArray,
getChartMetadataRegistry,
getClientErrorObject,
} from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { EmptyState, Loading } from '@superset-ui/core/components';
import { getChartDataRequest } from 'src/components/Chart/chartAction';
import { ResultsPaneProps, QueryResultInterface } from '../types';
diff --git a/superset-frontend/src/explore/components/DataTablesPane/types.ts b/superset-frontend/src/explore/components/DataTablesPane/types.ts
index 90ba2b98cb0..b0fdb987c9f 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/types.ts
+++ b/superset-frontend/src/explore/components/DataTablesPane/types.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { JsonObject, LatestQueryFormData } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import type { ChartStatus, Datasource } from 'src/explore/types';
export enum ResultTypes {
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
index 7540b235513..dad76da609d 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
@@ -19,7 +19,7 @@
import { RefObject } from 'react';
import { useDrag } from 'react-dnd';
import { Metric } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { ColumnMeta } from '@superset-ui/chart-controls';
import { DndItemType } from 'src/explore/components/DndItemType';
import {
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
index d97ada34d1b..c19753eaa3d 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
@@ -18,9 +18,9 @@
*/
import { CSSProperties, ReactNode, useCallback } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { useCSSTextTruncation } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { Tooltip } from '@superset-ui/core/components/Tooltip';
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx b/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
index 0c7825b9d98..39d200cba1b 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
export const columns = [
{
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
index 1278a2282f1..74718ae3751 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
@@ -17,9 +17,10 @@
* under the License.
*/
import { useContext, useMemo, useState } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { DatasourceType, Metric, QueryFormData } from '@superset-ui/core';
-import { css, styled, useTheme, Alert } from '@apache-superset/core/ui';
+import { Alert } from '@apache-superset/core/components';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { ControlConfig } from '@superset-ui/chart-controls';
import AutoSizer from 'react-virtualized-auto-sizer';
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/transformDatasourceFolders.ts b/superset-frontend/src/explore/components/DatasourcePanel/transformDatasourceFolders.ts
index eb94823069a..32f2eba3d62 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/transformDatasourceFolders.ts
+++ b/superset-frontend/src/explore/components/DatasourcePanel/transformDatasourceFolders.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Metric } from '@superset-ui/core';
import { FoldersEditorItemType } from 'src/components/Datasource/types';
import {
diff --git a/superset-frontend/src/explore/components/EmbedCodeContent.tsx b/superset-frontend/src/explore/components/EmbedCodeContent.tsx
index 9d1ebb81bdf..deda9002a97 100644
--- a/superset-frontend/src/explore/components/EmbedCodeContent.tsx
+++ b/superset-frontend/src/explore/components/EmbedCodeContent.tsx
@@ -25,7 +25,8 @@ import {
useState,
} from 'react';
import { LatestQueryFormData } from '@superset-ui/core';
-import { css, t } from '@apache-superset/core/ui';
+import { css } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { Input, Space, Typography } from '@superset-ui/core/components';
import { CopyToClipboard } from 'src/components';
import { URL_PARAMS } from 'src/constants';
diff --git a/superset-frontend/src/explore/components/ExploreAlert.tsx b/superset-frontend/src/explore/components/ExploreAlert.tsx
index 6afbb056198..d4a8a4b4405 100644
--- a/superset-frontend/src/explore/components/ExploreAlert.tsx
+++ b/superset-frontend/src/explore/components/ExploreAlert.tsx
@@ -20,7 +20,7 @@
import { forwardRef, RefObject, MouseEvent } from 'react';
import { Button } from '@superset-ui/core/components';
import { ErrorAlert } from 'src/components';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
interface ControlPanelAlertProps {
title: string;
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
index 8da1bd91569..a839fbfaab5 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
@@ -32,8 +32,9 @@ import {
isMatrixifyEnabled,
MatrixifyFormData,
} from '@superset-ui/core';
-import { logging } from '@apache-superset/core';
-import { css, t, SupersetTheme } from '@apache-superset/core/ui';
+import { logging } from '@apache-superset/core/utils';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components/Icons';
import PropertiesModal from 'src/explore/components/PropertiesModal';
import { sliceUpdated } from 'src/explore/actions/exploreActions';
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/useExploreMetadataBar.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/useExploreMetadataBar.tsx
index 0b95f29bde6..20bfcfb849e 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/useExploreMetadataBar.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/useExploreMetadataBar.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import { useMemo } from 'react';
-import { t } from '@apache-superset/core';
-import { tn } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
+import { tn } from '@apache-superset/core/translation';
import MetadataBar, {
MetadataType,
} from '@superset-ui/core/components/MetadataBar';
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
index fd29a604383..c692e65bfd1 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
@@ -18,7 +18,7 @@
*/
import { useState, useEffect, useCallback, useMemo, ReactNode } from 'react';
import Split from 'react-split';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
DatasourceType,
ensureIsArray,
@@ -30,7 +30,8 @@ import {
JsonObject,
getExtensionsRegistry,
} from '@superset-ui/core';
-import { css, styled, useTheme, Alert } from '@apache-superset/core/ui';
+import { Alert } from '@apache-superset/core/components';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import ChartContainer from 'src/components/Chart/ChartContainer';
import {
getItem,
diff --git a/superset-frontend/src/explore/components/ExploreContainer/index.tsx b/superset-frontend/src/explore/components/ExploreContainer/index.tsx
index 5cf714ea740..fbac64cf1f6 100644
--- a/superset-frontend/src/explore/components/ExploreContainer/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreContainer/index.tsx
@@ -25,7 +25,7 @@ import {
useReducer,
} from 'react';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { useDragDropManager } from 'react-dnd';
import { DatasourcePanelDndItem } from '../DatasourcePanel/types';
diff --git a/superset-frontend/src/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
index 3a006601cc7..a0f97b7543e 100644
--- a/superset-frontend/src/explore/components/ExploreContentPopover.tsx
+++ b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
export const ExplorePopoverContent = styled.div`
.edit-popover-resize {
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.tsx
index 3fddda72aef..26110471a7f 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.tsx
@@ -41,8 +41,9 @@ import {
ControlStateMapping,
ControlPanelState,
} from '@superset-ui/chart-controls';
-import { t, styled, css, useTheme } from '@apache-superset/core/ui';
-import { logging } from '@apache-superset/core';
+import { styled, css, useTheme } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
+import { logging } from '@apache-superset/core/utils';
import { debounce, isEqual, isObjectLike, omit, pick } from 'lodash';
import { Resizable } from 're-resizable';
import { Tooltip } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
index b182f6bc662..a2b09d64cd6 100644
--- a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
+++ b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
@@ -18,8 +18,8 @@
*/
import { ReactChild, useCallback, Key } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { Icons } from '@superset-ui/core/components/Icons';
import { Dropdown } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index 675323a13a8..6e1ba30939f 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -26,7 +26,7 @@ import {
type SelectValue,
} from '@superset-ui/core/components';
import rison from 'rison';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
SupersetClient,
isFeatureEnabled,
diff --git a/superset-frontend/src/explore/components/RunQueryButton/index.tsx b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
index 9e2e71e3bdb..22cf4782396 100644
--- a/superset-frontend/src/explore/components/RunQueryButton/index.tsx
+++ b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
@@ -18,8 +18,8 @@
*/
import { ReactNode } from 'react';
-import { t } from '@apache-superset/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { useTheme } from '@apache-superset/core/theme';
import { Button } from '@superset-ui/core/components';
import { Icons } from '@superset-ui/core/components/Icons';
diff --git a/superset-frontend/src/explore/components/SaveModal.tsx b/superset-frontend/src/explore/components/SaveModal.tsx
index 91c27f90002..a78b4ce7dc1 100644
--- a/superset-frontend/src/explore/components/SaveModal.tsx
+++ b/superset-frontend/src/explore/components/SaveModal.tsx
@@ -36,15 +36,16 @@ import {
Flex,
TreeSelect,
} from '@superset-ui/core/components';
-import { t, logging } from '@apache-superset/core';
+import { logging } from '@apache-superset/core/utils';
+import { t } from '@apache-superset/core/translation';
import { DatasourceType, isDefined, SupersetClient } from '@superset-ui/core';
+import { Alert } from '@apache-superset/core/components';
import {
css,
styled,
withTheme,
- Alert,
type SupersetTheme,
-} from '@apache-superset/core/ui';
+} from '@apache-superset/core/theme';
import { Radio } from '@superset-ui/core/components/Radio';
import { GRID_COLUMN_COUNT } from 'src/dashboard/util/constants';
import { canUserEditDashboard } from 'src/dashboard/util/permissionUtils';
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
index e7b7494be01..c9f2904abc8 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
@@ -34,12 +34,12 @@ import {
VizType,
type QueryFormColumn,
} from '@superset-ui/core';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
styled,
withTheme,
type SupersetTheme,
-} from '@apache-superset/core/ui';
+} from '@apache-superset/core/theme';
import SelectControl from 'src/explore/components/controls/SelectControl';
import TextControl from 'src/explore/components/controls/TextControl';
import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationTypes.ts b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationTypes.ts
index 2c44a6fd97c..f4b9903f6d2 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationTypes.ts
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationTypes.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
interface Annotation {
sourceType?: string;
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
index 9339f7433fe..9538264b22a 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
@@ -18,14 +18,14 @@
*/
import { connect } from 'react-redux';
import { PureComponent } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
HandlerFunction,
JsonObject,
Payload,
QueryFormData,
} from '@superset-ui/core';
-import { SupersetTheme, withTheme } from '@apache-superset/core/ui';
+import { SupersetTheme, withTheme } from '@apache-superset/core/theme';
import {
AsyncEsmComponent,
List,
diff --git a/superset-frontend/src/explore/components/controls/BoundsControl.tsx b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
index 788ba89aa23..6d132595258 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.tsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
@@ -18,8 +18,8 @@
*/
import { useEffect, useRef, useState } from 'react';
import { InputNumber } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { debounce } from 'lodash';
import ControlHeader from 'src/explore/components/ControlHeader';
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.tsx b/superset-frontend/src/explore/components/controls/CheckboxControl.tsx
index f9120159e90..363ac67ed24 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.tsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { Component, type ReactNode } from 'react';
-import { styled, css } from '@apache-superset/core/ui';
+import { styled, css } from '@apache-superset/core/theme';
import { Checkbox } from '@superset-ui/core/components';
import ControlHeader from '../ControlHeader';
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
index 0243b669f2b..d21ffeecc69 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
@@ -19,8 +19,8 @@
import React, { Component } from 'react';
import { IconTooltip, List } from '@superset-ui/core/components';
import { nanoid } from 'nanoid';
-import { t } from '@apache-superset/core';
-import { withTheme, type SupersetTheme } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { withTheme, type SupersetTheme } from '@apache-superset/core/theme';
import {
SortableContainer,
SortableHandle,
diff --git a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx
index afe467dda9b..fedee53bb83 100644
--- a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import { ColorBreakpointOptionProps } from './types';
import ColorBreakpointPopoverTrigger from './ColorBreakpointPopoverTrigger';
import { DragContainer } from '../OptionControls';
diff --git a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverControl.tsx b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverControl.tsx
index fc6ef70c0b8..857f4c995c2 100644
--- a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverControl.tsx
@@ -18,9 +18,9 @@
*/
import { useState, useMemo } from 'react';
import { Button, Row, Col, InputNumber } from '@superset-ui/core/components';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { validateNumber } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import ControlHeader from '../../ControlHeader';
import ColorPickerControl from '../ColorPickerControl';
import {
diff --git a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx
index 8ef3cee64fd..ed49d3d4435 100644
--- a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx
@@ -18,8 +18,8 @@
*/
import { useState, useEffect } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import DndSelectLabel from 'src/explore/components/controls/DndColumnSelectControl/DndSelectLabel';
import ColorBreakpointOption from './ColorBreakpointOption';
import { ColorBreakpointType, ColorBreakpointsControlProps } from './types';
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
index 46538f81817..60e0a190916 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { css, SupersetTheme } from '@apache-superset/core/ui';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
import { useRef, useState } from 'react';
import { Tooltip } from '@superset-ui/core/components';
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index 06777530c72..529136f1702 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -18,7 +18,7 @@
*/
import { useMemo, ReactNode } from 'react';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
ColorScheme,
ColorSchemeGroup,
@@ -26,7 +26,7 @@ import {
getLabelsColorMap,
CategoricalColorNamespace,
} from '@superset-ui/core';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
import { sortBy } from 'lodash';
import ControlHeader from 'src/explore/components/ControlHeader';
import {
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
index 2fac42ba057..239deefaac7 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useMemo, useState } from 'react';
-import { t } from '@apache-superset/core';
-import { useTheme } from '@apache-superset/core/ui';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { t } from '@apache-superset/core/translation';
+import { useTheme } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
import {
COLUMN_NAME_ALIASES,
ControlComponentProps,
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
index fac850c5cfd..1b4e6fa9955 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { memo } from 'react';
-import { css, useTheme } from '@apache-superset/core/ui';
+import { css, useTheme } from '@apache-superset/core/theme';
import { Popover } from '@superset-ui/core/components';
import { Icons } from '@superset-ui/core/components/Icons';
import { ColumnTypeLabel } from '@superset-ui/chart-controls';
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
index 6b3f9fe38f6..c004e9939d2 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import Tabs from '@superset-ui/core/components/Tabs';
import {
SHARED_COLUMN_CONFIG_PROPS,
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/ControlFormItem.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/ControlFormItem.tsx
index cd35882d5ed..3c9a5379f8e 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/ControlFormItem.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/ControlFormItem.tsx
@@ -18,7 +18,7 @@
*/
import { useState, FunctionComponentElement, ChangeEvent } from 'react';
import { JsonValue } from '@superset-ui/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { useTheme } from '@apache-superset/core/theme';
import { ControlFormItemComponents } from './controls';
import ControlHeader, { ControlHeaderProps } from '../../../ControlHeader';
import { ControlFormItemDefaultSpec } from '../types';
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx
index f8d60b375c7..2b05b70ceac 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx
@@ -23,7 +23,7 @@ import {
useMemo,
} from 'react';
import { JsonObject, JsonValue } from '@superset-ui/core';
-import { useTheme } from '@apache-superset/core/ui';
+import { useTheme } from '@apache-superset/core/theme';
import { Constants } from '@superset-ui/core/components';
import { debounce } from 'lodash';
import { ControlFormItemNode } from './ControlFormItem';
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
index 088a06d8998..7668cf328c2 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
@@ -16,9 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { validateNumber } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import {
ControlFormItemSpec,
D3_FORMAT_DOCS,
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/types.ts b/superset-frontend/src/explore/components/controls/ColumnConfigControl/types.ts
index e7bf6b42159..c77a7fe408a 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/types.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { JsonObject, StrictJsonValue } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import { ControlFormItemSpec } from '@superset-ui/chart-controls';
import {
SHARED_COLUMN_CONFIG_PROPS,
diff --git a/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx b/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
index aaa8d116bff..1273c1633ac 100644
--- a/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
@@ -20,7 +20,7 @@
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { isEmpty, isEqual, noop } from 'lodash';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import {
BinaryAdhocFilter,
ensureIsArray,
@@ -29,7 +29,7 @@ import {
parseDttmToDate,
SimpleAdhocFilter,
} from '@superset-ui/core';
-import { css } from '@apache-superset/core/ui';
+import { css } from '@apache-superset/core/theme';
import ControlHeader, {
ControlHeaderProps,
} from 'src/explore/components/ControlHeader';
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 866e101699d..c476cc67772 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import { useEffect, useState } from 'react';
-import { t } from '@apache-superset/core';
-import { styled, css } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled, css } from '@apache-superset/core/theme';
import { Comparator } from '@superset-ui/chart-controls';
import { Icons } from '@superset-ui/core/components/Icons';
import ControlHeader from 'src/explore/components/ControlHeader';
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx
index 232661f627b..8f3838c92f8 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx
@@ -23,7 +23,7 @@ import {
waitFor,
} from 'spec/helpers/testing-library';
import { Comparator, ColorSchemeEnum } from '@superset-ui/chart-controls';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
import { FormattingPopoverContent } from './FormattingPopoverContent';
const mockOnChange = jest.fn();
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index 7331cfbb9a4..f7926929e2d 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useMemo, useState, useEffect, useCallback } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
import {
Comparator,
MultipleValueComparators,
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/constants.ts b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/constants.ts
index 7365b147e2a..4bc6ce6a76b 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/constants.ts
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/constants.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { Comparator, ObjectFormattingEnum } from '@superset-ui/chart-controls';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
export const operatorOptions = [
{ value: Comparator.None, label: t('None') },
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
index 870a874c042..f2a58a162ed 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
@@ -24,7 +24,7 @@ import {
ControlComponentProps,
ObjectFormattingEnum,
} from '@superset-ui/chart-controls';
-import { GenericDataType } from '@apache-superset/core/api/core';
+import { GenericDataType } from '@apache-superset/core/common';
export type ConditionalFormattingConfig = {
operator?: Comparator;
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx b/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
index e4e623c49a9..6916c2f7095 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import { ContourOptionProps } from './types';
import ContourPopoverTrigger from './ContourPopoverTrigger';
import OptionWrapper from '../DndColumnSelectControl/OptionWrapper';
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
index ae734d21cb7..472716cdb2f 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
@@ -19,9 +19,9 @@
import { useState, useEffect } from 'react';
import { Button, Row, Col } from '@superset-ui/core/components';
import Tabs from '@superset-ui/core/components/Tabs';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { legacyValidateInteger } from '@superset-ui/core';
-import { styled } from '@apache-superset/core/ui';
+import { styled } from '@apache-superset/core/theme';
import ControlHeader from '../../ControlHeader';
import TextControl from '../TextControl';
import ColorPickerControl from '../ColorPickerControl';
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/index.tsx b/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
index c8148071c91..37f915eaecb 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
@@ -18,8 +18,8 @@
*/
import { useState, useEffect } from 'react';
-import { t } from '@apache-superset/core';
-import { styled } from '@apache-superset/core/ui';
+import { t } from '@apache-superset/core/translation';
+import { styled } from '@apache-superset/core/theme';
import DndSelectLabel from 'src/explore/components/controls/DndColumnSelectControl/DndSelectLabel';
import ContourPopoverTrigger from './ContourPopoverTrigger';
import ContourOption from './ContourOption';
diff --git a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
index 3da754330fd..c2a31de9ff7 100644
--- a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
+++ b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
@@ -18,9 +18,9 @@
*/
import { useCallback, useMemo } from 'react';
import { useSelector } from 'react-redux';
-import { t } from '@apache-superset/core';
+import { t } from '@apache-superset/core/translation';
import { Currency, ensureIsArray, getCurrencySymbol } from '@superset-ui/core';
-import { css, styled, useTheme } from '@apache-superset/core/ui';
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { CSSObject } from '@emotion/react';
import { Select, type SelectProps } from '@superset-ui/core/components';
import { ViewState } from 'src/views/types';
diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
index a3c824aadbc..6c848cba55d 100644
--- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useTheme } from '@apache-superset/core/ui';
+import { useTheme } from '@apache-superset/core/theme';
import { List, type ListItemProps } from '@superset-ui/core/components';
export interface CustomListItemProps extends ListItemProps {
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
index b51e87fb2bc..a589ab83fc1 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
@@ -24,7 +24,6 @@ import { DatasourceType, JsonObject, SupersetClient } from '@superset-ui/core';
import {
render,
screen,
- act,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
@@ -32,7 +31,20 @@ import { fallbackExploreInitialData } from 'src/explore/fixtures';
import type { ColumnObject } from 'src/features/datasets/types';
import DatasourceControl from '.';
-const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
+// Mock DatasourceEditor to avoid mounting the full 2,500+ line editor tree.
+// The heavy editor (CollectionTable, FilterableTable, DatabaseSelector, etc.)
+// causes OOM in CI when rendered repeatedly. These tests only need to verify
+// DatasourceControl's callback wiring through the modal save flow.
+// Editor internals are tested in DatasourceEditor.test.tsx.
+jest.mock('src/components/Datasource/components/DatasourceEditor', () => ({
+ __esModule: true,
+ default: () =>
+ require('react').createElement(
+ 'div',
+ { 'data-test': 'mock-datasource-editor' },
+ 'Mock Editor',
+ ),
+}));
let originalLocation: Location;
@@ -42,8 +54,19 @@ beforeEach(() => {
afterEach(() => {
window.location = originalLocation;
- fetchMock.clearHistory().removeRoutes();
- jest.clearAllMocks(); // Clears mock history but keeps spy in place
+
+ try {
+ const unmatched = fetchMock.callHistory.calls('unmatched');
+ if (unmatched.length > 0) {
+ const urls = unmatched.map(call => call.url).join(', ');
+ throw new Error(
+ `fetchMock: ${unmatched.length} unmatched call(s): ${urls}`,
+ );
+ }
+ } finally {
+ fetchMock.clearHistory().removeRoutes();
+ jest.restoreAllMocks();
+ }
});
interface TestDatasource {
@@ -234,16 +257,16 @@ test('Should show SQL Lab for sql_lab role', async () => {
test('Click on Swap dataset option', async () => {
const props = createProps();
- SupersetClientGet.mockImplementationOnce(
- async ({ endpoint }: { endpoint: string }) => {
+ jest
+ .spyOn(SupersetClient, 'get')
+ .mockImplementation(async ({ endpoint }: { endpoint: string }) => {
if (endpoint.includes('_info')) {
return {
json: { permissions: ['can_read', 'can_write'] },
} as any;
}
return { json: { result: [] } } as any;
- },
- );
+ });
render(